HTML Başlık Etiketlerini Doğru Kullanma

Her web sitesi kendi benzersiz canavarıdır, geliştiriciler ve tasarımcılar koda kendi imza seslerini koyarlar. Ancak her bir web sitesinin ortak özelliği HTML başlık etiketleridir. Bu başlıklar yalnızca içeriğinizi daha okunabilir bölümlere ayırmakla kalmaz, aynı zamanda sitenizin anlamsal ana hatlarını oluşturur, böylece arama motorları ve erişilebilirlik yazılımı siteyi tam olarak hangi içeriğin oluşturduğunu söyleyebilir. HTML başlık etiketlerinin doğru kullanımı ve işlevi konusunda zaman zaman bazı karışıklıklar vardır, bu nedenle 6 katmanın tümünü gözden geçirmek ve bunları nasıl ve ne zaman doğru şekilde kullanacağımızı tartışmak istiyoruz.

Youtube Kanalımıza Abone Olun

Neden HTML Başlık Etiketlerini Kullanmalısınız?

Yukarıda da söylediğimiz gibi bu etiketler sitenizin iskeletini oluşturur. Bunlar olmadan, sitenizin başlığı ve amacı net olmamakla kalmaz, aynı zamanda içerik kullanıcılara ve botlara dev bir metin duvarı gibi görünür - paragraflar kullanarak bölseniz bile.

Ayrıca, ekran okuyucular ve erişilebilirlik yazılımları, içeriğinizde gezinmek için bunları kullanır (bazen kelimenin tam anlamıyla). Bu nedenle, HTML başlık etiketlerini dahil etmezseniz, sitenize birçok kişi sayfa ve içerik arasında hareket edemeyecekleri için erişilemez hale gelir.

Ek olarak, sitenize ulaşan arama motorları ve diğer web tarayıcıları da başlıklarınız aracılığıyla gezinir. Son zamanlarda Google, sıralamalarında kod semantiğini düşünüyor, bu da arama amacının çok ağır olduğu anlamına geliyor. HTML başlık etiketleriniz bunun önemli bir parçasıdır ve Google'a ve ziyaretçilere hiyerarşik öneme göre düzenlenmiş belirli bilgileri sayfanın neresinde bulabileceklerini söyler.

Ve sayfanızdaki her etiket, tüm bunlara kendi yolunda yardımcı olur.

Etiket Hiyerarşisi Önemlidir

HTML başlık etiketi hiyerarşisi önemlidir. Bu etiketleri kullandığınız sıra, siteniz için SEO yapabilir veya bozabilir. Bunları CSS kullanarak şekillendirebilir ve bir H6 etiketini bir H2'den daha büyük, daha cesur ve daha parlak hale getirebilseniz de, tarayıcıların (ve okuyucuların) kafasını karıştırmamak için bunları düzenli tutmaya çalışmalısınız.

Etiketleri, gönderinizin ana hatlarının başlıklarıymış gibi artan sırada düşünün. Yalnızca (genel olarak), hemen öncekinin altına daha yüksek bir sayı koymalısınız. Bunları istediğiniz kadar iç içe yerleştirebilirsiniz, ancak her seferinde yalnızca bir sonrakini sıraya koyduğunuzdan emin olun.

İşte bir örnek:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

Bir H4'ün üzerinde tek bir H6'ya sahip olduğunuz belirli durumlar olabilir, ancak çoğunlukla, Google ve diğer arama motorları, içeriğinizde gezinmek için başlıkları kullanarak konu önceliğini belirler ve arama amacı için içeriğin etkinliğini ölçer.

H1 Etiketleri

