Çok yakın tıklanabilen “öğeler” nasıl düzeltilir “(3 yöntem)

Çözülmemiş hücresel kullanım sorununun web sitenizin trafiği üzerinde önemli bir etkisi olabilir. Google arama konsolu tarafından uyarılabilecek yaygın sorunlar, “birbirine çok yakın tıklanabilecek öğeler” hatalarıdır, bu da sitenizin hücresel kullanıcılar tarafından gezinmesi karmaşık olduğu anlamına gelebilir.
Ücretsiz demoyu deneyin
4,32 milyardan fazla insan mobil cihazlarından internete erişiyor. Bu nedenle, mümkün olan en kısa sürede tıklanabilecek bu öğenin hatalarını çözmek çok önemlidir. Neyse ki, bunu yapmanın ve web sitenizi daha hücresel dostu hale getirmenin birkaç yolu vardır.
Bu makalede, “birbirine çok yakın tıklanabilecek öğeler” ile ne anlama geldiğini açıklayacağız, neden olduğunu tartışacağız ve bunu düzeltmek için kullanabileceğiniz üç yöntemle size rehberlik edeceğiz. Ayrıca “içeriğin ekrandan daha geniş olduğunu” ve nasıl üstesinden gelebileceğinizi de açıklayacağız. Hadi çalışalım!
“Çok yakın tıklanabilecek öğe öğesi” nedir? Kısacası, hücresel kullanım hataları, WordPress sitenizi erişilemez hale getirebilir ve hücresel kullanıcıların gezinmesi için daha zorlayıcı hale getirebilir. Sitenizi test etmek için Google Arama Konsolu Hücresel Kullanım Raporunu kullanabilirsiniz.

Google Arama Hücresel Kullanımının Rapor Araçları
Bulabileceğiniz altı ana hücresel kullanım problemi türü vardır: yani:
Uyumlu olmayan bir eklenti kullanmak
Görünüm alanı ayarlanmadı
Görünüm alanı “cihazın genişliğine” ayarlanmamıştır
Metin okumak için çok küçük
Ekrandan daha geniş içerik
Çok yakından tıklanabilecek öğeler
Bu raporun bir parçası olarak, Google Search Console, web sitenizin düğmeler ve bağlantılar gibi tıklanabilecek tüm öğelerini kontrol edecektir. Amaç, hücresel kullanıcıların bir klavye veya fare kullanmak yerine yalnızca bir dokunuş kullanarak web sitesi öğelerinizle rahatça etkileşime girip giremeyeceğini doğrulamaktır. Google arama konsolu, hücresel kullanıcılar için zorlukları artırdığını belirlerse, bir Özet raporunuzda “Element Elemanı Çok Yakından Tıklanabilir” Hata.
Google Arama Konsolu’nun hücresel kullanımı sorunu hakkında rapor

Bir hatayı tıklarsanız, sizi ayrıntılı sayfaya ve duruma götürür. Bu ekranda, etkilenen sayfalar da dahil olmak üzere sorun hakkında daha fazla bilgi edinebilirsiniz.
Google Arama Konsolu “birbirine çok yakın tıklanabilen öğeler”

