Mobil Öncelikli İndeksleme (Mobile-First Indexing) Temelleri

Google, sayfaları tararken ve indekslerken mobil sürümü baz alır. Masaüstü sürüm ikincildir. Mobil ve masaüstü içerik, yapılandırılmış veri ve meta etiketler birebir eşleşmelidir.

Kritik Kural: Mobilde gizlenen veya masaüstünde olup mobilde bulunmayan içerik indekslenmez ve sıralamaya katkı sağlamaz.

1. Adım: Viewport ve Teknik Altyapı Yapılandırması

HTML head bloğuna responsive viewport tanımı eklenmeli. Ayrı mobil alt alan adı (m.site.com) yerine tek kod tabanlı responsive yapı seçilmeli.

Viewport Yapılandırması

Aşağıdaki meta etiketi head içine yerleştirilmelidir:

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

CSS Flexbox / CSS Grid: Katı piksel genişlikleri yerine esnek birimler (%, rem, vw, vh, fr) tercih edilmeli.
Medya Sorguları (Media Queries): Desktop-down yerine mobile-first (min-width) yaklaşımı uygulanmalı.

2. Adım: İçerik ve Yapılandırılmış Veri (Schema) Eşitliği

Arama motoru botlarının mobil cihaz taklidiyle doğru veriyi alabilmesi için DOM mimarisi mobilize edilmeli.

Meta Etiketler: Title, meta description, canonical ve hreflang etiketleri mobilde ve masaüstünde aynı olmalı.
Yapılandırılmış Veri: Breadcrumb, Product, Article vb. JSON-LD şemaları mobilde eksiksiz sunulmalı.
Görsel Alt Nitelikleri: Mobilde görsel bant genişliği optimizasyonu yapılırken alt etiketleri silinmemeli.

3. Adım: Core Web Vitals ve Mobil Performans Standardı

Mobil ağlar masaüstüne göre daha yüksek gecikme (latency) sunar. Performans optimizasyon adımları:

LCP (Largest Contentful Paint): Mobil LCP görseline fetchpriority="high" atanmalı, lazy-load verilmemeli. WebP veya AVIF formatı kullanılmalı.
CLS (Cumulative Layout Shift): Tüm görsel ve iframe bileşenlerine width ve height öznitelikleri açıkça girilmeli.
INP (Interaction to Next Paint): Ana iş parçacığını (main thread) kilitleyen uzun JavaScript görevleri bölünmeli.

4. Adım: Mobil Kullanılabilirlik (UI/UX) ve Dokunmatik Hedefler

Kullanıcı etkileşimini doğrudan etkileyen tasarım parametreleri:

Dokunma Hedefi Boyutu: Butonlar ve tıklanabilir alanlar minimum 48x48 CSS pikseli olmalı, aralarında en az 8px boşluk bırakılmalı.
Tipografi: Temel metin boyutu (body font-size) minimum 16px seçilmeli; kullanıcının yakınlaştırma yapma zorunluluğu önlenmeli.
Açılır Pencereler (Interstitials): Sayfa içeriğini kapatan tam ekran açılır pencereler ve agresif reklam katmanları kaldırılmalı.

Mobil Tasarım Trendleri ve Dijital Strateji

Modern dijital strateji oluştururken dikkat edilmesi gereken trendler:

PWA Entegrasyonu: Çevrimdışı çalışma ve hızlı önbellekleme desteği.
Modern CSS Fonksiyonları: clamp() ile akışkan tipografi, CSS Subgrid kullanımı.
Native lazy-loading: Fazladan JavaScript kütüphanesi yerine tarayıcı tabanlı loading="lazy" kullanımı.