Bir sayfanın <title> etiketi yalnızca tarayıcı sekmesinde görülen bir yazı değildir. Ekran okuyucu için sayfayı ilk tanıtan sözcüklerdir; arama motoru için tıklama oranını belirleyen başlıktır; kullanıcının yer imlerine kaydederken karşısına çıkan addır. Yoksa veya yanlış yazılmışsa bunların hepsi tek seferde bozulur.
1. document-title hatası nedir?
axe-core'un document-title kuralı, her HTML belgesinin <head> içinde boş olmayan bir <title> öğesi taşımasını şart koşar. Bu, WCAG 2.1 2.4.2 Page Titled (Level A) kriterinin doğrudan karşılığıdır.
Title yoksa, boşsa veya tüm sayfalarda aynıysa kullanıcı sayfanın hangi sayfa olduğunu ayırt edemez — özellikle de aynı anda birden fazla sekme açıkken.
2. Neden önemli?
Title'ın etkilediği yerler birbirinden çok farklı:
- Tarayıcı sekmesi: Bir kullanıcı çoğu zaman 10-20 sekme açıkken çalışır. Sekmeden sekmeye geçerken sadece title'ı görür.
- Ekran okuyucu: Sayfa yüklendiğinde NVDA, JAWS ve VoiceOver önce title'ı seslendirir. Kullanıcının sayfa hakkında ilk öğrendiği şey budur.
- Arama motoru sonuç sayfası: Google başlığı genelde title'dan türetir. Tıklama oranını doğrudan etkiler.
- Yer imleri ve geçmiş: Tarayıcı yer imleri ve geçmiş kayıtları title'ı kullanır. Anlamsız bir title, kullanıcının bir hafta sonra sayfayı tekrar bulmasını zorlaştırır.
- Sosyal medya: OpenGraph title belirtilmemişse paylaşım kartı title'ı kullanır.
Tek bir HTML elemanı bu kadar çok yere girer. Eksik veya kötü yazılmış bir title; SEO, UX ve erişilebilirliği aynı anda sabote eder.
3. Hangi durumlarda tetiklenir?
- Title öğesi yok:
<head>içinde<title>hiç bulunmuyor. Otomatik üretilen sayfalarda en sık karşılaşılan hata. - Boş title:
<title></title>ya da yalnızca boşluk içeriyor. - Anlamsız varsayılan:
<title>Document</title>,<title>Untitled</title>ya da CMS'in vermiş olduğu sayfa kimliği. axe-core bu metinleri yakalayamaz ama erişilebilirlik açısından bunlar yine de eksik sayılır. - Tüm sayfalarda aynı title: Kural teknik olarak geçilse de WCAG 2.4.2 açısından sayfaları birbirinden ayırt edememe ihlal sayılır.
- SPA'da title güncellenmemesi: Tek sayfa uygulamalarında route değiştiğinde title aynı kalırsa kullanıcı yeni sayfaya gittiğini anlamaz; çoğu ekran okuyucu bu değişikliği takip ederken takılır.
4. Doğru çözümler
4.1 Sayfaya özel, açıklayıcı title
İyi bir title sayfanın amacını tek satırda anlatır. Ürün adı, makale başlığı veya bölümün adı önce gelir; site adı en sona — ve genellikle dikey çizgiyle ayrılır.
<title>Site</title>
<title>Untitled</title>
<title>Home</title><title>Erişilebilir Buton İsimleri | Keysonar Blog</title>
<title>iPhone 15 Pro 256GB Mavi — 89.999 TL | Keysonar</title>4.2 Title formatı
Tutarlı bir kalıp, kullanıcı sekmeleri arasında geçerken hemen anlamasını sağlar. Önerilen format: {Sayfa Başlığı} | {Site Adı}. Site adını sona koymak hem ekran okuyucuda önemli bilgiyi başa alır hem de SERP'te tıklama oranı için daha iyidir.
- Ana sayfa: Site adı + kısa değer önermesi
- Kategori: Kategori adı | Site Adı
- Detay sayfası: Öğe adı | Kategori | Site Adı
- Hata sayfası: 404 — Sayfa bulunamadı | Site Adı
4.3 Next.js metadata API
Next.js'te title'ı her sayfanın kendi generateMetadata fonksiyonunda üretmek, hem dinamik içerik için hem de çok dilli siteler için en temiz yoldur.
// app/blog/[slug]/page.tsx
import type { Metadata } from "next";
export async function generateMetadata({
params,
}: {
params: Promise<{ slug: string }>;
}): Promise<Metadata> {
const { slug } = await params;
const post = await getPostBySlug(slug);
return {
title: `${post.title} | Keysonar Blog`,
description: post.description,
};
}// app/layout.tsx
export const metadata: Metadata = {
title: {
template: "%s | Keysonar",
default: "Keysonar — Web erişilebilirliği ve SEO sağlığı",
},
};
// Sayfa kendi title'ını sadece içerik adı olarak yazar:
// app/blog/[slug]/page.tsx
return { title: post.title }; // → "Erişilebilir Buton İsimleri | Keysonar"4.4 SPA route değişikliklerinde title güncelleme
Vue, React Router veya Astro'da olduğu gibi sunucu render olmayan rotalarda title manuel güncellenmelidir. document.title'ı route hook'unda değiştirmek yeterlidir; ama bunu sayfa render olduktan sonra yapmak gerekir.
function usePageTitle(title: string) {
useEffect(() => {
document.title = `${title} | Keysonar`;
}, [title]);
}
function ProductPage() {
const product = useProduct();
usePageTitle(product?.name ?? "Yükleniyor");
// ...
}5. Çok dilli sitelerde title
Sitenin TR ve EN sürümleri varsa title'ı da çevirin. Türkçe sayfada İngilizce title (örneğin "Home") hem ekran okuyucuda hem arama motorunda yanlış dile sınıflandırılmaya yol açar.
export async function generateMetadata(): Promise<Metadata> {
const locale = await getLocale();
const t = await getTranslations(locale);
return {
title: t("blog.metaTitle"),
description: t("blog.metaDesc"),
};
}Title'ın dili, <html lang="tr"> ile uyumlu olmalı. İkisi farklı dillerdeyse axe-core'un html-lang-valid kuralıyla başka bir uyumsuzluk üretebilirsiniz.
6. Gözden kaçan durumlar
- iframe'ler: iframe'in içinde yer alan dokümanın da kendi title'ı olmalıdır; aksi halde axe-core'un
frame-titlekuralı tetiklenir. - Title uzunluğu: Google SERP'te title yaklaşık 580px'de kesilir. axe-core uzunluk denetlemez ama uzun title'lar arama görünümünü düşürür. 50-60 karakter arası önerilir.
- Dinamik karakterler: Title içine emoji veya tutarsız karakter koymak ekran okuyucuda “star symbol” gibi gereksiz duyumlara yol açar. Anlamsızsa kullanmayın.
- 404 ve hata sayfaları: Bu sayfalar da bir title taşımalıdır. Sıklıkla unutuluyor ve “Untitled” durumunda kalıyorlar.
- PDF'ler ve diğer dokümanlar: İndirilebilir PDF'lerin de iç metadata'sında bir title bulunmalıdır. Ekran okuyucu PDF'leri de aynı şekilde okur.
7. Nasıl test edilir?
- Tarayıcı sekmesine bakın: Sekmeyi açtığınızda title hemen kullanıcıya ne sayfa olduğunu söylüyor mu?
- axe DevTools / Lighthouse: Eksik title'ı anında raporlar.
- Keysonar SEO Tools: Tüm sayfaların title'larını listeler; eksik, çok kısa, çok uzun veya yinelenen title'ları öne çıkarır. Site genelinde tutarlılık denetimi için olmazsa olmaz.
- Ekran okuyucu ile sayfa yükleme: NVDA veya VoiceOver açıkken yeni sayfa açın; title'ı doğru ve anlaşılır okuduğundan emin olun.
8. Hızlı kontrol listesi
- Her sayfada boş olmayan bir <title> öğesi var.
- Title sayfaya özgü ve içeriği yansıtıyor — tüm sayfalarda aynı değil.
- Format tutarlı: {Sayfa Başlığı} | {Site Adı}.
- SPA'da route değiştiğinde title güncelleniyor.
- Title'ın dili sayfanın <html lang> değeriyle aynı.
- Title 50-60 karakter civarında — SERP'te kesilmeyecek.
- iframe'lerin de kendi title'ı var.
- 404 ve hata sayfaları anlamlı bir title taşıyor.
- Title 'Document', 'Untitled' veya CMS varsayılanı değil.
9. Referanslar
- WCAG 2.1 SC 2.4.2 — Page Titled — Level A
- HTML Living Standard — The title element
- Google Search Central — Title link best practices
- Next.js — Metadata API