Cara Membuat Table of Content (TOC) Otomatis di Artikel Blog

Cara Membuat, Memasang, atau Menampilkan Daftar Isi Artikel (Table of Content) SEO Friendly Otomatis di Blogger

Disebut juga: JUMP LINK karena ketika salah satunya diklik, pengguna atau pembaca Google akan langsung diarahkan ke sub-judul dari postingan tersebut. Blogger menyebutnya dengan istilah: Anchor Link.

Biasanya LINK tersebut muncul di beberapa artikel blog yang menempati urutan pertama Google. Dan ketika saya membuka artikelnya, pemilik blog memasang Table of Content (TOC).

Mungkinkah karena TOC yang terpasang di dalam artikel tersebut, lantas menampilkan Jump Link di hasil penelusuran Google? 99% kemungkinan terbesar adalah iya.

Apa Kaitannya dengan SEO?

Dari apa yang saya dapatkan dan pelajari dari berbagi teori SEO, diterangkan bahwa setidaknya ada enam (6) kaitannya antara Table of Content (TOC) dengan SEO.

• Memastikan pengunjung dan pembaca log mendapatkan pengalaman yang lebih baik ketika berkunjung ke blog kita.
• Konten yang terbentuk secara terstruktur atau terorganisir.
• Memudahkan navigasi melalui bagian-bagian pokok pembahasan.
• Terciptanya tautan (URL) yang berbeda, akan tetapi masih di tautan (URL) yang sama.
• Ditampilkannya tautan link (Anchor Text) di hasil penelusuran Google.
• Memberikan peringkat (Ranking) yang lebih baik lagi di hasil penelusuran mesin pencari. Atau memungkinkan artikel blog tersebut untuk bisa berada di halaman pertama Google karena adanya efek kata kunci panjang (Long Tail Keyword) yang terpasang di Table of Content (TOC).

Sebenarnya teori soal hubungan antara Search Engine Optimization (SEO) dengan Table of Content (TOC) begitu erat dan saling berhubungan. Cuma karena artikel kali ini lebih memfokuskan pada tutorial, maka kita kesampingkan dulu teori yang dimaksud. Lebih jelasnya kawan-kawan bisa Googling pribadi ya 😄

Cara Membuat Table of Content (TOC) Otomatis

1. Awali dengan salin kode JavaScript (JS) di bawah ini, lalu tempelkan (paste) di atas kode </body>

<script>
//<![CDATA[
// var contentContainer = document.querySelectorAll(".post-body")[0].id = "toc-container";
var contentContainer = document.querySelectorAll(".post-body")[0];
const dataTracking = contentContainer.setAttribute("data-tracking-container", "true");
var headings = contentContainer.querySelectorAll("h1,h2,h3,h4,h5,h6");
var showtoc = contentContainer.querySelectorAll(".post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6");
if (headings.length > 3) {
for (i = 0; i <= showtoc.length - 1; i++) {
var tocauto = showtoc[i];
tocauto.insertAdjacentHTML('beforebegin','<div class="toc-auto"><input id="toc-sh" type="checkbox"><label class="toc-title" for="toc-sh">Table of Contents</label><div class="toc" id="toc"></div></div>');
tocatr = document.querySelectorAll(".toc-auto")[0];
tocatr.setAttribute('data-tracking-container', 'true');
var toptoc = document.querySelectorAll(".toc-auto");
[].filter.call(toptoc, function(tocselection) {
return ![].some.call(tocselection.attributes, function(attr) {
return /^data-tracking-container/i.test(attr.name);
});
}).forEach(function(tocselection) {
tocselection.parentNode.removeChild(tocselection);
});};}
class TableOfContents {
constructor({ from, to }) {
this.fromElement = from;
this.toElement = to;
// Get all the ordered headings.
this.headingElements = this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6");
this.tocElement = document.createElement("div");
}
getMostImportantHeadingLevel() {
let mostImportantHeadingLevel = 6;
for (let i = 0; i < this.headingElements.length; i++) {
let headingLevel = TableOfContents.getHeadingLevel(this.headingElements[i]);
mostImportantHeadingLevel = (headingLevel < mostImportantHeadingLevel) ?
headingLevel : mostImportantHeadingLevel;
        }
return mostImportantHeadingLevel;
}
static generateId(headingElement) {
return headingElement.textContent.toLowerCase().replace(/ /g,"_").replace(/\//g,"_").replace(/&lt;/g,"").replace(/&gt;/g,"").replace(/&amp;/g,"").replace(/&amp;nbsp;/g,"").replace(/&nbsp;/g,"").replace(/\xA0/g,"").replace(/[\n\r\f]+/g, "").replace(/[.,\#!$%\^&\*;:{}=\-@`~()<>?"'“+”]/g,"");
}
static getHeadingLevel(headingElement) {
switch (headingElement.tagName.toLowerCase()) {
case "h1": return 1;
case "h2": return 2;
case "h3": return 3;
case "h4": return 4;
case "h5": return 5;
case "h6": return 6;
default: return 1;
}
}
generateToc() {
let currentLevel = this.getMostImportantHeadingLevel() - 1,
currentElement = this.tocElement;
for (let i = 0; i < this.headingElements.length; i++) {
let headingElement = this.headingElements[i],
headingLevel = TableOfContents.getHeadingLevel(headingElement),
headingLevelDifference = headingLevel - currentLevel,
linkElement = document.createElement("a");
if (!headingElement.id) {
headingElement.id = TableOfContents.generateId(headingElement);
}
linkElement.href = `#${headingElement.id}`;
linkElement.textContent = headingElement.textContent;
if (headingLevelDifference > 0) {
for (let j = 0; j < headingLevelDifference; j++) {
let listElement = document.createElement("ul"),
listItemElement = document.createElement("li");
listElement.appendChild(listItemElement);
currentElement.appendChild(listElement);
currentElement = listItemElement;
}
currentElement.appendChild(linkElement);
} else {
for (let j = 0; j < -headingLevelDifference; j++) {
currentElement = currentElement.parentNode.parentNode;
}
let listItemElement = document.createElement("li");
listItemElement.appendChild(linkElement);
currentElement.parentNode.appendChild(listItemElement);
currentElement = listItemElement;
}
currentLevel = headingLevel;
}
        this.toElement.appendChild(this.tocElement.firstChild);
    }
}
document.addEventListener("DOMContentLoaded", () =>
new TableOfContents({
from: document.querySelector(".post-body"),
to: document.querySelector(".toc")
}).generateToc()
);
//]]>
</script>

2. Selanjutnya, simpan (copy) kode CSS di bawah ini, di atas kode ]]></b:skin> atau </b:skin>

