Mobil Öncelikli İndeksleme ve Tasarım Standartları: Kapsamlı Uygulama Rehberi

Mobil Öncelikli İndeksleme Nedir?

Google botları web sayfalarını öncelikli mobil tarayıcı (Smartphone Googlebot) ile render eder. Masaüstü ve mobil sürümler arasındaki içerik farkı sıralama kaybına yol açar. Bu rehber modern teknik trendler doğrultusunda mobil standartları kurmayı hedefler.

Mobil sürüm ikincil varyant değil; ana kanonik kaynaktır. Dijital strateji mobil DOM yapısı üzerine kurulmalıdır.

Teknik Standartlar ve Uygulama Adımları

1. Viewport Yapılandırması

Eksik viewport etiketi mobil cihazlarda masaüstü render tetikler. Standart meta etiketi:

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

2. Eşit İçerik ve DOM Uyumu

• Metin Eşitliği: Masaüstünde sunulan tüm içerik, başlıklar ve açıklamalar mobil sürümde de bulunmalı. Mobilde içerik gizleme (accordion hariç) bot indeksini engeller.
• Görsel ve Medya: Lazy loading mobilde kritik. loading='lazy' ve modern formatlar (WebP/AVIF) zorunlu. Responsive görsel kullanımı için srcset tanımlanmalı.
• Yapılandırılmış Veri (Schema): JSON-LD formatındaki schema verileri hem mobil hem masaüstü DOM içinde birebir aynı olmalı.

3. CSS ve Düzen Standartları

Medya sorgularında min-width yaklaşımı (mobile-first) esastır. Dokunmatik hedef alanları (touch targets) minimum 48x48 CSS pikseli olmalıdır.

• Sabit genişlikler (px) yerine göreli birimler (rem, %, vh/vw, clamp) tercih edilmeli.
• Yatay kaydırma (horizontal scroll) oluşturan taşmalar overflow-x: hidden yerine kapsayıcı genişlikleri optimize edilerek çözülmeli.
• Font boyutu ana gövde metinleri için minimum 16px taban alınmalı.

Core Web Vitals ve Performans Optimizasyonu

LCP, INP ve CLS Kontrolü

• LCP (Largest Contentful Paint): Hero görselleri için fetchpriority='high' kullan. Mobilde kritik CSS inline verilmeli.
• INP (Interaction to Next Paint): Uzun süren JavaScript görevlerini parçala. Dokunma gecikmelerini azaltmak için pasif dinleyiciler (passive event listeners) kullan.
• CLS (Cumulative Layout Shift): Tüm görsel ve iframe ögelerine width ve height özniteliklerini tanımla. Reklam ve dinamik bloklar için yer tutucu (aspect-ratio) ayır.

Mobil Öncelikli İndeksleme Denetim Listesi

1. Google Search Console URL Denetim aracı ile mobil render görüntüsünü kontrol et.
2. Robots.txt dosyasının mobil CSS ve JS dosyalarını engellemediğini doğrula.
3. Masaüstü ve mobil meta etiketlerinin (Title, Description, Canonical, Hreflang) eşleştiğini doğrula.
4. Lighthouse mobil simülasyonunda 90+ performans skoru sağla.