HTML5 Semantik Element Nedir? Nasıl Kullanılır?

HTML5 semantik element kullanmak, web tasarımında ve SEO çalışmalarında önemli bir yeri bulunmaktadır. Arama motorlarına web sayfasının nasıl göründüğünü göstermekten ziyade içeriğin ne olduğunu bildirmeye yarayan yeni nesil HTML etiketleridir.
Bu elementler, makineler tarafından okunan HTML5 elementleri ve SEO açısında oldukça faydalı bir durumdur. Web sitenizi iyileştirme ve arama motoru dostu bir alt yapı için kesinlikle semantik işaretlemeleri kullanmalısınız.
Semantik HTML5, yapısında kullanılan etiketler içerisinde yer içerikler sayesinde, Google ve Bing gibi arama motoru botları sayfa içerisinde hangi kısmın önemli olduğunu anlamalarına yardımcı olmaktadır.
Anlamsal olmayan HTML öğeleri, tarayıcılara içeriğin nasıl görüntülenmesi gerektiğini iletirler. Elementler arasında yer alan içeriğin önemi veya rolü hakkında herhangi bir bilgi aktarmazlar.

Anlamsal HTML elementleri, insanlara ve arama motoru botlarına içeriğin nasıl görüntüleneceğini, önemini ve rolü hakkında bilgi aktarmaktadır.

Yazı İçeriğimiz
Semantik HTML5 Elementleri Neden Kullanılmalı?
Gözleri gören bir insan için, iyi tasarlanmış bir web sayfasının çeşitli bölümlerine baktığından tanıması oldukça kolaydır. Başlık, menü, içerik, alt bilgi alanı gibi alanları rahatlıkla tanıyacak ve anlayacaktır.
Peki gözlerinizin görmeyen insanlar için bu durum nasıl olurdu?.
Görme engelli insanlar, bir web sayfasında yer alan içeriklerin neler olduğunu öğrenmek için ekran okuyucularını kullanmaktadır. HTML5 semantik elementler doğru bir yapıda kullanıldığı takdirde, web sayfasında yer alan görseller sesli hale getirerek, ekran okuyucuları sayesinde görseli açıklamaktadır. HTML’nin bu yeni sürümünü benimsemek oldukça önemli bir hale geliyor, çünkü olası tüm site ziyaretçileri için içeriğimiz her açıdan erişilebilir olmalıdır.
Google, bing ve diğer arama motoru botlarının gözleri yoktur, bu sebeple medya içeriğiniz hakkında detaylı bir bilgiye sahip olamaz ve sizin yardımınıza ihtiyaçları vardır.
Arama motoru botlarına ve tarayıcılara web sayfasında yer alan bilgilerin hangisinin başlık, hangisinin gövde veya daha çeşitli bilgiler aktardığınız hem içeriğinizi anlamasına hem de sizi ödüllendirmesine yardımcı olacaktır.

