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

Google, sayfaları indekslerken ve sıralarken mobil sürümü birincil kaynak alır. Masaüstü sürüm arka plandadır. İçerik, yapısal veri ve meta etiketler mobil sürümde eksikse sıralama kaybı kaçınılmazdır. Bu rehber, modern web projelerinde mobil pariteyi sağlamak için gereken adımları içerir.

Adım Adım Mobil Öncelikli Tasarım Uygulama

1. Viewport Yapılandırması ve CSS Breakpoint Stratejisi

Temel HTML belgesinde viewport tanımlanmalıdır. Stil sayfalarında desktop-first (max-width) yerine mobile-first (min-width) medya sorguları kullanılmalıdır.

Doğru viewport tanımı:

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

0px - 767px: Temel mobil stiller (medya sorgusuz yazılır).
768px ve üzeri: @media (min-width: 768px) ile tablet düzeni eklenir.
1024px ve üzeri: @media (min-width: 1024px) ile masaüstü düzeni eklenir.

2. Dokunmatik Hedefler (Tap Targets) ve Tipografi

Mobil arayüzlerde tıklama hatalarını engellemek için buton ve link boyutları optimize edilmelidir:

Tıklanabilir tüm alanlar en az 48x48 CSS pikseli olmalıdır.
Tıklanabilir ögeler arasına en az 8px boşluk bırakılmalıdır.
Gövde metni için minimum 16px font boyutu kullanılmalıdır; kullanıcı zoom ihtiyacı duymamalıdır.

3. Görsel Optimizasyonu ve Modern Web Formatları

Mobil veri tasarrufu ve hızlı LCP (Largest Contentful Paint) için modern formatlar şarttır. WebP ve AVIF formatları tercih edilmelidir. <picture> etiketi ile cihaza özel görsel sunulur:

<picture>
  <source srcset="image-mobile.avif" media="(max-width: 767px)" type="image/avif">
  <source srcset="image-desktop.avif" media="(min-width: 768px)" type="image/avif">
  <img src="image-fallback.jpg" alt="Açıklama" loading="lazy" width="800" height="600">
</picture>

İlk ekranda (above-the-fold) yer alan LCP görseline loading="lazy" verilmez; fetchpriority="high" atanır.

4. Eşdeğer İçerik ve Metadata Paritesi

Masaüstünde olan tüm kritik bileşenler mobilde de bulunmalıdır:

Yapısal Veri (Schema.org): Breadcrumb, Article, Product gibi schema verileri her iki sürümde de aynı olmalıdır.
Meta Başlık ve Açıklamalar: Mobil sayfada meta title/description kırpılmamalı, masaüstüyle birebir tutulmalıdır.
Dahili Bağlantılar (Internal Linking): Masaüstü menüde olan ana linkler mobil menüye de eklenmelidir; gizli accordion içi linkler taranabilir olmalıdır.

Core Web Vitals ve Performans Metrikleri

Mobil indeksleme başarısı doğrudan yükleme performansına bağlıdır:

LCP (Largest Contentful Paint): < 2.5 saniye olmalıdır. Render engelleyen CSS/JS dosyaları defer/async edilmelidir.
INP (Interaction to Next Paint): < 200 milisaniye hedeflenmelidir. Uzun süren JavaScript ana iş parçacığı (main-thread) görevleri parçalanmalıdır.
CLS (Cumulative Layout Shift): < 0.1 olmalıdır. Görseller ve reklam alanları için sabit width/height veya aspect-ratio CSS özelliği tanımlanmalıdır.

Modern Web Trendleri ve Dijital Ajans Pratikleri

Başarılı bir dijital ajans iş akışında mobil tasarım sonradan uyarlanan bir süreç değildir. Geliştirme süreci mobilde başlar, geniş ekranlara doğru ölçeklenir.

Mobil cihazda gereksiz kütüphane (jQuery, ağır slider eklentileri) kullanımından kaçınılır, native CSS scroll-snap ve Vanilla JS tercih edilir.
Mobil DOM boyutu 1.400 düğümün altında tutulur.
Lazy loading iframe ve görsellere native olarak uygulanır.