Chrome’daki Denetleme özelliği (“inceleme öğesi” olarak da bilinir), herhangi bir sayfanın veya web sitesinin tamamını kontrol etmenize olanak tanır. Sorunları teşhis etmek, sitenizdeki değişiklikleri test etmek ve hatta rakiplerinizi gözetlemek için kullanabilirsiniz.
Herhangi bir sayfayı sağ tıklayın ve sitenin oluşturulduğu kodu görmek için Denetle seçeneğine ilerleyin.
Sol pencerede sayfayı, sağda ise sitenin tüm kodlarını içeren farklı sekmeleri göreceksiniz. İlgili sayfanın koduna göz atmak için öğeleri genişletebilir ve daraltabilirsiniz.
Öğeler sekmesinde öğeleri düzenlerseniz, kaldırırsanız veya eklerseniz sayfanın nasıl görüneceğini görebilirsiniz. Ayrıca bir web sitesinin nasıl kurulduğuna dair bilgiler de bulabilirsiniz. Konsol, Kaynaklar, Ağ ve diğer sekmeler de daha gelişmiş teknik denetimlere yardımcı olabilir.
Temel HTML ve CSS’yi bilmek yardımcı olur, ancak ne tür bir kod arayacağınızı biliyorsanız birçok temel soruyu yalnızca Öğeler sekmesinden yanıtlayabilirsiniz .
1. Bu ne renk?
Inspect’i kullanarak web’deki herhangi bir rengin benzersiz onaltılık kodunu bulun.
- Görmek istediğiniz öğeye sağ tıklayın.
- Renk örneğini ve onaltılık kodu bulmak için aşağı kaydırın.
- Bu öğe için farklı renklerle oynamak için renk örneğini tıklayın.
Her rengin benzersiz bir onaltılık kodu veya rengi temsil eden evrensel 6 basamaklı bir kod birleşimi vardır. Örneğin saf beyaz #FFFFFF, saf siyah #000000 ve nane yeşili #98FF98’dir.
Aradığınız rengi göremiyorsanız alt öğeleri geçersiz kılabilecek ana öğe renk ayarlarını kontrol edin.
Bu, aşağıdaki gibi soruları çözmek için kullanışlıdır:
- Kullanıcılar hangi renkleri tercih ediyor? Denemek için yeni bir renk bulabilir miyim?
- Rakiplerim harekete geçirici mesajları için hangi rengi test ediyor?
- Sitemin renkleri marka kurallarına uygun mu ?
- Bu renk kombinasyonu kullanılabilirlik yönergelerine uyuyor mu ?
2. Bu hangi yazı tipi?
Serif yazı tipleri şu anda popüler. Öğeye sağ tıklayıp yazı tipi CSS’sini arayarak herhangi bir sitede yeni yazı tipleri bulabilirsiniz.
- Kopyaya sağ tıklayın.
- Alt kısımdaki Stiller sekmesinde aynı etiketi arayın.
- Yazı tipi etiketlerine doğru aşağı kaydırın.
Kodda birden fazla yazı tipinin listelendiğini görürseniz bunlar yedek yazı tipleridir. İlk yazı tipi varsayılandır ve kullanıcının tarayıcısının bu yazı tipine erişimi varsa görünecektir. Bu yazı tipi herhangi bir nedenden dolayı kullanılamıyorsa, tarayıcı listelenen ikinci yazı tipine geri döner ve listede bu şekilde devam eder.
Ayrıca yazı tipi boyutunu ve satır yüksekliğini de kontrol edebilirsiniz.
İyi bir yazı tipi boyutu seçmek yazı tipine, satır yüksekliğine ve kalınlığa bağlıdır. Temel kural, gövde kopyası için minimum 14 piksel ve başlık yazı tipleri için 20 piksel hedeflemektir.
- H1: 30-34 piksel
- H2: 28-30 piksel
- H3: 24-26 piksel
- H4: 20-22 piksel
- Gövde: 16-18 piksel
3. Bu içerik değişikliği iyi görünecek mi?
Bir değişikliğin yayınlanmadan önce nasıl görüneceğini görmek için Inspect’i kullanın. Bir sayfa düzenlemesini yayınlamadan önce veya sonra onay almak için ekran görüntüsü almanız gerekiyorsa veya bir değişikliğin önce masaüstünde ve mobilde nasıl görüneceğini kontrol etmek istiyorsanız bu özellikle yararlıdır.
- Değiştirmek istediğiniz öğeyi inceleyin.
- Düzenlemek istediğiniz kopyaya çift tıklayın.
- Kopyayı düzenleyin.
- Öğenin dışına tıklayın.
- Memnun kalana kadar ince ayarlar yapın.
Düzenlediğiniz öğenin içinde, paragraf içindeki bir bağlantı gibi birden fazla kod parçası varsa, seçimin tamamını düzenlemek için kopyaya sağ tıklayıp HTML Olarak Düzenle’yi seçebilirsiniz.
4. Bu hangi görüntü?
Herhangi bir görseli incelemek için sağ tıklayarak görselin bağlantısını, boyutunu ve alternatif metnini bulun.
Herhangi bir görselle ilgili temel teknik soruları yanıtlayın:
- Resmimin iyi bir alternatif metni var mı?
- Bu resim kopya mı?
- Görüntü boyutu çok mu büyük?
- Resim boyutu sayfa hızını etkileyebilir mi ?
- Orijinal görselin kaynağı nerede?
- Rakibim ne tür bir imaj kullanıyor?
Bu, simgeler ve arka plan görüntüleri de dahil olmak üzere her türlü görüntü için işe yarar. İstediğiniz görseli göremiyorsanız kodda görsel, arka plan, src, img, jpg, png veya atlıkarınca gibi ifadeler arayın.
5. Bu ne tür bir bağlantı?
Bağlantılarınızın gerçekte herhangi bir bağlantıya tıklamadan istediğiniz şekilde ayarlanıp ayarlanmadığını kontrol etmek için Inspect’i kullanın. Bağlantıların nofollow veya follow olarak ayarlanıp ayarlanmadığını ve aynı sekmede mi yoksa farklı bir sekmede mi açıldıklarını test edin. Veya bir yönlendirme zinciri veya 301 bulmak için Inspect’i kullanın.
- Herhangi bir bağlantıya sağ tıklayın.
- <a href> etiketini bulun.
- Hedefin hangi URL’ye bağlandığını kontrol edin.
- Google’a sıralama amacıyla bu bağlantıyı göz ardı etmesini söyleyen rel=“nofollow” gibi bir etiket arayın.
- Tarayıcıya bağlantıyı yeni/boş bir sekmede açmasını söyleyen target=“_blank” gibi bir etiket arayın.
Ayrıca başka bir sitede yeni bir takip veya nofollow geri bağlantısı alıp almadığınızı da doğrulayabilirsiniz. Ahrefs veya Semrush gibi bir backlink aracında kontrol yapmak yerine yalnızca bir bağlantıyı kontrol etmek istiyorsanız bu kullanışlıdır.
Bağlantıları sık sık kontrol ediyorsanız, etiketlerine bağlı olarak farklı bağlantı türlerini otomatik olarak vurgulamak için tarayıcı uzantılarını da kullanabilirsiniz.
6. Hangi kod parçası bozuk?
Inspect’i kullanarak site öğelerinizdeki sorunları giderin. Hangi kod parçasının soruna neden olduğunu anladıktan sonra sorunu çözebilirsiniz .
Sorunu çözmek için geliştiricileriniz veya teknik ekibinizle birlikte çalışmanız gerekiyorsa kodda tam olarak neye ihtiyacınız olduğunu vurgulamak daha kolaydır.
- Öğenin herhangi bir yerine sağ tıklayın.
- Öğeler kenar çubuğunda , istediğiniz öğeyi bulmak için her bir HTML öğesinin üzerine gelin.
- Alt kod öğelerini görmek üzere bölümleri genişletmek için okları kullanın.
- Kodun karşılık geldiği öğe sitenizde sol pencerede vurgulanacaktır. Onu bulana kadar havada kalmaya ve genişlemeye devam edin.
7. Bu nasıl bir şema?
Çoğu site, Şema Doğrulayıcı’yı kullanarak site şemalarını kontrol etmenize olanak tanır . Ancak bazı siteler Şema Doğrulayıcı botunun URL’yi Al seçeneğini doğrudan kullanmasını engeller.
Rakiplerinizin site şemasını bu araçla veya doğrudan koddan kontrol etmeye devam edebilirsiniz.
- Kontrol etmek istediğiniz sayfaya gidin.
- Sayfada herhangi bir yeri sağ tıklayın ve Sayfa Kaynağını Görüntüle seçeneğini tıklayın .
- Tüm sayfa kodunu seçin (Ctrl+A ve Ctrl+C).
- https://validator.schema.org/ adresine gidin .
- Kod Parçacığı’nı tıklayın .
- Kodun tamamını yapıştırın (Ctrl+V).
- Testi Çalıştır öğesine tıklayın .
- Söz konusu sayfa için algılanan tüm şema öğelerini göreceksiniz.
Doğrulama aracı hatalı görünüyorsa veya bozuk şemayı işaretliyorsa, şema benzeri herhangi bir kodu doğrudan işaretlemede kontrol edebilirsiniz. Şema alanlarındaki sorunları gidermeye çalışıyorsanız veya şemanızın SERP’de neden görünmediğini keşfetmeye çalışıyorsanız bu yararlıdır.
- Sayfada herhangi bir yere sağ tıklayın.
- Schema.org etiketlerini bulana kadar Elements etiketindeki bölümleri genişletin. Şema genellikle <body> etiketinin bir yerinde bulunur.
- Temiz bir şekilde organize edilmemişse, sağ tıklayın ve HTML olarak düzenleyin, ardından bloğun tamamını bir Not Defteri programına kopyalayın.
- Hâlâ göremiyorsanız Sayfa Kaynağını Görüntülemek için sayfayı sağ tıklayın , ardından sayfa kodunda “şema” ifadesini arayın (Ctrl+F).