Semantik Etiket kavramı, dilbilimi fikriyle ortaya çıkmıştır. Semantik etiketler; kelimeler, semboller ve işaretler gibi farklı göstergeler arasındaki bağlantıları bulma disiplinidir. HTML biçimlendirme dili olduğundan, semantik bunun çok önemli bir parçasıdır. HTML5 semantik etiketlerini akıllıca kullanırsanız, web sitenizi daha erişilebilir hale getirebilir, kullanıcı deneyimini üst seviyeye çıkarabilir ve daha iyi arama motoru sıralamaları alabilirsiniz.
Bu yazımızda, HTML5 semantik etiketlerinin ne olduğunu ve SEO için neler yapabileceğini göreceğiz. Ardından, HTML sayfalarınızı geliştirmenize yardımcı olacak bazı ipuçları vereceğiz.
HTML5 semantik etiketler nedir?
Aslında semantik etiketler HTML varolduğundan beri hayatta. Sadece HTML5 sonrası çok daha geliştiler ve bilinir oldular, arama motorları için anlamlı hale geldiler. HTML4.01 ve önceki sürümlerin tümünde, sayfalarda gerekli olan <html> , <head> ve <body> etiketlerini de içeren bazı semantik etiketler vardı.
Biraz daha açacak olursak; başlıklar <h1> , <h2> , <h3> , <h4> , <h5> , <h6>, sıralı ve sıralanmamış listeler <ol>, <ul> , <li>, paragraflar <p>, resimler <img>, tablolar <table> , <thead> , < tbody> , <tfoot> , <tr> , <td>, form öğeleri <form> , <fieldset> , <label> , <input>, <textarea> ve bağlantılar <a> da aslında birer semantik etikettir.
HTML5, ile birlikte bu etiketlere bazı eklemeler yapıldı. Örnek vermek gerekirse; <figure> , <header> , <footer> ve <strong> , <em> ve <mark> gibi birçok yeni semantik etiket ekledi. Ancak, en büyük şey dört bölümleme etiketinin tanıtılmasıydı: <article> , <aside> , <nav> ve <section>. HTML sayfalarınızın her biri için anlamlı bir belge taslağı oluşturmanıza olanak sağlıyorlar.
Semantik etiketler SEO’yu nasıl güçlendirir?
Arama motoru sıralamaları nam-ı değer SEO, birçok farklı faktöre bağlıdır. Google’ın algoritması, son birkaç yılda kaliteli içeriğe daha fazla önem verir hale geldi. Sonuç olarak, Google ve diğer arama motorlarında üst sıralarda yer almak istiyorsanız, düzgün bir şekilde, anlayabilecekleri net bir içerik üretmeniz gerekir. İşte tam da burada HTML5 semantik etiketleri olaya dahil oluyor.
Varsayılan olarak, arama motoru botları içeriğinizin yapısını anlamaz. Bu botları, görüntüleri, sayfa düzenini ve stil öğelerini görmeyen kör bir kişi olarak düşünebilirsiniz. Metni okuyabilmelerine rağmen, içeriğinizin farklı bölümlerinin birbirleriyle ne kadar ilişkili olduğunu göremezler.
Bu anlamsız yapıya iki farklı yolla anlam ekleyebilirsiniz:
- HTML semantik etiketler kullanarak,
- Zengin snippet’ler veya başka bir deyişle, yapılandırılmış veriler oluşturarak.
Zengin snippet’ler başka bir konu olduğundan, bu kılavuzda bunu açıklamayacağız. Ancak, arama motorlarında iyi kalitede içerik oluşturmak istiyorsanız, her iki tekniği de muhakkak kullanmanız gerekiyor.
En iyi semantik etiketleri bulun
İlk başta HTML5 semantik etiketleme kolay görünebilir, ancak kaçınmanız gereken bazı tehlikeler var. Anlaşılması gereken en önemli şey, tüm semantik etiketlerin aynı amaç için olmadığıdır. Üç ana semantik etiket türü vardır:
- Blok seviyesinde bölümleme elemanları,
- Blok seviyesinde bölümleme yapmayan elemanlar,
- Satır içi seviye elemanları.
Blok düzeyinde bölümleme elemanları, arama motoru botları tarafından okunabilen bir doküman taslağı oluşturur. Daha önce de belirttiğimiz gibi:
- <article> makaleler veya incelemeler gibi bağımsız içerik parçaları için,
- <section> mantıksal olarak birbirine ait diğer içerik blokları, örneğin sekmeli içerikler için,
- <aside> içeriklerin yan tarafındaki “sidebar” denilen alan için, son olarak da
- Site menüleri için <nav>
Section öğeleri diğer öğelerden nasıl ayrıştırılır?
Öğeleri bölmeyle ilgili ilginç olan şey, tüm sayfanın dış çizgisinin dışında bulunan içeriği işaretlemeleridir. Öyleyse, section öğelerinin kendi başlıkları <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header> ve <footer> olabilir.
Bu bölümlenmeyen semantik etiketler sadece section elemanına aittir, ancak tüm sayfanın dış çizgisine eklenmez. İlk olarak, bu biraz garip gelebilir ama bunu başlık bölümlerine dikkat ederek anlayabilirsiniz. Örneğin, bu koda bakalım:
<html>
<head>...</head>
<body>
<h1>Sayfanızın Ana Başlığı</h1>
<h2>Sayfanızın Alt Başlığı</h2>
<article>
<h1>Makale Bölümünün Ana Başlığı</h1>
<h2>Makale Bölümünün Alt Başlığı</h2>
</article>
</body>
</html>
Bu çok basit bir kod örneğidir, ancak makale için ayrı bir <h1> etiketi kullanabileceğinizi görebilirsiniz. Bu, <article> sayfasının dış çizgisinin dışında olduğu için mümkündür, aksi takdirde aynı sayfada iki <h1> etiketi kullanmamalısınız.
Header ve footer benzer şekilde davranır. Örneğin, <article> etiketi, semantik olarak yalnızca kendisine ait ayrı bir <header> ve <footer> içerebilir:
<html>
<head>...</head>
<body>
<header>Sayfanızın Header Bölümü</header>
<article>
<header>Makale Bölümünün Header'ı</header>
<p>...</p>
<p>...</p>
<footer>Makale Bölümünün Footer'ı</footer>
</article>
<footer>Sayfanızın Footer Bölümü</footer>
</body>
</html>
Bu tür bir semantik yapılandırma, arama motorları için her bağımsız bloğu ayrı varlıklar olarak değerlendirebildiğinden, SEO açısından oldukça kullanışlıdır.
Metin bloklarının sadeleştirilmesi
Belge yapılandırmaları önemlidir, ancak metin bloklarınızı sade tutmak da önemlidir. Yalnızca okunabilirlik için değil, aynı zamanda arama motorlarının içeriğinizi daha iyi anlamasına yardımcı olur. İçeriği genellikle “bölmek” için kullanılan HTML etiketleri, çoğunlukla <img> , <figure> , <video>, <audio>, <ul> , <ol> ve diğerleri gibi semantik etiketlerdir.
İçerik, kullanıcı deneyiminin önemli bir kısmıdır. İlgi çekici bir içerik yazmak yeterli değildir, ayrıca kullanıcıların ve arama motorlarının anlayabileceği şekilde sunmanız gerekir.