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

Google, sayfaları taramak ve dizine eklemek için öncelikle mobil sürümü kullanır. Masaüstü ve mobil içerik, meta veriler, yapılandırılmış veri işaretlemeleri birebir eşit olmak zorundadır. Eksik içerik barındıran mobil sürümler sıralama kaybı yaşar.

1. Adım: Temel Viewport ve HTML Yapısını Yapılandırma

Tüm sayfalarda geçerli mobil viewport tanımlanmalıdır. Sabit genişlikli öğeler kaldırılmalıdır.

Meta Viewport: <meta name='viewport' content='width=device-width, initial-scale=1'> standardını kullanın.
Gövde genişliği: Yatay kaydırmayı (horizontal scroll) önleyin. overflow-x: hidden yerine kapsayıcıları max-width: 100% ile sınırlandırın.

2. Adım: CSS ile Mobile-First Yaklaşımı (min-width)

Stilleri önce mobil cihazlar için yazın. Büyük ekranlar için kademeli olarak genişletin.

Doğru Yöntem (Mobile-First): Temel stilleri yazın, masaüstü için @media (min-width: 768px) ve @media (min-width: 1024px) blokları ekleyin.
Kaçınılması Gereken: Masaüstü tasarlayıp @media (max-width: ...) ile öğeleri gizlemek (display: none) mobil performansını ve SEO değerini düşürür.

3. Adım: İçerik ve Yapılandırılmış Veri Eşitliği Sağlama

Masaüstü sürümde olan tüm kritik unsurlar mobil DOM içinde yer almalıdır.

Metin Paritesi: Masaüstündeki ana içerik, başlıklar (H1-H6) ve dahili linkler mobilde de render edilmelidir.
Structured Data (Schema.org): Mobil sayfada da aynı HowTo, Article veya Product şemaları eksiksiz bulunmalıdır.
Meta Etiketler: Title, description, canonical ve hreflang etiketleri her iki sürümde özdeş olmalıdır.

4. Adım: Modern Web Görsel Optimizasyonu

Mobil ağlarda bant genişliği kısıtlıdır. Modern formatlar ve duyarlı görsel yapıları kullanılmalıdır.

Modern Formatlar: WebP veya AVIF formatlarını tercih edin.
Duyarlı Yükleme: <picture> veya srcset ile cihaza uygun boyut sunun.
Lazy Loading: Ekran dışı (below-the-fold) görsellere loading='lazy' ekleyin. LCP görselinde lazy load kullanmayın, fetchpriority='high' atayın.

5. Adım: Core Web Vitals ve Mobil Performans

Mobil botlar düşük CPU ve yavaş 4G bağlantısı simüle eder. Performans metrikleri doğrudan sıralamayı etkiler.

LCP (Largest Contentful Paint): Mobil LCP öğesini 2.5 saniyenin altında tutun. Kritik CSS'i satır içi (inline) yükleyin.
INP (Interaction to Next Paint): Ana iş parçacığını (main thread) bloke eden JavaScript yüklerini bölün. Tıklama hedeflerini en az 48x48px yapın.
CLS (Cumulative Layout Shift): Görseller ve reklam alanları için aspect-ratio veya açık width / height değerleri tanımlayın.

6. Adım: Dijital Ajans ve Geliştiriciler İçin Test Süreci

Tasarımı yayına almadan önce teknik denetim adımlarını tamamlayın:

Google Search Console: URL Denetimi aracıyla mobil bot gözünden render çıktısını inceleyin.
Lighthouse Mobile: Performans, SEO ve Erişilebilirlik skorlarını denetleyin.
Chrome DevTools: Network throttling (Slow 4G) ve CPU throttling (4x slowdown) altında dokunmatik etkileşimleri test edin.