Chrome DevTools yani Chrome geliştirici araçları, web geliştiricileri ve SEO uzmanları tarafından sıkça kullanılan ücretsiz bir araçtır. Web sayfalarına ait kodlara erişerek farklı test ve analizler yapmayı mümkün kılar. HTML, CSS, Javascript kodlarını görüntülemek ve düzenlemek için kullanılır. SEO uzmanları tarafından sayfa hızı, yüklenme süreleri, kullanıcı deneyimi gibi birçok konuda kontrol sağlamak için kullanılır.
Chrome DevTools SEO İçin Neden Önemlidir?
SEO çalışmalarında audit için kullanılan birçok araç vardır. Bu araçların büyük bir kısmı ücretlidir. Chrome DevTools, sağladığı birçok analiz aracına rağmen herkes tarafından ücretsiz bir şekilde kullanılabilmektedir.
Chrome DevTools, web sayfalarının SEO performansını etkileyen önemli etkenleri kontrol ve analiz etmek için kolaylık sağlar. Audit araçlarını kullanmadan hızlı sonuçlar elde etmek için tercih edilir. Bir sayfanın Canonical URL’ini öğrenmek için bu sayfayı Screaming Frog’ta taramaktansa HTML kodunu kontrol etmek daha kolaydır, değil mi?
Öyleyse Chrome DevTools kullanarak teknik SEO denetimi nasıl yapılır, nasıl açılır ve kullanılır? Birlikte inceleyelim.
Chrome DevTools Nasıl Açılır?
Chrome DevTools aracını açmak için web sayfasındaki herhangi bir yere sağ tıklayarak, İngilizce kullanıyorsanız “inspect” Türkçe kullanıyorsanız “incele” seçeneğine tıklamalısınız. İkinci bir seçenek olarak sağ üstte yer alan 3 noktaya tıklayıp, açılan Chrome Devtools aracını açmak için şu kısayolları da kullanabilirsiniz:
- Windows’ta Chrome DevTools açmak için CTRL + SHİFT + I
- Mac’te Chrome DevTools açmak için Command + option + I
Chrome DevTools Araçları Nelerdir?
Birçok aracı içerisinde bulunduran DevTools, farklı sekmelerde farklı analizler yapma imkanı sağlar. Hangi sekmenin ne için kullanıldığını öğrenmek için aşağıdaki başlıkları inceleyebilirsiniz.
Elements Sekmesi
Elements sekmesi, devTools açıldığında varsayılan olarak karşımıza çıkan penceredir. Bu sekmede sayfaya ait HTML ve CSS kodlarını görüntülemek ve düzenlemek mümkündür. Elementleri seçerek sayfa üzerindeki konumlarını görme, farklı değerler ve özellikler atayarak sayfa içeriğini değiştirmeden önce önizleme yapabilme fırsatı sağlar. Burada yer alan kodlar, sunucudan yollanan kaynak kodlarla aynı değildir. Elements sekmesinde yer alan kodlar DOM yani “Domain Object Model” kodlarıdır.
Console Sekmesi
DOM kodlarını incelemek, düzenlemek ve javascript hatalarını tespit etmeye yarayan sekmedir. Hata veren kodları ve satırları görmeye yardımcı olur. Kod test etmek ve javascript hatalarını çözmek için kullanılır.
Sources Sekmesi
İndirilen kaynakları ve dosyaları görmeyi sağlayan sekmedir. Hangi dosyaların indirildiği ve kaynak dosyaları hakkında detaylı bilgileri içerir.
Network Sekmesi
Web sayfasının oluşturulması için gerekli dosyaların indirilme hızı, dosyanın kaynağı, boyutu ne kadar sürede indirildiği gibi önemli verileri sunar. Dosyaların türüne, boyutuna statü kodlarına göre filtreleme ve analiz yapma fırsatı sağlar.
Performance Sekmesi
Performance sekmesi, web sayfası yüklenirken dosyaların yüklenmesinin ne kadar sürdüğünü görmeye yarayan Core Web Vitals için sıkça kullanılan bölümdür. Kullanılması için etkinleştirilmesi gerekir.
Security Sekmesi
Sayfanın yüklenmesi için gerekli dosyaların hangi protokolle iletildiğini kontrol etmeye yarar. HTTP protokolü ve SSL sertifikasıyla alakalı bilgileri incelemek için kullanılır.
Lighthouse Sekmesi
Web sayfasını mobil ve desktop olarak farklı kriterlere göre değerlendirmek için kullanılır. SEO uzmanları tarafından sıkça kullanılan bu araç, aşağıdaki konu başlıklarına göre sayfayı sınar:
- Sayfa Performansı
- Erişilebilirliği
- SEO uyumluluğu
- Öneriler( Best Practises)
Chrome DevTools SEO İçin Nasıl Kullanılır?
Chrome DevTools, SEO çalışmalarında sıkça tercih edilen bir araçtır. Ücretsizdir ve hızlı analiz ve test yapabilme imkanları sunar. Chrome DevTools kullanarak teknik SEO denetimi gerçekleştirmek için aşağıdaki yöntemleri uygulayabilirsiniz.
User-Agent Değiştirme
DevTools kullanarak user agent değiştirmek için öncelikle “Network Conditions” özelliğini açmanız gerekmektedir. Bunun için sağ üstte yer alan üç noktaya tıklayarak “More Tools” seçeneğine tıklamalısınız. Açılan menüden “Network Conditions” seçeneğine tıkladığınızda karşınıza aşağıdaki gibi bir ekran çıkacaktır.
Görselde işaretli olan açılır listeye tıklayarak “Googlebot Smartphone” veya “Googlebot Desktop” gibi user agent’larla sayfayı ziyaret ederek Google’ın web sayfasını nasıl gördüğünü inceleyebilirsiniz. Böylece mobil ve masaüstü cihazlardaki farklılıkları ve teknik sorunları tespit edebilirsiniz.
Sayfayı Mobil Cihazlarda Görüntüleme
Web sayfası Responsive bir tasarıma sahipse farklı mobil cihazlarda ve çözünürlükte nasıl göründüğünü incelemek için Chrome DevTools’u kullanabilirsiniz. Bunun için Elements sekmesinin yanında yer alan simgeye tıklıyoruz. Açılan listeden cihaz seçerek farklı çözünürlüklerde sayfanın nasıl göründüğünü kontrol edebilirsiniz.
Xpath Kopyalama
Belirli bir elementi web sitesi üzerinde tarayacaksanız bu elementin Xpath’ini taramada kullanmanız gerekir. Chrome DevTools kullanarak elementlerin Xpath’ini bulmak için tarayacağınız elementi bulduktan sonra sağ tıklayarak Copy > Copy Full Xpath seçeneğine tıklayabilirsiniz.
Örneğin web sitenizde FAQ olan ve olmayan sayfaları belirlemek istiyorsunuz. “Sıkça Sorulan Sorular” metnine ait Xpath’i Screaming frog’ta tarayarak, custom extraction raporunda hangi sayfalarda bu metnin olduğunu görebilirsiniz. Böylece metnin olmadığı sayfaları ve dolayısıyla FAQ olmayan sayfaları tespit etmiş olursunuz.
Kullanılmayan Javascript Kodlarını Tespit Etme
Sağ üstte yer alan üç noktaya tıkladıktan sonra More Tools > Coverage seçeneğine tıklayın. Sayfayı yeniden yüklediğinizde “Usage Visualization” kısmında kullanılmayan javascript dosyalarını ve boyutlarını görebilirsiniz.
İmage Dosyalarına Ait Bilgileri Öğrenme
Web sayfasında yer alan bir görsele ait bilgileri öğrenmek için görsele sağ tıklayarak incele seçeneğine tıklamalısınız. Karşınıza çıkan ekranda <img> etiketi içerisinde seçilen görsele ait şu bilgileri bulabilirsiniz:
- Görselin dosya boyutu
- Görselin Render’lanan boyutu
- Görselin kaynağı (URL’i)
- Görselin alt açıklaması (alt text )
On-Page SEO Elementlerini Kontrol Etme (Canonical URL, Title, Description, Robots Tag)
Elements sekmesini kullanarak sayfaya ait önemli On-page SEO elementlerini kontrol edebilirsiniz. Bunun için CTRL + F tuşuna basarak arama çubuğunu açmalı ve kontrol etmek istediğiniz elemente göre arama yapmalısınız.
- Title kontrolü için: <title>
- Description kontrolü için: “description”
- Canonical URL kontrolü için: “canonical”
- Robots Tag kontrolü için: “robots”
Aynı kontrolleri sayfa içerisinde herhangi bir yere tıklayarak, “Sayfa Kaynağını Görüntüle” sekmesinde de yapabilirsiniz.
HTTP Header Kontolü Yapma
Teknik SEO denetimi yaparken sadece <html> kodlarını değil, sayfayı oluşturan diğer kaynaklar da incelemeniz gereken durumlar olacaktır. Bunun için, DevTools aracını açıp “Network” sekmesine gelmelisiniz. Sayfayı yenilediğinizde, yüklenen kaynakları görebilirsiniz. Listede yer alacak dosya türünü yukarıdaki filtreleri kullanarak sınırlandırmak mümkün. Aşağıdaki örnek görselde sadece CSS dosyalarını listeledik.
Yüklenen kaynaklardan incelemek istediğiniz dosyayı seçin ve “headers” raporuna tıklayın. Bu raporda kullanılan sıkıştırma yöntemi (gzip veya brotli), statü kodu, x-robots tag ve son güncellenme tarihi gibi bilgileri kontrol edebilirsiniz.
Core Web Vitals Kontrolü Yapma
CWV verilerini incelemek için “Performance” sekmesine tıklayın. Sonrasında CTRL + Shift + E kısayolu ile veya araç içindeki “yenile” butonunu kullanarak sayfayı yenileyin.“Screen shots” seçeneğini işaretleyerek sayfa yüklenirken alınan ekran görüntülerini inceleyebilirsiniz.
LCP(Largest Contentful Paint) öğesini inceleyebilir, diğer metrikleri kontrol ederek Core Web Vitals sorunlarınıza çözüm üretebilirsiniz. Core Web Vitals hakkında daha detaylı bilgi için Core Web Vitals Nedir? içeriğimizi okuyabilirsiniz.
Filtre Kullanarak Analiz Yapma
Network sekmesinde yer alan filtre özelliğini kullanarak hızlı sonuçlar alabilir ve kontrol sağlayabilirsiniz. Kullanabileceğiniz bazı filtreler:
- statuscodes: XXX – Kaynakları Statü kodlarına göre filtrelemenizi sağlar.
- mixedcontent: all – Mixed content hatasına sebep olan kaynakları filtreler.
- larger-than: XXX – Örnek: larger-than: 250( Boyutu 250 KB’tan fazla olanları filtreler)
- -larger-than: XXX – Örnek: -larger-than: 250( Boyutu 250 KB’tan düşük olanları filtreler)
