Mobil Öncelikli İndeksleme ve Tasarım Nedir?

Google, sayfaları taramak ve dizine eklemek için akıllı telefon botunu (Googlebot Smartphone) kullanır. Mobil öncelikli tasarım, masaüstü görünümünün mobil cihazlara kırpılması değil, mobil mimarinin temel alınıp masaüstüne doğru genişletilmesidir (progressive enhancement).

Başarılı bir modern web stratejisi; hız, içerik paritesi ve dokunmatik arayüz ergonomisi üzerine kuruludur.

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

Mobil tarayıcıların sayfayı doğru ölçeklemesi için HTML <head> içine meta viewport etiketi ekleyin:

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

CSS Medya Sorguları (Min-Width Yaklaşımı)

Masaüstü kodlarını geriye doğru küçültmek yerine, mobil stilleri taban alıp ekran büyüdükçe kural ekleyin:

Yanlış (Desktop-First): @media (max-width: 768px) { ... } (Gereksiz CSS yükü)
Doğru (Mobile-First): @media (min-width: 768px) { ... } (Temiz, minimal CSS)

Adım 2: İçerik ve Yapısal Veri Eşitliği (Content Parity)

Masaüstünde olan kritik içeriklerin mobilde gizlenmesi (ör. display: none) SEO kaybına yol açar.

Meta Veriler: Title, meta description, robots etiketleri mobilde masaüstüyle birebir aynı olmalı.
Yapısal Veri (Schema.org): BreadcrumbList, Article, Product şemaları her iki versiyonda eksiksiz bulunmalı.
İçerik Bütünlüğü: Metinler, başlık hiyerarşisi (H1-H6) mobilde masaüstünden eksik bırakılmamalı.

Adım 3: Core Web Vitals ve Performans Optimizasyonu

Mobil ağlar kararsızdır. Yavaş yüklenen varlıklar hemen çıkma oranını artırır.

Görseller: WebP/AVIF formatı kullanın. <picture> etiketiyle farklı ekran çözünürlüklerine uygun boyutlar sunun.
Dokunmatik Hedef Boyutları: Tıklanabilir buton ve linkler en az 48x48 CSS pikseli olmalı, aralarında en az 8px boşluk bırakılmalı.
Font Boyutu: Giriş alanlarındaki (input) font boyutu en az 16px olmalı (iOS otomatik yakınlaştırma hatasını önler).
CLS Önleme: Görsel ve reklam alanlarına sabit width ve height veya aspect-ratio CSS özelliği tanımlayın.

Adım 4: Dijital Ajans Test ve Doğrulama Protokolü

Uygulanan standartları canlıya almadan önce test edin:

Search Console URL İnceleme: Sayfanın mobil bot tarafından nasıl render edildiğini ve taranmayan kaynakları kontrol edin.
Chrome DevTools: Network panelinden 'Slow 4G' seçeneğiyle CPU ve ağ kısıtlaması altında test yapın.
Lighthouse: Performance ve Accessibility puanlarını mobil profilde denetleyin.