Mobil Öncelikli İndeksleme (Mobile-First Indexing) Nedir?

Google, sayfaları taramak ve dizine eklemek için öncelikle mobil sürümü kullanır. Masaüstü sürüm ikincildir. Mobil ve masaüstü içerik, meta veriler ve yapılandırılmış veriler birebir eşit olmalıdır.

Mobil Öncelikli Tasarım ve SEO İçin 5 Adım

Adım 1: Viewport Meta Etiketini Doğru Ayarla

Mobil tarayıcının sayfayı düzgün ölçeklemesi için HTML head içine viewport etiketini ekle:

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

Adım 2: Mobile-First CSS Yaz (min-width Kullan)

Masaüstü CSS yazıp küçültme. Önce mobil stilleri taban al, sonra min-width sorgularıyla ekranı genişlet. Az kod, hızlı render.

/* Taban: Mobil */
.container { width: 100%; padding: 12px; }

/* Geniş ekran */
@media (min-width: 768px) {
  .container { width: 750px; margin: 0 auto; }
}

Adım 3: İçerik ve DOM Paritesini Sağla

İçerik Gizleme: Masaüstünde olan metin mobilde akordeon veya 'daha fazla oku' arkasına saklanabilir, ancak DOM içinde bulunmalıdır. Masaüstünde olup mobilde silinen içerik dizine eklenmez.
Heading Hiyerarşisi: H1-H6 yapısı mobilde ve masaüstünde aynı kalmalıdır.
Yapılandırılmış Veri (Schema): Mobile ve masaüstü sürümlerde JSON-LD blokları birebir eşleşmelidir.

Adım 4: Görsel ve Medya Optimizasyonu Yap

Tüm görsellerde modern formatlar (WebP/AVIF) ve responsive etiketler kullan. CLS (Cumulative Layout Shift) önlemek için genişlik/yükseklik değerlerini belirt:

<img src="hero-small.webp" srcset="hero-small.webp 480w, hero-large.webp 1080w" sizes="(max-width: 600px) 480px, 1080px" width="1080" height="600" alt="Modern web trendleri" loading="lazy">

Adım 5: Dokunma Hedeflerini ve Tipografiyi Standartlaştır

Touch Targets: Tıklanabilir butonlar ve bağlantılar minimum 48x48 CSS pikseli alan kaplamalıdır.
Yazı Boyutu: Taban metin boyutu en az 16px olmalıdır. Kullanıcı zoom yapmak zorunda kalmamalıdır.
Aralıklar: Butonlar arasına en az 8px boşluk bırak.

Dijital Ajanslar İçin Modern Web Trendleri

Mobil öncelik artık bir seçenek değil, temel arama motoru altyapısıdır. Sayfa hızı (Core Web Vitals) doğrudan sıralama faktörüdür.

Native HTML Kullanımı: Ağır JavaScript kütüphaneleri yerine native CSS grid/flexbox ve native dialog/details etiketlerini tercih et.
Font Optimizasyonu: font-display: swap ile metin kaybolmasını (FOIT) engelle.
Mobil Denetim: Google Search Console Mobil Kullanılabilirlik ve Lighthouse Mobil raporlarını düzenli test et.