Mobil Uyumlu Web Sitesi Neden Zorunlu? Google'ın Mobile-First İndeksi

2026 yılında hâlâ mobil uyumsuz bir web sitesine sahipseniz, Google sizi fiilen cezalandırıyor. Bu, teknik bir detay değil; arama görünürlüğünüzü, kullanıcı deneyiminizi ve dolayısıyla gelirinizi doğrudan etkileyen temel bir gerçek. Bu yazıda Türkiye'deki mobil kullanım verilerinden başlayarak Google'ın Mobile-First indeksini, farklı tasarım yaklaşımlarını ve sık yapılan hataları ele alıyoruz.

Türkiye'de Mobil İnternet Kullanımı: 2026 İstatistikleri

TÜİK ve Statcounter verilerine göre Türkiye'de internet trafiğinin yaklaşık %75-78'i mobil cihazlardan geliyor. Bu oran, dünya ortalamasının belirgin biçimde üzerinde. Türkiye'de akıllı telefon penetrasyonu yüksek, ortalama veri tüketimi artıyor ve 5G altyapısı büyük şehirlerde yaygınlaşıyor.

Sektöre göre mobil trafik oranları değişiyor:

• E-ticaret: %70-80 mobil trafik, ancak masaüstü dönüşüm oranı hâlâ daha yüksek (mobil UX sorunları nedeniyle)
• Haber siteleri: %85+ mobil trafik
• B2B / Kurumsal siteler: %55-65 mobil trafik
• Restoran / Yerel işletmeler: %80+ mobil trafik (Google Haritalar üzerinden gelen trafik dahil)

Bu veriler şu anlama geliyor: Sitenize gelen her 4 ziyaretçiden 3'ü telefon veya tablet kullanıyor. Mobil deneyim bozuksa, trafiğinizin büyük çoğunluğunu kötü bir deneyimle karşılıyorsunuz demektir.

Google Mobile-First Indexing Nedir? Ne Zaman Başladı?

Google, geleneksel olarak masaüstü versiyonunu baz alarak siteleri tarar ve indekslerdi. 2016'da duyurulan Mobile-First Indexing ile bu yaklaşım köklü biçimde değişti: Google artık sitenizin mobil versiyonunu birincil kaynak olarak kabul ediyor ve sıralama kararlarını buna göre veriyor.

Süreç kademeli ilerleди: 2018'de yeni siteler için zorunlu hale geldi, 2020'den itibaren eski siteler de geçirilmeye başlandı ve Ekim 2023 itibarıyla tüm siteler Mobile-First indekslemeye dahil edildi.

Bu ne anlama geliyor? Masaüstünüzde gösterdiğiniz içerik mobilde eksikse, Google o içeriği sanki var olmuyormuş gibi değerlendirir. Mobil sayfanızda olmayan başlıklar, metinler veya yapılandırılmış veriler, SEO açısından sizi doğrudan zayıflatır.

Responsive, Adaptive ve Mobile-First Tasarım: Farkları

Responsive Tasarım

Tek bir HTML yapısı, CSS media query'leri aracılığıyla farklı ekran boyutlarına uyum sağlar. Tarayıcı genişliğine göre düzen yeniden şekillenir. Günümüzde en yaygın ve önerilen yaklaşımdır. Bakımı kolay, tek kod tabanı vardır.

Adaptive Tasarım

Sunucu, kullanıcının cihazını tespit ederek farklı HTML şablonları sunar. Masaüstü için ayrı, mobil için ayrı bir sayfa yapısı vardır. Yönetimi ağır olduğundan yeni projelerde nadiren tercih edilir; ancak performans açısından avantajlı olabilir.

Mobile-First Tasarım

Bu bir yaklaşım felsefesidir: Tasarıma en küçük ekrandan başlar, büyüğe doğru genişlersiniz. CSS'te şu şekilde görünür:

