HTML5, SEO açısından gittikçe önem kazanan ve her geçen gün daha fazla sitede kullanıldıkça önem kazanmaya devam edecek bir teknoloji. İlk olarak 2008 yılında taslak olarak kullanıma açılan HTML5 bugün iki farklı konsepti tanımlamak için kullanılıyor. HTML5 bir yandan HTML dilinin yeni versiyonunu ifade ederken diğer yandan daha çeşitli, daha güçlü web siteleri ve web uygulamaları oluşturmayı mümkün kılan bir teknolojiler bütünü olarak da tanımlanabiliyor. HTML5’in neden önemli olduğunu anlamak için aslında bugün kimlerin HTML5 kullanıyor olduğuna bakmak bile yeterli. Google başta olmak üzere Facebook, Twitter, LinkedIn, Apple gibi devler tercihini HTML5’ten yana kullanıyor.

Bu yazıda HTML5’in ne olduğun ve semantik yapı ile kastedilenin ne olduğunun yanı sıra HTML5’in SEO için öneminden bahsedecek; “SEO uyumlu bir site için HTML5 etiketleri nasıl kullanılmalı?” sorusuna örnekler üzerinden cevap vereceğiz.

Semantik HTML5 Nedir?

Eğer temel seviyede HTML bilginiz varsa HTML etiketlerinin, çoğunlukla, bir sayfadaki içeriğin nasıl görüneceğini düzenlemek için kullanıldığını bilirsiniz. HTML etiketleri yalnızca içeriğin nasıl görüneceğini belirtir, içeriğin türü veya sayfa düzenindeki rolü hakkında bilgi vermez.

Semantik HTML etiketleri, HTML’in bu eksiğini kapatır ve arama motoru botlarının içeriği daha iyi anlayabilmeleri için yardım eder. Sayfadaki içeriğin hangi bölümü önemli, hangi kısım tamamlayıcı dolayısıyla öncelikli değil, hangi alan navigasyon için gibi soruların cevaplarının arama motorlarına bildirilmesini sağlayan HTML5, Google ve Bing gibi büyük arama motorları için önemli semantik ipuçları sağlayabiliyor. Ayrıca HTML5, arama motorlarına anlamlı bilgi iletilmesinin yanı sıra multimedya kullanımını da kolaylaştırarak ekstra uzantılara ihtiyaç duymadan interaktif sayfalar hazırlamanıza olanak sağlıyor.

Neden HTML5 Kullanılmalı?

HTML5 hiç şüphesiz HTML4’e göre daha gelişmiş bir yapıya sahip. Her şeyden önce, hiçbir görme problemi bulunmayan kullanıcılar için bir web sayfasının farklı parçalarını tek seferde ayırt edebilmek kolaydır. Header, menü, ana içerik gibi önemli bölümler iyi dizayn edilmiş bir sayfada doğrudan göz önündedir.

Ancak görme engelli bir kullanıcı için durum bu kadar basit değil. Bir menünün menü olduğunu anlamanıza yardımcı olan görsel ipuçları, görme engelli bir kullanıcı için anlamsızdır.

Benzer şekilde, Google botları da herhangi bir sayfanın bölümlerini birbirinden ayıran görsel ipuçlarını okuyamaz. Tıpkı görme engelli kullanıcılarınız için olduğu gibi çeşitli arama motorlarının botları için de HTML tarafında bu bölümleri belirtmeniz gerekir. Sitenizi ziyaret eden bir Google botunun sayfanın neresi header, neresi navigasyon için, ana içerik nerede yer alıyor anlayabilmesi önemlidir. Bundan daha da önemlisi, sayfanın tamamına baktığında hangi içeriğin en önemli olduğunu ayırt edebilen bir arama motoru botu, bu içeriği önceliklendirmek için gerekli ipucunu almış olacaktır.

HTML5 ve SEO için Önemi

Şunu kesin olarak söyleyebiliriz ki tek başına HTML5 kullanıyor olmanız SEO performansınızda olağanüstü bir katkı sağlamaz. Başarılı SEO pek çok farklı faktörün ve küçük ama önemli detayların bir araya gelmesi ile oluşur. HTML5, SEO çalışmalarınızı başarıya ulaştıracak küçük ama önemli detaylardan yalnızca biridir. HTML5 etiketleri ile başta Google botları olmak üzere sitenizi ziyaret eden çeşitli arama motoru botları içeriklerinizi daha kolay ve daha doğru şekilde anlayabilecektir. Bu sayede, zaten temelde amacı arama motorları ile sağlıklı bir ilişki kurabilmek olan SEO çalışmalarınız karşılığını bulmuş olacaktır.

