Başlık Yapısı (H1–H6) Nedir?

Sayfanın içindekiler tablosu

HTML altı seviye başlık öğesi sunar: <h1> en üst, <h6> en alt seviyedir. Bunları bir kitabın içindekiler tablosu gibi düşünmek işe yarar. Başlıkları sırayla okuyan biri, metnin tamamını okumadan sayfanın neyi, hangi sırayla anlattığını kavrayabilmelidir.

h1  Koşu Ayakkabısı Nasıl Seçilir?
  h2  Ayak tipinizi belirleyin
    h3  Düz taban
    h3  Yüksek kemer
  h2  Doğru numarayı bulun
  h2  Zemine göre seçim
    h3  Asfalt
    h3  Arazi

Bu örnekte her h3, üstündeki h2'nin alt başlığıdır. Yapı, metnin mantığını yansıtır; görsel tasarımı değil.

Kimin için önemli?

Okurlar ve ekran okuyucu kullanıcıları

Çoğu okur bir sayfayı baştan sona okumaz, başlıklar arasında gezinerek aradığı bölümü bulur. Ekran okuyucu kullananlar ise başlıklar arasında klavye kısayollarıyla atlayabilir; başlık listesi onlar için sayfanın haritasıdır. Bu yüzden başlık yapısı web erişilebilirliği açısından temel bir konudur. W3C'nin başlıklar rehberi, seviyelerin anlamlı biçimde iç içe geçmesini ve seviye atlanmamasını önerir.

Arama motorları

Google başlıkları sayfanın konusunu ve bölümlerini anlamak için kullanır; sonuçlarda gösterdiği başlığı oluştururken de <title> öğesinin yanında sayfadaki ana başlığa bakabilir. Bu yüzden h1 ile meta title aynı konuyu anlatmalıdır. Öte yandan Google'ın SEO başlangıç rehberi, başlıkların anlamsal sırada olmasının ekran okuyucular için çok iyi olduğunu ama Google Arama açısından sıranın bozuk olmasının fark yaratmadığını açıkça söyler. Rehbere göre ideal bir başlık sayısı da yoktur.

Yapay zekâ destekli arama sistemleri de içerikten parça alıntılayarak çalışır. Açık başlıklarla ayrılmış, her biri tek bir soruya odaklanan bölümler, bir pasajın bağlamından koparılıp anlaşılmasını kolaylaştırır; bu da cevap çıkarılabilirliği açısından anlamlıdır.

Birden fazla H1 kullanılabilir mi?

HTML standardı birden fazla <h1>'e izin verir ve Google'ın tek H1 zorunluluğu getiren bir kuralı yoktur. Ancak bölüm öğeleri (<section>, <article>) içindeki h1'leri otomatik olarak alt seviyeye indiren “belge taslağı algoritması” tarayıcılar tarafından hiç uygulanmadı ve standarttan kaldırıldı. Pratikte sayfanın ana konusunu tek bir h1 ile, bölümleri h2 ve altıyla göstermek hem okurlar hem yardımcı teknolojiler için en anlaşılır yoldur.

Sık yapılan hatalar

• Başlığı stil aracı olarak kullanmak: Sadece büyük ve kalın görünsün diye bir cümleyi h2 yapmak. Görünüm CSS ile verilmeli, başlık öğesi anlam için kullanılmalıdır.
• Görünüş için seviye atlamak: h2'den doğrudan h4'e geçmek ekran okuyucu kullanıcılarını “arada bir bölüm mü kaçırdım?” sorusuyla baş başa bırakır.
• Logoyu her sayfada h1 yapmak: Bu durumda tüm sayfaların ana başlığı aynı görünür.
• Belirsiz başlıklar: “Giriş”, “Detaylar”, “Diğer” gibi başlıklar içeriği anlatmaz.
• Başlık dışında başlık: Görsel olarak başlık gibi duran ama <div> ile yazılmış metinler, DOM ağacında başlık olarak görünmez.

Nasıl kontrol edilir?

Tarayıcının geliştirici araçlarındaki erişilebilirlik ağacı, sayfadaki başlıkları seviyeleriyle birlikte listeler. Ekran okuyucuyla başlıklar arasında gezinmeyi denemek de hızlı bir testtir. Eksik veya birden fazla h1'i, boş başlıkları ve seviye atlamalarını sitenizin taranan sayfalarında topluca görmek için SEO Analiz Aracı kullanılabilir. Başlık yapısı, sayfa içi SEO çalışmalarında içerikle tasarımın kesiştiği noktadır.