Mobile-first yaklaşım, hem Google'ın indeksleme mantığıyla hem de kullanıcı istatistikleriyle örtüşüyor. SRN Dijital olarak tüm web tasarım projelerinde mobile-first prensibi uyguluyoruz.

Mobil Uyumsuz Sitenin SEO'ya Zararı

Mobil uyumsuzluk yalnızca kullanıcı deneyimini değil, arama motoru görünürlüğünü de doğrudan etkiler:

• Sıralama düşüşü: Google, Page Experience sinyali kapsamında mobil kullanılabilirliği doğrudan sıralama faktörü olarak kullanır. Mobile-Friendly Test'ten başarısız çıkan sayfalar, rakip sayfaların gerisinde kalır.
• Core Web Vitals cezası: Mobil cihazlarda kötü LCP, INP ve CLS skorları sıralamayı olumsuz etkiler. Masaüstünde 95 alan bir site, mobilde 40 alabilir.
• İçerik indekslememe: Mobil versiyonda accordion veya tab içinde gizlenen içerikler Google tarafından daha az değerli kabul edilebilir.
• Hız cezası: Mobil ağlar masaüstü bağlantılardan yavaş olabilir. Optimize edilmemiş görseller ve ağır scriptler mobil LCP'yi öldürür.

Somut örnek: 2019'da bir turizm sitesi, masaüstünde harika çalışan ama mobilde bozuk görünen yapısını düzeltmeden SEO çalışması yaptı. Altı ay boyunca organik trafik büyüyemedi. Mobil optimizasyondan sonra iki ay içinde organik trafik %41 arttı.

Mobil Kullanıcı Davranışları: Oturum Süresi ve Bounce Rate

Google Analytics verilerine göre mobil kullanıcıların ortalama oturum süresi masaüstü kullanıcılarına kıyasla %20-35 daha kısa. Hemen çıkma oranı ise mobilde daha yüksek. Bunun başlıca nedenleri:

