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

Google, sayfaları taramak ve dizine eklemek için öncelikle akıllı telefon kullanıcısı (Smartphone Googlebot) temsilcisini kullanır. Masaüstü sürüm değil, mobil sürüm sıralama sinyallerini belirler. Mobil ve masaüstü DOM içeriği eşit olmak zorundadır.

Adım 1: Viewport ve Meta Yapılandırması

Doğru viewport tanımlanmadığında tarayıcı masaüstü genişliğini varsayar. HTML <head> içine tek satır meta ekleyin:

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

YAGNI kuralı: user-scalable=no veya maksimum ölçek kısıtlamaları eklemeyin. Erişilebilirlik sorunlarına yol açar.

Adım 2: İçerik ve Yapısal Veri Eşitliğini Sağlama

Masaüstü sitede bulunan tüm kritik öğeler mobil sürümde de yer almalıdır:

Metin ve Medya: Mobilde accordion/tab arkasına gizlenen içerikler taranır ancak kritik metinleri gizlemeyin.
Yapılandırılmış Veri (Schema): Masaüstündeki JSON-LD verilerini mobil sayfadan kaldırmayın. İki sürüm aynı schema işaretlemesini taşımalıdır.
Meta Etiketler: Title, description, robots ve hreflang etiketleri mobilde birebir aynı kalmalıdır.

Adım 3: Core Web Vitals ve Performans Standartları

Mobil CPU gücü düşüktür. JavaScript yükünü azaltın, CSS ve tarayıcı yerel özelliklerini kullanın:

LCP (Largest Contentful Paint): İlk ekrandaki ana görsele fetchpriority="high" verin. Lazy-load uygulamayın.
Görseller: Yerel loading="lazy" ve modern formatlar (AVIF/WebP) kullanın. srcset ile doğru boyut verin.
CLS (Cumulative Layout Shift): Tüm <img> ve <video> etiketlerine width ve height özniteliklerini açıkça tanımlayın.
INP (Interaction to Next Paint): Ana iş parçacığını (main-thread) bloke eden JS yürütmelerini bölün.

Adım 4: Mobil Dokunma Alanları ve Tipografi

Kullanıcı etkileşim noktaları dokunmatik cihazlara uygun boyutlandırılmalıdır:

Minimum dokunma hedefi (Tap Target): 48x48 CSS pikseli. İki tıklanabilir öğe arasında en az 8px boşluk olmalıdır.

Tipografi için akışkan (fluid) CSS çözümü uygulayın:

font-size: clamp(1rem, 2.5vw, 1.25rem);

2026 Dijital Strateji ve Trendler

Modern dijital strateji oluştururken native API ve platform özelliklerini tercih edin:

Ağır CSS frameworkleri yerine CSS Grid ve Flexbox kullanın.
Gereksiz JavaScript modal kütüphaneleri yerine native <dialog> elementini tercih edin.
Harici ikon paketleri yerine satır içi SVG kullanın.