Semantik HTML5 elementleri SEO açısından oldukça faydalıdır. Günümüzde pek çok yazılımcı tarafından dikkate alınmasa da ilerleyen zamanlarda özellikle indeksleme için önemi artacaktır. Arama motoru botlarına web sayfasında yer alan içeriği anlamalarına ve güvenmelerine, bu durumda sıralamanıza dolaylı yoldan katkıda bulunacaktır.
Anlamsal HTML5’in doğru kullanımı, web sayfasında yer alan içeriğin daha zengin, daha iyi açıklama ve daha kolay bulunabilirlik sağlamaktadır. Bu durum arama motoru algoritmaları tarafından da web sayfalarınızın dikkate alınmasını sağlar.
Semantik Elementler
HTML5 semantik element etiketlerinden yaklaşık olarak 100 tane bulunmaktadır. En çok tercih edilen semantik elementleri:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Semantik HTML5 Etiketleri
HTML5 Elementleri haricinde, birde semantik etiketler bulunmaktadır. Bu etiketlerin ne işe yaradığını ve artık tasarımları ne kadar kolaylaştırdığını görebilirsiniz. HTML5 teknolojisini kullanıyorsanız, yeniliklerden faydalanmalısınız. Google John Mu ve Matt Cutts bununla ilgili paylaştıkları bilgilerde detaylı olarak yer verdiğini düşünüyorum. Eğer ki web siteniz HTML5 teknolojisi ile yazıldıysa, o zaman sizde içeriklerinizde önemli kısımları vurgulamak ve arama motorlarına anlamsal olarak anlatmak için <b> etiketi yerine <strong> etiketini tercih etmenizi tavsiye ederim.
<abbr> | Baş Harflerden Oluşan Kısaltma |
<acronym> | Baş Harflerden Oluşan Kısaltma |
<blockquote> | Uzun alıntı |
<dfn> | Tanım |
<address> | Belgenin yazar(lar)ının adresi |
<cite> | Alıntı |
<code> | kod referansı |
<tt> | teletype metni |
<div> | mantıksal bölme |
<span> | Genel satır içi stil kapsayıcı |
<del> | silinen metin |
<ins> | Eklenen metin |
<em> | Vurgu |
<strong> | Güçlü vurgu |
<h1> | Birinci düzey başlık |
<h2> | İkinci düzey başlık |
<h3> | Üçüncü seviye başlık |
<h4> | Dördüncü seviye başlık |
<h5> | Beşinci seviye başlık |
<h6> | Altıncı seviye başlık |
<hr> | Tematik mola |
<kbd> | Kullanıcı tarafından girilecek metin |
<pre> | Önceden biçimlendirilmiş metin |
<q> | Kısa satır içi teklif |
<samp> | Örnek çıktı |
<sub> | alt simge |
<sup> | üst simge |
<var> | Değişken veya kullanıcı tanımlı metin |
HTML5 Semantik Etiketler Yapısı
Bu kısımda Googlebot ve Bingbot gibi arama motoru botlarının sevdiği semantik HTML etiketlerine yer vereceğim. <div> etiketleri yerine en çok sevilen ve tercih edilenler arasında <header>,<nav>, <main>, <article>, <section><aside> ve <footer> yer almaktadır.
Bu bölümde ele alacağımız semantic HTML5 etiketleri:
- <header>, bir web sayfasında giriş bilgilerinin yer aldığı bölüm olarak düşünülebilir.
- <nav>, web sitenizin mimari yapısı (menü) bu etiket içerisinde yer alması gerekir.
- <main>, her sayfa için bir kere kullanılması gerekir. <section>, <article>, <aside> bu etiketin içerisinde yer alır. <nav>, <header> ve <footer> bu element içerisinde yer almayacaktır.
- <article>, bulunduğu sayfadan veya siteden bağımsız yazılar yer alacak ise tercih edilebilir.
- <section>, <article> etiketinden farklıdır. İçerikleri gruplandırma için kullanılması gerekir.
- <aside>, Web sayfamızda yer alan içeriklerden önemsiz olanları belirtirken kullanabileceğimiz alandır. Genellikle kenar çubuklarında kullanılır. Reklamları bu alana yerleştirebilirsiniz.
- <footer>, Web sayfasının en alt bölümü olarak tanımlanır. İçerisinde genellikle iletişim bilgileri ve diğer sayfalara yönlendiren menüler bulunur. Bazı projelerde Orphan Page (yetim sayfa) bırakmamak için bazı sayfalar o kısıma eklenir.
Web sayfamızda yer alan her içerik için bu şekilde bölümlere ayırmak, Google ve Bing gibi arama motorları tarafından içeriğin doğru ve kolay bir şekilde dizine eklenmesini sağlar.
Bing, HTML5 elementlerinin onlara bir web sitesini anlama ve dizine ekleme konusunda yardımcı olduğu onayladı.
Faydalı İpuçları
İndeksleme ve sıralama algoritmalarında rakiplerinizin önüne geçmek için HTML5 elementlerinden faydalanabilirsiniz. Bu demek olmuyor ki semantik etiketler kullanırsam sıralamada üstte yer alırım, sadece size artı puan katacaktır. İçerikleri arama motoru botlarının önemini anlayacağı şekilde işaretleyebilirsiniz.
Bir web sayfasında semantik HTML5 kullanılması SEO çalışmalarınızda rakiplerinize karşı avantaj sağlar.
Section ve Article
Section ya da Article öğelerinin hangisinin önemli olduğu ya da kullanım sırası ile ilgili tartışmalar yer almaktadır. Kullanım sırası ile ilgili sabit bir kural yoktur.
Googlebot ve Bingbot için içeriğinizde bölüm ve makale etiketlerini mantıklı ve tutarlı şekilde kullanmanızı tavsiye ederim.

HTML5 ile Yapılmaması Gerekenler
HTML5 Semantik elementleri kullanırken amacınız görsel tasarım olmamalı, asıl amaç arama motoru botlarının anlayacağı şekilde kullanmaktadır.
Burada dikkat edilmesi gereken semantik elementleri hiyerarşik bir yapıda kullanmaktır. Arama motoru botlarını web sitenizde yer alan içeriği anlama konusunda yardımcı olunuz. Botları aldatacak şekilde olumsuz ve yanlış kullanım sıralama algoritmaları tarafından içeriğinizin bulunmasını zorlaştıracaktır.
Answer Engine Optimizasyonu
Understanding (Anlamak)
Uzun vadeli bir SEO stratejinin dikkat etmesi gereken bir kriterdir. Web sayfanızda yer alan içeriğin bir arama motoru tarafından anlaşılması için açık ve kaliteli bir şekilde botlar ile iletişim kurmalısınız. Semantik HTML5 etiketleri iletişim kurmanız için kesinlikle kullanmanız gereken bir yoldur. Yapısal veriler ile semantik elementleri birbiri ile karıştırmayınız.
Credibility (Güvenilirlik)
Arama motoru botları için ikinci aşama güvenilirliktir. Arama motoru nezdinde güvenirliliğiniz artırmak için en dikkat etmeniz gereken yol EAT’dir.
Deliverability (Teslim Edilebilirlik)
Teslim edilebilirlik, Google web sayfanızda yer alan içeriklere kullanıcılarında ulaşabileceğini bilmeli veya insanlara sunarken sorun yaşamayacağından emin olması gerekmektedir.
Sonuç
SEO çalışmalarımız, anlamak, güvenilirlik ve teslim edilebilirliğe ( Answer Engine Optimizasyonu) bağlıdır.
<div> yerine semantik HTML5 etiketlerini doğru şekilde kullanmak, arama motoru botlarının anlamasını ve işini kolaylaştıracaktır.
Sol tarafta yer alan resim bizim gördüğümüzdür, sağ tarafta yer alan resim ise arama motoru botlarının içeriği nasıl gördüğünü temsil etmektedir.

Sizlerde Semantik HTML5 etiketleri hakkında görüşlerinizi ve yorumlarınızı bu içerik altında benimle paylaşınız.