Web Sitenizdeki Mobil Kullanılabilirlik Sorunları

Mobil Kullanılabilirlik Hataları

Web sitenizi Search Console’a eklediyseniz büyük ihtimalle Gmail adresinize gelen; siteniz için yeni mobil kullanılabilirlik sorunları tespit edildi maillerine alışık olmalısınız. Bu yazımızda mobil kullanılabilirlik nedir? Mobil uyumluluk testi nasıl yapılır? Mobil kullanılabilirlik sorunları nelerdir ve nasıl çözülür sorularının cevaplarını bulacaksınız.

Mobil Kullanılabilirlik Nedir?

Cep telefonu ve tablet gibi mobil cihazların kullanımının artmasıyla beraber, Google gibi arama motorları, mobil uyumlu İnternet deneyimi sunan siteleri ödüllendirerek sıralamada öncelik sunmaktadır. Mobil kullanılabilirlik sağlamak için web site geliştiricileri, web sitelerini duyarlı, responsive tasarım ya da mobil site versiyonu ile hazırladılar.

Mobil Uyumluluk Testi

Web sitemizin mobil uyumlu olup olmadığını denetlemek için Google’ın Mobile Friendly Test aracını kullanabilirsiniz. Bu araç ile web sitenizin giriş sayfasını (anasayfa) veya diğer sayfalarınızın linklerini taratarak test edebilirsiniz. Mobil uyumluluk testi sonrasında sayfa mobil uyumlu değil uyarısı alıyorsanız, aşağıdaki mobil kullanılabilirlik sorunlarını inceleyelim.

Sayfa Mobil Uyumlu Değil Hatası

Mobil kullanılabilirlik ile alakalı bir sorun tespit edildiğinde sorunu çözmek için ilk adımımız işe nereden başlayacağımıza karar vermek olmalıdır.

Sayfa Mobil Uyumlu Değil

Eğer web sitenizin mobil uyumlu olarak tasarlandığından eminseniz, ya da satın aldığınız tema responsive uyumlu ise, ancak yaptığınız mobil uyumluluk testi sonucunda “Sayfa mobil uyumlu değil” uyarısı alıyorsanız muhtemelen css, js gibi tema kaynakları test sırasında yüklenmiyor olabilir. Mobil uyumluluk testi sonucunda sayfada sol üstte sarı ünlem şeklinde görünen Sayfa yükleme sorunları bölüne tıklayarak hangi kaynakların yüklenmediği görebilirsiniz.

Sayfa Kısmı Olarak Yüklendi Hatası

Sayfa yükleme bilgileri olarak geçen bu sayfada, mobil uyumluluk testi sırasında yüklenmeyen web site kaynaklarının listesini bulacaksınız.

Sayfa Kısmi Olarak Yüklendi

Bu kaynakların mobil uyumluluk testi sırasında yüklenmemesinin birçok sebebi olabilir. Bunlardan en önemlisi robots.txt dosyanıza eklediğiniz bazı klasörlerin veya dizinlerin engellenmiş olması olabilir.

User-agent: *
Disallow: /wp-content/plugins/
Disallow: /wp-content/themes/
Disallow: /css
Disallow: /assets

Robots.txt dosyanızda yukarıdaki örnekteki gibi bir kod var ise, bunlardan kurtulun ve aşağıdaki gibi güncelleyip mobil testi tekrar başlatın.

User-agent: *
Allow: /

Yeni test sonucunda mobil uyumluluk sorunları hala devam ediyorsa, yukarıdaki “Sayfa mobil uyumlu değil” bölümündeki görselde görünen “Aşağıdaki sorunları düzeltin” olarak geçen alandaki mobil kullanılabilirlik sorunlarını inceleyelim.

Mobil Kullanılabilirlik Sorunları

Mobil kullanılabilirlik ile ilgili sorunların en iyi analizi yapıp test edeceğimiz araç Google Search Console’dur. Sol bölümdeki “Mobil kullanılabilirlik” sekmesine tıklayarak, web sitenizde devam eden veya düzeltilmiş tüm kullanılabilirlik sorunlarını ve bu sorunların hangi sayfalarda olduğunu bulabilirsiniz. Şimdi bu mobil kullanılabilirlik sorunlarını ve çözümlerini inceleyelim.

Searh Console Kullanılabilirlik Sorunları

