Mobile-First (Mobil Öncelikli) Nedir?

Tasarım yaklaşımı olarak mobile-first

Küçük ekranla başlamak bir öncelik testidir. Telefonda yalnızca birkaç bloğa yer vardır; hangisinin ilk sırada görüneceğine, hangi menü öğesinin gerçekten gerekli olduğuna baştan karar vermek gerekir. Geniş ekranda ise bu sade temelin üzerine sütunlar, yan paneller ve ek detaylar eklenir. Bu kademeli zenginleştirme (progressive enhancement), masaüstü sayfayı sonradan telefona sığdırmaya çalışmaktan genellikle daha temiz sonuç verir.

CSS'te fark, media query'lerin yönünde görülür:

/* Mobile-first: temel stil küçük ekran için, genişledikçe eklenir */
.menu { display: block; }
@media (min-width: 48em) {
  .menu { display: flex; gap: 2rem; }
}

/* Desktop-first: temel stil geniş ekran için, daraldıkça geri alınır */
.menu { display: flex; gap: 2rem; }
@media (max-width: 47.99em) {
  .menu { display: block; gap: 0; }
}

İlk yaklaşımda telefon, ihtiyaç duymadığı kuralları geri almakla uğraşmaz ve stil dosyası daha kolay okunur. Mobile-first, responsive tasarım ile çelişmez; çoğu zaman onu kurmanın tercih edilen yoludur.

Google'da mobile-first indexing

Google, sitenin mobil sürümündeki içeriği akıllı telefon tarayıcısıyla tarayıp dizine ekleme ve sıralama için kullanır. Google bu geçişe 2016'da başladı ve Ekim 2023'te sürecin tamamlandığını duyurdu. Haziran 2024'teki son duyuruya göre hâlâ masaüstü Googlebot ile taranan küçük site grubu da 5 Temmuz 2024'ten sonra yalnızca Googlebot Smartphone ile taranmaya başladı; içeriğine mobil cihazdan hiç erişilemeyen siteler artık dizine eklenemiyor. Sunucu kayıtlarında Googlebot Desktop'u görmeye devam edebilirsiniz; Google, ürün listeleri ve Google for Jobs gibi bazı özellikler için masaüstü tarayıcıyı zaman zaman kullandığını belirtir.

Kısacası artık "mobil sürüm" Google için sitenin kendisidir. Tarama ve dizine ekleme mobilde ne görülüyorsa ona göre yapılır.

Mobil ve masaüstü eşitliği: kontrol listesi

• Ana içerik (metin, görseller, videolar) mobilde de aynı olmalı; masaüstünde olup mobilde kesilen paragraflar Google için yok hükmündedir.
• Başlıklar, title ve meta description iki sürümde aynı anlamı taşımalı.
• Yapılandırılmış veri mobil sürümde de bulunmalı ve içerdiği URL'ler mobil adreslere işaret etmeli.
• Robots meta etiketleri iki sürümde aynı olmalı; mobilde yanlışlıkla noindex kalırsa sayfa dizinden düşebilir.
• Ana içeriği kaydırma, tıklama veya yazma gibi bir kullanıcı etkileşimine bağlı olarak yüklemeyin; Google bu tür etkileşimleri gerçekleştirmez. Görünür alana girince yüklenen lazy loading ise doğru kurulduğunda sorun yaratmaz.
• CSS, JavaScript ve görsel dosyalarını robots.txt ile engellemeyin; Google sayfayı oluştururken bunlara ihtiyaç duyar.

Sık karşılaşılan yanlış anlamalar

"Mobil için ayrı bir Google dizini var." Yok; tek bir dizin vardır ve o dizin mobil sürüme göre oluşturulur. Masaüstünde arama yapan kullanıcı da aynı dizinden sonuç görür.

"Mobile-first indexing, mobil uyumlu sitelere sıralama bonusu verir." Bu sistem hangi sürümün dizine ekleneceğini belirler; kendi başına bir sıralama ödülü değildir. Ancak mobil sürümde eksik kalan içerik, doğal olarak o içerikle ilgili aramalarda görünürlüğü de düşürür.

"Responsive bir sitede yapacak bir şey kalmaz." Responsive yapı içerik eşitliğini büyük ölçüde kendiliğinden sağlar, ama mobilde gizlenen bloklar, tıklayınca açılan ve sonradan yüklenen içerikler ya da mobile özel engellenen kaynaklar yine sorun çıkarabilir.

Ayrıntılar için Google Search Central'daki mobile-first indexing en iyi uygulamaları sayfası ve geçişin son adımını anlatan Haziran 2024 duyurusu esas alınmalıdır.