Tarayıcı konsolunda canonical, hreflang ve robots etiketlerini tek seferde görmek

JavaScript · Technical SEO · Tools

Bir sayfanın teknik SEO etiketlerine bakmak için eklenti kurmayı sevmiyorum. Eklentiler sayfanın işlenmiş halini mi, sunucudan gelen halini mi gösteriyor, çoğu zaman belli değil. Konsol ise ne gördüğünü açıkça söylüyor.

Aşağıdaki parçayı bir yer imine kaydedip her sayfada çalıştırıyorum.

seo-etiketleri.js
(() => {
  const q = (s) => [...document.querySelectorAll(s)];
  const rows = [
    ['title', document.title],
    ['meta description', q('meta[name="description"]').map(m => m.content).join(' | ') || '—'],
    ['meta robots', q('meta[name="robots"], meta[name="googlebot"]').map(m => `${m.name}: ${m.content}`).join(' | ') || '—'],
    ['canonical', q('link[rel="canonical"]').map(l => l.href).join(' | ') || '—'],
    ['h1', q('h1').map(h => h.textContent.trim()).join(' | ') || '—'],
  ];
  q('link[rel="alternate"][hreflang]').forEach(l => rows.push([`hreflang ${l.hreflang}`, l.href]));
  console.table(Object.fromEntries(rows));

  if (q('link[rel="canonical"]').length > 1) console.warn('Birden fazla canonical var!');
  if (q('h1').length !== 1) console.warn(`Sayfada ${q('h1').length} adet h1 var.`);
})();

Yer imi olarak kullanmak

Kodu tek satıra indirip başına javascript: ekleyerek yer imi yapabilirsin. Uzun kodlarda bazı tarayıcılar sorun çıkarıyor. O durumda Chrome'daki Sources → Snippets bölümüne kaydetmek daha rahat.

Dikkat: bu, işlenmiş DOM

Bu kod JavaScript çalıştıktan sonraki sayfayı okur. Sunucudan gelen ham HTML'de canonical yoksa ama JavaScript sonradan ekliyorsa, burada görürsün ama bazı tarayıcılar göremeyebilir. Ham hali görmek için:

curl -s https://johnflaxman.com/ | grep -iE '<link[^>]+canonical|<meta[^>]+robots'

İkisi farklıysa, işte asıl bakılması gereken yer orası.

Comments / questions

There's no comment section here. If you have a question or want to add something, message me on Telegram or send an email to [email protected]. Thanks!

Related pages