Temel olarak, tıklanabilecek öğenin hatası, WordPress sitenizde dokunabilecek öğelerin hücresel kullanıcıların rahat bir şekilde etkileşime girmesi için çok küçük olduğunu gösteren bir uyarıdır.
Ya da, oldukça büyük oldukları anlamına gelebilir, ancak komşu unsurlara çok yakın konumlandırılmıştır. Düğmeler, bağlantılar ve tıklanabilecek diğer öğeler çok yakından toplanırsa, kullanıcı yanlış olanı vurma riski altındadır, bu da kullanıcı deneyimine (UX) zarar verir. Her ne kadar hücresel kullanım hatası olarak çok yakından tıklanabilecek öğelere sahip olmasına rağmen, bu sorunun çözülmesi de sitenizin erişilebilirliğini artırabilir. Örneğin, çeviklik problemleri olan kişiler, etkileşimli unsurlar arasında bazı ek alanları takdir edebilir. Tersine, görme ile ilgili sorunları olan kullanıcıların büyük ve net düğmeler ve bağlantılarla etkileşime girmesi daha kolay hissedebilir. Çözülmemiş hücresel kullanımlar, web sitenizin trafiğinde büyük bir etkiye sahip olabilir Trafiği burada çözümü bulun ve trafiğinizi yolunda koruyun. Tweet’ler için tıklayın Neden “çok yakın tıklanabilecek öğeler” çeşitli faktörler görünebilir, “birbirine çok yakın tıklanabilecek öğeler” soruna neden olabilir. Bazen, sadece Google’ın oluşturma sırasında gereken kaynakları isteyememesidir. Sorun buysa, hücresel dostu testleri kullanmayı deneyebilir ve mezun olup olmadığını görebilirsiniz. Eğer öyleyse, onu görmezden gelebilirsiniz.
Bu soruna web sitesi tasarımınızdan da kaynaklanabilir. Örneğin, bir web sayfasına çok fazla etkileşimli öğeyi koymaya çalışırsanız, bu hücresel kullanım hatasını görebilirsiniz. Elementte tıklanabilecek hataların bir başka nedeni de, site tasarımınızın hücresel duyarlılığıyla ilgili bir sorun olmasıdır. Web siteniz esnek olmalı ve en iyi UX’i sağlamak için ziyaretçilerin özel cihazlarına uyacak şekilde otomatik olarak uyum sağlamalıdır. Ancak, siteniz duyarlı değilse, kullanım sorunlarına neden olabilir. Daha spesifik olarak, web siteniz duyarlı değilse, parçalar belirli bir ekranda geniş, daralmış veya kavisli görünebilir. Daha küçük bir ekrana sahip cihazlarda, dokunulabilecek öğeler dar veya çarpıtılmış görünebilir. Bu hatanın çeşitli standartları ve potansiyel nedenlerini belirlemek, sitenizin neden hücresel kullanım sorunlarına sahip olduğunu daha iyi anlamanıza yardımcı olabilir. Bu aynı zamanda sorunun nasıl düzeltileceğini belirlemenize yardımcı olacaktır. “Çok yakın tıklanabilen” bir hata öğesi nasıl düzeltilir (3 yöntem) Hücresel kullanıcılar web sitenizde gezinmekte zorluk çekiyorsa, onları siteden çıkamamasını sağlayan nedir? Bu sorunu önlemek, tüm hücresel kullanım sorunlarını mümkün olduğunca çabuk çözmek çok önemlidir. “Birbirine çok yakın tıklanabilecek öğeleri” düzeltmek için kullanabileceğiniz üç yönteme bakalım ve hücresel kullanıcılarınıza daha iyi bir UX verelim.
1. WordPress YellowPence Visual Customerer SaryPence Görsel Özelleştirici Eklentisi, CSS’yi ve web sitesi tema dosyasını herhangi bir kodlamadan düzenlemenizi sağlayan bir WordPress ön uç eklentisidir.
Bu eklenti, düğmeyi büyütmek gibi vurabileceğiniz hedef boyutları değiştirmek için kullanışlıdır. Ayrıca, aralarındaki marj ve boşlukları değiştirerek tıklanabilecek öğeler arasında daha fazla yer açabilirsiniz. Yellowpencil eklentisini ücretsiz olarak indirebilir veya düzenli veya genişletilmiş bir lisans satın alabilirsiniz. Kullanmak için, önce eklentileri keşfederek WordPress sitenize yükleyin ve etkinleştirin> Yeni eklenti eklentileri arayın, ardından şimdi yükle> Etkinleştir’i tıklayın.
WordPress’e sarı püskürtme eklentilerini yükleme seçenekleri
Ardından, YellowPence> Özelleştirmelere gidin. Ayarlama sekmesinin altında, Başlangıç’ı seçin!

