Web sayfalarının yapısını ve içeriğini daha anlaşılır hale getirmek, arama motorlarının sayfayı daha iyi anlamasını sağlamak ve SEO performansını artırmak için kullanılan Semantic HTML etiketleri, modern web geliştirmenin temel taşlarından birini oluşturur. Bu etiketler, içerikleri anlamlandıran ve sayfanın yapısını düzenleyen özel işaretleme elemanlarıdır. Bu yazıda, Semantic HTML’in ne olduğunu, hangi etiketleri içerdiğini, SEO’ya etkilerini ve doğru etiket kullanımının neden önemli olduğunu daha ayrıntılı bir şekilde keşfedeceğiz.
Semantic HTML Nedir?
Semantic(Anlamlandırılmış) HTML, web sayfalarının içeriğini ve yapısını hem arama motorları hem de tarayıcılar için daha anlaşılır kılmak için kullanılan HTML etiketlerini ifade eden bir terimdir.
Semantic HTML etiketleri içerdikleri içeriğin anlamını tanımlayan etiketlerdir. Böylece sayfada yer alan farklı bölgelerdeki içerikler ve aralarındaki ilişki hakkında ek bilgi verilmiş olur.
İçerik işaretlemesinde en çok kullanılan Semantic HTML etiketleri şunlardır:
-
- Heading etiketleri: Metin içerisinde hiyerarşik bir yapı oluşturmak için kullanılan HTML etiketleridir. <h1> ve <h6> aralığında kullanılabilen bu etiketler, önem sırasına göre tercih edilmelidir.
- Listeleme etiketleri: Numaralı ve numarasız listeler için kullanılan etiketlerdir. Numaralı listeler için <ol>, numarasız listeler için ise <ul> etiketi kullanılır.
- Table etiketleri: Sayfa içeriğinde tablo içerisine data eklemeye yarayan etiketlerdir. <thead> etiketi tablonun title’ını belirtmek, <tr> etiketi satır sayısını belirtmek ve <td> etiketi ise sütunları belirtmek için kullanılır.
- <a> etiketi: Kelimeler ve sayfalar arasında bağlantı kurmak için kullanılan etiketlerdir.
- <img> etiketi: Görselleri işaretlemek için kullanılır.
- <p> etiketi: Metin bloklarını ve paragrafları işaretlemek için kullanılır.
- <article> etiketi: Haber, makale vb metinleri işaretlemek için kullanılır.
Anlaşılır bir yapı oluşturmada en çok kullanılan Semantic HTML etiketleri ise şunlardır:
- <section> etiketi: Alakalı içerikleri gruplamak ve işaretlemek için kullanılır.
-
- <aside> etiketi: Ana içerikle doğrudan alakalı olmayan içerikleri işaretlemek için kullanılır.
- <header> etiketi: Logo, içerik başlığı, navigasyon linkleri gibi öğelerin eklendiği alandır.
- <body> etiketi: Sayfanın ana içeriğinin bulunduğu alanı işaretlemek için kullanılır.
- <footer> etiketi: Sayfanın sonunda yer alan, genellikle site içi navigasyon ve iletişim bilgileri içeren alanı işaretlemek için kullanılır.
Semantic HTML Bir Sıralama Faktörü mü?
Semantic HTML etiketleri arama motorlarının sayfa içeriğini daha iyi anlamlandırması ve böylece alakalı sorgularda sıralaması için önemlidir. Google Search Central’de yayınlanan videoda John Muller “Semantik HTML bir sayfayı anlamaya yardımcı oluyor. Ancak bu, bir web sitesinin sıralamasını daha yüksek hale getirecek sihirli bir çarpan değil.” şeklinde açıklama yaparak bir sıralama faktörü olmadığını ama sayfa içeriğini anlamayı kolaylaştırdığını söylüyor. Videonun tamamını izlemek için buraya tıklayabilirsiniz.
Özetle, Semantic HTML etiketleri doğrudan bir sıralama faktörü olmasa da arama motorlarının sayfa yapısını belirlemesine ve daha iyi anlayabilmesini sağlar. Bu yüzden sıralama faktörü olmasa da kullanılması gerekmektedir.
Semantic HTML SEO İçin Neden Önemlidir?
Semantic HTML, web sayfalarının içeriğini anlamlı ve yapısını belli eden bir şekilde kodlama yaklaşımıdır. Bu tür kodlama, arama motorlarının sayfa içeriğini daha iyi anlamasına yardımcı olur ve dolayısıyla SEO performansını artırabilir. Örneğin, <h1> etiketi sayfanın ana başlığını temsil ederken, <p> paragraf etiketi içerik parçalarını belirtir. Arama motorları, bu etiketleri kullanarak sayfanın hangi kısımlarının daha önemli olduğunu anlayabilir. Böylece, ilgili aramalarda ilgili içerikleri sıralaması kolaylaşır.
Ayrıca, doğru ve anlamlı etiketler kullanmak, web sayfasının erişilebilirliğini artırabilir. Özellikle ekran okuyucu gibi yardımcı teknolojiler kullanan engelli kullanıcılar için, sayfa içeriğini anlamak önemlidir. Doğru etiketlerle yapılandırılmış bir sayfa, herkesin kolayca erişebilmesini sağlar. Bu da kullanıcı deneyimini iyileştirir ve arama motorlarının sayfaları daha olumlu bir şekilde değerlendirmesine yardımcı olabilir.
Semantic HTML Kullanırken Dikkat Edilmesi Gerekenler
HTML Etiketlerini Tasarım Amaçlı Kullanmayın
HTML etiketleri içeriği yansıtmalı ve tasarım amacıyla kullanılmamalıdır. Örneğin bir text heading hiyerarşisinde yeri olmadığı halde sadece büyük görünmesi için herhangi bir heading etiketiyle işaretlenmemelidir. Farklı bir örnek vermek gerekirse, bir text mavi olsun diye <a> etiketi kullanılmamalı veya vurgu yapılmasına ihtiyaç olmayan bir text sırf kalın görünsün diye <strong> etiketi eklenmemelidir. Tasarımsal değişiklikler HTML etiketleriyle değil CSS kullanarak yapılmalıdır.
Heading Etiketlerini Önem Sırasına Göre Kullanın
Heading etiketleri sayfa içeriğinde başlık ve alt başlıkları işaretlemek için kullanılır. Bu etiketlerin doğru ve hiyerarşik bir şekilde kullanılması, içeriğin yapılandırılmasına yardımcı olur ve tarayıcılar ile arama motorlarına içeriği daha iyi anlama ve sıralama imkanı sağlar.
Örnek kullanım aşağıdaki gibi olmalıdır.
<h1>Ana Başlık</h1>
<p> Ana konuyu açıklayan paragraf.</p>
<h2>Alt Başlık</h2>
<p>Alt başlığı açıklayan, ana konuyu detaylandıran paragraf.</p>
<h3>Daha Düşük Öneme Sahip Başlık</h3>
<p> Alt başlığın altına yer alan detay verilen paragraf</p>
<article> ve <section> Etiketlerini Doğru Kullanın
<article> ve <section> etiketleri sıkça karıştırılan HTML5 etiketlerindendir. İşlev olarak neredeyse aynı olsalarda, kullanımda dikkat edilmesi gereken noktalar vardır.Hem arama motorlarının kod okunabilirliğini artırmak için <section> etiketi ile <article> içerisinde bulunan içeriği bölümlere ayırmak, en doğru yöntemdir.
Doğru <aside> Etiketi Kullanımı
<aside> etiketi, sayfa içeriğiyle doğrudan alakalı olmayan içerikleri etiketlemek için kullanılır. Article etiketinin dışında kalan <aside> etiketi arama motorlarına içeriğin ana içerikle doğrudan alakalı olmadığını belirtmeye yarar.
<aside> etiketi İçeriğin ana içerikle alakalı olduğunu belirtmek için de kullanılabilir. Bunun için <article> içerisinde <aside> kullanmak yeterlidir.
Sonuç
Sonuç olarak, Semantic HTML5 etiketleri web sayfalarının içeriğini anlamlandırmak ve yapısını belirlemek için güçlü araçlardır. Bu etiketler, arama motorlarının içeriği daha iyi anlamalarına yardımcı olurken, web geliştiricilerin de daha erişilebilir ve kullanıcı dostu siteler oluşturmalarını sağlar. Doğru ve anlamlı etiket kullanımı, içeriğin sıralamasını artırma ihtimalinin yanı sıra, genel kullanıcı deneyimini iyileştirir. Bu nedenle, Semantic HTML etiketlerini kullanmanın önemi ve etkileri göz ardı edilmemelidir.
