Bir sayfanın tasarımı iyi olabilir, içerik kaliteli olabilir, hatta hız skorları da yüksek olabilir. Ama arama motorları sayfanın ‘ne anlattığını’ beklediğiniz kadar net anlayamayabilir. Bunun nedeni ise içeriğin yalnızca metinden ibaret olmamasıdır.
Semantik HTML & heading hiyerarşisi, tarayıcıların erişilebilirlik teknolojilerinin ve arama motorlarının sayfanızı doğru okumasını sağlayan temel katmandır. Bu yazıda semantik HTML yaklaşımını, heading hiyerarşisini ve “outline” mantığıyla daha düzenli, okunabilir ve SEO uyumlu sayfa yapısı kurmayı detaylı şekilde ele alacağız.
Semantik HTML Nedir ve Neden Sadece “Kod Düzeni” Değildir?
Semantik HTML, bir sayfadaki öğelerin anlamına uygun etiketlerle işaretlenmesi demektir. Yani amaç yalnızca “çalışan” bir sayfa yapmak değil, sayfanın bölümlerini anlamlı şekilde tanımlamaktır. Örneğin bir üst menüyü div ile yapmak mümkündür ancak nav kullanmak o alanın navigasyon olduğunu açıkça belirtir. Aynı şekilde ana içerik alanını main, sayfa alt bilgisini footer, bağımsız içerik bloklarını article, ilişkili yan içerikleri aside ile işaretlemek sayfanın yapısını daha net hale getirir.
Bu yaklaşımın pratik faydası üç alanda ortaya çıkar. İlk olarak erişilebilirlik tarafında, ekran okuyucular ve yardımcı teknolojiler sayfayı anlamlı bölümlere ayırarak kullanıcıya daha iyi bir deneyim sunar. İkinci olarak bakım maliyeti düşer. Bir ekip sayfayı devraldığında hangi bölümün ne işe yaradığını daha hızlı anlar. Üçüncü olarak SEO açısından arama motorları sayfanın ana ve yardımcı içeriklerini daha iyi anlayabilir.
Semantik HTML nedir sorusunun cevabı sadece “etiket seçimi” gibi görünse de aslında bilgi mimarisi kararıdır. İçeriğinizi nasıl paketlediğiniz, içeriğin kendisi kadar önemlidir.
Heading Hiyerarşisi Nedir ve En Sık Yapılan Hatalar Neler?
Heading hiyerarşisi, sayfanın başlık yapısını mantıklı bir sıraya koymaktır. H1 sayfanın ana başlığıdır. H2’ler ana bölümleri temsil eder. H3’ler H2’nin alt başlıklarıdır ve böyle devam eder. Bu yapı, okuyucuya ve tarayıcıya “hangi bölüm neyin altında” bilgisini verir.
En yaygın hatalardan biri, tasarım gerekçesiyle başlık seviyelerini atlamaktır. Örneğin sayfada H1’den sonra doğrudan H4 kullanmak, görsel olarak hoş dursa bile bilgi mimarisi açısından kopukluk yaratır. Diğer bir hata ise bir sayfada birden fazla H1 kullanımıdır. Modern HTML semantik semantik spesifikasyonlarında farklı yaklaşımlar tartışılabilse de, pratikte SEO ve içerik düzeni açısından çoğu projede tek bir ana H1 kullanmak daha tutarlı sonuç verir.
Bir başka kritik hata ise başlıkları sadece kalın metin gibi kullanmaktır. Heading etiketleri görsel bir stil değil, yapısal işarettir. Stil için CSS kullanılmalı, yapı için heading hiyerarşisi korunmalıdır.
Outline Algoritması Mantığıyla Sayfa Yapısı Nasıl Kurulur?
Outline mantığı, bir sayfayı bir doküman gibi düşünerek bölüm bölüm planlamayı ifade eder. Ana konu H1 ile belirlenir, ardından ara bölümler H2 olur, alt konular H3’e bölünür. Bu yaklaşım özellikle uzun içeriklerde, rehberlerde ve blog yazılarında okunabilirliği dramatik şekilde artırır.
Bir sayfanın outline yapısını kurarken önce “kullanıcı bu sayfaya hangi soruyla geliyor?” sorusunu yanıtlamak gerekir. Ardından bu sorunun alt soruları belirlenir. Bu alt sorular genellikle H2 başlıklarıdır. H2’nin altında daha detaylı açıklamalar gerekiyorsa H3 ile bölünür. Böylece içerik, okuyucunun zihnindeki soru akışı ile uyumlu hale gelir.
Ayrıca outline yaklaşımı içerik üretimini de hızlandırır. Önce iskelet çıkarılır, daha sonra her bölüm doldurulur. Bu sayede içerik dağılmaz ve tekrarlar azalır.
SEO Açısından Heading Yapısı: Google Ne Bekler?
Google ve diğer arama motorları bir sayfanın konusunu anlamaya çalışırken birçok sinyali birlikte değerlendirir. Heading yapısı bu sinyallerden biridir. Doğru başlık yapısı, sayfanın ana konusunu ve alt konularını daha net hale getirir.
Burada amaç “anahtar kelime doldurmak” değil, konuyu mantıklı başlıklara bölmektir. H2 ve H3’lerin kullanıcı niyetine uygun olması, içeriğin kapsamını güçlendirir. Bu da uzun kuyruklu aramalarda görünürlüğü artırabilir.
Ayrıca iyi yapılandırılmış heading’ler, snippet ve “People Also Ask” gibi alanlarda görünme şansını artıracak şekilde sayfanın bölümlerini netleştirir. Her başlık altında gerçekten o başlığın vaadini karşılayan içerik olması önemlidir.
Erişilebilirlik ve UX: Headings Kullanıcı Deneyimini Nasıl İyileştirir?
Heading yapısı sadece SEO için değil, kullanıcı deneyimi için de kritik olur. Özellikle uzun sayfalarda kullanıcılar başlıklar üzerinden tarama yapar, ilgilendiği bölüme hızlıca iner. B durum sayfada kalma süresini ve içeriğin tüketilme oranını artırır.
Ekran okuyucu kullananlar için headings çok daha kritik bir rol oynar. Bu kullanıcılar sayfayı başlıklar üzerinden gezebilir. Başlıkların tutarlı olması, sayfanın erişilebilirliğini doğrudan artırır. Erişilebilirlik, yalnızca etik bir konu değil, aynı zamanda kurumsal projelerde uyumluluk ve risk yönetimi meselesidir.
Semantik Etiketler ve Headings Birlikte Nasıl Kullanılmalı?
İyi bir sayfa yapısında semantik etiketler ve heading hiyerarşisi birlikte çalışır. Örneğin ana içerik main içinde yer alır, içerik blokları section ya da article ile ayrılır ve her bölümün başlığı uygun seviyedeki heading ile başlar.
Buradaki en önemli nokta şudur: Semantik etiketler sayfa içerisindeki ‘bölüm’ mantığını belirlerken, heading etiketleri ‘başlık’ mantığını organize eder. Bu ikisi birbirinin yerine geçmez. Yani bir section etiketi kullanmak, otomatik olarak doğru bir başlık yapısı oluşturduğunuz anlamına gelmez; her section için anlamlı ve açıklayıcı bir başlık atanması gerekir.
Bu yaklaşım, özellikle büyük ve içerik açısından zengin web sitelerinde arama motorları açısından SEO performansını artırırken sitenin bakım ve güncellenmesini de çok daha kolay hale getirir.
Pratik Kontrol Listesi: Doğru Heading Hiyerarşisi Nasıl Denetlenir?
Bir sayfanın heading yapısını denetlemek için şu sorular sorulabilir: H1 yalnızca bir tane mi? H2’ler sayfanın ana bölümlerini kapsıyor mu? H3’ler gerçekten H2’nin alt konusu mu? Başlık seviyeleri atlanmış mı?
Başlıklar sadece stil amaçlı mı kullanılmış? Bu kontrol, içerik yayına alınmadan önce yapılırsa uzun vadede ciddi sorunların önüne geçer. Ajanslar ve in-house ekipler için böyle bir kontrol listesi, kalite standartlarını belirlemenin ve sürdürmenin pratik bir yolu olarak işlev görür.
Doğru vs Yanlış Heading Hiyerarşisi Örnekleri
| Örnek | Yanlış Kullanım | Neden Yanlış? | Doğru Kullanım | Neden Doğru? |
| Ana başlık kullanımı | Sayfada birden fazla H1 | Ana konu belirsizleşir, yapı dağılır | Tek bir H1 kullanılır | Sayfanın ana konusu net şekilde tanımlanır |
| Heading seviyesi atlama | H1 → H3 | H2 eksik, hiyerarşi kırılır | H1 → H2 → H3 | Mantıksal içerik akışı korunur |
| Stil amaçlı heading | <h3> sadece görsel olarak küçük başlık için kullanılır | Heading yapısı semantik değil, görseldir | Görsel stil için CSS kullanılır | Heading yapısı anlam odaklı kalır |
| Heading yerine div kullanımı | <div class=”title”>Başlık</div> | Tarayıcı ve crawler başlığı anlayamaz | <h2>Başlık</h2> | İçerik yapısı semantik olarak tanımlanır |
| Boş veya anlamsız heading | <h2>Genel</h2> | Anlam taşımaz, SEO değeri düşüktür | <h2>Semantik HTML Avantajları</h2> | Konu net şekilde ifade edilir |
| Heading sırası karışıklığı | H1 → H2 → H4 → H3 | Outline mantığı bozulur | H1 → H2 → H3 → H4 | İçerik hiyerarşisi korunur |
| Tüm metni heading yapmak | Çok sayıda gereksiz heading | Yapı karmaşık hale gelir | Sadece bölüm başlıkları heading olur | Okunabilirlik ve yapı korunur |