Mobil uyumlu web sitesi, telefon ve tablet ekranlarında yakınlaştırma ve yatay kaydırma gerekmeden okunabilen, dokunarak rahat kullanılabilen sitedir. 2026'da bu bir tercih değil, zorunluluktur: Google siteleri mobil sürümleri üzerinden indeksler ve sıralar, trafiğin çoğu mobilden gelir. Bu rehber mobil uyumluluğun teknik yöntemlerini, Google'ın beklediği ölçütleri ve en sık hataları anlatır.
Mobil uyumlu web sitesi nedir?
Bir site, telefonda açıldığında metin yakınlaştırmadan okunuyor, düğmeler parmakla rahat basılıyor, sayfa yatay kaydırma istemiyor ve içerik ekrana göre yeniden diziliyorsa mobil uyumludur. Teknik terim "responsive" (duyarlı) tasarımdır: aynı HTML, ekran genişliğine göre CSS ile farklı düzenlenir.
Mobil uyumluluk yalnızca "küçük ekrana sığmak" değildir. Dokunma hedeflerinin boyutu, mobil bağlantıda hız, form doldurma kolaylığı, telefon numarasına dokununca aramanın başlaması, menünün tek elle kullanılabilmesi de kapsama girer. Google'ın ölçütleri bu kullanılabilirlik unsurlarını içerir.
Neden zorunlu: mobil öncelikli indeksleme
Google 2019'dan beri yeni siteleri, 2023'ten beri tüm siteleri mobil öncelikli indeksliyor: Googlebot siteyi akıllı telefon tarayıcısı gibi ziyaret eder ve mobil sürümde gördüğünü indeksler. Masaüstünde zengin, mobilde kırpılmış bir sitenin Google'daki hali, kırpılmış olandır. Mobil sürümde eksik olan içerik, yapılandırılmış veri ve iç linkler sıralamaya katkı vermez.
İkinci sebep trafik: Türkiye'de web trafiğinin büyük çoğunluğu mobil cihazlardan gelir; sektöre göre yüzde 60-85. Mobilde kötü bir site, ziyaretçilerin çoğuna kötü sitedir. Üçüncü sebep, Core Web Vitals değerlendirmesinin mobil verilerle yapılmasıdır; masaüstünde hızlı ama mobilde yavaş site "zayıf" sayılır.
Responsive, dinamik sunum, ayrı mobil site
| Yöntem | Nasıl çalışır? | Google'ın görüşü | Durum |
|---|---|---|---|
| Responsive tasarım | Tek URL, tek HTML, CSS media query ile düzen değişir | Önerilen yöntem | Standart; yeni projelerde tek seçenek |
| Dinamik sunum | Tek URL, sunucu cihaza göre farklı HTML gönderir | Desteklenir, Vary başlığı gerekir | Karmaşık; nadiren gerekçeli |
| Ayrı mobil site (m.site.com) | Farklı URL, farklı HTML | Desteklenir, karşılıklı canonical/alternate etiketleri gerekir | Eski; kopya içerik ve yönlendirme sorunları; terk edilmeli |
Responsive tasarımın temeli <meta name="viewport" content="width=device-width, initial-scale=1"> etiketi ve CSS media query'leridir. Viewport etiketi yoksa telefon, sayfayı masaüstü genişliğinde render edip küçültür; metin okunmaz hale gelir. Çoğu "mobil uyumsuz" uyarısının sebebi bu tek satırın eksikliğidir.
En sık mobil kullanılabilirlik hataları
- Viewport ayarlanmamış: Sayfa masaüstü gibi render edilip küçültülüyor.
- İçerik ekrandan taşıyor: Sabit genişlikli tablo, görsel veya gömülü öğe yatay kaydırma yaratıyor. Tabloları kaydırılabilir kapsayıcıya alın, görsellere
max-width: 100%verin. - Metin çok küçük: 16 piksel altı gövde metni mobilde zor okunur.
- Dokunma hedefleri çok yakın veya küçük: Düğme ve linkler en az 44-48 piksel ve aralarında boşluk.
- Araya giren pop-up'lar: Sayfa açılır açılmaz ekranı kaplayan bültene kaydol pencereleri. Google bunları "müdahaleci geçiş reklamı" sayar ve cezalandırabilir. Çerez bildirimi ve yaş doğrulaması istisnadır; ama onlar da küçük tutulmalı.
- Mobilde gizlenen içerik: CSS
display: noneile masaüstü içeriğinin mobilde gizlenmesi; Google görmez. - Yavaş yükleme: Mobil bağlantıda 4 saniyeyi geçen LCP. Hız rehberi buna ayrılmıştır.
- Flash veya desteklenmeyen eklentiler: 2026'da nadir ama eski sitelerde hâlâ karşılaşılıyor.
- Hover'a bağlı menü: Dokunmatik ekranda hover yoktur; açılır menüler dokunmayla çalışmalı.
- Form alanları: Telefon alanı için
type="tel", e-posta içintype="email"; doğru klavye açılır. Otomatik doldurma öznitelikleri.
Mobil için tasarım kuralları
- Mobil önce tasarlayın. Önce telefon ekranı, sonra genişletin. Tersi, mobilde sıkışmış ve ödün verilmiş sonuç üretir.
- Tek sütun ve net hiyerarşi. En önemli bilgi ve harekete çağrı ilk ekranda.
- Başparmak bölgesi. Ana eylemler ekranın alt yarısında, tek elle erişilebilir; sabit alt çubukta "ara" ve "WhatsApp" düğmesi yerel hizmet sitelerinde dönüşümü belirgin artırır.
- Kısa paragraflar, görünür alt başlıklar. Mobilde 5 satırı geçen paragraf duvar gibi görünür.
- Görsel disiplini. Mobil için ayrı boyut (
srcset), ağır hero görseli yok, dekoratif görseller az. - Menü: Hamburger menü kabul görmüş ama en önemli 2-3 sayfa menü dışında da görünür olmalı.
- Font: Gövde 16-18 piksel, satır yüksekliği 1,5; az font ağırlığı.
- Formlar: En az alan, büyük girişler, tek sütun, doğru klavye türü, net hata mesajı.
Mobil uyumluluk nasıl test edilir?
- Gerçek telefon: En güvenilir test. Kendi telefonunuzda, mobil veriyle, gizli pencerede her ana sayfa tipini açın.
- Chrome DevTools cihaz modu: Farklı ekran boyutları ve ağ hızı simülasyonu; render edilmiş görünüm.
- Lighthouse: Mobil modda performans, erişilebilirlik, SEO denetimi; viewport ve dokunma hedefi uyarıları.
- PageSpeed Insights (mobil): Gerçek kullanıcı verisi ve laboratuvar teşhisi.
- Search Console: Core Web Vitals mobil raporu; eski "Mobil kullanılabilirlik" raporu 2023'te kaldırıldı, sorunlar artık Lighthouse ile tespit edilir.
- URL denetimi aracı: Google'ın mobil tarayıcısıyla sayfayı nasıl render ettiğini ekran görüntüsüyle gösterir; mobilde eksik içeriği burada yakalarsınız.
Mobil SEO kontrol listesi
- Viewport meta etiketi her sayfada.
- Yatay kaydırma yok; tablo ve görseller kapsayıcıya sığıyor.
- Gövde metni en az 16 piksel.
- Dokunma hedefleri en az 44 piksel ve aralıklı.
- Mobil ve masaüstü içerik aynı; mobilde gizlenen metin, link veya şema yok.
- Müdahaleci pop-up yok.
- Mobil LCP 2,5 saniye, INP 200 ms, CLS 0,1 altı.
- Görseller mobil boyutta sunuluyor (srcset).
- Telefon ve WhatsApp linkleri tıklanabilir.
- Formlar doğru klavye türüyle, az alanla.
- Menü dokunmayla çalışıyor, ana sayfalara menü dışından da erişim var.
- Yapılandırılmış veri mobil HTML'de mevcut.
- Ayrı mobil site varsa responsive'e geçiş planlandı.
- Gerçek telefonda her şablon test edildi.
- Search Console'da mobil Core Web Vitals "iyi".
Sık sorulan sorular
Google'ın mobil uyumluluk test aracı nerede?
Aralık 2023'te kapatıldı. Chrome DevTools, Lighthouse ve Search Console Core Web Vitals raporu yerine geçer.
Masaüstü sitemde olan içerik mobilde gizliyse Google görür mü?
Hayır. Mobil sürüm esas alınır; akordeon içinde olup HTML'de bulunan içerik sorun değildir, CSS ile tamamen gizlenen veya yüklenmeyen içerik indekslenmez.
AMP hâlâ gerekli mi?
Hayır. Hızlı bir responsive site aynı işi görür.
Mevcut sitem mobil uyumlu değil, ne yapmalıyım?
Tema veya şablon responsive değilse yama yerine yeniden yapım genellikle daha ucuz ve kalıcıdır. Karar ölçütleri yenileme mi, iyileştirme mi yazısında; yeni site süreci kurumsal site rehberinde.