Mobile-First Indexing Optimizasyon Rehberi

Google 2024'ten beri Türkiye'deki tüm siteleri mobile-first indexliyor. Yani Google bot sitenizi mobile sürümle değerlendiriyor, masaüstüyle değil. Bu, mobile sitenizin durumu masaüstünden çok daha kritik demek. Türkiye'de trafiğin %78'i zaten mobilden — bu Google için doğal sonuç. Bu yazıda mobile-first indexing için pratik optimizasyon adımlarını anlatıyoruz.

Mobile-first indexing ne demek?

Eskiden Google sitelerini desktop versiyonu üzerinden indexliyordu. Mobile site farklı/eksik olabilirdi. Şimdi: Google bot mobile cihaz olarak sayfaya gelir, mobile içeriği index'e alır, mobile sürüm üzerinden sıralar.

Sonuçlar:

• Mobile siteniz desktop'tan farklıysa SEO problem
• Mobile'da gizli içerik = Google görmez = sıralama düşük
• Mobile yavaşsa = Core Web Vitals kötü = sıralama düşer
• Mobile uyumsuz site = sıralama gömülür

Optimizasyon adımları

1. Viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Olmadan site mobile'da bozuk render olur.

2. Responsive design (mobile-first CSS)

CSS'i önce mobile için yaz, sonra media query ile desktop:

/* Mobile (default) */
.container { padding: 16px; font-size: 14px; }

/* Tablet+ */
@media (min-width: 768px) {
  .container { padding: 24px; font-size: 15px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { padding: 32px; font-size: 16px; }
}

3. Görsel optimizasyon (mobile için ayrı)

Mobile internet hızı yavaş. Mobile için ayrı boyut:

<img srcset="hero-mobile.webp 600w,
              hero-tablet.webp 1000w,
              hero-desktop.webp 1920w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1000px) 50vw,
            33vw"
     src="hero-desktop.webp"
     alt="...">

4. Font boyutu (min 16px)

Mobile'da küçük yazı okunmaz, kullanıcı zoom yapar (kötü UX). Min 16px body font.

5. Buton boyutu (min 44×44px)

Apple HIG ve Google Material Design 44×44px minimum dokunma alanı önerir. Daha küçük buton parmakla zor basılır.

6. Buton arası boşluk (min 8px)

Yan yana butonlar arası min 8px. Yoksa yanlış buton tıklanır.

7. Form alanları (mobile-friendly)

• Min font 16px (iOS'ta zoom etmez)
• inputmode attribute (telefon için numerik klavye)
• Autocomplete attribute
• Etiket + alan açık

8. Tab navigasyon (mobile)

Hamburger menü standart. Açıldığında tüm sayfaları kapsasın. Sticky header.

9. Yüksek scroll hızı

Mobile kullanıcısı hızlı scroll yapar. Lazy loading + skeleton screens kullan.

10. Hız (mobile özel)

• Hero görseli < 100KB
• Critical CSS inline
• JavaScript defer
• Üçüncü parti scriptleri sınırla
• Service Worker (PWA tarzı cache)

Test araçları

Google Mobile-Friendly Test

search.google.com/test/mobile-friendly — temel mobile uyum testi.

Lighthouse Mobile (DevTools)

Chrome DevTools → Lighthouse → Mobile mode. Detaylı analiz + öneriler.

PageSpeed Insights Mobile

pagespeed.web.dev → Mobile sekmesi. Core Web Vitals + öneriler.

Search Console Mobile Usability

Search Console → "Mobile Usability" raporu. Site genelindeki mobile sorunları gösterir.

Chrome DevTools Device Mode

F12 → device toolbar → iPhone/Android emülasyonu. Görsel test.

Yaygın 8 mobile sorunu + çözümleri

1. Yatay scroll bar

Bir element viewport'tan geniş. Çözüm: overflow-x: hidden body'ye, gerçek genişlik düzeltmesi.

2. Yazılar küçük

Body font 16px+ olsun.

3. Butonlar yan yana çakışıyor

Min 8px gap, padding artır.

4. Form alanları hatalı klavye açıyor

inputmode="numeric" telefon numarası için.

5. Pop-up mobile'da kapatılamıyor

X butonu sağ üstte 44×44px minimum. ESC + backdrop tıklama desteği.

6. Video full-screen sorun

HTML5 video kullan, autoplay sadece muted ile.

7. Embedded harita yavaşlatıyor

Lazy load: kullanıcı tıklayınca yüklensin, başta resim göster.

8. WhatsApp + telefon butonları çalışmıyor

<a href="tel:+90..."> ve <a href="https://wa.me/..."> formatları.

Mobile-only optimizasyonlar

Sticky CTA

Mobile'da scroll'la kaybolan butonlar yerine ekranın altında sabit "İletişim" / "WhatsApp'tan Yaz" butonu.

Tap-to-call

Telefon numarası tıklanınca arama açılsın.

Tap-to-WhatsApp

WhatsApp butonu tıklanınca direkt sohbet açılsın.

Geo-location bazlı içerik

Kullanıcı lokasyon izin verirse: "size en yakın şubemiz: ..."

PWA (Progressive Web App) bonus

Site mobile'da uygulama gibi davranır:

• Telefona "Ana ekrana ekle"
• Offline çalışma (cache)
• Push notification
• Splash screen

İleri seviye, e-ticaret + sık kullanılan siteler için faydalı.

Sıkça Sorulan Sorular

AMP (Accelerated Mobile Pages) hâlâ önemli mi?

2024 sonrasında değil. Google AMP'yi öne çıkarmıyor. Modern responsive design daha iyi.

Ayrı mobile site (m.example.com) yapayım mı?

Hayır — eski yöntem. Responsive design (tek URL) önerilir.

Desktop'ta gizli içerik mobile'da gösteriliyor — sorun mu?

Desktop = mobile içerik aynı olmalı. Aksi durumda Google "yanıltıcı" sayar.

Sonuç

Mobile-first indexing artık standart. Mobile siteniz iyi değilse SEO'nuz kötü. Mobile audit ve optimizasyon isteyin.