HTML5 SEO
Her sitenin WordPress olmayacağının farkındayız, bu yüzden bu rehberi WordPress olmayan sitelerde SEO nasıl yapılır konusuna odaklıyoruz. HTML bir yazılım dili değildir, SEO yapılacak kısmı kodsal düzenlemelerle yapılır. WordPress’te her şey için bir eklenti varken HTML siteler PHP’ye bağlı değilse tamamen kaynak kodlarını görüntüle dediğinizde karşınıza çıkan ekranla uğraşırsınız.
Lafı uzatmadan HTML sitelerde semantik SEO nasıl yapılır ve HTML5 semantik elementler nasıl kullanılır konularına giriş yapalım.
HTML5 nedir?
HTML5, bildiğimiz HTML (Hypertext Markup Language)’nin en son sürümüdür ve bu sürüm sitemizin içeriğini, arama motorlarına daha iyi ifade edebilmemiz için birkaç yeni HTML elementiyle birlikte gelmiştir.
HTML5 ile SEO Arasındaki Bağlantı
Standart HTML etiketleri (title, h1,h2-..-h6 ve diğerleri) klasik iç-SEO’nun temellerini oluşturur. Arama motorları bu etiketleri, sayfanızın ne ile ilgili olduğu anlamak amacıyla kullanır. Bu etiketleri kullanarak SEO’nun temellerini sitenize uygulayabilir ve bu şekilde arama sıralamalarınızın (SERP) yükselişini inceleyebilirsiniz. HTML5 ise web kullanıcılarına bu işlemi çok daha kolay ve verimli gerçekleştirebilmeleri amacıyla genel yapısına birkaç semantik element ekledi. Bunları kullanmamız belki de 2020 SEO trendlerinden birisi olabilir.
Semantik element nedir?
Semantik kavramını daha önceden LSI Kelime Nedir? (Sıralamanızı Yükseltecek Teknik!) yazımızda anlatmıştık, semantik kavramı hakkında daha fazla bilgi sahibi olmak isterseniz bu içeriğimize de göz atabilirsiniz..
Semantik elementler, belirli bir anlam ifade eden HTML etiketlerini tarif ederken kullandığımız bir terim. Örneğin <h1> etiketi bir semantik elementtir. Google botlarına veya diğer arama motoru botlarına “<h1> </h1>” etiketleri içindeki terimin, bu sayfadaki en değerli başlık olduğunu söyler. Diğer bir yandan, <div> etiketi semantik bir etiket değildir, div etiketi yalnızca HTML belgesindeki bir bölümü gösterir ve etiketin öncesinde, sonrasında veya içinde neler olduğuna dair herhangi bir bilgi sağlamaz.
HTML5 Semantik Elementler ve İşlevleri
HTML5 dediğimiz gibi yeni semantik etiketlerle birlikte geldi ve bu etiketler sayfanızda yer alan bilgileri arama motorlarına daha detaylı bir şekilde ifade etmenizi sağlıyor. Arama motorlarının algoritmaları sürekli güncelleniyor olsa da halen yönlendirmeye ihtiyaç duyuyorlar. Aşağıda bazı semantik HTML etiketlerini ve onların SEO açısından ne ifade ettiğini & edeceğini görebilirsiniz.
<main> etiketi: Tüm yazı içeriğini ve sayfanın ana şablonundaki <article> etiketi ve <section> etiketleri gibi diğer ilgili bölümleri içeren blogun baskın içeriğini kapsayan elementtir.
<article> etiketi: Çevrimiçi bir yayında (PDF vs.) yeni blog yayınlarını veya makale girişlerini işaretlemeyi kolaylaştırır. Arama motorları bu etiketin içerisinde yer alan herhangi bir içeriğe daha fazla ilgi gösterebilir. Ayrıca <div> etiketlerinin kullanımını azaltarak HTML kodunun temizlenmesine yardımcı olur.
<section> etiketi: Blog içerikleri, kullanıcıların aradıklarını bulmalarını kolaylaştırmak için genellikle farklı bölümlere ayrılır. <section> etiketi, içeriğinizin her biri kendi ayrı HTML başlığına sahip olan bu alt bölümlerini belirtmek için kullanılabilir.
<header> etiketi: Bir sayfanın üstbilgisini belirtmek için kullanılabilmesinden dolayı <h1> etiketine benzer ancak, sayfanın başlık bölümünü belirtmek için de kullanılabilir ve hatta gezinme bağlantıları ve diğer ilgili metinleri içerebilir.
<footer> etiketi: <header> etiketi kadar kullanışlı olmasa da, <footer> etiketi, bir web sitesinin şirket bilgileri ve diğer faydalı bağlantılar gibi altbilgi bölümünde içerik belirtmek için kullanılabileceğinden SEO avantajları sunar. Her sayfanın kendi altbilgi bölümü bile olabilir.
<nav> etiketi: Gezinme, şüphesiz bir sitenin en önemli konularından biridir. <nav> etiketi, ana sitede gezinme veya sayfalandırma gibi bir sayfadaki bağlantıları belirtmek için kullanılabilir.
<video> etiketi: Flash’ı kullanmak zorunda kalmadan videoların çapraz tarayıcı uyumluluğuna izin verdiği için kolayca en yararlı etiketlerden biridir. HTML5 ayrıca video hakkında altyazı ve altyazı gibi ek bilgiler eklemeyi mümkün kılar.
<aside> etiketi: Bir bölüm etiketi gibi olabilir aynı zamanda sidebar veya içerik sonrası Call-to-action gibi yerler ikincil içeriğe odaklanan <aside> etiketlerini kullanmak için iyi bir yer olabilir.
HTML5 Semantik Elementler Gerçekten Seo Çalışmalarıma Katkı Sağlayacak Mı?
Bu etiketler kullanıcılara sunulalı yaklaşık 3 yıl oldu, ancak hala HTML5 tam potansiyeliyle kullanılmıyor. Bu etiketlerin geçtiği sitelere daha önce rastlamamış olmanız pek de ilginç değil.
Peki işe yarayacak mı Corazu?
Google mikrodata işaretlemelerinin doğru yapılmasının SEO için gerekli olduğunu https://webmasters.googleblog.com/2010/03/microdata-support-for-rich-snippets.html bu yazısında söylemiş, HTML5 semantik elementleri de mikrodata işaretlemesine giriyor. Bu yüzden işe yarayacağını düşünüyoruz.
Eğer daha detaylı bilgi almak isterseniz aşağıdaki HTML5 semantik elementleriyle ilgili yazıları da inceleyebilirsiniz, özellikle Semrush’ın yazısı çok daha detaylı anlatmış:
- https://www.semrush.com/blog/semantic-html5-guide/
- https://www.cnet.com/news/html5-is-done-but-two-groups-still-wrestle-over-webs-future/
- https://www.cnet.com/news/w3c-buttons-down-html5-opens-up-html5-1/
- https://www.myriamjessier.com/blog/html5-accessibility-seo/
- https://webmasters.googleblog.com/2010/03/microdata-support-for-rich-snippets.html