Mobil Öncelikli İndeksleme (Mobile-First Indexing) Temelleri

Google, sayfaları indekslerken ve sıralarken akıllı telefon tarayıcısını (Googlebot Smartphone) birincil kaynak alır. Masaüstü sürümde olan ancak mobilde gizlenen içerikler indekslenmez, sıralama sinyali üretmez. Modern web projelerinde masaüstü uyarlaması sonradan eklenen bir katmandır; temel mimari daima mobil cihaz kısıtlamalarına göre inşa edilir.

Mobil öncelikli yaklaşım bir tasarım tercihi değil, arama motoru optimizasyonu (SEO) ve teknik altyapı zorunluluğudur.

Adım Adım Mobile-First Tasarım ve Geliştirme

Adım 1: Viewport Meta Etiketini Doğru Tanımlayın

Tarayıcının sayfayı mobil ekran genişliğine göre ölçeklemesi için HTML başlığına doğru viewport tanımlanmalıdır:

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

Adım 2: CSS Mimarisi — min-width Medya Sorguları Kullanın

Masaüstü CSS yazıp max-width ile küçültmek yerine, temel stilleri mobil için yazın. Ekran genişledikçe min-width ile yeni kurallar ekleyin:

/* Mobil (Varsayılan) */
.container {
  width: 100%;
  padding: 16px;
}

/* Tablet ve Masaüstü */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}

Adım 3: Görsel ve Medya Optimizasyonu

WebP ve AVIF Formatları: Geleneksel JPEG/PNG formatları yerine modern sıkıştırma formatları tercih edilmelidir.
Responsive Görseller: picture etiketi ve srcset özniteliği ile cihaz çözünürlüğüne uygun boyut sunulmalıdır.
Lazy Loading: Ekran dışı görseller native loading="lazy" ile ertelenmelidir.
Görsel Boyutları: CLS (Cumulative Layout Shift) hatasını önlemek için width ve height değerleri HTML üzerinde açıkça belirtilmelidir.

Adım 4: İçerik ve Yapısal Eşitlik Sağlayın

Mobil ve masaüstü sürümlerde aynı veri bulunmalıdır:

Meta Veriler: Title, meta description, robots etiketleri her iki sürümde birebir aynı olmalıdır.
Yapılandırılmış Veri (Schema.org): Breadcrumb, Product, Article gibi JSON-LD şemaları mobil DOM içinde eksiksiz yer almalıdır.
İç Linkleme: Menüde gizlenen bağlantıların taranabilirliği test edilmelidir.

Adım 5: Mobil Kullanılabilirlik ve Dokunmatik Standartlar

Dokunma Hedefleri: Buton ve linkler minimum 48x48 piksel boyutunda olmalı, aralarında en az 8 piksel boşluk bırakılmalıdır.
Tipografi: Gövde metni minimum 16px olmalı, mobilde yakınlaştırma ihtiyacı doğurmamalıdır.
Açılır Pencereler (Interstitials): Sayfa içeriğini kapatan pop-up pencereler ceza sebebidir, kaçınılmalıdır.

Core Web Vitals Metrikleri ve Mobil Performans

LCP (Largest Contentful Paint): Mobil cihazlarda 2.5 saniyenin altında olmalıdır. Sunucu yanıt süresi (TTFB) ve kritik CSS optimizasyonu şarttır.
INP (Interaction to Next Paint): Mobil CPU kısıtlamalarında JavaScript çalıştırma maliyeti düşürülmeli, 200 ms altında kalınmalıdır.
CLS (Cumulative Layout Shift): 0.1 değerinin altında tutulmalıdır. Boyutsuz reklam alanları ve dinamik eklenen DOM elemanları engellenmelidir.

Dijital Ajanslar İçin Modern Web Trendleri

Başarılı bir dijital ajans iş akışında trendler şu standartları içerir:

Bileşen tabanlı tasarım sistemleri (Design Tokens, Atomic Design).
CSS Grid ve Flexbox ile sıfır JavaScript layout mimarisi.
Lighthouse ve Chrome UX Report (CrUX) ile düzenli mobil denetimler.