WordPress YellowPencil eklentisi “Ayar” sayfası
Görsel ayar arayüzü yüklenir ve mobil kullanım hatalarını tetikleyen bir sayfa seçmenizi ister.

Yellowpencil görsel özelleştirici eklenti arayüzü
Değişikliklerinizi bu özel sayfaya veya web sitenize uygulayabilirsiniz. Birçok sayfa tıklanabilecek öğeler hatalarını görüntülerse, Global’i seçmek isteyebilirsiniz. Seçiminizi yapın, ardından Devam’ı tıklayın. Artık web sayfanızdan çalışabilirsiniz, dokunulabilecek her öğeyi seçebilirsiniz. YellowPencil öğe için düzenleme seçenek panelini görüntüler.

CSS Seçenekleri Tıklanan öğeler için görsel görsel sarı penci
Örneğin, aşağıdaki ekran görüntüsünde, dokunulabilen hedefler arasında boşluk eklemek için dolgu seçiyoruz ve her tarafa 10 piksel ekliyoruz: Yellowpemen eklentisinin görsel ayarında dolgu ayarları

Boyut ve konum ayarı ayrıca “birbirine çok yakın tıklanabilecek öğelerin” hatasının üstesinden gelmeye yardımcı olur. Her ne kadar gerekmese de, CSS kodunu doğrudan düzenlemek istiyorsanız, sol panel üzerinden yapabilirsiniz. Ardından, hücresel kullanım sorunlarına neden olan ve işlemi tekrarlayan bir sonraki öğeye geçebilirsiniz. Değişikliklerinizden memnunsanız, Yeşil Kaydet düğmesini tıklayın. 2. En az 48px’e basılabilecek tüm hedeflerin iyi görünen ve tüm cihazlarda doğru işlev gören statik bir tasarım yapmak için mümkün olmadığından emin olun. Bunun yerine, cihaza (DPI) bağlı olmayan pikseller kullanılarak dokunulabilecek tüm hedefleri belirleyerek esnek bir düzen yapmayı hedefliyorsanız daha iyi olurdu. DPI kullanılarak belirtilen öğeler otomatik olarak kullanıcı ekranı boyutlarına göre boyutlara dayanabilir. Mobil cihazlarda, önerilen minimum dokunmatik hedef 48×48 pikseldir. Bu, ortalama parmak pedleri için yeterli olan yaklaşık 9 mm’ye eşdeğerdir. Bu nedenle, hangi öğelerin sorunun kaynağı olduğunu bulmakta zorlanıyorsanız, DPI’yı her öğeyi görmek iyi bir fikir olabilir. Önerilen Touch Hedef (örneğin 24px) altındaysanız, 48 piksel yapmak için dolguyu artırabilirsiniz. İstediğiniz tarayıcıya bağlı olarak Chrome Devtools veya Firefox Devtools kullanılarak dokunulabilecek alandan hesaplanan değeri kontrol edebilirsiniz. Örneğin Chrome’u kullanacağız. WordPress sitenize tıklanabilecek öğelerden birinin DPI değerini kontrol etmek için Chrome Tarayıcı sekmesinde açılıp hataları görüntüleyen bir sayfaya gidin ”
Çok yakın tıklanabilen öğeler “. SAĞ -sayfada sağlayın ve inceleyin seçin. Chrome tarayıcısındaki opsi” Check ”

Tıklama, Chrome Devtools’u açacaktır.Üstte, sizi geçiş aygıtı çubuğu ekranına götürecek mobil aygıtı görüntüleyen simgeyi tıklayın.
Chrome Devtools’taki “Aygıt Araç Çubuğu” seçeneği seçeneği

Sol önizleme panelinde, sitenizden mobil cihazların emülasyonunu göreceksiniz.İmleci yönlendirir ve dokunulabilecek öğelerden birini tıklarsanız, sağda hesaplanan değeri görebilirsiniz:
Bültenlere Kaydolun
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz?Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!

Şimdi abone olun
Google Chrome Devtools Konsolu