H1 etiketi, HTML başlık etiketlerinin en basiti olabilir, aynı zamanda en yanlış anlaşılanlardan biridir. Çoğu durumda, belirli bir sayfanın veya gönderinin başlığı olarak H1 başlığını görürsünüz. Arama motorlarının (muhtemelen) sonuçlarda göstereceği şey budur. Tarayıcınız muhtemelen bunu başlık çubuğunda gösterecektir, ancak birçok SEO eklentisi ve benzeri uygulamalar bunu değiştirmenize izin verir. Bu nedenle, H1 etiketinde hedef anahtar kelimenizin olması önemli olsa da %100 gerekli değildir. HTML başlık etiketlerini anahtar kelimeyle doldurmak yerine, ziyaretçilerin arama amacını kapsayacak şekilde başlıklarınızı ve başlıklarınızı anlamsal olarak yazın.

Yukarıdaki resim, Elegant Themes blogundaki bir makalenin giriş başlığı olarak kullanılan bir H1 etiketini göstermektedir. Aynı zamanda sayfadaki tek H1 etiketidir. Bu, sayfadaki içeriğin konusu olduğunu gösterir.

Yıllar boyunca standart uygulama, sayfa başına bir (ve yalnızca bir) H1 etiketine sahip olmaktı. Çoğunlukla, bu hala iyi bir tavsiye. Google ve diğer arama motorları sayfanızı tarar ve H1 etiketini arar. Daha sonra konuyu, başlığı ve yapıyı belirlemek için kullanırlar.

Ancak Google, sitenizde birden fazla H1 HTML başlık etiketi bulunmasının hiçbir SEO cezasına neden olmayacağını açıkça söyledi. Bu, sitenizin her yerinde bunları kullanarak delirmek anlamına gelmez, ancak ihtiyaç duyulduğunda sayfa başına birden fazla kullanabileceğiniz anlamına gelir.

Birden Fazla H1 Başlığı Ne Zaman Kullanılır?

H1'in tek amacı, tek bir konuda tam bir bölüm belirtmektir. Bu, birden fazla konuya sahip tek bir sayfanız varsa, o sayfadaki her yeni konu için bir H1 kullanmak isteyeceğiniz anlamına gelir. Bunu yapmak, Google'a sayfanızın yalnızca başlıktaki konuyla ilgili olmadığını söyler. Ancak, aşağıda tamamen farklı (ancak ilgili) bir konuyla ilgili bir bölüm de olabilir.

Tek sayfalık web sitelerinde, bu aynı sayfada Hakkında, Fiyatlandırma, İletişim ve Portföy bölümleri olabileceğinden bu önemlidir. Peki, Google'a her bölümün içerdiği içeriğin kendi özerk birimi olduğunu nasıl bildirirsiniz?

H1 etiketleri, işte böyle. Her bölümde yukarıda tartıştığımız hiyerarşiyi kullanarak, her bölüme kendi mini web sayfasıymış gibi davranıyorsunuz. Bu şekilde, Google, sayfada gezinirken başlıkları görür ve ardından, arama yapanların sorularını yanıtlamak için bu bölümlerden hangisinden öne çıkan snippet'lerin çekileceğini (vb.) belirleyebilir.

Ayrıca, sitenizde bir bölüm etiketini her kullandığınızda bir H1 etiketi kullanmayı da seçebilirsiniz, ancak bunu yalnızca, alt başlık yerine sayfa başlığına paralel öneme sahip bir bölüm olduğunda yapmanızı öneririz.

H2 Etiketleri

H2 etiketleri artık büyük olasılıkla sayfalarınızda en çok kullanılan HTML başlık etiketi olacak. Ve iyi bir sebepten dolayı. İnternetteki çoğu yazı ve sayfa, yalnızca birkaç alt başlık içeren tek bir konudan oluşur. Oluşturduğunuz her içerik parçasının en az bir H2 etiketi içermesini öneririz. Yoast ve diğer SEO eklentileri, kabaca her 300 kelimede bir başlık önerir. İçeriğinize bağlı olarak, H2 etiketleri bunun içindir.

Okuma kolaylığı için alt konuları (veya adımları) ayırırlar. Örneğin, gönderilerimizin çoğu temel olarak H2 başlıklarından oluşur (uygun olduğunda H3 ile). Çünkü makalelerimiz tek bir konu üzerine, tek bir sorunu çözmeye çalışıyoruz. H1 olarak OBS Studio Nasıl Kullanılır gibi Canlı Yayın Yapılır gibi bir başlığımız olacak ancak “OBS Studio ile Nasıl Başlanır” gibi alt başlıklar H2'de olacak.

