Mobil Öncelikli İndeksleme ve Modern Web Tasarım Rehberi

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

Google, tarama ve dizine ekleme işlemlerinde sitenin mobil sürümünü baz alır. Masaüstü sürüm mobil ile aynı içeriğe, yapısal verilere ve meta etiketlere sahip olmak zorundadır. Bu teknik rehber, sitenizi modern web standartlarına ve güncel SEO trendlerine uygun hale getirme adımlarını içerir.

Adım 1: Viewport ve Temel CSS Mimarisi Kurulumu

Sayfa boyutlandırmasının tüm cihazlarda doğru çalışması için HTML <head> içine standart viewport meta etiketini ekleyin:

CSS yazımında masaüstünden küçültmek yerine, mobilden büyüterek ilerleyin. min-width medya sorguları kullanın:

Masaüstü öncelikli (max-width) CSS gereksiz kod yükü üretir. Mobil öncelikli (min-width) mimari daha az kodla daha hızlı render sağlar.

Adım 2: İçerik ve Meta Veri Paritesi Sağlama

Bir dijital ajans veya geliştirici ekibinin en sık yaptığı hata mobilde içeriği gizlemektir. Mobil ve masaüstü sürümlerde şunlar birebir eşleşmelidir:

• Başlık Etiketleri: H1, H2, H3 hiyerarşisi mobilde masaüstüyle aynı olmalıdır.
• Yapısal Veri (Schema.org): Breadcrumb, Product, Article gibi JSON-LD blokları mobilde de bulunmalıdır.
• Meta Etiketler: Title, meta description, robots etiketleri her iki sürümde özdeş olmalıdır.

Adım 3: Görsel ve Medya Optimizasyonu

Görseller mobilde en büyük LCP (Largest Contentful Paint) darboğazıdır. Native HTML çözümlerini kullanın:

• Modern Formatlar: WebP ve AVIF formatı kullanın.
• Duyarlı Görseller: <picture> veya srcset ile cihaza uygun boyut sunun.
• Native Lazy Loading: İlk ekran dışındaki görsellere loading="lazy" ekleyin. İlk ekrandaki görsele fetchpriority="high" verin.
• Boyut Belirleme: CLS (Cumulative Layout Shift) engellemek için width ve height değerlerini mutlaka tanımlayın.

Adım 4: Dokunma Alanları ve Tipografi Standartları

Kullanıcı etkileşimini artırmak ve mobil kullanılabilirlik hatalarını önlemek için şu standartları uygulayın:

• Dokunma hedefleri (butonlar, linkler) minimum 48x48 CSS pikseli olmalı.
• Yan yana duran interaktif öğeler arasında en az 8px boşluk bırakılmalı.
• Temel gövde metni boyutu minimum 16px olmalı, kullanıcı yakınlaştırma (zoom) yapmak zorunda kalmamalıdır.

Adım 5: Doğrulama ve Test

Uygulanan değişiklikleri şu native araçlarla denetleyin:

1. Google Search Console: Mobil Kullanılabilirlik ve Sayfa Deneyimi raporlarını inceleyin.
2. Lighthouse / PageSpeed Insights: Mobil simülasyonunda Core Web Vitals (LCP, INP, CLS) metriklerini ölçün.
3. URL Denetim Aracı: Googlebot Mobil olarak render edilmiş DOM çıktısını kontrol edin.