HTML semantik etiketler sayfadaki bir bölümün görünüşünü değil ne olduğunu anlatan etiketlerdir: menü için nav, ana içerik için main, bağımsız yazı için article gibi. Tek başlarına sıralama faktörü değildirler. Arama motorlarının ve ekran okuyucuların sayfanın ana içeriğini, başlık hiyerarşisini, gezinme alanlarını doğru ayırmasına yardım ederler.
Semantik etiketler SEO'yu nasıl etkiler?
Semantik etiketler SEO'yu dolaylı olarak etkiler. Sayfanın hangi kısmının asıl içerik, hangisinin menü ya da yan alan olduğunu netleştirirler. Google <div> ile kurulmuş bir sayfayı da anlayabilir. Yine de temiz bir yapı ana metnin şablon öğelerinden ayrılmasını kolaylaştırır.
Asıl ağırlık başlık etiketlerindedir. Google H1, H2, H3 etiketlerini sayfanın konusunu ve alt bölümlerini anlamak için kullanır. Başlıkların düzgün sıralandığı bir sayfada her bölüm kendi alt konusuyla eşleşebilir.
Erişilebilirlik tarafındaki kazanç daha doğrudandır. Ekran okuyucu kullanan bir ziyaretçi nav, main ve footer gibi alanlar arasında bu etiketler sayesinde atlayabilir. Gereksiz iç içe div katmanlarının azalması DOM'u (sayfanın öğe ağacı) küçültür ve bu da etkileşim hızına olumlu yansıyabilir. Hız ölçütlerini Core Web Vitals konusundaki yazımızda anlattık.
Hangi HTML5 etiketi ne işe yarar?
Yedi temel HTML5 etiketi sayfanın ana bölgelerini tanımlamaya yarar: header, nav, main, article, section, aside ile footer. Aşağıdaki tablo her birinin nerede kullanıldığını özetler:
| Etiket | Ne için kullanılır | Sık yapılan hata |
|---|---|---|
| header | Sayfanın ya da bir bölümün giriş alanı: logo, site adı, bazen menü | H1 ile karıştırılması |
| nav | Ana menü, breadcrumb gibi gezinme link grupları | Sayfadaki her link grubunu nav içine almak |
| main | Sayfanın asıl içeriği, sayfada tek olur | Hiç kullanılmaması |
| article | Tek başına anlamlı içerik: blog yazısı, haber, ürün kartı, yorum | Tüm sayfayı article ile sarmak |
| section | Başlığı olan tematik bölüm | Stil için div yerine kullanılması |
| aside | Ana içerikle dolaylı ilgili alan: yan sütun, ilgili yazılar | Ana içeriğin bir parçasını aside'a koymak |
| footer | Sayfanın ya da bölümün alt bilgisi: iletişim, telif, yasal linkler | Anahtar kelime listesiyle doldurmak |
Bir blog yazısı sayfası için tipik iskelet şöyledir: header içinde logo ile nav, ardından main içinde article, onun içinde H1 ve section'lar, yanda aside, en altta footer. İçerik içinde görsel ile açıklaması için figure ve figcaption, tarih için time etiketi kullanılır.
Header etiketi ile H1 aynı şey mi?
Hayır. Header etiketi ile H1 aynı şey değildir: header bir bölge etiketidir, H1 ise bir başlık etiketidir. Header logo, menü ve arama kutusunu barındırabilir. Sayfada birden fazla header olabilir, her article'ın da kendi header'ı olabilir. H1 ise sayfanın ana konusunu söyleyen başlıktır.
Google birden fazla H1 kullanan sayfaları cezalandırmaz, cezalandırdığı düşüncesi yaygın bir yanlıştır. Yine de sayfada tek ve açık bir H1 olması hem kullanıcı hem arama motoru için konuyu netleştirir. Sık karşılaştığımız hata logonun H1 yapılmasıdır. Bu durumda sitenin her sayfasında aynı H1 görünür ve asıl başlık H2'ye düşer.
Başlık sırası da önemlidir. H1'den sonra H2 gelir, H2'nin altındaki bölümler H3 olur. Başlık etiketini yalnız yazıyı büyütmek için kullanmak hiyerarşiyi bozar. Görsel boyut CSS ile ayarlanmalıdır.
Strong, em ve address gibi metin etiketleri SEO'da işe yarar mı?
Hayır. Strong ile em ve address gibi metin etiketlerinin sıralamaya ölçülebilir bir etkisi yoktur. Bu etiketler anlamı doğru aktarmak için kullanılır. Strong metnin önemli olduğunu, b yalnız görsel kalınlığı belirtir. Em vurgu, i ise yalnız italik görünüm içindir. Ekran okuyucular strong ve em'i farklı tonla okuyabilir.
Address etiketi sayfanın ya da yazının sahibine ait iletişim bilgisini işaretler. Yerel SEO için yeterli değildir. İşletme adı, adres ve telefonun Google tarafından okunması için LocalBusiness yapılandırılmış verisi ile güncel bir Google İşletme Profili daha belirleyicidir. Yapılandırılmış verinin nasıl eklendiğini schema markup yazımızda anlattık.
Semantik yapı nasıl kontrol edilir?
Semantik yapıyı kontrol etmenin en hızlı yolu sayfanın başlık ve bölge haritasını çıkarmaktır. Tarayıcı eklentileriyle ya da Lighthouse'un erişilebilirlik denetimiyle sayfadaki başlık sırasını ve bölge etiketlerini görebilirsiniz. Kontrol listesi beş maddedir:
- Sayfada bir main etiketi var ve asıl içerik onun içinde.
- H1 sayfanın konusunu söylüyor, logo ya da site adı değil.
- Başlıklar H1, H2, H3 sırasıyla iniyor, arada seviye atlanmıyor.
- Menü ve breadcrumb nav içinde, ilgili yazılar aside içinde.
- Görseller img etiketiyle ve betimleyici alt metinle ekli, arka plan resmi olarak değil.
Semantik yapı çoğu zaman temadan gelir. Bu yüzden düzeltmesi tek sayfada değil şablonda yapılır ve sitenin tamamına yayılır. Yeni bir web tasarım projesinde bu yapıyı baştan kurmak sonradan düzeltmekten çok daha ucuzdur. Semantik HTML'in teknik SEO'nun diğer parçalarıyla ilişkisini teknik SEO için hazırladığımız rehberde bulabilirsiniz. Mevcut temanızın başlık ve bölge yapısını incelemek için SEO danışmanlığı hizmetimizden destek alabilirsiniz.