H2 etiketi, doğrudan H1 konusuyla ilgili olan bireysel adımları temsil eder. Bu özel gönderide aşağıdaki yapıyı kullandık:

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

Bu gönderideki H2 başlık etiketleri, başlamak ve onu indirmek, gerçek yazılımı kurmak ve ardından ekranınızın izleyicilere nasıl görüneceğini ayarlamak gibi ana fikirlerin üzerinden geçer. H3'teki adımların altında da yer alan adımlar olsa da, H2 başlıkları makalenin büyük ölçekli resmini gösterir. Tarayıcıların ve okuyucuların, makalenin aradıkları bilgileri içerip içermediğini görmek için tarayabilecekleri üst düzey bir görünümdür.

Genel olarak, makale başına birden fazla H2 etiketiniz olur, ancak bunların altında alt başlıklar bulunmayabilir. Sayfanız veya yayınınız, yukarıdaki örnekte olduğu gibi alt bölümlere ayrılmamış tek bir konuyla ilgiliyse, iç içe yerleştirilmiş H2 -> H3 -> H4 yerine birden fazla H2 etiketine sahip olmak daha iyidir, çünkü bunlar tarayıcılara sizi gösterir' Gönderinin ana konusunu genişletmek yerine bir sütopik üzerinde daha derine inmek.

H3 Etiketleri