HTML5 ile birlikte önümüzdeki yıllarda SEO da geliştikçe arama motorları ile açık, kolay anlaşılır ve uyumlu bir iletişim kurabilmek gittikçe önem kazanacağından şimdiden web sitenizde semantik HTML5 kullanmaya başlamak son derece akıllıca bir yatırım olur.

HTML Elementleri ile HTML5 Farkları

Standard HTML elementleri ile HTML5 arasında pek çok fark bulunur. HTML5’in çok çeşitli kullanım alanları ve farklı element türleri hakkında ayrıntılı bilgi sahibi olmak için W3Schools gibi kaynaklardan yararlanabilirsiniz. HTML5 ile gelen yeni etiketlerden bazıları ve kısaca kullanım alanları şu şekildedir:

Format Odaklı Yeni HTML5 Etiketleri

• <canvas>: <textarea> ile benzer ancak daha işlevsel bir kullanıma sahiptir. JavaScript ile birleştiğinde kanvas üzerine farklı şekiller çizme olanağı sağlar. Sayfanızı farklı uzantılar kullanmak zorunda kalmadan interaktif hale getirebilmek için son derece kullanışlıdır.
• <video>: Standart Flash eklentilerinin yerini alan <video> elementi ile sayfanıza video içerikler ekleyebilirsiniz.
• <audio>: <video> etiketi ile birebir aynı özelliklere <audio> elementi ile sayfalarınıza ses dosyaları ekleyebilirsiniz.

İçerik Odaklı Yeni HTML5 Etiketleri

HTML5 Elementlerini Sayfalarınızda Nasıl Kullanabilirsiniz?

HTML5 etiketlerinin pek çok örneği vardır. Ancak, yukarıda hangi amaçlarla kullanıldıklarını kısaca açıkladığımız <header>, <nav>, <footer>, <section> ve <aside> elementleri en çok kullanılan ve sitenize en kolay entegre edebileceğiniz HTML5 etiketleri arasında yer alır. Sayfa içeriğinizi temel parçalarına ayırabilmek için kullanabileceğiniz bu etiketler sayesinde kolayca SEO çalışmalarınızı da destekleyecek HTML5 yapısına geçiş yapabilirsiniz.

Sitenizde standart HTML etiketleri kullanılarak oluşturulmuş sayfalarda  <div> veya <span> ile verilmiş bölümleri, bu bölümlerin sayfa içeriğindeki işlevlerine göre <header>, <nav>, <footer>, <section> veya <aside> elementleri ile belirterek arama motorlarına kolayca sayfa içeriğiniz hakkında anlamlı ipuçları oluşturabilirsiniz. Emin olun Google buna bayılacaktır!

Yukarıdaki görselde, sayfa bölümlerinin <div> elementleri içerisinde sınıflar tanımlayarak oluşturulduğu görülüyor. <div> ve <div> ile benzer bir yapıya sahip <span> elementi semantik olmayan HTML elementleridir. div ve span elementleri tarayıcıya içeriğin nasıl gösterilmesi gerektiği hakkında bilgi veren tutucular olarak görev yapar. Kapsadıkları bölümde yer alan içeriğin sayfadaki rolu hakkında hiçbir bilgi veremezler.

İkinci örnekte ise bir önceki sayfa yapısında div ile verilmiş olan alanların semantik HTML etiketleri ile belirtildiğini görüyoruz. Bu sayfayı ziyaret eden bir arama motoru botu, sayfanın en önemli bölümü olan içeriği, bu içeriğin bölümlerini, içeriğe ait header ve footer alanlarını, sayfanın header ve footer bölümlerini, navigasyon linklerini ve sayfanın ana içeriği ile doğrudan ilgili olmayan bölümleri kolaylıkla ayırt edebilir.

Sayfa içeriklerinizin bu şekilde açıkça ayırt edilebilir olması arama motorlarının sayfalarınızı indekslerken çok daha temiz bir yapıyla, daha anlaşılır şekilde indekslenmesini sağlayacaktır.

<header>, <nav>, <footer>, <section> veya <aside> elementleri <div> gibi hareket ettiğinden sayfalarınızda <div> ile belirtilen bu alanları tespit ettikten sonra direkt olarak ilgili element ile değiştirdiğinizde hızlıca semantik HTML yapısına geçiş yapabilirsiniz. Örneğin, sitenizde header alanı <div class=”header”> ile verilmişse buradaki <div> elementini <header> elementi ile değiştirmeniz yeterli olacaktır.

Semantik HTML5 Örnekleri

Temel HTML5 Örneği:

HTML5’e geçişte en tehlikesiz ve sayfa yapınızı bozmayacak uygulamalar header, nav, main ve footer alanlarında yapılacak düzenlemelerdir. Aşağıda bu yapıya göre oluşturulmuş basit bir sayfa örneği yer almaktadır.