Gerekirse, doğrudan CSS ve site dosyalarını düzenleyerek veya YellowPence gibi eklentileri kullanarak öğenin boyutunu ayarlayabilirsiniz. 3. Giriş yöntemini kontrol edin “Birlikte çok yakın tıklanabilecek öğeyi” düzeltmeye çalışırsanız, giriş yöntemini kontrol etmeye yardımcı olabilir. Bu, kullanıcılar tarafından sitenizi görüntülemek ve bunlarla etkileşim kurmak için kullanılan yöntemi veya cihazı ifade eder. Daha spesifik olarak, akıllı telefonlar, tabletler veya diğer cihazlar kullanıp kullanmadıklarını görebilirsiniz. Örneğin, dokunma uygunsuz bir giriş yöntemi olarak kabul edilir. Daha önce tartıştığımız gibi, dokunmatik hedefinizin boyutunu artırmak veya ekstra minderler eklemek için CSS kullanmak, web sitenizle etkileşim kurmak için dokunmatik cihazları kullanan ziyaretçiler için daha kolay dokunabilecek hedefler yapabilir. Ancak, kullanıcının cihazını belirlemek kesin bir bilim değildir. Bu teknik, kullanıcının iki değerden birine sahip olabilen ana giriş yöntemini kontrol etmek için “işaretçi” olarak bilinen şeyi kullanır: Kaba: Cihazın ana giriş yöntemi dokunmatiktir.
İyi: Giriş yöntemi fare ve izleme çantasıdır.

Dokunma kullanıcının ana giriş yöntemi ise, bu kişinin web sitenizi bir akıllı telefonda veya tablette gördüğünü gösterir. Ancak, bir dokunmatik ekranın varlığı, birinin mobil cihazlar kullanmasını garanti etmez. Sitenize dokunmatik ekranı destekleyen büyük bir dizüstü bilgisayar kullanarak erişebilirler veya Bluetooth cihazlarını akıllı telefonlarına bağlamış olabilirler. İşaretçi kaba değeri döndürürse, CSS kullanarak dokunulabilecek hedef boyutunu ayarlayabilirsiniz. Bunu yapmak için aşağıdakileri WordPress tema CSS dosyanıza yerleştirebilirsiniz (veya YellowPence gibi bir eklenti kullanarak):. Kapsayıcı a {padding: .2em; } @Media (Pointer: CORSE) {. Kapsayıcı a {Padding: .8em; }} CSS’yi ayarladıktan sonra Google’a, bunun sorunu çözüp çözmediğini belirlemek için web sitenizi yeniden düzenlemesini söyleyebilirsiniz. Veya Google’dan URL denetim araçlarını kullanarak bireylerin URL’sini yeniden taramasını isteyebilirsiniz. URL’nizi bu araçtan gönderdikten sonra, dizine ekleme isteyin. Muayene aracı daha sonra URL’yi net indeksleme problemleri için test edecektir. Google’ın bir sorun bulamadığını varsayarsak, sayfa indexing için gereksinimleri karşılayacaktır.
Veya çok fazla URL’niz varsa, bir site haritası gönderebilirsiniz. Dizin oluşturma gerektiren her sayfa için, etiketini son değişiklik tarihi ile güncelleyin. Ardından, bu site haritasını Google Site Haritası rapor aracını kullanarak gönderebilirsiniz.
Google Arama Konsolu üzerinden Site Haritaları Gönderme

