Next.js App Router’da başlık, açıklama, canonical, OG/Twitter görselleri ve faviconlar için teknik uygulama rehberi.
Tek ve tutarlı bir metadata kaynağı kurun
Başlık, açıklama ve canonical aynı sayfanın kimliğini farklı tüketicilere anlatır. Next.js App Router’da statik metadata veya generateMetadata kullanmak, `<head>` etiketlerini bileşenlere dağınık biçimde yazmaktan daha denetlenebilirdir.
Başlık şablonunda marka bir kez eklenmelidir. Alt sayfa başlığı zaten ByteQuant içeriyorsa global template ikinci kez marka ekleyebilir. Build çıktısında gerçek HTML’i incelemek bu tür birleşim hatalarını yakalar.
Canonical ve hreflang’i birlikte düşünün
Canonical, indekslenmesini istediğiniz birincil URL’yi belirtir; yönlendirme değildir ve Google için sinyaldir. İki dilli sayfalarda her dil kendine canonical verirken hreflang kümesi karşılıklı tr-TR, en-US ve uygun x-default hedeflerini göstermelidir.
Canonical ve Open Graph URL mutlak, HTTPS ve son yönlendirme hedefi olmalıdır. Query parametreli filtreler, slash politikası ve export edilen statik rota biçimi site genelinde tutarlı tutulmalıdır.
- Her lokalize sayfa kendine canonical versin.
- Hreflang bağlantıları karşılıklı olsun.
- Sitemap alternates ile sayfa metadata’sını aynı kaynaktan üretin.
Sosyal görseli içerik sözleşmesi olarak tasarlayın
Open Graph ve Twitter Card etiketleri platform botlarına başlık, açıklama ve görsel önerir; platform son görünümü değiştirebilir veya önbelleğe alabilir. 1200×630 oranı yaygın bir başlangıçtır, fakat kritik metni kenarlardan uzak tutun.
Görsel URL’si herkese açık, mutlak ve doğru Content-Type ile sunulmalıdır. Önizleme kutusu gerçek bot taraması değildir. Yayından sonra platform debugger’ları ve HTTP başlıklarıyla doğrulayın.
Favicon ailesini ve manifesti doğrulayın
Yüksek çözünürlüklü kare PNG modern tarayıcılar için iyi bir kaynak olabilir; küçük sekme boyutunda şeklin hâlâ seçilmesi gerekir. `rel=icon`, Apple touch icon ve web manifest girdilerinin aynı marka kaynağına işaret etmesi görsel tutarlılık sağlar.
Manifestte gerçek piksel ölçüsünü yazın ve maskable ikonlarda güvenli alan bırakın. Favicon değişiklikleri agresif önbelleğe alınabilir; dosya yolu sürümleme veya yeniden tarama zaman alabilir. Etiket üretici kodu doğru biçimlendirse bile yükleme, erişilebilirlik ve indeksleme doğrulamasının yerini tutmaz.
Görsel önerisi: Tek metadata kaynağından arama sonucu, sosyal kart, tarayıcı sekmesi ve PWA ikonuna dağılım. Bu içerik genel bilgilendirme amaçlıdır; hukuki veya güvenlik danışmanlığı değildir.