Başlık Etiketleri (H1-H6) ve Hiyerarşi

Başlık etiketleri nedir?

H1'den H6'ya kadar başlık etiketleri, bir sayfanın içerik hiyerarşisini ve bölüm yapısını tanımlayan HTML etiketleridir. H1 en üst düzey başlığı, H2 ana bölümleri, H3 alt bölümleri temsil eder ve bu böyle devam eder. Bu etiketler tarayıcıda görsel olarak büyük/kalın görünse de asıl amaçları görsel değil, yapısaldır: bir kitabın içindekiler tablosuna benzer şekilde, sayfanın mantıksal iskeletini oluştururlar.

Bu hiyerarşi yalnızca insan gözüyle okunan bir düzen değil, aynı zamanda tarayıcıların ve yardımcı teknolojilerin (ekran okuyucular gibi) programatik olarak "anladığı" bir ağaç yapısıdır. Bir ekran okuyucu kullanıcısı genellikle sayfada başlıktan başlığa atlayarak gezinir; bu yüzden hiyerarşi bozulursa gezinme de bozulur.

Başlık seviyeleri aynı zamanda bir sayfanın uzun içeriğini taranabilir (scannable) hale getirir: kullanıcı sayfayı satır satır okumak yerine başlıklara göz gezdirerek aradığı bölümü bulur. Bu, hem kullanıcı deneyimini hem de sayfada geçirilen süreyi olumlu etkileyebilir.

Neden önemli?

Doğru başlık hiyerarşisi hem arama motorlarının sayfanın konu bütünlüğünü ve alt konularını anlamasını kolaylaştırır hem de ekran okuyucu kullanan kullanıcıların sayfada gezinmesini sağlar. Google, uzun bir sayfada hangi bölümün hangi alt konuyu kapsadığını başlık yapısından çıkarır; bu da özellikle "öne çıkan snippet" (featured snippet) gibi zengin sonuçlarda doğru pasajın seçilmesine yardımcı olabilir.

Düzensiz veya eksik hiyerarşi, içerik yapısının belirsizleşmesine ve erişilebilirlik sorunlarına yol açar. Örneğin H2'den doğrudan H4'e atlamak, ekran okuyucu kullanıcısının "burada bir ara seviye eksik mi, yoksa bölüm mü bitti?" diye kafasının karışmasına neden olabilir.

Bir uç durum olarak, tek sayfalık uygulamalarda (single page application) veya çok bileşenli şablon sistemlerinde farklı bileşenler kendi H1'lerini bağımsız olarak render edebilir; bu da farkında olmadan sayfada birden fazla H1 oluşmasına yol açabilir. Bu tür teknik mimarilerde başlık seviyelerini merkezi bir yerden yönetmek önemlidir.

Nasıl düzeltilir?

• Sayfada yalnızca bir tane H1 bulunmalı; bu genellikle sayfanın ana başlığıdır ve sayfanın konusunu net biçimde özetlemelidir.
• Başlıkları sırayla kullanın: H1 → H2 → H3, seviye atlamadan.
• Başlıkları görsel boyut için değil, içerik yapısını tanımlamak için kullanın; büyük/kalın metin istiyorsanız CSS kullanın, yanlış başlık seviyesi seçmeyin.
• Her H2/H3 gerçek bir bölüm başlığı olmalı, dekoratif metin veya slogan olmamalı.
• Anahtar kelimeleri başlıklarda doğal biçimde kullanın; her başlığı zorla anahtar kelimeyle doldurmayın.
• Uzun sayfalarda başlıkları bir içindekiler tablosu (table of contents) oluşturacak şekilde tutarlı ve öngörülebilir yazın; bu hem kullanıcıya hem arama motoruna yardımcı olur.
• Tema veya bileşen kütüphanesi kullanıyorsanız, farklı bileşenlerin (header, hero, kart, footer) hangi başlık seviyesini kullandığını merkezi bir stil rehberinde belgeleyin.
• Sayfa düzenini (layout) değiştirirken başlık hiyerarşisinin bozulup bozulmadığını tarayıcının geliştirici araçlarıyla (DOM ağacı) periyodik olarak kontrol edin.
• Blog veya haber sitelerinde yazı başlığını (H1) editoryal başlıkla, SEO title'ı ise ayrı bir alanda tutan bir içerik yönetim iş akışı kurun; ikisini birbirine kilitlemeyin.
• Çok yazarlı sitelerde farklı editörlerin farklı alışkanlıkları olabilir; bu yüzden başlık hiyerarşisi kurallarını bir stil kılavuzunda yazılı hale getirmek tutarlılığı artırır.

Örnek

<h1>SEO Rehberi</h1>
<h2>Teknik SEO</h2>
<h3>Site Hızı</h3>
<h2>İçerik SEO</h2>
<h3>Anahtar Kelime Araştırması</h3>

Kötü örnek: <h1>Hoş Geldiniz</h1> sonrasında doğrudan <h4>Ürünlerimiz</h4> kullanmak — H2 ve H3 seviyeleri atlanmış, hiyerarşi kırılmıştır.

Sık yapılan hatalar

• Sayfada birden fazla H1 kullanmak (ör. hem logo alanında hem içerikte).
• Hiç H1 kullanmamak.
• Başlık etiketlerini sadece büyük/kalın font elde etmek için kullanmak, hiyerarşiyi göz ardı etmek.
• H2'den doğrudan H4'e geçerek seviye atlamak.
• Seoraporu.co raporunda "birden fazla H1" veya "eksik H1" uyarısı çıktığında bunu şablon/tema seviyesinde düzeltmek gerekir, çünkü genelde tüm sayfalarda tekrarlanan bir sorundur.