Sayfalarınızda basit ama doğruluğundan kesinlikle emin olduğunuz değişiklikler yapmak, kapsamlı ama hata içeren düzenlemeler yapmaktan daha başarılı sonuçlar verir. Hatalı uygulamalar arama motorlarına karmaşık sinyaller göndererek işlerin kötüye gitmesine neden olabilir. Bu nedenle, eğer sayfalarınızın yapısını anlamakta zorlanıyorsanız, basit semantik HTML etiketleri ile başlayabilirsiniz. Header, footer, main ve nav elementleri başlangıç için idealdir. Arama motorları yaptığınız işlemin basit olup olmadığına bakmaz; sitenizle kurduğu iletişime bakar. HTML5 elementleriniz sitenizdeki içeriğin ne olduğu ile ilgili doğru bilgileri arama motorlarına iletebiliyorsa ortada sorun yok demektir. Sonuçta, sitenizin tamamında, sayfalarınızın her yerinde HTML5 elementlerini kullanmak gibi bir zorunluluktan kimse bahsetmiyor. Sizden istenen sayfalarınızın mümkün olduğunca anlaşılır ve tutarlı olması. Hem insanlar hem de arama motorları için…

İleri Seviye HTML5 Örnekleri:

<section> ve <article> etiketleri nasıl kullanılmalı?

HTML diline biraz daha hakimseniz header, nav, main ve footer elementlerinin yanı sıra sayfalarınızda article ve section elementlerine yer verebilirsiniz. Bir önceki örnek site üzerinden devam edelim:

Sayfada yer alan içerikte bir hiyerarşi bulunmaktadır. <main> etiketinin altında, ana içeriğin tamamını kapsayan bir <article> elementinin kullanıldığını görebilirsiniz. <article> elementinin içinde ise ana konuyu besleyen birden fazla alt-konu yer almakta. Bu alt konular ise <section> elementi ile <article> elementinin alt ögeleri olarak kullanılmış durumda.

Bu örnek HTML5 sayfa yapısında dikkat edilmesi gereken en önemli nokta, hiçbir HTML5 etiketinin sayfa bölümlerini tasarım farklılıklarına göre ayırmak için kullanılmamış olması. Tüm bölümler, söz konusu bölümlerin sayfadaki işlevine ayrılmış semantik alanlar olarak kabul edilmekte ve buna uygun elementler ile arama motorlarına bildirilmekte. Örnekte de görülebileceği üzere, yerleşim planına göre kullanılan standart HTML elementlerinin aksine HTML5 elementleri semantik olarak bölümlenmiş alanların belirtilmesinde kullanılmaktadır.

İlk bakışta neredeyse aynı işleve sahiplermiş gibi görünen <article> ve <section> elementlerinin hangisini nerede kullanmanız gerektiğine karar verirken şu genel kuralı hatırlamanız faydalı olacaktır: <section> herhangi bir şeyin alt parçalarını oluşturan bölümler için kullanılırken <article> kendi başına bir parçadır. Bir diğer ifadeyle, <section> tıpkı <article> elementinde olduğu gibi diğer elementlerin alt bölümlerini veya alt başlıklarını belirtmek için kullanılabilir. Ancak <article>, <section> elementinden bağımsız olarak da kullanılabilen ayrı bir element olarak düşünülmelidir.

Doğrudan alakalı içeriklerde <aside> kullanımı

<aside> elementini ana içerikle doğrudan alakalı içeriklerin belirtilmesinde kullanabilirsiniz. <aside> elementini <article> elementinin altında kullandığınızda birincil derecede önemli olan içeriğinizi ön plana çıkarırken <aside> elementinin içindeki içeriklerin ana içerikle doğrudan alakalı olduğunu ifade etmiş olursunuz.

Doğrudan alakalı olmayan içeriklerde <aside> kullanımı

Burada ise sayfadaki ana içerikle doğrudan alakalı olmayan içeriklerin belirtilmesinde de kullanılabilmektedir. <article> elementinin dışında bırakılan <aside> elementi burada yer alan içeriğin ana içerikle doğrudan bağlantılı olmadığı bilgisini arama motorlarına iletecektir.

Her iki örnekte de görüldüğü gibi <aside> elementi genellikle düşünüldüğü gibi yan menü (sidebar menu) için kullanılmak zorunda değildir. Ana içeriğin altında, başlık, metin veya bir başka sayfaya link verilen bloklar için de <aside> elementi kullanılabilir.

Pek çok site için aşağıdaki gibi bir yapı Semantik HTML için yeterli olacaktır.

HTML5 ile sayfa yapınızı düzenlemeyi öğrendikten sonra farklı HTML5 etiketleri ile daha iyi içerikler nasıl yazılır öğrenmek istiyorsanız İçerik Üreticiler İçin HTML5 Rehberi başlıklı yazımızı da okuyabilirsiniz.