html {scroll-behavior: smooth}
.toc-auto {display: table;position: relative;border-radius: 3px;background-color: var(--widget-bg,#f6f9fc);padding: 1rem 1rem.85rem;margin: 0 0 1.5rem}
.toc-auto a {transition: .3s ease-in;text-decoration:none}
.toc-auto a:hover, .toc-auto .current {text-decoration: underline !important;color: var(--a-hover,#fe8f04)}
.toc-auto input[type="checkbox"] {display: none}
.toc-title {font-weight: 700 !important;margin-top: 5px}
.toc-title:after {content: '-';background-color: var(--text-secondary,#a6e6e5);border-radius: 3px;clear: both;float: right;margin-left: 1rem;cursor: pointer;font-weight: 400 !important;display: flex;justify-content: center;align-items: center;width: 25px;height: 25px;transition: .3s ease-in}
.toc-title:after:hover {background-color: var(--main-color,#028271);color: #fff}
.toc-auto .toc {max-height: 100%;max-width: 500px;opacity: 1;overflow: hidden;transition: max-height .1s ease,max-width 0s ease,margin-top .3s linear,opacity .3s linear,visibility .3s linear;visibility: visible}
.toc-auto ul li,ol li {margin-bottom: 0 !important}
#toc-sh:checked~.toc-title:after {content: '+'}
#toc-sh:checked ~ .toc {margin-top: 0;max-height: 0;max-width: 0;opacity: 0;transition: max-height 0s ease,max-width 0s ease,margin-top .3s linear,opacity .3s linear,visibility .3s linear;visibility: hidden}

3. Nah, langkah terakhir adalah menekan tombol Simpan Perubahan pada template blogger kawan-kawan. Ok selesai.

Pengaturan Table of Content (TOC) Otomatis

Karena fitur TOC di atas ditampilkan secara otomatis, maka ada beberapa bagian dari kode JavaScript (JS) yang mesti diubah/diganti sesuai dengan selera penggunanya.

1. Fitur TOC akan muncul secara otomatis apabila ada lebih dari tiga (3) Heading Tags yang dipasang.
2. Berkaitan dengan No. 1 di atas. Jumlah Heading Tag bisa diganti atau diubah sesuai keinginan. Bilamana fitur TOC ingin ditampilkan secara otomatis dengan Heading Tag minimal dua (2), maka ganti angka tiga (3) yang sudah ditandai. Kodenya sudah ditandai di atas, tepatnya: (headings.length > 3)
3. Pada fitur bawaannya, Table of Content (TOC) di atas akan ditampilkan di atas Heading Tag yang pertama kali dipasang. Kalau ingin ditampilkan di Heading Tag terakhir, ganti fungsinya dari beforebegin menjadi afterend (JavaScript).
4. Table of Content (TOC) di atas hanya berlaku untuk template blogger yang menggunakan tag class .post-body. Jika yang digunakan berbeda, silakan ganti pada kode: var contentContainer = document.querySelectorAll(".post-body")

Oh iya! Terima kasih untuk Mas Frangki yang sudah capek-capek membuatkan tutorial ini. Itulah tutorial bagaimana caranya Table of Content (TOC) secara otomatis di artikel blog.

Source: https://www.bungfrangki.com/2023/02/table-of-contents-otomatis-di-blogger.html

Arief Ghozaly Konten kreator artikel (writer/creator) sejak 2015.

Berbagi :