Home Bilgi

Google search console önemli web verilerinde bulunan cls sorunu 0,25 mobil veya masaüstü eşiğinden fazla sorununun çözümü.

Uzun süredir üzerinde çalıştığım ve tüm kaynakları kontrol ettikten sonra başıma gelen bu sorunu aştığım yöntemi sizlerle paylaşıyorum.

Bir blog siteniz var bu site sürekli olarak cls sorunu ile karşılaşıyorsanız öncelikle yapmanız gereken sitenizin kodlarında düzenlemeler yapmak. Hatalı yazılmış HTML kodları cls sorununa yol açıyor. Eğer ki mobil için veriyorsa bu uyarı sitenizin mobil css kodlarını çok iyi ayarlamanız gerekli ki sağa sola kaymalar yapmamalısınız masaüstü için veriyorsa da doğru html kodları kullanmalısınız.

Bu sorunla karşılaştım fazla kaynak bulamadım google'ın önerdiği dökümanı inceledim fazla bir ingilizcem olmadığı için çeviri yapmakla bile uğraşmadım. Bir blog sitem olduğu için uyarıda gösterilen linkler konularla alakalı idi ve sürekli konulara girip bakıyordum hem mobilde hem masaüstünde. Daha sonra temamda ki eksikleri fark ettim ve şuan kullandığım temayı kodladım.. Bu temayı çok temiz bir html düzeni ile yazdım masaüstü ve mobil versiyonları sorunsuz oldu.

Mobilde kayma sorunlarım olduğu temadan bu temaya geçtim fakat baktım ki önemli web verilerinde değişiklik yoktu. Bende konular üstünde yoğunlaştım 150 ye yakın yazımı tek tek açtım uzun sürdü fakat yazı içerisinde yaptığım tüm kodlama hataları tokat gibi yüzüme vurmuştu. İndir butonu kullandığım konular olmuş fakat artık kullanmadığım için silinen css kodları yüzünden o indir butonlarım görselsiz saçma sapan bir şeye dönmüş.

Her bir paragrafa p kodu ekledim img kodlarında bulunan border="0" gibi gereksiz kodları sildim. adete şiir yazar gibi konuların HTML kodlarını düzenledim. Daha sonra CLS sorunları git gide azaldı ve artık sıfıra düştü. Sorun şuradaymış onu çözdüm. CLS eşiğinden fazla hatasının çözümü bize gösterilen link içerisinde yaptığımız basit css ve html hataları ile alakalı.

Son söz bu tür cls hatası alan arkadaşlar sitelerini yorum bırakabilir kontrol sağlayabilirim. Önermelerde bulunabilirim.

13 yorum

  1. Merhaba.. Blogger kullanıyorum. Makalenizi keyifle okudum ancak biraz uzman olmak gerekli sanırım bu ayarları yapmak için. Sitemin örnek bir linkini bırakıyorum. Site hızım oldukça iyi 90 üzerinde ancak bu cls sorunu webmaster tols da hata veriyor. bakmanız ve öneride bulunmanız mümkün mü. Bu Sorun bir çok kişinin sorunu galiba. Şimdiden Teşekkür ederim. https://www.vipdizi.net/2021/07/mevlana-dizisinde-kimler-oynuyor.html

    YanıtlaSil
    Yanıtlar
    1. Merhaba VipDizi,
      Sitenize göz gezdirdim sanırım genel olarak flex bir sayfa yapınız var çok güzel fakat içeriklerinizde table etiketi kullanılıyor bunları düzenlemeniz gerekli urlleri kontrol etmeniz gerekmektedir. Düzenlemeleri sağladıktan sonra tekrar kontrol ediniz.

      Sil
  2. https://www.superalem.org bakabilirmiiniz rica etsem.

    YanıtlaSil
    Yanıtlar
    1. Merhaba Caffito,
      CLS hatası aldığın search console ekranında hatalı url leri bir gezmen gerekiyor buralarda sorunlar olabilir ama genel olarak temiz gördüm siteni mobil tasarımda da problem yok fakat konuların içerisinde resimlere geldiğimizde style etiketinin boyutu fazla göründü gözüme div id="attachment_971" class="wp-caption aligncenter" style="width: 1010px;" bu kodun css ile % li biçimde verilmesi daha makul olacaktır. sanırım kaymalar bundan olabilir ve bunun gibi problemleri dikkatle incelemelisin.Sitenizde iframe varsa onları kaldırmanızı öneririm iyi çalışmalar.

      Sil
  3. selamlar bende bu hatayı alıyorum yardımcı olabilirmisiniz.

    www.dekortasi.com

    YanıtlaSil
    Yanıtlar
    1. Merhaba IDF;
      Öncelikle sitenizi çok beğendim tebrikler. Fakat kodlama kısmında bir kaç eksiklikler mevcut. Anasayfanızda en çok satanlar bölümünde ki ürünleri mobilde listelerken sağ tarafa bir taşma görüyorum bunu siz telefonda görmüyor olabilirsiniz fakat margin etiketleri olarak kodlama yapısında ufak yüzdeli düzenlemeler gerekiyor. Ayrıca footer da bulunan table etiketini kaldırmanızı şiddetle tabsiye ediyorum bu sizin mobil kayma sorunlarınıza sebep olmaktadır. İçeriklerinizde bulunan page-header alanı pek kullanışlı durmuyor bunu daha kullanışlı ve güzel kodlamayla düzeltmenizi öneririm. Bu şekilde düzenlemeleri bitirdikten sonra yeniden bakmak isterim iyi çalışmalar.

      Sil
  4. merhabalar , bilgikripto.com web sitemde acayip cls sorunu var çözemedim bir bakmanız mümkün müdür ?

    YanıtlaSil
    Yanıtlar
    1. Merhaba bilgikripto;
      Siteni biraz inceledim öncelikle anasayfanda ki reklam kodlarına göz gezdirmen gerekiyor gereksiz iframe kodlarını kaldır div style="position:absolute; height:100%; width:100%; z-index:1;" diye saçma bir kodlama yapısı mevcut. Bu tarz kodları bulundurma. İçeriğinde ise durum pek parlak değil tüm içeriğini otur tekrar gözden geçir fazladan yazılmış style kodlarını kaldır genelde reklam veya fotoğraflarda bulunan style margin kodları senin cls sorunların olarak göze çarpıyor.
      Mümkünde içerik yazarken sade div class="" /div ve p veya h etiketlerinin dışına çıkma class="conzilla" reklamların veya fotoğrafların biraz sıkıntılı duruyor. Bu yerleri düzenledikten sonra tekrar bakmak isterim.

      Sil
  5. Hocam merhaba. Bende de CLS sorunu mevcut.
    www.bilgilendinburada.com web site adresim. Sorunun ne olduğu ile ilgili beni bilgilendirirseniz çok memnun kalırım.

    YanıtlaSil
    Yanıtlar
    1. Merhaba admin,
      Websiteni inceledim. Bir kaç hata yakaladım fakat kesin ve net bundandır diyemiyorum. Lütfen bunları düzelt. Bütün içeriklerinde resimler var ve bu resimlerde style margin-left 1em margin-right 1em kodları eklenmiş lütfen bu kodları kaldır. İçeriklerin yazılarında style text-align left veya font-size: medium; veya font family helvetica kodları mevcut. Bunları böyle eklemene gerek yok bunları kaldırmanı öneririm.
      Anasayfanda bulunan BU YAYINLARI BEĞENEBILIRSINIZ,Gönderilerden Seçmeler gibi h3 başlıkları alt hizaya orantısız kaymaktadır bu tür kaymayın önüne geçmeniz gerekiyor.
      Mümkünse orjinal tema kullanıp footer linklerini ortadan kaldırın.
      Sayfa aralarında önceki ve sonraki butonların mobilde orantısız durmaktadır.
      Sanırım gereksiz ve şifreli bir kaç javascript kodları bulunmakta bunları da bildiğiniz bir şekilde kodlama yaparak düzeltmeniz gerekir.

      Sil
  6. merhaba,

    makalenizi okudum fakat özel script kullandığım için çözemedim. Örnek URLM: https://mermekanik.com/urun/68/grp-su-depolari sizde inceleybilirmisiniz?

    YanıtlaSil
  7. Merhabalar , Çok teşekkür ederim. Sade ve öz anlatımla konuya tam 12 ' den değinmişsiniz. Geoit isimli bir tema kullanmaktayım ve Masaüstü kısmında CLS 2.5 dan fazla uyarısı ile karşılaşmaktayım. Ne gibi aksiyonlar alacağımı tema üzerinde tam billmiyorum. Websitem : https://teknosarmal.com
    teşekkür ederim.

    YanıtlaSil

Konu hakkında yorumlarınızı bekliyorum teşekkürler.
Konunun alıntı veya yasal olmayan bir durum arz ettiğini düşünüyorsanız iletişim yolu ile bize ulaşarak bildirebilirsiniz hak ihlali durumlarında 3 iş günü içerisinde konu kaldırılacaktır.
Dipnot...!
Kırık ve eksik linki yorum olarak bildirin konu 24 saat içerisinde düzenlenecektir.

Takip edebileceğiniz bağlantılar

Facebook Twitter Linkedin