1. Metin okunamayacak kadar küçük

Metin okunmayacak kadar küçük hatası en yaygın görülen hatadır. Metniniz küçük ekranlarda okunabilecek kadar büyük olmalıdır. Google, sayfalarınızın yazı boyutunun okunamayacak kadar küçük olduğunu ve mobil kullanıcılarının bu okuyabilmek için ekranı yakınlaştırılmasının gerektirdiğini düşünüyorsa bu durumu bir mobil kullanılabilirlik sorunu olarak işaretlemektedir.

Sorunun Çözümü:

Sorunun nedeni, sayfalardaki yazıların font-size’ı ile alakalıdır ve yapmamız gereken sayfanın hangi bölümündeki yazı boyutunun bu hataya sebep olduğunu tespit etmektir.

İncelemeniz gereken bölümler paragraf, varsa yorum alanlarındaki kullanıcı adları, yorum bölümleri, varsa yazar adı, varsa tarih bölümleri, varsa özel olarak tanımlanmış id ve class bölümleri kontrol edilmelidir.

İlgili alanların font-size: değeri en az 15px ya da 1.2em olarak ayarlanmadır.

p { font-size:15px; margin: 0 0 20px; line-height: 1.7;}

Ayrıca bazı H başlıklarınız çok uzun olabilir ve mobilde satıra sığmayan başlıklar alt satıra geçtiğinde birbirine çok yakın olabilir. Bu durumda ilgili başlık, paragraf veya ögeye aşağıdaki css kodunu ekleyin;

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

Parmaklarımız fare işaretçilerine göre daha çok yer kaplar ve daha az hassasiyete sahiptir. Google, linklerinizin birbirine ne kadar yakın olduğunu inceler ve bu linklerin boyutunu ve yakınlığını mobil uyumluluk faktörü olarak niteler. Eğer Google bir kullanıcının herhangi bir bağlantıya parmağıyla kolayca dokunamayacağını düşünürse bu durumu bir mobil kullanılabilirlik sorunu olarak işaretler.

Sorunun Çözümü:

Bu sorunun çözümünde cep telefonlarınızdan yararlanarak kendiniz test edebilirsiniz. Eğer sitenizin bazı bölümlerini tıklarken zorluk çekiyorsanız bu alanları geliştirmeye çalışın. Genellikle yan yana olan linklerin, menülerin, butonların, varsa sosyal medya ikonlarının birbiri arasındaki boşluğun az olmasından kaynaklanır.

Bu sorunun çözümünde ilgili id veya class’a margin-right:5px veya daha fazla değeri vererek çözebilirsiniz. Eğer tıklanabilir ikonlarınız ya da butonlarınız parmakla dokunmak için uygun büyüklükte değilse, genişlik ve yükseklik değerlerini optimize edin.

.ornek {height: 15pxwidth: 15px;}

.ornek2 {margin-right:10px}

Yukarıdaki css kodu sadece örnektir, fikir vermesi amacıyla kullanılmıştır.

3. İçerik ekrandan daha geniştir

İçerik ekrandan daha geniştir hatasının nedeni genellikle sayfanın ekrandan taşmasıdır. Kullanıcılarınızın içeriği görüntüleyebilmek için sayfayı yanlara doğru kaydırmasına neden olur. Google eğer böyle bir davranış fark ederse bu durumu yine mobil kullanılabilirlik sorunu olarak işaretler. Hatta bazen her şeyin doğru görüntülendiği durumlarda dahi Google bu sorunu karşımıza çıkarabiliyor.

Sorunun Çözümü:

Bu sorunun çözümü için sayfadaki taşan alanları tespit etmeliyiz. Genellikle tek bir sayfada bu hatayı alıyorsanız ve wordpress kullanıyorsanız header veya footer gibi her sayfada bulunan bölümlerden kaynaklanmaz. Ancak ortak alanları sabit bir kaynaktan çağırmıyorsanız, yine de ilgili sayfanın header ve footer alanında taşma olup olmadığını, hata olup olmadığını kontrol edin.

İçerik ekrandan daha geniş hatası çoğu zaman content alanındaki içeriklerden kaynaklanır. Bunun için hata aldığınız sayfayı CTRL + ile %300 oranına kadar büyütün. Eğer bu görünümde ekrana sığmayan bir bölüm görüyorsanız. Bu alanları optimize edin. Genellikle image’lerin sabit bir boyutta eklenmiş olması bu hatayı getiriyor olabilir.

