SEO

İçerik Ekrandan Geniş Hatası Nedir, Nasıl Düzeltilir?

“İçerik ekrandan geniş” hatası, sayfadaki bir öğenin telefon ekranından daha geniş olduğu ve kullanıcının sayfayı görmek için yatay kaydırmak zorunda kaldığı anlamına gelir. En sık nedenleri; sayfada viewport etiketinin olmaması, sabit genişlik verilmiş tablo, görsel veya iframe’ler ve uzun, bölünmeyen URL ya da kelimelerdir. Çözüm; <meta name="viewport" content="width=device-width, initial-scale=1"> etiketini eklemek, görsellere max-width: 100% vermek ve geniş tabloları yatay kaydırılabilir bir kapsayıcı içine almaktır.

Kısaca

Belirti: Telefonda sayfa yana kayıyor, sağda boşluk çıkıyor.
Nedenler: Viewport eksikliği, sabit piksel genişlikler, geniş tablo ve iframe, uzun kelimeler.
Çözüm: Viewport etiketi + max-width:100% + overflow-x:auto.
Test: Chrome Geliştirici Araçları (Ctrl+Shift+M) ile farklı telefon boyutları.

Güncel bilgi: Google, Search Console’daki Mobil Kullanılabilirlik raporunu ve Mobil Uyumluluk Testi aracını Aralık 2023’te kaldırdı. Bu yüzden bu uyarıyı artık Search Console’da görmezsiniz; ancak sorun hala kullanıcı deneyimini etkiler. Bugün kontrol için Chrome Geliştirici Araçları’nın cihaz modunu, PageSpeed Insights’ı (Lighthouse) ve Search Console’daki Core Web Vitals raporunu kullanın.

İçerik ekrandan geniş hatası: telefonda sabit genişlikli tablo ve görsellerin taşması ve max-width ile overflow-x çözümü

İçindekiler

İçerik Ekrandan Geniş Hatası Neden Olur?

Neden	Nasıl bulunur	Çözüm
Viewport etiketi yok	Sayfa kaynağında `name="viewport"` aranır	Etiketi head bölümüne ekleyin
Sabit genişlikli görsel	width=”1000″ gibi değerler	`max-width:100%; height:auto`
Geniş tablo	Çok sütunlu tablolar	Tabloyu `overflow-x:auto` kapsayıcıya alın
iframe ve videolar	width=”560″ gibi gömme kodları	max-width veya oranlı kapsayıcı (aspect-ratio)
Uzun URL ve kelimeler	Bölünmeyen bağlantı metinleri	`overflow-wrap: break-word`
CSS’te sabit genişlik	width: 1200px, min-width	Yüzde veya max-width kullanın

İçerik Ekrandan Geniş Hatası Nasıl Düzeltilir?

Viewport etiketini kontrol edin. Ayrıntılar: viewport meta etiketi.
Taşan öğeyi bulun: Chrome’da F12 > cihaz modu (Ctrl+Shift+M) ile telefon görünümüne geçin, sayfayı yana kaydırın ve taşan öğeye sağ tıklayıp “İncele” deyin.

Genel CSS kurallarını ekleyin:

img, video, iframe { max-width: 100%; height: auto; }
.tablo-kapsayici { overflow-x: auto; }
.entry-content { overflow-wrap: break-word; }

Görselleri responsive yapın. Ayrıntılı kodlar için resmi responsive yapma yazısına bakın.
WordPress’te: Görünüm > Özelleştir > Ek CSS bölümüne yukarıdaki kuralları ekleyebilirsiniz. Sayfa oluşturucularda sabit piksel genişlikleri yüzdeye çevirin.
Test edin ve önbellek eklentisi varsa önbelleği temizleyin.

Yazılar telefonda çok küçük görünüyorsa metin okunamayacak kadar küçük yazısına bakın. Mobil uyumluluğun diğer yaygın sorunu için tıklanabilir öğeler birbirine çok yakın yazısına bakabilirsiniz.

Sıkça Sorulan Sorular

İçerik ekrandan geniş ne demek?

Sayfadaki bir öğenin telefon ekranından geniş olduğu ve sayfanın yatay kaydırma gerektirdiği anlamına gelir.

İçerik ekrandan geniş hatası nasıl düzelir?

Viewport etiketini ekleyin, görsellere max-width: 100% verin, geniş tabloları overflow-x: auto kapsayıcıya alın ve sabit piksel genişlikleri kaldırın.

Search Console’da mobil kullanılabilirlik raporu neden yok?

Google, Mobil Kullanılabilirlik raporunu ve Mobil Uyumluluk Testi aracını Aralık 2023’te kaldırdı. Kontrol için Chrome Geliştirici Araçları ve PageSpeed Insights kullanılır.