HTML5 Etiketleri ile İlgili Önemli İpuçları

Section vs. Article

Yukarıdaki örnekte de üzerinde bahsettiğimiz gibi section ve article sık sık karıştırılan ve birbirilerinin yerine kullanılan iki elementtir. Az çok aynı işleve sahip olsalar da mantıksal ilerleyişe uygun ve kararlı bir yapı için dikkat edilmesi gereken bazı noktalar mevcut.

section elementi herhangi bir elementin alt bölümlerini oluştururken kullanılmaktadır. Bu nedenle article elementinin alt bölümleri için section elementini kullanmak hem arama motorları hem de daha sonra yazdığınız kodları okuyacak geliştiriciler için daha mantıklıdır.

İç İçe Geçmiş Elementler

HTML dilinin bir özelliği olarak elementler diğer elementlerin alt elementleri şeklinde kullanılabilir ve iç içe geçebilirler. Örneğin bir article elementi kendisine ait header, footer, h1 ve hatta nav elementi bile barındırabilir. Eğer teknik bilgi açısından kendinizi yeterli görüyor ve sitenizde bu tür bir kullanıma uygun alanlar olduğunu düşünüyorsanız iç içe geçmiş HTML5 elementlerini kullanabilirsiniz. Ancak standart bir blog sitesi veya küçük çaplı herhangi bir site için bu kadar kompleks bir yapıya gerek yoktur.

SEO açısından da semantik HTML kullanımını bu kadar ileri götürmenin ekstra bir faydası olmayacaktır. Daha önce de bahsettiğimiz gibi önemli olan basit, sağlam ve arama motorlarıyla sağlıklı iletişim kurabilen bir site oluşturmaktır.

HTML5’i Tasarım Amacıyla Kullanmayın

HTML5 kullanan sitelerin birçoğunda HTML5 uygulamasını bir görsel tasarım rehberi olarak kullanıldığını görebilirsiniz. Bu HTML5 kullanımıyla ilgili en yaygın hatalardan biridir. Ancak, yukarıdaki örneklerde de sıkça tekrarladığımız gibi, tasarım amacıyla HTML5 etiketlerini kullanmanın semantik HTML’in ortaya çıkış amacıyla uzaktan yakından alakası yoktur.

Bir Sonraki Adım

Sayfalarınızda HTML5 uygulayarak, eğer doğru şekilde kullandıysanız, sayfalarınızın Google başta olmak üzere diğer büyük arama motorlarıyla olan iletişimini geliştirmiş olacaksınız. Bütün arama motorlarının ortak amacı sitenizin ve sayfalarınızın ne ile ilgili olduğunu başarılı bir şekilde anlayabilmek ve kullanıcılarına doğru arama sorgularında doğru sayfaları gösterebilmektir. Bunun için bütün arama motorları sizinle kendi dillerinde iletişime geçmenizi ve onlara sizinle doğru iletişimi nasıl kurabileceklerini göstermenizi ister. Bu ilişkide HTML5, siteniz ile arama motorları arasındaki doğru iletişimi kurmak için gerekli olan semantik yapıyı sağlamakla görevlidir. HTML5’i amacına uygun olarak kullandığınız takdirde arama motorlarına kendinizi mümkün olabildiğince doğru aktarmış olursunuz.

İletişim

Makinelerle (arama motorlarıyla) iletişime geçmek uzun dönemli bir SEO stratejisinin en önemli iki ayağından biridir. Makinelerle olan iletişiminizi geliştirebilmenin pek çok yolu vardır. HTML5, bu yolda yalnızca bir başlangıçtır. Semantik HTML5 gibi yapısal veri işaretlemeleri ile de sayfa içerikleriniz hakkında yalnızca insanlar için değil, insanlara sayfalarınızı ulaştıracak olan arama motorlarına da anlamlı bilgiler iletmiş olursunuz.

Sonuç olarak;

Sayfa yapısı, sayfada yer alan içeriklerin rolü, önemi ve içerikler arasındaki hiyerarşik yapı, içerikle doğrudan alakalı olan veya olmayan bölümler… Bütün bunlar insanların herhangi bir sayfanın tasarımına bakarak kolaylıkla ayırt edebileceği farklılıklardır. Ancak arama motorları bu şekilde çalışmaz. Sayfanın neredeyse her yerinde kullanabileceğiniz ve hiçbir farklılık içermeyen <div> elementi yerine doğru HTML5 etiketini kullanmak sayfalarınızı arama motorları için daha anlaşılır kılacaktır. Arama motorlarının doğru arama sorgularında gösterebilmesi için öncelikle sayfalarınızı doğru anlaması gerektiği göz önünde bulundurduğunuzda neden hemen şimdi semantik HTML’e geçmeniz gerektiği sorusunun cevabını da bulmuş olacaksınız.