İçeriğe geç

Rehber

Title, meta description ve canonical JavaScript ile ekleniyorsa ne olur?

Sayfa başlığı, açıklaması veya canonical etiketi ham HTML'de yoksa ve sonradan JavaScript ile ekleniyorsa sosyal paylaşımlar ve bazı arama motorları bunları göremez. Sunucu tarafında sabitlemeyi anlatıyoruz.

3 dk okumaİleri seviyeGeçerlilik dönemi: 2026 Eylül itibarıyla
Title, meta description ve canonical JavaScript ile ekleniyorsa ne olur? — editoryal kapak görseli

Tek sayfa uygulamalarında her sayfanın başlığı ve açıklaması genellikle bir kütüphane aracılığıyla tarayıcıda ayarlanır. Tarayıcıda her şey doğru görünür; ancak sunucunun gönderdiği ilk HTML'de tüm sayfalar aynı genel başlığı taşır ya da hiç başlık yoktur.

KTYAPTECH SEO Analyzer bu sorunu RENDER-METADATA-REQUIRES-JAVASCRIPT-001 koduyla, “Başlık, açıklama veya canonical sonradan ekleniyor” başlığı altında ve yüksek önem derecesiyle raporlar (Teknik SEO). Bu rehber, bulgunun ne anlama geldiğini, neden önemli olduğunu ve adım adım nasıl düzeltileceğini anlatıyor.

JavaScript ile eklenen meta veriler nedir?

Bu bulgu, title, meta description veya canonical etiketinin ham HTML'de bulunmadığını ya da farklı olduğunu, doğru değerin ancak JavaScript çalıştıktan sonra oluştuğunu belirtir.

Neden önemli? SEO ve kullanıcı deneyimine etkisi

Google render ettiğinde doğru değerleri görebilir, ama bu render'a bağlıdır. Facebook, LinkedIn, WhatsApp ve X gibi platformların önizleme botları JavaScript çalıştırmaz ve paylaşımlarda yanlış veya genel başlık gösterir.

Canonical'ın JavaScript ile eklenmesi özellikle risklidir: Google ham HTML'deki ve render sonrası farklı canonical değerlerini birlikte görürse sinyaller karışır.

Sorun nasıl tespit edilir?

  • SEO Analyzer raporundaki “Başlık, açıklama veya canonical sonradan ekleniyor” bulgusunu inceleyin.
  • curl ile ham HTML'deki <title>, meta description ve canonical değerlerini kontrol edin.
  • Bir sosyal ağ paylaşım önizleme aracıyla sayfanın nasıl göründüğünü test edin.
JavaScript ile eklenen meta veriler: yanlış ve doğru uygulamanın karşılaştırması
JavaScript ile eklenen meta veriler: sorunlu durum ve doğru uygulama yan yana.

Adım adım çözüm

  1. Title, meta description, canonical, robots ve Open Graph etiketlerini sunucu tarafında, sayfa verisiyle birlikte üretin.
  2. Framework'ünüzün sunucu tarafı metadata API'sini kullanın (ör. Next.js generateMetadata, Nuxt useHead ile SSR).
  3. SSR mümkün değilse en azından önemli sayfalar için önceden render edilmiş HTML sunun.
  4. İstemci tarafı kodun bu etiketleri tekrar değiştirmediğinden emin olun.
  5. Paylaşım önizleme araçlarıyla ve curl ile ham HTML'i doğrulayın.

Sayfa geçişlerinde başlık

SPA içinde sayfalar arasında gezinirken başlığın güncellenmesi kullanıcı deneyimi için gereklidir ve sorun değildir. Sorun, ilk yüklemedeki HTML'in doğru değerleri içermemesidir.

JavaScript ile eklenen meta veriler için düzeltme örneği
Başlık, açıklama ve canonical ilk HTML yanıtında gelir.

Sık yapılan hatalar

  • Tüm sayfalar için index.html'de tek genel başlık bırakmak.
  • Canonical'ı istemci tarafında eklemek.
  • Yalnızca tarayıcı sekmesindeki başlığa bakarak kontrol etmek.

Düzeltmeyi nasıl doğrularsınız?

  • curl ile ham HTML'de doğru title, description ve canonical'ı görün.
  • Paylaşım önizleme araçlarıyla doğru başlık ve görselin çıktığını kontrol edin.
  • SEO Analyzer'ı yeniden çalıştırın.

Sık sorulan sorular

Google render sonrası title'ı kullanır mı?

Genellikle kullanır, ancak ham HTML'de doğru değeri sunmak daha hızlı ve güvenilirdir.

Sosyal ağlar neden yanlış başlık gösteriyor?

Önizleme botları JavaScript çalıştırmaz; yalnızca ham HTML'deki etiketleri okur.

React Helmet kullanmak yanlış mı?

SSR ile birlikte kullanıldığında sorun değildir. Yalnızca istemci tarafında kullanıldığında ham HTML'e etiket eklemez.

Özet

Title, description, canonical ve Open Graph etiketleri ham HTML'de, sunucu tarafında üretilmelidir. Framework'ünüzün sunucu metadata API'sini kullanın ve sonucu curl ile doğrulayın.

Sitenizde bu ve benzeri sorunların olup olmadığını görmek için KTYAPTECH Ücretsiz SEO Analizi aracını kullanabilirsiniz: rapordaki her bulgunun yanında, sorunu anlatan çözüm rehberine giden bir bağlantı bulunur.

Kategoriler

Etiketler

Kaynaklar

  1. Google Search Central — JavaScript SEO temelleri
  2. Google Search Central — Başlık bağlantıları (title)
  3. Google Search Central — Yinelenen URL'leri birleştirme (canonical)

Paylaş