H3 etiketleri ise makalelerinizin konunuzun ayrıntılarını gerçekten inceleyebileceği yerdir. Bu H3 etiketlerini asla doğrudan bir H1 altında kullanmamalısınız. Googlebotlar ve arama motorları bunları kesinlikle alt başlıklar olarak görür. H2, tek bir makale içindeki bölümler için birincil başlık olarak kabul edilirken (H1'in ana konuyu başlık olarak belirttiğini unutmayın).

Yukarıdaki resme yakından bakarsanız, H2 ve H3 etiketlerimiz arasındaki gerçek stil ve boyutlandırmanın çok farklı olmadığını göreceksiniz. Sebep şu ki, H3'te yaptığımız herhangi bir noktanın H2'den daha az önemli olduğunu tarayarak varsaymanızı istemiyoruz. Çünkü değil.

Makalenizin SEO'su ile ilgili yapısal bir bakış açısından en önemli olan, genel konuya doğrudan bir bağlantı yerine, H2'ye bağımlı bir nokta olduğunu belirtmek için yalnızca daha küçüktür. Robotlardan ziyade insan okuyucular için görsel ayrım, onları sayfada aşağı kaydırmaya ve bilgileri daha kolay ayrıştırmak için parçalara ayırmaya yardımcı olur.

H4, H5, H6 Etiketleri

Bunları bir nedenden dolayı bir araya getirdik. Genel olarak, H1'den H6'ya kadar olan HTML başlık etiketlerini tam olarak kullanan herhangi bir site bulmakta zorlanacaksınız. Açık farkla en popüler yapı H1 ila H3'tür. Tıpkı ikinci iç içe seviyenin ötesinde nadiren bir içerik taslağı gördüğünüz gibi.

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

Çoğunlukla H4 etiketi, H3 ile aynı amaca hizmet edecektir. Adımlar ve örnekler için ayrıntılara girmek için bunları kullanacaksınız, ancak her zaman ana başlıklarınızın altına yerleştireceksiniz. Tasarımcılar genellikle onları H3'ten daha küçük CSS ile biçimlendirir. Sıradan içerik oluşturmada sınırlı kullanım görme eğilimindedirler. Bir H4 başlık etiketine ihtiyaç duyulacak şekilde fikirlerin bölünmesi gerekiyorsa, bir konu çok derinlemesine olma eğilimindedir.

H5 ve H6

H5 ve H6 başlıklarını birkaç farklı şekilde kullanabilirsiniz.

İlk Yol

(Örnek olarak, bu bölümü başlık yoluyla çeşitli bölümlere ayırdık ve ana makalenin bir alt başlığı olduğu için artık H4 altındayız.)

Bu başlıklar genellikle içindekiler tablosunda ve benzer listelerde kullanılır, ancak asıl işlevleri teknik olarak diğerleriyle aynıdır ve sayfa boyunca azalan öneme sahip konuları tanımlar. H6'ya kadar tam bir başlık dizisine sahip bir belge bulmak oldukça nadir olacaktır.

İkinci Yol

Bazı insanlar H5 ve H6 etiketlerini "özel" biçimlendirme başlıkları olarak kullanır. H1'den H4'e tamamen farklı olan bu iki HTML başlık etiketine özel CSS uygulayacaklar. Daha sonra bunları, aksi takdirde gözden kaçabilecek konulara ve fikirlere dikkat çekmek için kullanabilirsiniz.

Başlıklar hiyerarşik olduğundan, bu teknik olarak en iyi uygulama değildir. Ancak, siteniz genel olarak iyi yapılandırılmışsa ve belirli sayfalarda veya gönderilerde özel stiller olarak H5 ve H6'yı idareli kullanırsanız, neredeyse kesinlikle SEO isabeti almazsınız.

Bunları özel biçimlendirme için kullandığınızda bile hiyerarşinin dışına çıkmadığınızı unutmayın. Onları düzenli tutun. Bu nedenle, bir alt başlığı biçimlendirmek için H6 kullanırsanız, standart yapıya geri döndüğünüzü göstermek için bir sonraki kullanacağınız başlığın H1 veya H2 olduğundan emin olun.

HTML Başlık Etiketleri ile Yapılmaması Gerekenler

Başlıkların tüm hiyerarşisini tamamen aşağıya doğru tek bir sayfa yapılandırmayın. Bir başlık ve tüm H2'ler için, birbirini izleyen her başlığın iç içe geçmesi yerine H1 ile daha iyi durumdasınız.

Evet:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

Numara:

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

Ayrıca, başlıkları gelişigüzel kullanmak istemezsiniz. Bunları sadece sırayla kullanın. Aksi takdirde, tarayıcıların sayfanızda nasıl gezinecekleri hakkında hiçbir fikri olmayacak ve erişilebilirlik yazılımı da olmayacaktır.

Numara:

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

Genel olarak, bir tarayıcının bir sonraki H1 veya H2'yi bulduğunda bir alt bölümden çıktığınızı bileceğini varsayabilirsiniz. Yukarıdaki kod parçacığında, tarayıcılar ve botlar, bilgi yapısını ayrıştırmakta zorlanırlar.

HTML Başlık Etiketleri ile Özetleme

Ve bakın? İşleri toparlamak için bir H2 yönüne geri döndük. Başlık etiketleri, oradaki her bir web sitesinin önemli bir unsurudur. Bunları doğru bir şekilde kullanmak, ziyaretçilerinizin içeriğinizde aradıkları bilgileri daha kolay bulabileceklerinden, sitenizin UX'inin yanı sıra arama motoru sıralamalarınızı da artırabilir. Başlıklarınızdan çok fazla anahtar kelime kullanmadığınızdan emin olun. Fikirlerinizin net olduğundan emin olmak için tartıştığınız anahtar kelimeleri veya kelime öbeklerini eklemek iyi bir fikir olsa da, Googlebot'lar ve diğerleri oldukça akıllıdır ve konuları değiştirdiğinizi veya aynı konuda olduğunuzu anlayabilir. Genel olarak, HTML başlık etiketlerini kullanmak inanılmaz derecede önemlidir, ancak yalnızca birkaç şeyi aklınızda tutarsanız siteleriniz hemen parlayacaktır.

HTML başlık etiketlerini doğru kullanıyor musunuz?

VectorV / Shutterstock.com tarafından yayınlanan makale görseli