• Sayfa yükleme süresinin uzunluğu (3 saniye üzeri yükleme, bounce rate'i %53 artırır)
• Okunması güç küçük yazılar
• Tıklaması zor küçük butonlar
• Yatay kaydırma gerektiren düzen
• Açılır pencerelerin (pop-up) mobil ekranı kaplaması

Google, mobil cihazlarda tam ekran pop-up'ları (interstitial) sıralama cezası nedeni olarak açıkça belirledi. Özellikle sayfa ilk yüklendiğinde çıkan büyük reklamlar veya abonelik formları bu kapsamdadır.

Touch Target Boyutları ve Tıklanabilirlik Kuralları

Parmak ucu, fare imlecinin aksine 40-60 piksel genişliğindedir ve hassas değildir. Bu nedenle tıklanabilir öğelerin yeterince büyük olması şarttır:

• Apple HIG (Human Interface Guidelines): Minimum 44x44 pt (CSS piksel)
• Google Material Design: Minimum 48x48 dp
• WCAG 2.2: Minimum 24x24 CSS piksel (ama 44x44 önerilen)
• Bitişik iki tıklanabilir öğe arasında minimum 8px boşluk bırakın
• Navigasyon menüsündeki linkler arasındaki dikey boşluk en az 44px olmalı

Viewport Meta Tag ve CSS Breakpoint'ler

Mobil uyumluluğun temel HTML direktifi viewport meta tag'idir. Bu tag olmadan mobil tarayıcılar sayfayı masaüstü genişliğinde render edip küçülttüğü için metin okunmaz hale gelir:

Tailwind CSS'teki standart breakpoint'ler şunlardır: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Mobile-first yaklaşımda prefix olmayan class'lar mobil için geçerlidir, prefix'li olanlar büyük ekranlar için.

AMP (Accelerated Mobile Pages): Gerekli mi, Değil mi?

Google'ın 2015'te başlattığı AMP projesi, mobil sayfaları özel kısıtlamalarla ultra hızlı yüklemeyi hedefliyordu. Ancak 2021'den itibaren Google, AMP'yi Top Stories carousel için zorunlu olmaktan çıkardı.

Günümüzdeki durum: AMP artık çoğu proje için gerekli değil. Core Web Vitals standartlarını karşılayan hızlı bir site, AMP olmadan da sıralamada öne çıkabilir. AMP'nin kısıtlayıcı yapısı (özel JavaScript, sınırlı CSS) daha fazla sorun yaratıyor. Yalnızca çok büyük haber siteleri için hâlâ değerlendirilebilir.

Mobil Form Tasarımı: En Sık Yapılan 5 Hata

1. Yanlış input type kullanımı: Telefon numarası alanı için type="tel", e-posta için type="email", sayı için type="number" kullanılmazsa mobil klavye doğru açılmaz. Kullanıcı sayısal tuş takımı yerine tam klavyeyle karşılaşır ve hataya açık hale gelir.
2. Küçük form alanları: Input yüksekliği 44px'in altında olduğunda parmakla tıklamak zorlaşır ve yanlış alana tıklama artar.
3. Hata mesajlarının yerleşimi: Hatayı sayfanın üstünde değil, ilgili alanın hemen altında gösterin. Mobilde kullanıcı sayfayı kaydırdıktan sonra üstteki hata mesajını göremez.
4. Autocomplete kapatma: autocomplete="off" koymak mobil kullanıcıları zorlar. Tarayıcının otomatik doldurma özelliği mobilde büyük kolaylık sağlar; kapatmak için iyi bir neden olmadıkça bırakın.
5. Çok uzun formlar: Mobilde uzun formları adımlara bölün (multi-step form). Her adımda az sayıda alan göstermek tamamlama oranını artırır.

Test Araçları: Siteniz Gerçekten Mobil Uyumlu mu?

• Google Search Console — Mobile Usability Raporu: Sitenizin mobil uyumluluk sorunlarını, etkilenen sayfa sayısıyla birlikte listeler. Ücretsiz ve en güvenilir kaynak.
• Chrome DevTools — Device Toolbar: F12 → Device icon ile farklı cihaz boyutlarını simüle edebilirsiniz. Throttling özelliğiyle yavaş 3G bağlantısını da test edebilirsiniz.
• PageSpeed Insights: Hem mobil hem masaüstü skorunu ayrı ayrı gösterir. Mobil skorunuz masaüstünden düşükse, optimize edilmesi gereken belirli sorunları listeler.
• BrowserStack / LambdaTest: Gerçek cihazlarda test yapmak için bulut tabanlı araçlar. Özellikle iOS Safari ve eski Android Chrome uyumluluğu için değerlidir.

E-Ticaret İçin Mobil Ödeme Deneyiminin Önemi

Mobil alışveriş trafiği masaüstünü geçmiş olsa da dönüşüm oranı hâlâ masaüstünde daha yüksek. Bu farkın en büyük nedeni: mobil ödeme deneyimi. Kullanıcı ürünü beğenir, sepete ekler, ama ödeme adımında vazgeçer.

Mobil ödeme deneyimini iyileştirmek için:

• Apple Pay, Google Pay gibi tek dokunuşla ödeme seçenekleri sunun
• Kart numarası alanında otomatik biçimlendirme yapın (her 4 rakamda boşluk)
• Güvenlik kodu (CVV) için küçük bir yardım ikonuyla açıklama ekleyin
• Ödeme sayfasını mümkün olduğunca tek sayfaya sığdırın
• Sipariş özeti katlanabilir (collapsible) yapıda olsun; yer kaplamadan erişilebilir olsun

SRN Dijital olarak geliştirdiğimiz e-ticaret çözümlerinde mobil ödeme akışı optimizasyonunu standart sürecin bir parçası olarak uyguluyoruz. Mobil uygulama projelerinde de aynı prensipleri native geliştirme sürecine entegre ediyoruz. Sitenizin mobil uyumluluğunu değerlendirmek için bizimle iletişime geçin.