Blog Yayınlarında Otomatik İçindekiler Dizini Oluşturma

Makale paylaşan bir çok web sitesi her makale için otomatik bir "İçindekiler" listesi ekleyerek daha fazla erişebilirlik ve daha iyi gezinme sağlayarak ziyaretçileri etkilemeyi başarıyor. Google, iyi organize edilmiş ve biçimlendirilmiş yüksek kalitedeki içeriklere büyük önem veriyor. Tablolar, numaralandırılmış bölümler ve otomatik oluşturulmuş "İçindekiler" listesi gibi unsurların eklenmesi SERP sıralaması için bonus etkisi yapar.

Bu yazımızda, bir web sayfasının bölüm başlıkları içeren otomatik bir "İçindekiler" tablosu oluşturmak için javaScript destekli "İçindekiler" eklentisini paylaşacağım.

Web Sitesi Sayfalarında İçindekiler Listesi Oluşturma

İçindekiler tablosu, javaScript komut dosyasını kullanarak sayfa yüklenmesi ile otomatik olarak hemen oluşturulur.

İçindekiler Listesi veya Tablosu Nedir?

İçindekiler listesi, web sitelerinde genellikle ilk paragraftan hemen sonra gelen bir bağlantı listesidir. Liste içerisinde bulunan her bağlantı ziyaretçileri web sayfasının belirli bir bölümüne götürür. HTML liste bağlantıları bir sayfanın istenilen bölümüne atlamak için hızlı bir yoldur. İçindekiler listesi, yayın içerisinde bulunan birinci seviye başlıklardan (h2) veya ikinci seviye başlıklardan ((h3)-(b) alt başlıklar) oluşur.

Kitap baskı işlerinde, kitabın her bölümü için sayfa numarasını içeren dizin sayfası bulunur. Kitaplar için dizin sayfasında yalnızca bölüm başlıkları değil açıklamalar, yazar adları ve alt başlıkları içeren daha derin ve kapsamlı olarak oluşturulur.

Blog İçindekiler Listesi Nedir?

Her web sayfası için elle oluşturulan içerik tablosuna çözüm olacak şekilde tasarlanmış olan otomatik içindekiler eklentisidir. Uzun blog makaleleri için kullanıcı deneyimine katkı sağlayan ve javaScript ile kodlanmış, blog sayfa yüklenmelerini etkilemeyen ve  hızlı yüklenebilen bir eklentidir. İçindekiler eklentisi kullanılarak oluşturulan bağlantı tablosu, arama motorları robotları tarafın kolaylıkla taranır ve dizine eklenir.

İçindekiler eklentisi alt başlık etiketleri içeriyor. Blog bir kitap değil, daha basit ve erişebilirlik için önemli başlıkları İçindekiler listesinde görünmesi en iyisidir. Yani İçindekiler listesine (h3, h4, h5 ve h6) çok fazla alt etiket eklemek sadece uzunluğu uzatır. Bu nedenle, çok fazla alt etiketlerden oluşan tablo ana içeriğinizi aşağıya kaydırır ve görünümü yok eder (Google için her sayfada ortalama ana içeriğin bir bölümü görüntülenen ekranın %60-70 oranı kullanmalı).

İçindekiler Listesinin Özellikleri

Bir çok blog eklentisinden farklı olan ve benzersiz özellikleri ile %100 SEO uyumlu blog içindekiler listesi;

• javaScript ile kodlanmıştır.
• İçe içe geçmiş başlık ve alt başlıkları destekler.
• Başlık etiketlerine duyarlı numaralı navigasyon.
• H (h2, h3, h4, h5, h6) etiketlerine otomatik duyarlı.
• İçerik bölümümünün her başlık etiketine benzersiz bir kimlik ekler.
• Hem düz hem de alt etiketlerden oluşan ayrıntılı listeyi destekler.
• Aç/Kapat seçeneği
• SEO Dostu ve %100 etki
• Mobil uyumlu
• Sadece uzun ve istediğiniz yayına ekleyebilirsiniz.

Blog Yayınlarında İçindekiler Listesi Nasıl Oluşturulur?

İçindekiler eklentisi, tüm platformlara kolayca eklenir ve çalışır. Blogger, WordPress veya herhangi web sitesinde rahatça kullanabilirsiniz. İçindekiler eklentisi kurulumunu yapmak istiyorsanız aşağıdaki adımları takip edin.

1- Aşağıdaki CSS kodunu ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin. Aşağıdaki 2 farklı CSS stilinden sadece birini ekleyin.

Stil-1