Taşmayı bir id veya class’da tespit ederseniz bu alanların css kodunda (-) eksi padding veya margin değeri olan bölümler varsa bu alanları optimize etmeyi deneyin. Taşma düzelmezse aşağıdaki kodu CSS kaynağına ekleyebilirsiniz.

.ornek {overflow:hidden}

Taşma eğer bir görselde ise, görselin classında responsive kodu ekli olduğundan emin olun. Eğer bootstrap alt yapısı kullanıyorsanız class bölümüne aşağıdaki kodu ekleyebilirsiniz.

class=”img-fluid”

Bu kod aşağıdaki anlama gelir.

.img-fluid {max-width: 100%; height: auto;}

4. Görünüm ayarlanmadı

Görünüm ayarlanmadı hatası, kullanıcıların görüntülediği bir internet sayfasının genişlik oranları ile ilgilidir. Web sitemizin görünüm meta etiketini doğru yapılandırmazsak, kullanıcılar içerikleri görüntülemek için ekranı yakınlaştırmak zorunda kalırlar. Google sayfanın görünümünü ve ölçeklendirmesini bu şekilde tespit ederse bu hata ile karşılaşırsınız.

Sorunun Çözümü:

Görünüm ayarlanmadı hatası çözümü için web sitenizin header alanının en üst bölümüne aşağıdaki kodu ekleyerek bu sorunu çözebilirsiniz.

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Search Console URL Denetimi

Şimdi tüm bu hataları düzelttiysek şimdi düzelttiğimiz hatayı Google’a bildirelim. Önce sorunu gerçekten düzelttik mi bunu kontrol edelim. Google Search Console‘daki sol bölümden URL denetimi alanına tıklayıp, ilgili URL’leri analiz edelim.

Search Console Url Denetimi

Analiz sonucunda karşınıza çıkan sonuç sizin Google’daki mevcut durumunuzu ifade eder. Yani sorun düzelmiş olsa bile henüz Google bu sayfayı incelemediği için size mevcut durumu gösterir. Hatanın düzelip düzelmediğini anlamak için sağ üst bölümdeki “CANLI URL’Yİ TEST ET” butonuna tıklayın.

Search Console Denetimi

Eğer canlı Url testi sonucunda herhangi bir sorun almazsanız “DİZİNE EKLENMESİNİ İSTE” alanına tıklayın. Daha sonra sol menüden Mobil Kullanılabilirlik bölümüne gidin ve düzelttiğiniz sorunları seçerek Doğrulamayı Başlat butonuna tıklayın!

Search Console Url Denetimi

Artık mobil kullanılabilirlik sorunlarıyla ilgili, biz webmasterlar olarak üzerimize düşen görevi yapmış olduk. Bu hataları sürekli olarak ve zaman içinde almaya devam ediyorsanız, bu sorunları düzeltmeye çalışmak en iyisidir. Ancak siteniz Google mobil uyumlu testten geçiyorsa çok fazla endişelenmenize gerek olmayabilir.

Sorunları nasıl çözeceğinizi bilmiyorsanız, web site adresinizi yorumlardan yazarak sorunlarınızı bize sorabilirsiniz.

