Chrome'un Chrome için DevTools: SEO denetimleriniz için bu tarayıcı özelliklerini kullanmanın 10 yolu
Bir SEO denetimi yürütüyorsanız muhtemelen Google Chrome'da DevTools kullanıyor olmalısınız. Köşe yazarı Aleyda Solis, SEO sorunlarını belirlemek ve düzeltmek için bu araçları kullanmanın 10 yolu paylaşmaktadır.
Sektörde çoğumuz otomatik ve günlük çalışmalarını kolaylaştırmak için yardımcı SEO yazılım için yüzlerce hatta binlerce ödemek rağmen, biz zaten Google Chrome'un ile pazardaki en kullanışlı ücretsiz SEO araç setleri birine sahip DevTools . Google Chrome'da yer alan bu web geliştirme ve hata ayıklama araçları, herhangi bir sayfanın en temel ve kritik SEO yönlerini doğrulamamızı sağlar.
Çoğu durumda, DevTools'u kullanmak oldukça basittir. Ancak SEO analizi için birkaç kullanışlı ve o kadar açık olmayan uygulamalar var. Hadi bunları gözden geçirelim.
Google Chrome ve açılış araştırmak istediğiniz sayfaya giderek başlayın DevTools . Sen seçerek yapabilirsiniz Fazla Araçlar > Geliştirici Araçları tarayıcı penceresinin sağ üst köşesindeki Google Chrome menüsünden.
Alternatif olarak, klavye kısayollarını kullanabilirsiniz Ctrl + Shift + I (Windows) veya Cmd + Opt + I (Mac), ya da size araştırmak istediğiniz sayfa öğesinin sağ tıklayın ve açılan menüden "inceleyin" tıklayabilirsiniz Görünen açılır menü.
1. Sayfanızın ana içerik öğelerini, JavaScript ile oluşturulan öğeler de dahil olmak üzere kontrol edin
Google şimdi yapabiliyor tarama ve dizin JavaScript tabanlı içerik , ancak bu her zaman böyle kusursuz yapmaz. Bu nedenle, yalnızca HTML kaynak kodunu gözden geçirmekle değil, bilgilerin Google tarafından gerçekte nasıl oluşturulduğunu ve tanımlanacağını görmek için DOM'larını kontrol ederek sayfalarınızın ana içerik öğelerini doğrulamak zorunluluktur.
"Elements" panelinde DevTools ile herhangi bir sayfanın DOM'unu doğrudan görebilirsiniz.
İstediğiniz alakalı bilgilerin Google tarafından erişilebilir olduğundan emin olmak için her durumda gösterildiğinden emin olmak için sayfanın öğelerinden herhangi birinin içeriğini (başlık, meta açıklama veya sayfa metni gibi) gözden geçirmek için kullanın.
Örneğin, aşağıdaki sol üstteki ekran görüntüsünde, görüntülenen ana metnin (kırmızı renkte) bir <div> içine nasıl dahil edildiğini görebiliriz. Ancak bu aslında JavaScript ile uygulanmaktadır; kod, sayfanın HTML kaynak kodunu gösteren aşağıdaki sağ üst ekran görüntüsünde görülebilir.
Her ikisinde de gösterilen içerik arasındaki bu farklılıkları belirlerken, dizine eklenip eklenmediğini doğrulamak için uygun adımları atabilirsiniz: Google'da sayfa önbelleğe alınmış sürümünü incelerken, metnin arandığında Google'ın sonuçlarında gösterilip gösterilmediğini doğrulayarak Google Search Console'da "Fetch as Googlebot" ve benzeri.
2. CSS gizli içeriğe bakın
Google "olduğu bilinmektedir indirimler sayfanın HTML kaynak kodunda yer olmasına rağmen, olması gereken sekme veya menü seçenekleri ile varsayılan olarak kullanıcıya gizlidir" metin içeriği görüntülemek veya bunları genişletmek için "tıklandığında".
Metni gizlemenin en yaygın yolları arasında, CSS'yi "display: none" veya "görünürlük: gizli" özellikleriyle kullanmanızdır; bu nedenle, site sayfalarınızda bu yollarla gizlenebilecek önemli bilgilerin olup olmadığını kontrol etmeniz önerilir.
Chrome'un DevTools "ile yapabilirsiniz ara sen vurarak erişebilir" çekmece, Ctrl + F Shift (Windows) veya Cmd + Opt + F DevTools açıkken (Mac). Bu arama özelliği, yalnızca açılan sayfa dosyasından değil, CSS ve JavaScript de dahil olmak üzere tüm kullanılan kaynaklara bakmanıza olanak tanır.
Burada, istenen özellikleri (bu durumda "gizli" veya "görüntü: yok") arayarak sayfa kodunda / varsa nerede olduğunu tespit edebilirsiniz.
Aradığınız mülkün çevresindeki kodun tamamını görüntülemek için bir arama sonucunu tıklayın. Hangi metnin gizlendiğini görmek için kodu inceleyin; Önemli bir içerikse, Google tarafından indirilip gösterilmediğini kontrol edin ve uygun işlemleri yapın.
3. Resimlerinizi doğrulayın ALT açıklamaları
Sayfalarınızın ana metin içerik öğelerini kontrol yanı sıra, "sizin görüntüleri ALT açıklamaları doğrulamak Elemanları " paneline. Herhangi bir görüntüyü sağ tıklayın ve burada gösterildiği gibi "İnceleyin" i seçin:
4. Sayfalarda ve kaynaklarda dizin içermeyen ve kanonik hale getirme yapılandırmasını tanımlayın
Sayfanızın teknik yapılandırmasını incelemek için Chrome'un DevTools'u da kullanabilirsiniz. Örneğin, "kullanılarak yapılabilir meta robotlar ve kanonik etiketleri yapılandırma doğrulamak Arama bu özel etiketler için bakmak ve hayata nasıl olduğunu yorumlayan" çekmeceyi.
Bu doğrulama HTML bu etiketlerin uygulanması için değil, sadece yapılabilir <head> alan, aynı zamanda HTTP başlıklarında, "giderek Ağ dahil," panel ve onların başlık bilgilerini doğrulamak için istenen sayfa veya kaynak seçilmesi Bir resim dosyasında rel = "canonical" bir bağ var, örneğin, aşağıda gösterildiği gibi.
5. Başlık yapılandırmasında HTTP durumunu arayın
Sayfaları ve "kullanarak kaynakların başlık yapılandırmasını kontrol ederken Ağ " paneli, aynı zamanda onların HTTP durumunu doğrulamak ve herhangi olduklarını yönlendirmeler türü yönlendirmeleri, ve hata durumları, hem de diğer dahil olup olmadığını görmek X-robots-tag, hreflang veya "vary: kullanıcı aracı" gibi yapılandırmalar.
6. Herhangi bir cihazı öykünerek mobil web optimizasyonunuzu doğrulayın
Mobil dostu SEO için artık gerekli olduğunu ve DevTools'un kullanan mobil sayfa yapılandırma ve içerik doğrulamak " Cihaz Modu ." Bu seçenek panelin sol üst alanında cihaz simgesini tıklatarak veya tuşuna basarak etkin olabilir Command + Shift + M (Mac) veya Ctrl + Shift + M (Windows, Linux) ise DevTools paneli açıktır.
Cihaz Modu'na girildiğinde, pencerenin üst kısmında görüntüleme denetimleri gösterilir. Burada, yanıt veren bir görüntü alanı seçebilir veya (serbestçe yeniden boyutlandırılabilir) sayfanızı test etmek için belirli bir cihazı seçebilirsiniz. Ayrıca "kullanarak kendi özel aygıtı ekleyebilirsiniz düzenle ... " seçeneği.
7. Sayfa yükleme sürenizi değerlendirin ve hız sorunlarını belirleyin
Kullanılan cihazı ve ağ koşullarını taklit ederek herhangi bir sayfa yükleme süresini analiz edin. Bunun için, "gidebilirsiniz Ağ Koşulları size altında panelin sağ üst köşesindeki Özelleştirme menüden erişebileceğiniz" aracı "Daha fazla araç."
Burada, "Önbellek Oluşturma", "Ağ azaltma" ve "Kullanıcı aracısı" yapılandırmalarını bulacaksınız.
Ayarlarınızı seçtikten sonra, istenen sayfayı yeniden ve "gidebilirsiniz Ağ sayfanın tam yükleme süresini (sadece görmek için" paneline Yük ) değil, aynı zamanda sayfanın ilk biçimlendirme çözümlenir edilmiştir ( DOMContentLoaded ) Ikisi de pencerenin alt kısmında görünür. Ayrıca, panelin sol tarafındaki kırmızı düğmeyi tıklatarak kaydedilebilen, kullanılan kaynakların her birinin yükleme sürelerini ve boyutlarını da görebilirsiniz.
Eylemlerin tavsiyeler, sayfa hızı performansını artırmak "gitmek için sipariş almak için almak için Denetimler " panel ve "Çalıştır" düğmesine tıklayın. Her öneri, aşağıda görülebileceği gibi, ilgili kaynakların sorunlarını belirleyecektir:
Ayrıca, "ile sayfa render ekran görüntüleri yakalayabilir Film Şeridi " seçeneği. Kamera simgesini tıklayıp sayfayı yeniden yükleyerek, yüklemenin çeşitli aşamalarında sayfanızın ekran görüntülerini izleyebilir ve böylece kullanıcılarınızın her aşamada neler görebileceğini doğrulayabilirsiniz.
İş engelleme kaynakları belirleme
Ayrıca "kaynakların yükleme süreleri verileri kullanabilirsiniz Ağ JS ve CSS kaynakları en yaygın sayfa hızı konulardan biri olan, bunu engelleme potansiyel DOM önce yükleme ve hangi tanımlamak için" paneline. CSS ve JS düğmelerini tıklatarak filtreleyebilirsiniz (aşağıda gösterildiği gibi).
9. HTTPS geçişi sırasında güvenli olmayan kaynaklar arayın
Eğer "sağlanan bilgilerle herhangi bir sayfada güvenlik sorunları belirlemek için izin verdiği Chrome DevTools, göçler sırasında HTTPS çok yararlı olabilir Güvenlik " paneline. Sayfanın güvenli olup olmadığını ve geçerli bir HTTPS sertifikasına, güvenli bağlantının türüne ve kullanılmış herhangi bir kaynağın güvenli olmayan kökenleri nedeniyle karışık içerik sorunları olup olmadığını görebilirsiniz.
10. Hızlandırılmış Mobil Sayfalarınızın (AMP) uygulanmasını onaylayın
Eğer AMP uyguluyorsanız "ekleyerek sayfaları herhangi bir sorun olup olmadığını görebilirsiniz # gelişimini = 1 " kontrol, ardından AMP URL "dizesini Konsol " paneline. Bu, herhangi bir sorun, uyarı veya hata olup olmadığını ve bunları düzeltmek için uygun işlemi yapabilmeniz için hangi öğe ve kod satırında bulunduğunu size söyleyecektir.
Bonus: Chrome DevTools ayarlarını kişiselleştir
Gördüğünüz gibi, Chrome DevTools'u SEO'yu kullanarak bir sürü zaman harcayabileceğiniz pek çok yoldan kullanabilirsiniz. Böylece, kendi tercihlerinize göre biraz kişiselleştirmek isteyebilirsiniz. Görünümü ayarlayabilir, kısayolları etkinleştirebilir ve daha fazlasını yapabilirsiniz.
Siz "yapabilirsiniz Tercihler panelinin sağ üst köşesindeki Özelleştirme menü düğmesini tıklayarak ve" seçerek bulunabilir "ayarları, Ayarlar " seçeneğini.
Son fakat en az değil, tercihleri kişiselleştirme konuşma: küçültülmüş kod analiz edilmesi zor ayrıştırmak için yapmak, böylece tıklayın emin olun güzel baskı "{}" butonuna panelinin orta alt bölgede görmek mümkün olacaktır böylece Küçültülmemiş bir versiyon. Bu, gelişmiş okunabilirlik sayesinde kolayca geçmesine izin verecektir.
Bu Chrome DevTools ipuçlarının, SEO hayatınızı kolaylaştıracağınızı umuyoruz!
Hiç yorum yok :
Yorum Gönder