Çoğu durumda, site haritanız yakında geçecektir.Ancak, Google’ın site boyutu, trafik ve etkinlikler gibi faktörlere bağlı olarak site haritanızdaki tüm URL’leri taramak için biraz zamana ihtiyacı olabilir.Google’ın site haritanızdaki her URL’yi tarayacağının garantisi de yoktur. WordPress sitenizde sorun yaşıyor musunuz?Kinsta ile en iyi ve en hızlı barındırma desteğini alın!Planımıza bakın
“İçerik İçerik Mistrine ekrandan” nedir?Hatırlayacağınız gibi, Google arama konsolu sizi çeşitli hücresel kullanım hataları konusunda uyarabilir.”Birbirine çok yakın tıklanabilecek öğeler” e ek olarak, özet raporunuz “ekrandan daha kapsamlı içerik” sorununu da içerebilir.
Google Arama Konsolunda “İçerik Hatası Ekrandan Daha Geniş”
Bu sorun, Google arama konsolunuzdaki aynı yerde “tıklanabilecek” bir hata öğesi olarak görünecektir. Aynı şekilde, çeşitli potansiyel nedenleri vardır. “İçerik hatası ekrandan daha geniş” görünebilir Bu hata, site tasarımınız yatay olarak uzandığında oluşabilir ve hücresel kullanıcıları içeriği “ekranın dışındaki” görmek için yan tarafa geçmeye zorlar. İyi bir kullanıcı deneyimi sağlamak için mümkün olduğunca yatay rulolardan kaçınmalısınız. CSS bildiriminizde mutlak değerler kullanıyorsanız, “ekrandan daha kapsamlı içerik” sorununu deneyimleme olasılığınız daha yüksektir. Esnek olmayan bir düzen “tıklanabilecek öğeler” hatalarına neden olabileceğinden, aynı hücresel kullanım raporunda bu iki hatayı bulmak nadir değildir. “İçerik içeriği ekrandan daha geniş” (5 yöntem) nasıl düzeltilir (5 yöntem) Raporunuz “ekranın daha fazla içerik içeriği” içeriyorsa, bunların üstesinden gelmek için birkaç basit yöntem kullanabilirsiniz. En yaygın beş seçeneğe bakalım. 1. CSS Beyannamesinde mutlak değişkenleri kullanmaktan kaçının “İçerik hatalarını ekrandan daha” düzeltmenin en iyi yollarından biri ”
CSS bildiriminizde mutlak değişkenleri kullanmaktan kaçınmaktır. İçeriğiniz, doğru bir şekilde görüntülemek ve işlev görmek için belirli bir görünüm alanı gerektirmemelidir. Bu nedenle, mutlak değerleri kullanmak yerine, CSS öğeniz için göreceli genişliği ve konum değerini seçmelisiniz. Mümkünse göreli değerleri kullanarak, çeşitli ekran boyutlarına göre ayarlanmış esnek bir düzen oluşturabilirsiniz. 2. Boyutlarla görüntünün maksimum genişliğine sahip görüntüleri ayarlayın, görünüm alanından daha büyük görünebilir ve sırayla “ekrandan daha geniş bir içeriği” tetikler. Görüntünüzün ekran boyutlarına göre boşaltıldığından emin olmak için, tüm görüntüleri maksimum%100 genişliğe sahip tüm görüntüleri ayarlamak en iyisidir. Bu, görüntüyü mevcut alana uyacak şekilde küçülmeye zorlayacaktır. Maksimum genişlik kullansanız da, etiketindeki genişlik ve yükseklik özniteliklerini kullanmanız gerekir, çünkü modern web tarayıcısı yüklendiğinde görüntüler için alan sağlamak için bu bilgileri kullanır. etiketini kullanarak

, Resminiz nihayet ekranda göründüğünde düzeni değiştirmeyi önleyebilirsiniz. 3. Meta Viewport etiketini kullanın Varsayılan olarak, hücresel tarayıcı, genellikle yaklaşık 980 piksel olan masaüstü ekran genişliğinde sayfayı oluşturur. Tarayıcı daha sonra yazı tipinin boyutunu artırarak ve içeriğinizi geçerli ekran boyutlarına uyacak şekilde hızlandırarak sayfanızı optimize etmeye çalışacaktır. Ne yazık ki, bu varsayılan davranış tutarsızlıklara neden olabilir. Bazı kullanıcıların içeriğinizi okumak ve etkileşim kurmak için büyütmesi gerekebilir, bu yüzden bu hatayı görebilirsiniz. Bu varsayılan davranışa güvenmek yerine, tarayıcıya sayfanın boyutlarını ve ölçeğini nasıl kontrol edeceğiniz konusunda talimatlar vermelisiniz. Bunu, Meta Viewport etiketini belgenizin başına girerek yapabilirsiniz. 4. Sitenizin düzenini değiştirerek modern CSS düzeni tekniğinizi “İçerik İçerik Hatası” nı da düzeltebilir. Daha esnek bir düzen oluşturmanıza yardımcı olmak için, FlexBox, CSS kutusu düzeni veya birkaç sütun (multicol) düzeni gibi teknikleri uygulamayı düşünebilirsiniz. 5. Medya sorgusuna göre, dokunmatik ekran da dahil olmak üzere kullanıcının cihazına göre stili değiştirmeyi kolaylaştırabilirse, CSS medya sorgularını kullanın. Bu nedenle, şu anda bir “içerik içeriği ekrandan daha geniş” ile karşı karşıya kalırsanız, uygunsa CSS medya sorgularını kullanmalısınız. Bu değişikliği yaptıktan sonra, “içerik içerik dimtrininin ekrandan” üstesinden gelmeyi başardığınızı test etmenin zamanı geldi.
. Bunu, bir sonraki bölümde tartıştığımız adımları kullanarak hücresel kullanımlar raporunu ve iyileştirmeleri doğrulayarak yapabilirsiniz. Hata çözünürlüğünüzü nasıl doğrulayacağınız ve doğrulayabileceğiniz, yukarıdaki hataların karşılaştığınız veya düzeltmek için kullandığınız yöntem ne olursa olsun, değişikliğinizin sorunu çözüp çözmediğini belirlemek önemlidir. Bunu Google Hücresel Kullanım Testini geri alarak yapabilirsiniz. Bunu yapmak için, mobil kullanım raporunuza geri dönün ve “birbirine çok yakın tıklanabilecek öğeler” bir hata bulun. Ardından, Geliştirme Doğrulama seçeneğini seçin. “Ekrandan daha geniş içerik” için bir hata çözünürlüğünü doğrulamaya ve doğrulamaya çalışırsanız aynı adımı tekrarlayabileceğinizi unutmayın. Google daha sonra web sitenizi tarar ve değişiklikleri doğrulama sürecinde olduğunu söyleyen bir mesaj alırsınız.

Hatanın üstesinden geldiyseniz, Google Search Console “Pass” mesajını ve eşlik eden yeşil onay işaretini görüntüler. Öte yandan, kullandığınız onarımlar doğrulanmıyorsa, alternatif çözümler uygulamak için hataları gözden geçirmelisiniz. 4,32 milyar insan mobil cihazlarından internete erişiyor … yani bu ortak hatanın hızlı bir şekilde çözülmesi gerektiği anlamına geliyor! Neyse ki, bu kılavuz burada çözülmemiş hücresel kullanım hatalarının bir özeti için tıklamaya yardımcı olmak için burada. Kötü kullanıcı deneyimine neden olabilir ve web siteniz trafiğinde gerçek bir düşüşe neden olabilir. Kullanım kullanımının üstesinden gelmek için adımlar atarak, web sitenizin hücresel dostu olmasını ve daha fazla kişi tarafından erişilebilmesini sağlayabilirsiniz. Bu yazıda, üç yöntem kullanarak “Çok Yakın tıklanabilecek öğeyi nasıl düzelteceğinizi öğrenirsiniz.
48 dpi veya daha büyük ölçüm yapabilen tüm hedeflerin olduğundan emin olmak için Chrome Devtools kullanın.
Giriş yöntemini kontrol edin ve CSS’nizi ayarlayın.
“Çok yakından tıklanabilecek öğeyi” düzeltme hakkında bir sorunuz var mı? Bize aşağıdaki yorumlarda anlatın!

Çok yakın tıklanabilen "öğeler" nasıl düzeltilir "(3 yöntem)