İlgili Konular

  1. Gerçekten harika bir paylaşım olmuş, sitemde içerik ekrandan geniştir hatası alıyordum, overflow:hidden css kodunu ekledikten sonra düzeldi. Teşekkürler

  2. Merhaba,

    Bende hata görünüyor ancak tekrar test yaptığımda uyumlu diyor. Sürekli tarama başlatıyorum değişiklikler uyguluyorum ancak sürekli hata artıyor. Hataları kontrol ettiğimde tekrar uyumlu diyor anlamadım ben bu işi.

        1. Anasayfanız mobil uyumlu görünüyor herhangi bir hata göremedik. Search Console’da hata aldığınız kapsam sorunu ve mobil kullanılabilirlik sorunu var mı?

      1. Birden çok sayfamda aynı problemi yaşıyorum (neredeyse %85) ve hepsi litespeed cache eklentisi kullandıktan sonraya denk geliyor. Ancak ilgili eklentiyi kaldırdıktan sonra 4-5 gün düzelme olmadı. En sonunda robots.txt dosyasını iyice boşalttım şuan işlemler yavaş yavaş başarılı olmaya başladı. Cevabınız için teşekkürler. Sorun devam ederse sizinle tekrar iletişime geçebilirim 🙂

  3. Merhabalar tekno365.com adresim için bu konulara takıldım. İçerik ekrandan büyük hatası ve tıklanabilir öğeler birbirine çok yakın hatası alıyorum çözemedim bu hataları çünkü tema responsive ve hiçbir noktada ekrandan taşma falan yok sizin varmı bir öneriniz.

    1. Merhaba,

      öncelikle içerik ekrandan büyük ve tıklanabilir ögeler hatasını hangi sayfalarda alıyorsunuz?
      Biz sitenizi genel olarak inceledik ve bazı notlar çıkardık;

      + mobil versiyonda sol altta bulunan mor butona “margin-right:5px” ekleyerek sağ tarafdan itin.
      + gönderilerdeki turuncu kutu olarak görünen etiketlerin arasına css ile boşluk ekleyin, etiketler birbirine yakın görünüyor.

      Bunları düzelttikten sonra, Search Consol’dan tekrar gönderin ve sonucu bize bildirin.

  4. Merhabalar sitemde mobil kullanılabilirlik hataları alıyorum.
    1-) İçerik ekrandan geniş
    2-)Tıklanabilir öğeler birbirne çok yakın
    3-) metin okunamayacak kadar küçük
    ama böyle bir sorunun neden olduğunu bilmiyorum çünkü telefondan girdiğimde böyle bir hata göremiyorum.
    yardımcı olabilirseniz çok sevinirim şimdiden teşşekür ediyorum.

  5. Aşağıdaki sorunları nasıl çözeceğimi bilemiyorum.. Bu konuda platinmarketten hizmet alamadım..İlginize şimdiden teşekkürler
    sitem genel olarak mobil uyumlu ancak
    1- Tıklanabilir ögeler birbirine çok yakın
    2-görünüm device-weidht olarak ayarlanmadı
    3- metin okunamayacak kadar küçük

    1. Orhan Bey merhaba,
      Sitenizin kapsamlı incelenebilmesi için sağ bölümde bağlantısı bulunan Facebook SEO kulübümüze katılıp, aldığınız hataların Search Console görüntülerini de ekleyerek, gruptan sorabilir misiniz?

  6. Merhaba, son günlerde benim sitemde de mobil görünürlük sorunu olmaya başladı. Ancak bir çok yazı okuyup deneme yapmama rağmen düzelmedi. Acaba bu konuda bana profesyonel olarak yardımcı olabilir misiniz?

  7. Google search console mobil kullanılabilirlik hatası,
    Metin okunamayacak kadar küçük hatası,
    Tıklanabilir öğeler birbirine çok yakın hatası,
    İçerik, ekrandan geniş hatası,
    yukarıdaki yazan sorunarımın çözümünü tek sayfada bulabilmek güzel 🙂 teşekkürler kukumavnet çok faydalı bir paylaşım olmuş başkalarınada fayda olması adına yorum satırında sorunları belirttim benim bulduğum gibi Google ye sorunlarını yazınca şak diye bulabilsinler 🙂 tekrar teşekkürler

  8. Sizin söylediğiniz yöntemi izleyerek gerekli düzenleme yapılınca sorun çözülüyor ancak sitenin yazıları çok büyük boyutta oluyor. Bunu nasıl çözücem yardımcı olur musunuz?

    1. Sefa Bey Merhaba,
      Büyük dediğiniz ilgili sayfanızı incelediğimizde paragraf için font-size:20px olarak görünüyor. Paragrafı bu kadar büyük kullanmanıza gerek yok, 15px ayarlamanız yeterli olacaktır.

      1. Peki 15 ayarladığımız zaman mobil olarak sorun veriyor Google, bu sorun neyden kaynaklanıyor olabilir. Başlıkların kaç olması gerekiyor? Link verilmiş başlıklar kaç olması gerekiyor?

  9. hocam müsaitseniz benim sitem içinde bakabilir misiniz içerik yakın hatası alıyorum fakat%300 yapsam da uyumlu görünüyor yardımcı olursanız çok sevinirim saygılar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir