Sorun Giderme İçin Chrome Geliştirme Araçlarını Kullanma - Semalt Bilgi İstemleri
Chrome DevTools, çoğu SEO uzmanına yabancı bir şey değildir. Öte yandan, borçlulara göre, henüz öğrenemeyeceğiniz şeylerden biri olabilir. Semalt'ta, müşterilerimizin SEO ihtiyaçlarına hizmet etme sürecimizin bir parçası, sizi web sitenizin ihtiyaç duyduğu şeylerin gerekli yönleri konusunda eğitme şeklimize dayanır.
SEO için Chrome Geliştirici Araçları, sorun gidermede kullandığımız için önemlidir. Semalt ve müşterilerimiz arasında kolay iletişim sağlamak için, web sitenizdeki SEO sorunlarını gidermek için bu aracı nasıl kullandığımızı size göstermek istiyoruz.
Chrome Geliştirici Araçları ile, bir web sitesinin taranabilirliğinden performansına kadar değişen temel SEO sorunlarını bulabiliriz. Bu yazıda, müşterilerimize daha iyi hizmet vermek için bu araçları kullandığımız üç yolu vurgulayacağız.
Chrome DevTools Nedir?
Tam olarak DevTools veya Chrome DevTools, doğrudan Chrome tarayıcısında yerleşik olarak bulunan bir dizi web geliştirici yardım aracıdır. Bu araçları, sayfaları anında düzenlemek ve sorunları anında teşhis etmek için kullanıyoruz. Bu, müşterilerimiz için daha iyi web siteleri oluşturmamıza yardımcı olur, ancak bunu daha hızlı yapabilir ve mükemmel olmalarını sağlayabiliriz.
Google Chrome'un herhangi bir SEO uzmanının cephaneliğindeki en önemli araç setlerinden biri olduğu konusunda hepimiz büyük ölçüde hemfikir olabiliriz. Denetimleri otomatikleştirmek veya SEO sorunlarını geniş ölçekte teşhis etmek için kullandığınız SEO yazılımı ne olursa olsun, Chrome DevTools bir zorunluluk olarak kalır. SEO sorunlarını anında kontrol etmenin önemli yollarını sağlama yeteneği sayesinde, Semalt dahil birçok SEO uzmanı bunu defalarca kullandı.
Chrome DevTools'un profesyonellere ve web geliştiricilerine birçok şekilde yardımcı olabileceği hakkında tartışmak için daha fazla zaman harcayabilirdik, ancak dikkatimiz biraz daha spesifik bir konuya odaklanıyor. Burada, bir sorunu çözmek ve düzeltmek için Chrome DevTools'a güvendiğimiz birkaç farklı durumu sizinle paylaşmak istiyoruz.
Chrome DevTools'a sahip olmanın kötü bir fikir olmayacağı üç durum şunlardır:
- Site performansında sorun giderirken.
- Google'ın sitenizi nasıl anladığını tekrar kontrol etmek için.
- Tarama hatalarını kontrol etmek için.
Sorun Giderme İçin Chrome Geliştirme Araçlarını Ayarlama
Şansınız, Chrome DevTools'u kullanmayı hiç denememişsinizdir. Erişmek, SERP'deki bir web sitesine tıklamak ve bir inceleme düğmesine tıklamak kadar basittir. SEO uzmanları olarak bundan daha dikkatli olmalıyız, ancak nasıl kullanıldığına dair fikriniz var. Semalt'ta, hem DOM'u gözlemlememize izin veren Element düzlemini hem de konsol çekmecesinde birkaç farklı aracı etkinleştiren CSS'yi kullanıyoruz.
Bu aracın SEO sorun gidermede nasıl kullanıldığına dair size adım adım bir işlem yapacağız.
Başlamak için, sağ tıklamanız ve ardından denetlemeyi seçmeniz gerekir. Varsayılan olarak, öğe panelinin göründüğünü göreceksiniz ve bu size DOM'a ve sayfayı oluştururken kullanılan stil sayfasının doğasına dair bir fikir verir.
Bu görüşe sahip olmak bize dalacak pek çok şey sunar; ancak konsol çekmecesinin araç setinden tam olarak yararlanmasını sağlıyoruz.
Ayarlar simgesinin yanında görünen noktalara tıklayın ve Konsol çekmecesini göster seçeneğine gelene kadar aşağı kaydırın. Alternatif olarak, sadece escape tuşuna tıklarız.
Konsol ve öğe paneli etkinleştirildiğinde, kullanıcılar DOM'da oluşturulan koda bir bakış atabilirler. Kullanıcılar ayrıca tarayıcıda kodu boyamak için kullanılan stil sayfalarını da göreceklerdir. Konsol çekmecesinden erişebileceğiniz diğer birçok aracın yanı sıra.
İlk kez kullananlar için konsol çekmecesi konsolun kendisini göstermeyebilir, ancak Chrome DevTools'u bir süre kullandıktan sonra konsol çekmecesi konsolun kendisini göstermeye başlar. Konsol paneliniz, javascript çalıştırmanın yanı sıra günlüklenmiş mesajları görüntülemenize de olanak tanır. Bugün buna dalmayacağız.
Bunun yerine, bakacağımız üç ek araç:
- Ağ koşulları
- Kapsam
- Rendering
Bu araçları bulmak için daha fazla araç seçin ve bu üç öğeden her birini seçerek konsol çekmecesinde sekmeler olarak görünmelerini sağlayın. Bu üç paneli etkinleştirdikten sonra sorun gidermeye başlayabiliriz.
DevTools'ta Kullanıcı Aracısını Değiştirme
User-Agent'ı değiştirmek, DevTools'u kullanmanın en gözden kaçan yollarından biridir. Bu, Googlebot’un bir sitedeki bilgi özelliklerini nasıl gördüğüne ve işlediğine dair içgörü sağladığı için birkaç farklı sorunu ortaya çıkarmamıza yardımcı olan basit bir testtir.
Araştırmacı SEO uzmanlarından oluşan ekibimiz için DevTools, değerli ve güvenilir bir büyüteç olarak kullanılır ve yalnızca bu tür sorunların gelişmesini önlemek için değil, aynı zamanda bu tür sorunların temel nedenlerini ortaya çıkarmak için bir web sitesindeki sorunları yakınlaştırmamızı sağlar.
Kullanıcı Aracınızı Chrome Geliştirme Araçlarında Nasıl Değiştirebilirsiniz?
Chrome'da kullanıcı aracınızı değiştirirken, konsol çekmecenizdeki ağ koşulları sekmesini kullanmanız gerekecektir. Bunu yapmak için, içeriğinizin nasıl teslim edildiğini görmek için Googlebot akıllı telefon, Bingbot veya diğer bazı kullanıcı aracısını kullanarak içeriği görüntülemenize olanak sağlayan otomatik olarak seç seçeneğinin işaretini kaldırırsınız.
Google'ın güncellenmiş başlık etiketini veya meta açıklamayı SERP'de göstermediği bir durumda, şüphesiz böyle bir web sitesinin sahibi endişelenecektir. Google'ın neden tamamen farklı bir başlık etiketi kullanmayı seçtiğini veya etiketi güncelleyemediğini anlamak, yaptığınız değişikliklerin uygulandığından emin olmak açısından önemlidir.
Bir Mobil Alternatif Site Örneği İçin Chrom DevTool'u Kullanma
Benzer bir durumda, kullanıcı aracısını Googlebot akıllı telefona geçirdikten sonra, sitenin hâlâ Googlebot'a alternatif bir mobil site sunduğunu keşfettik. Ancak Google, mobil öncelikli dizine eklemeye zaten geçiş yapmış olduğundan, mobil sitedeki değişiklikleri işledi ve dizine ekledi ancak Etki Alanının masaüstü sürümünde yapılan güncellemeleri yakalayamadı.
Mobil sitelerin bazı kalıntılar olduğunu varsayabilirsiniz, ancak gerçekten de varlar.
Aşırı Sunucu Korumasını Belirlemek İçin Chrome DevTools'u Kullanma
İnternette kötü niyetli pek çok kişi var. Pek çok bilgisayar korsanı ve kötü niyetli, İnternet'teki sitelere karşı Google'ı kullanmaya çalışır. Bu nedenle, bazı sunucular CDN'leri yığınlar ve diğer barındırma sağlayıcıları, asıl amaçları spam içerikli tarayıcıların siteye erişimini durdurmak olduğunda Googlebot sahtekarlıklarını durduran bazı yerleşik özellikler sunabilir. Aşırı bir çabayla, bu siteler Googlebot'un siteye erişimini engelleyebilir. Bazen kullanıcılar "Yetkisiz İstek Engellendi" şeklinde iletiler görür.
Google'ın SERP'sinde bu tür mesajlarla karşılaşırsak, tarayıcı içeriği sorunsuz bir şekilde yüklese bile bir faulün başladığını hemen anlarız.
User-Agent geçiş özelliğini kullanarak, User-Agent'ı Googlebot Smartphone'a ayarladığımız anda sitenin bu mesajı sunduğunu görebiliriz.
Geliştirme Araçlarında Temel Web Yaşamsal Değerlerini Teşhis Etme
Performans sekmesi, DevTools'un en önemli özelliklerinden biridir. Sayfa hızını ve performansını etkileyen sorunları gidermek için harika bir ağ geçidi görevi görür. Genel bir not olarak, DevTools temel web vitals söz konusu olduğunda bazı eyleme dönüştürülebilir bilgiler sunabilir.
Google'ın Temel Web Vitalsini oluşturan ölçümler, bir süredir sayfa hızının ve performans raporlarının bir parçası olmuştur. SEO uzmanlarının bu sorunları nasıl çözeceklerini bilmeleri çok önemlidir. Web yöneticileri olarak, arama verimliliği için temel web hayati değerlerinin öneminin daha keskin bir şekilde farkına vardık.
DevTools'ta performans sekmesini kullanırken, önemli web metriklerini anlamada daha iyi olmaya bir adım daha yaklaşıyoruz.
HTTP Üstbilgilerinizi Tekrar Kontrol Edin ve Kullanılmayan Kodu İnceleyin
SEO denetimlerinizde soft 404'leri hiç duydunuz mu? Yumuşak 404'ler, tarayıcının bir 404 sayfası gösterebileceği, ancak 200 Tamam Yanıt Kodu döndürdüğü zamandır.
Bazı durumlarda, içerik tarayıcıda tam olarak beklendiği gibi yüklenebilir; ancak, HTTP Yanıt Kodu 404 veya 302 hatası gösterebilir. Ayrıca genellikle yanlış olabilir veya beklediğiniz gibi olmayabilir. Her iki durumda da, her sayfa ve kaynak için HTTP yanıt kodunu görmek yararlıdır.
DevTools'u kullanarak yanıt kodları hakkında size değerli bilgiler veren bir dizi harika Chrome Uzantısı olsa da, bu bilgileri doğrudan kontrol etmenizi sağlayabilir.
Bu noktada DevTools, sayfayı derlemek için çağrılan tüm bağımsız kaynakları gösterir. Bu, ilgili durum kodlarını ve şelale görselleştirmesini içerir.
Sonuç
Chrome DevTools ile, web sitenizin gerçek potansiyellerine ulaşmasını engelleyen temel sorunları bulma ve çözme olanağına sahipsiniz. DevTools, teknik denetimlerinizde özellikle yararlıdır. Bunlara ek olarak, DevTools'u kullanırken hızın da tadını çıkarırsınız. Web tarayıcılarımızdan ayrılmadan, Semalt ekibimiz bir web sitesini taramaktan ne kadar iyi performans gösterdiğine kadar sorunları tespit etme konusunda kendini yetkilendirebilir.
Semalt web sitenizdeki en iyiyi ortaya çıkarmanıza yardımcı olmak için buradadır ve ekibimizle iletişime geçeceğinizi umuyoruz. Sizden haber almak için sabırsızlanıyoruz.