Bir haber sitesine gelen ziyaretin büyük bölümü artık telefonlardan geliyor. Bu yüzden haber sitelerinde mobil uyumluluk, sonradan eklenen bir özellik değil; tasarımın ve altyapının çıkış noktası olmalıdır. Bu rehberde mobil deneyimi hem kullanıcı hem de arama motoru açısından doğru kurmanın somut adımlarını ele alıyoruz.
İlgili okuma: SEO Uyumlu Haber Yazılımı Rehberi · Mobil Uyumluluk Nedir? · Görsel Optimizasyonu Nasıl Yapılır?
Mobil Öncelikli İndeksleme Neden Belirleyici?
Google, bir sayfayı dizine eklerken ve sıralarken ağırlıklı olarak sayfanın mobil sürümünü temel alır. Buna mobil öncelikli indeksleme (mobile-first indexing) denir. Pratikte şu anlama gelir: Masaüstünde mükemmel görünen ama mobilde içeriği eksik, yavaş açılan ya da erişilemeyen bir sayfa, arama sonuçlarında bu mobil haliyle değerlendirilir.
Haber içeriği için bu durum daha da kritiktir, çünkü ziyaretçi çoğu zaman bir bağlantıya sosyal medyadan ya da arama sonucundan telefonuyla tıklar. İlk saniyelerde açılmayan veya okunması zor bir sayfa, hem okuyucuyu hem de tıklama sonrası davranış sinyallerini kaybettirir. Haberde tazelik ve hız birbirini beslediği için, aynı anda binlerce kişinin geldiği bir son dakika gelişmesinde mobil sayfanın dayanıklılığı doğrudan trafiğe yansır.
Responsive Tasarım mı, Ayrı Mobil Site mi?
Mobil uyumu sağlamanın üç yaygın yaklaşımı vardır. Google her birini destekler, ancak bakım kolaylığı ve tutarlılık açısından çoğu haber sitesi için responsive tasarım öne çıkar. Ayrı bir mobil site tutmak, iki ayrı sürümü sürekli eşit güncelleme yükü getirdiği için zamanla tutarsızlığa açık hale gelir.
| Yaklaşım | Nasıl çalışır | Dikkat edilmesi gereken |
|---|---|---|
| Responsive tasarım | Tek URL ve tek HTML; düzen CSS ile ekran genişliğine uyarlanır | Genelde en kolay bakım; içerik eşitliği doğal olarak korunur |
| Dinamik sunum | Aynı URL, cihaza göre farklı HTML sunulur | Vary: User-Agent başlığı ve doğru cihaz algılama gerekir |
| Ayrı mobil URL (m.) | Ayrı bir m. alt alan adı | rel=canonical ve alternate etiketleri; içerik iki sürümde eşit tutulmalı |
Hangi yöntemi seçerseniz seçin, sayfaya doğru bir görünüm alanı (viewport) etiketi eklemek şarttır. Bu etiket olmadan tarayıcı sayfayı masaüstü genişliğinde açıp küçültür ve kullanıcı yakınlaştırmak zorunda kalır.
<meta name="viewport" content="width=device-width, initial-scale=1">Core Web Vitals ve Mobil Performans
Google, gerçek kullanıcı deneyimini ölçmek için Core Web Vitals metriklerini kullanır. Bu metrikler özellikle mobil ağlarda ve daha zayıf işlemcili cihazlarda önem kazanır. Aşağıdaki eşikler Google tarafından yayımlanan "iyi" hedefleridir.
| Metrik | Ölçtüğü şey | "İyi" eşiği |
|---|---|---|
| LCP (Largest Contentful Paint) | En büyük içerik ögesinin görünme süresi | ≤ 2,5 saniye |
| INP (Interaction to Next Paint) | Etkileşimlere yanıt verme hızı | ≤ 200 milisaniye |
| CLS (Cumulative Layout Shift) | Beklenmedik düzen kaymaları | ≤ 0,1 |
Haber sayfalarında en sık görülen sorunlar; geç yüklenen büyük kapak görselleri (LCP), sonradan yerleşen reklamların içeriği aşağı itmesi (CLS) ve ağır JavaScript'in etkileşimi geciktirmesidir (INP). Sunucu tarafında güçlü bir önbellekleme (cache) katmanı, ilk byte süresini kısaltarak bu metriklerin tümünü olumlu etkiler.
Dokunmatik Kullanılabilirlik ve Okunabilirlik
Mobil deneyim yalnızca hızdan ibaret değildir; parmakla kullanılabilir olmalıdır. Küçük ekranda okunabilirlik ve dokunma hedeflerinin boyutu, okuyucunun sayfada kalmasını belirler. Yanlışlıkla yanındaki reklama basılan bir bağlantı ya da yakınlaştırma gerektiren küçük bir yazı, okuyucuyu haberi tamamlamadan geri döndürür.
- Dokunma hedeflerini (bağlantı, buton) yeterince büyük ve aralıklı tutun; genel kabul gören ölçü yaklaşık 48 piksel civarıdır.
- Gövde metni için yakınlaştırma gerektirmeyecek bir taban punto kullanın; 16 piksel yaygın bir başlangıç noktasıdır.
- Metin ile arka plan arasında yeterli kontrast bırakın; ince gri yazılar mobilde zor okunur.
- Yatay kaydırmayı önleyin; içerik ekran genişliğine sığmalı, tablolar taşıyorsa kaydırılabilir kapsayıcıya alınmalıdır.
- Yazı tipi boyutunu piksel yerine göreli birimlerle tanımlayarak kullanıcının cihaz ayarına saygı gösterin.
Reklamlar, Araya Giren Pencereler ve Düzen Kayması
Haber siteleri gelirini büyük ölçüde reklamdan sağlar, ancak mobilde kötü yerleştirilmiş reklamlar hem deneyimi hem de sıralamayı zedeler. Google, içeriğe erişimi zorlaştıran araya giren rahatsız edici pencerelere (intrusive interstitials) karşı politikaya sahiptir.
- İçeriği kapatan tam ekran açılır pencerelerden, özellikle sayfa açılır açılmaz çıkanlardan kaçının.
- Reklam alanlarına önceden yer ayırın; sonradan yüklenip metni iten reklamlar CLS'yi bozar.
- Yasal olarak zorunlu bilgilendirmeler (çerez onayı gibi) makul boyutta ve kolay kapatılabilir olmalıdır.
- Yapışkan (sticky) reklamların ekranın çok büyük bir bölümünü kaplamamasına dikkat edin.
Görsel, Medya ve İçerik Aktarımı
Mobil kullanıcı çoğu zaman ölçülü bir veri bağlantısındadır ve şebeke kalitesi konumdan konuma değişir. Bu yüzden aktarılan bayt miktarını azaltmak doğrudan hıza dönüşür; özellikle haber sayfalarında galeri ve gömülü içerikler sayfanın toplam ağırlığını hızla büyütebilir.
- Görselleri modern formatlarda (örn. WebP/AVIF) ve cihaza uygun boyutta sunun; ayrıntılar için görsel optimizasyonu rehberine bakın.
- srcset ve sizes ile farklı ekranlara farklı çözünürlükte görsel gönderin.
- Ses ve video ekliyorsanız otomatik oynatmadan kaçının ve dosyaları optimize edin.
- Yazı tipi ve betik sayısını azaltın; her ek istek mobilde gecikme demektir.
Test Etme ve Sürekli İzleme
Mobil uyumluluk tek seferlik bir iş değildir; her yeni şablon, reklam birimi veya eklenti onu bozabilir. Bu yüzden ölçüm sürekli olmalıdır.
- Chrome DevTools cihaz emülasyonuyla farklı ekran boyutlarında sayfayı gözden geçirin.
- Lighthouse ve PageSpeed Insights ile performans ve saha (gerçek kullanıcı) verilerini takip edin.
- Search Console'da Core Web Vitals raporunu düzenli kontrol edin.
- Gerçek cihazlarda, özellikle orta seviye telefonlarda manuel test yapın.