.contentsList{background:#f9f9f9;font-family:Oswald,arial;display:block;border:1px solid #e6e6e6;color:#333;line-height:1.4em;margin:30px auto;padding:20px 10px 20px 10px;width:80%}
.contentsList button{background:transparent;font-family:oswald,arial;color:#333;font-size:22px;position:relative;outline:none;border:none;padding:0 0 0 15px}
.contentsList button a{padding:0 2px;color:#0080ff;cursor:contents-headinger}
.contentsList button a:hover{text-decoration:underline}
.contentsList button span{font-size:15px;margin:0 10px;cursor:pointer}
.contentsList li{margin:10px 0}
.contentsList li a{color:#0080ff;font-size:18px;text-decoration:none;text-transform:capitalize}
.contentsList li a:hover{text-decoration:underline}
.contentsList li li{margin:4px 0}
.contentsList li li a{color:#289728;font-size:15px}
.contentsList ol{counter-reset:section1;list-style:none}
.contentsList ol ol{counter-reset:section2}
.contentsList ol ol ol{counter-reset:section3;margin:10px 0}
.contentsList ol ol ol ol{counter-reset:section4}
.contentsList ol ol ol ol ol{counter-reset:section5}
.contentsList li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.contentsList li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.contentsList li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.contentsList li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.contentsList li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}

Ön İzleme

Stil-2

.contentsList{background:#FFFFE0;font-family:Oswald,arial;display:block;color:#333;line-height:1.4em;margin:30px auto;padding:20px 10px 20px 10px;width:80%;border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;}
.contentsList button{background:transparent;font-family:oswald,arial;color:#333;font-size:22px;position:relative;outline:none;border:none;padding:0 0 0 15px}
.contentsList button a{padding:0 2px;color:#0080ff;cursor:contents-headinger}
.contentsList button a:hover{text-decoration:underline}
.contentsList button span{font-size:15px;margin:0 10px;cursor:pointer}
.contentsList li{margin:10px 0}
.contentsList li a{color:#0080ff;font-size:18px;text-decoration:none;text-transform:capitalize}
.contentsList li a:hover{text-decoration:underline}
.contentsList li li{margin:4px 0}
.contentsList li li a{color:#289728;font-size:15px}
.contentsList ol{counter-reset:section1;list-style:none}
.contentsList ol ol{counter-reset:section2}
.contentsList ol ol ol{counter-reset:section3;margin:10px 0}
.contentsList ol ol ol ol{counter-reset:section4}
.contentsList ol ol ol ol ol{counter-reset:section5}
.contentsList li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.contentsList li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.contentsList li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.contentsList li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.contentsList li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}

Ön İzleme

2- Aşağıdaki javaScript kodunu </head> kodunun bir satır üzerine ekleyin.

<script type='text/javascript'> 
//<![CDATA[ 
function contentsList(){var a=1,b=0,c="";document.getElementById("postContents").innerHTML=document.getElementById("postContents").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='contents-heading"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#contents-heading'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='contents-heading"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("contentsList").innerHTML+=c}function listToggle(){var a=document.getElementById("contentsList"),b=document.getElementById("listTog");"none"===a.style.display?(a.style.display="block",b.innerHTML="kapat"):(a.style.display="none",b.innerHTML="aç")} 
//]]> 
</script>

3- Aşağıdaki HTML kodu eklemek için CTRL+F yardımıyla <data:post.body/> (blogunuzda birden fazla olabilir) kodunu bulun ve aşağıdaki örnek kodda olduğu gibi belirtilen HTML kodu blogunuza ekleyin.

<div id="postContents"></div>

Örnek

<b:includable id='post' var='post'>
...
...
<div id="postContents">
<data:post.body/>
</div>
...
...
</b:includable>

4- Yukarıdaki adımları tamamladıktan sonra şablonu kaydedin.

Blog Yayınlarında İçindekiler Listesi Kullanma

Blogunuzda birkaç alt başlıktan oluşan uzun blog yayınlarında kullanmanız önerilir. Bunu 2 veya daha az alt başlığa sahip yayınlara eklemek mantıklı olmaz.

Blog yayınlarına içindekiler listesi eklemek için 2 basit adımı uygulayarak yapabilirsiniz.

1- Aşağıdaki HTML kodu, oluşturmuş olduğunuz veya hazırladığınız blog makalesinin ilk paragrafıdan (kısa açıklama) hemen sonra (ilk başlıktan hemen önce) eklemeniz en iyi görüntüyü verir. HTML kodu eklemek için, blog yazar editörünün "HTML" moduna geçin ve aşağıdaki HTML kodu ilk başlıktan hemen önce ekleyin.

<div class="contentsList"> 
<button>İçindekiler <span>[<a onclick="listToggle()" id="listTog">kapat</a>]</span></button> 
<div id="contentsList"></div>

2- Son olarak, içindekiler eklentisinin otomatik olarak yüklenmesi için aşağıdaki javaScript kodunu blog yayınınızın bittiği (blog yazarı editörü HTML modunun en alt kısmına) blog yazar düzenleyicinizin en alt kısmına ekleyin.

<script>contentsList();</script>

Artık oluşturmuş olduğunuz blog makalesini yayınlayabilirsiniz.

Bknz: Blog Yayınları İçerisine Reklam ve İlgili Yayınlar Widget'i Nasıl Eklenir?

Bknz: Blogger Yönetim Paneli Hakkında Bilgiler

Blog yayınlarında "İçindekiler Listesi" oluşturma eklentisi ile ilgili görüşlerinizi duymak isterim. Bu eklenti, uzun blog yayınlarında beklentilerinizi karşılayıp karşılamadığını yorum formunu kullanarak bildirebilirsiniz.

Bu eklenti blog yayınlarınıza yeni bir boyut kazandırabilir ve SERP'lerde önemli bir kazanım oluşturabilirsiniz. Diğer blog yazarı arkadaşlarınız ile yayınımızı paylaşmanız bize destek olduğu gibi bizi mutlu da eder.

Eklenti ile ilgili herhangi bir yardıma veya açıklamaya ihtiyaç duymanız halinde, yine yorum formunu kullanarak bize ulaşabilirsiniz. Elimizden geldiği kadar yardımcı olmaya çalışırız.