Google, Search Console’daki Mobil Kullanılabilirlik raporunu ve Mobil Uyumluluk Testi aracını 1 Aralık 2023’te kullanımdan kaldırdı. Ancak mobil kullanılabilirlik önemini yitirmedi: Google sayfaları mobil öncelikli dizine ekleme ile, yani mobil sürümlerine bakarak değerlendiriyor ve kullanıcıların büyük bir kısmı içeriklere mobil cihazlar üzerinden erişiyor. 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. Günümüzde küresel web trafiğinin büyük bölümü 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ılıyordu; bu araç ve Search Console’daki Mobil Kullanılabilirlik raporu 1 Aralık 2023’te kaldırıldı. Google bugün mobil kullanılabilirliği test etmek için Chrome’un Lighthouse aracını öneriyor. Sayfayı Chrome’da açıp Geliştirici Araçları’ndaki Lighthouse sekmesinden cihaz olarak “Mobil”i seçerek denetim çalıştırabilir ya da aynı altyapıyı kullanan PageSpeed Insights’a sayfa adresini girebilirsiniz. Lighthouse 12 ve sonraki sürümlerde görünüm (viewport) ve okunabilir yazı boyutu kontrolleri “En İyi Uygulamalar”, dokunma hedeflerinin boyutu ise “Erişilebilirlik” bölümünde raporlanıyor. Sayfanın Googlebot tarafından akıllı telefonda nasıl görüldüğünü ise Search Console’daki URL Denetimi aracında “Canlı URL’yi test et” ile alınan ekran görüntüsünden kontrol edebilirsiniz.
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 Lighthouse raporunda ya da URL Denetimi’nin ekran görüntüsünde sayfa mobilde bozuk görünüyorsa, bu durum genellikle sayfanın temel kaynaklarının (CSS, JavaScript gibi) Googlebot tarafından yüklenememesinden kaynaklanır. Eski Mobil Uyumluluk Testi bu durumu “Sayfa mobil uyumlu değil” uyarısıyla gösteriyordu.
Yukarıdaki ekran görüntüsü artık kullanılmayan Mobil Uyumluluk Testi’ne ait; o araçta yüklenemeyen kaynaklar Sayfa yükleme sorunları bölümünde listeleniyordu. Bugün aynı bilgiyi Search Console’daki URL Denetimi’nde “Canlı URL’yi test et” sonucunda, test edilen sayfanın ayrıntılarındaki sayfa kaynakları listesinden görebilirsiniz. Bu, sorunun kaynağını tespit etmede ilk ve en net adımdır.
Sayfa Kısmen Olarak Yüklendi Hatası
Test sırasında web sitenizin bazı kaynakları yüklenemiyorsa, bunun 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. Google da sayfaların doğru değerlendirilebilmesi için CSS ve JavaScript dosyalarının taranmasına izin verilmesini ister. 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: /
Kaynaklar yüklendiği hâlde sorunlar devam ediyorsa, Lighthouse raporunda listelenen ve aşağıda açıkladığımız temel kullanılabilirlik sorunlarını incelemeye odaklanmalısınız.
Temel Mobil Kullanılabilirlik Sorunları ve Çözümleri
Aşağıdaki başlıklar, eski Google Search Console Mobil Kullanılabilirlik raporunda en sık görülen hata adlarıdır (aşağıdaki görsel bu rapora aittir). Rapor kaldırılmış olsa da bu sorunlar bugün de mobil kullanıcı deneyimini bozar ve Lighthouse denetiminde benzer uyarılarla karşınıza çıkar. 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, bu bir kullanılabilirlik sorunudur; Lighthouse bu durumu okunabilir yazı boyutu kontrolüyle raporlar. 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 16px (1rem) olarak ayarlanmalıdır. Yazı tipi boyutu dışında stil dosyalarının arama motoru performansını nasıl etkilediğini merak ediyorsanız CSS ile SEO performansını artırma yöntemleri konusuna göz atabilirsiniz.
p { font-size: 16px; 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.3; } p { line-height: 1.6; }
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. Linklerin, butonların ve ikonların birbirine olan yakınlığı ve boyutu, mobil kullanılabilirliğin temel ölçütlerindendir. Bir bağlantıya parmakla kolayca dokunulamıyorsa bu bir mobil kullanılabilirlik sorunudur; eski raporda “Tıklanabilir öğeler birbirine çok yakın” hatası olarak görünürdü. Google’ın Lighthouse belgelerine göre 48x48 piksel boyutundaki dokunma hedefleri bu kontrolden her zaman geçer.
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 { min-height: 48px; min-width: 48px; }
.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; eski Mobil Kullanılabilirlik raporu da bunu hata olarak işaretliyordu. 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. Lighthouse, viewport meta etiketi eksik olduğunda bunu “En İyi Uygulamalar” bölümünde uyarı olarak gösterir.
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 ekran görüntüsünde sayfa mobilde düzgün görünüyorsa, “DİZİNE EKLENMESİNİ İSTE” alanına tıklayın. Mobil Kullanılabilirlik raporu kaldırıldığı için artık ayrıca bir “Doğrulamayı Başlat” adımı yoktur; Google sayfayı yeniden taradığında güncel hâlini değerlendirir.
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 Lighthouse denetiminden ve URL Denetimi’nin canlı testinden sorunsuz geçiyorsa, endişelenmek yerine içerik kalitesine odaklanabilirsiniz. Benzer sorunları Yandex Webmaster aracında yaşıyorsanız aşağıdaki rehberi, dizine ekleme sorunları için ise Google index hataları ile ilgili rehberimizi incelemenizi tavsiye ederiz.
Yandex Webmaster Aracı (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 adresinizle birlikte sorunlarınızı iletişim sayfamızdan bize iletebilirsiniz.
