Web sitenizi Google Search Console’a eklediğinizde, büyük olasılıkla siteniz için yeni mobil kullanılabilirlik sorunları tespit edildiğine dair bildirimler almışsınızdır. Bu durum, günümüz dijital ekosisteminde kritik bir öneme sahiptir, zira kullanıcıların büyük bir kısmı içeriklere mobil cihazlar üzerinden erişmektedir. Bu kapsamlı rehberde, mobil kullanılabilirlik nedir, bu durumu nasıl test edebiliriz, karşılaşılan temel sorunlar nelerdir ve bu sorunlar için uygulanabilir, somut çözümler nelerdir ayrıntılarıyla ele alınacaktır. Mobil uyumluluk, artık bir tercih değil, arama motoru sıralamaları için temel bir gerekliliktir.
Mobil Kullanılabilirlik Nedir?
Mobil kullanılabilirlik, bir web sitesinin içeriğinin ve işlevselliğinin, masaüstü bilgisayarlar dışındaki cep telefonları ve tabletler gibi mobil cihazlarda kesintisiz ve optimize edilmiş bir deneyim sunabilme yeteneğidir. Mobil cihaz kullanımının küresel çapta artış göstermesiyle birlikte, Google gibi arama motorları, mobil uyumlu siteleri sıralamalarda önceliklendirerek ödüllendirmektedir. Sektör verilerine bakıldığında, 2025 yılı itibarıyla küresel web trafiğinin %58’inden fazlası mobil cihazlardan gelmektedir.
Bu gerekliliğe yanıt olarak web site geliştiricileri, sitelerini duyarlı (responsive) tasarım prensiplerine uygun olarak veya ayrı bir mobil site versiyonu ile hazırlamaktadır. Duyarlı web sitesi tasarımı, bir web sayfasının düzeninin, kullanıcının ekran boyutuna, çözünürlüğüne ve cihaz tipine göre otomatik olarak uyum sağlaması anlamına gelir.
Mobil Uyumluluk Testi ve Mevcut Durum
Web sitemizin mobil uyumlu olup olmadığını denetlemek için geçmişte Google’ın Mobile Friendly Test aracı kullanılsa da, bu araç giderek yerini daha kapsamlı Search Console raporlarına bırakmıştır. Yine de, giriş sayfasını veya belirli bir sayfanın linkini hızlıca taratarak temel uyumluluk kontrolü yapılabilir. Eğer bu test sonucunda "sayfa mobil uyumlu değil" uyarısı alıyorsanız, sayfanın temel HTML yapısı mobil cihazlar için uygun olmayabilir ve aşağıdaki detaylı mobil kullanılabilirlik sorunlarını incelemeniz gerekir.
Sayfa Mobil Uyumlu Değil Hatası ve İlk Adımlar
Mobil kullanılabilirlik ile alakalı bir sorun tespit edildiğinde, sorunu çözmek için nereden başlayacağımızı belirlemek kritik öneme sahiptir. Eğer sitenizin mobil uyumlu tasarlandığından eminseniz veya kullandığınız tema responsive uyumlu ise, ancak test sonucunda hala “Sayfa mobil uyumlu değil” uyarısı alıyorsanız, bu durum genellikle sayfanın temel kaynaklarının (CSS, JavaScript gibi) test sırasında yüklenememesinden kaynaklanır.
Mobil uyumluluk testi sonucunda sayfanın sol üst köşesinde sarı ünlem işaretiyle görünen Sayfa yükleme sorunları bölümüne tıklayarak hangi kaynakların yüklenemediğini görebilirsiniz. Bu, sorunun kaynağını tespit etmede ilk ve en net adımdır.
Sayfa Kısmen Olarak Yüklendi Hatası
Bu bölümde, mobil uyumluluk testi sırasında yüklenmeyen web site kaynaklarının detaylı listesini bulacaksınız. Bu kaynakların yüklenememesinin ana nedenlerinden biri, robots.txt dosyanıza eklediğiniz kısıtlamalar olabilir.
Eğer robots.txt dosyanızda aşağıdaki gibi bir kod bloğu bulunuyorsa:
User-agent: *
Disallow: /wp-content/plugins/
Disallow: /wp-content/themes/
Disallow: /css
Disallow: /assets
Bu engellemeler, Googlebot’un sitenizin stil dosyalarını ve betiklerini görmesini engelleyerek mobil görünümün doğru oluşturulamamasına yol açar. Araştırmalara göre, robots.txt dosyasında kritik stil dosyalarını engellemek, mobil görünürlük puanlarını %40’a kadar düşürebilir. Bu tür kısıtlamalardan kaçınarak, dosyaların erişimine izin vermeli ve testi tekrar başlatmalısınız. Örneğin, tüm dizinlere izin vermek için aşağıdaki düzenlemeyi yapabilirsiniz:
User-agent: *
Allow: /
Yeni test sonucunda sorunlar devam ediyorsa, “Sayfa mobil uyumlu değil” bölümündeki “Aşağıdaki sorunları düzeltin” alanında listelenen spesifik kullanılabilirlik hatalarını incelemeye odaklanmalısınız.
Temel Mobil Kullanılabilirlik Sorunları ve Çözümleri
Mobil kullanılabilirlik sorunlarının en doğru ve güncel analizi, Google Search Console’un ilgili raporları üzerinden yapılabilir. Sol menüdeki “Mobil kullanılabilirlik” sekmesi, web sitenizde devam eden veya yakın zamanda düzeltilmiş olan tüm kullanılabilirlik sorunlarını ve bu sorunların hangi sayfalarda bulunduğunu detaylıca gösterir. Web sitenizin teknik altyapısını güçlendirmek ve kullanıcı deneyimini artırmak için doğru web sitesi tasarımı uygulamak esastır.
1. Metin Okunamayacak Kadar Küçük
Bu, en sık karşılaşılan mobil kullanılabilirlik hatasıdır. Eğer metinleriniz küçük ekranlarda yeterince büyük değilse ve mobil kullanıcıların okuyabilmek için ekranı yakınlaştırması gerekiyorsa, Google bunu bir kullanılabilirlik sorunu olarak işaretler. Google’ın önerdiği minimum okunabilir metin boyutu genellikle 16 pikseldir.
Sorunun Çözümü:
Sorunun temel nedeni sayfalardaki yazıların font-size değeridir. Hatanın kaynağı olan bölümleri tespit edin; bu alanlar paragraf metinleri, yorumlardaki kullanıcı adları, yazar bilgileri veya özel olarak tanımlanmış id/class'lar olabilir. İlgili alanların font-size değeri en az 15px veya 1.2em olarak ayarlanmalıdır.
p { font-size:15px; margin: 0 0 20px; line-height: 1.7;}
Ayrıca, H başlıkları çok uzun olup mobilde satıra sığmadığında birbirine çok yakın görünebilir. Bu durumda ilgili başlık, paragraf veya ögeye satır yüksekliğini ayarlayan CSS kodunu eklemek gerekir:
h2 {line-height: 1.7; veya line-height: 30px; } p {line-height: 1.4; veya line-height: 15px; }
2. Tıklanabilir Öğeler Birbirine Çok Yakın
Mobil cihazlarda parmaklar, fare imleçlerine göre daha büyük ve daha az hassastır. Google, linklerin, butonların ve ikonların birbirine olan yakınlığını ve boyutunu mobil uyumluluk faktörü olarak değerlendirir. Eğer bir bağlantıya parmakla kolayca dokunulamayacağı düşünülürse, bu bir mobil kullanılabilirlik sorunu olarak raporlanır. Sektör standartları, tıklanabilir alanların hedef boyutunun en az 48x48 piksel olması gerektiğini belirtmektedir.
Sorunun Çözümü:
Bu sorunu çözmek için en iyi yöntem, kendi mobil cihazınızla siteyi test etmektir. Yan yana duran linkler, menü öğeleri veya sosyal medya ikonları arasındaki boşluğun az olması yaygın bir nedendir. Çözüm olarak, ilgili id veya class'a margin-right:5px veya daha büyük bir değer ekleyebilirsiniz. Tıklanabilir ikonlar yeterince büyük değilse, genişlik ve yükseklik değerlerini optimize edin.
.ornek {height: 15px; width: 15px;}
.ornek2 {margin-right:10px}
3. İçerik Ekrana Göre Daha Geniştir
Bu hata, sayfa içeriğinin cihaz ekranının genişliğini aşarak yan yana kaydırma (horizontal scrolling) gerektirmesine neden olduğunda ortaya çıkar. Bu durum, kullanıcı deneyimini ciddi şekilde bozar ve Google tarafından mobil kullanılabilirlik hatası olarak işaretlenir. Bu taşma genellikle sabit genişlikli görsellerden veya aşırı negatif kenar boşluklarından kaynaklanır.
Sorunun Çözümü:
Taşan alanları tespit etmek esastır. Hata aldığınız sayfayı %300 oranına kadar yakınlaştırarak ekrana sığmayan bölümleri kontrol edin. Sabit boyutlandırılmış görseller bu hatanın başlıca kaynağı olabilir. Eğer bir görselde taşma tespit ederseniz, görselin class alanına responsive kodu eklediğinizden emin olun. Bootstrap altyapısı kullanıyorsanız, class=”img-fluid” eklemesi bu sorunu çözebilir.
.img-fluid {max-width: 100%; height: auto;}
Eğer taşma bir id veya class içinde ise ve CSS kodunda negatif padding veya margin değerleri varsa, bu değerleri optimize etmeyi deneyin. Sorun devam ederse, taşıma yapan öğeye genel bir gizleme kuralı ekleyebilirsiniz:
.ornek {overflow:hidden}
4. Görünüm Ayarlanmadı (Viewport Meta Etiketi Eksikliği)
Bu hata, web sayfasının genişlik oranlarının doğru yapılandırılmadığını gösterir. Web sitesinin viewport meta etiketinin doğru ayarlanmaması durumunda, kullanıcılar içeriği görüntülemek için ekranı manuel olarak yakınlaştırmak zorunda kalır. Google, bu yakınlaştırma ihtiyacını tespit ettiğinde bu hatayı raporlar.
Sorunun Çözümü:
Görünüm ayarlanmadı hatasını çözmek için, web sitenizin <head> etiketinin en üst bölümüne aşağıdaki meta etiketi eklenmelidir. Bu etiket, tarayıcıya sayfa genişliğini cihazın kendi genişliğiyle eşleştirmesini söyler ve başlangıç ölçeğini 1:1 olarak ayarlar.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Search Console URL Denetimi ile Değişiklikleri Bildirme
Tüm bu hataları düzelttikten sonra, Google’a bu düzeltmeleri bildirme aşamasına geçmek gerekir. Öncelikle, düzelttiğiniz hatanın gerçekten giderildiğinden emin olmalısınız. Bunun için Google Search Console’daki sol menüden URL denetimi alanına tıklayarak ilgili URL’leri analiz edin.
Analiz sonucunda gördüğünüz durum, Google’ın en son taradığı zamanki veriyi yansıtır. Hatanın gerçekten düzelip düzelmediğini anlamak için sağ üst bölümdeki “CANLI URL’Yİ TEST ET” butonuna tıklayın.
Canlı URL testi başarılı olursa ve herhangi bir sorun raporlanmazsa, “DİZİNE EKLENMESİNİ İSTE” alanına tıklayın. Ardından sol menüden Mobil Kullanılabilirlik bölümüne giderek düzelttiğiniz sorunları seçin ve “Doğrulamayı Başlat” butonuna tıklayarak süreci tamamlayın.
Webmaster olarak üzerinize düşen görevi tamamladınız. Bu hataları sürekli alıyorsanız, düzeltmeye devam etmek sıralama ve kullanıcı deneyimi açısından en doğru yaklaşımdır. Ancak siteniz Google mobil uyumlu testinden sorunsuz geçiyorsa, endişelenmek yerine içerik kalitesine odaklanabilirsiniz. Benzer sorunları Yandex Webmaster aracında yaşıyorsanız, ilgili rehberleri incelemenizi tavsiye ederiz.
Yandex Webmaster Aracı (2021 Kapsamlı Rehber)
Web sitenizdeki mobil kullanılabilirlik sorunları makalemizin sonuna geldik. Mobil kullanılabilirlik sorunlarını nasıl çözeceğinizi bilmiyorsanız veya teknik konularda uzman desteği arıyorsanız, web site adresinizi yorumlarda belirterek sorunlarınızı bize iletebilirsiniz.
