SEOWeb Tasarım

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 Olmayan HTML Elementleri
Anlamsal Olmayan HTML Elementleri

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.

Anlamsal Olan HTML Elementleri
Anlamsal HTML Elementleri

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.

HTML5 Layout Template

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.

Matt Cutts’un, “strong” ve “b” etiketleri ile ilgili açıklaması
https://twitter.com/JohnMu/status/1459249626800918535?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1459250010332319746%7Ctwgr%5E%7Ctwcon%5Es2_&ref_url=https%3A%2F%2Fwww.seroundtable.com%2Fgoogle-bold-seo-32418.html
@JohnMu Bold ve Strong Etiketleri İle İlgili Tweetleri
<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.

Article Section Kullanım Tavsiyesi

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.

Arama Motoru Botları HTML içeriği Nasıl Görür
Arama Motoru Botları HTML içeriği Nasıl Görür?

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

Web Site SEO Analizi Talep Et

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu