Cara Membuat Daftar Isi di Blogger Secara Otomatis dan Rapi
Pernah lihat artikel panjang yang punya daftar isi otomatis di atasnya? Itulah Table of Contents atau TOC. Fungsinya bukan cuma memudahkan pembaca, tapi juga membantu Google memahami struktur konten.
Dalam artikel ini, kamu akan belajar cara membuat daftar isi seperti Table of Contents SEO friendly di Blogger praktis, ringan, dan langsung bisa kamu terapkan.
Penasaran seperti apa hasil akhir dari script TOC ini? Klik tombol demo berikut.
Apa Itu Daftar Isi (Table of Contents) dan Kenapa Penting untuk SEO
Daftar isi atau Table of Contents (TOC) adalah fitur yang menampilkan susunan judul dan subjudul di dalam artikel. Biasanya, daftar isi berada di bagian atas halaman dan berfungsi sebagai navigasi cepat agar pembaca bisa langsung menuju bagian yang mereka butuhkan.
Selain membantu pembaca, daftar isi juga punya manfaat besar untuk SEO. Google menggunakan struktur heading dan link anchor dari TOC untuk memahami konteks artikelmu. Dengan begitu, peluang artikel muncul dengan jump link di hasil pencarian jadi lebih besar.
Menariknya, daftar isi yang SEO friendly juga bisa meningkatkan pengalaman pengguna (user experience). Pembaca tak perlu scroll panjang, dan mereka akan lebih lama berada di halamanmu. Artinya, sinyal positif ke Google ikut naik dan ini sangat mendukung performa SEO jangka panjang.
Cara Membuat Daftar Isi SEO Friendly di Blogger
Kalau kamu sering lihat artikel panjang dengan daftar isi otomatis di bagian atas, itu disebut Table of Contents (TOC).
Selain bikin artikel lebih rapi dan enak dibaca, daftar isi juga bantu Google memahami struktur halaman kamu.
Nah, di bawah ini adalah panduan lengkap cara membuat TOC yang SEO friendly, elegan, dan otomatis terupdate setiap kali kamu menambah subjudul baru.
1. Tambahkan CSS di Template Blogger
Langkah pertama: atur tampilan daftar isi agar terlihat menarik.
Masuk ke Dashboard Blogger → Tema → Edit HTML.
Lalu, paste kode CSS berikut tepat di atas </head>:
<style>
#toc-container {
background: linear-gradient(135deg, #ff9e00, #ff7a00);
color: #fff;
border-radius: 14px;
padding: 18px 22px;
margin: 25px 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
font-family: 'Poppins', sans-serif;
max-width: 800px;
transition: all 0.3s ease;
}
#toc-title {
font-weight: 700;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
#toc-toggle {
font-size: 20px;
font-weight: bold;
transition: transform 0.3s ease;
}
#toc-list {
list-style: none;
padding-left: 10px;
margin: 0;
line-height: 1.7em;
}
#toc-list a {
color: #fff;
text-decoration: none;
display: block;
padding: 3px 0;
transition: all 0.3s ease;
}
#toc-list a:hover {
color: #000;
transform: translateX(5px);
}
#toc-container.collapsed #toc-list {
display: none;
}
#toc-container.collapsed #toc-toggle {
transform: rotate(-90deg);
}
@media (min-width: 1024px) {
#toc-container {
margin-left: auto;
margin-right: auto;
width: 90%;
}
}
@media (max-width: 768px) {
#toc-container {
margin: 15px auto;
padding: 14px;
font-size: 14px;
max-width: 100%;
}
}
</style>2. Tambahkan JavaScript-nya
Masih di halaman yang sama (Edit HTML Blogger), scroll ke bawah dan cari tag </body>, lalu paste kode JavaScript berikut tepat di atasnya:
<script>
document.addEventListener("DOMContentLoaded", function() {
const tocTarget = document.getElementById("toc");
if (!tocTarget) return;
const postBody =
document.querySelector(".post-body") ||
document.querySelector(".entry-content") ||
document.querySelector(".post-container") ||
document.querySelector(".article");
if (!postBody) return;
const allHeadings = postBody.querySelectorAll("h2, h3");
const headings = Array.from(allHeadings).filter(
(h) => !h.closest("#comments, .comments, footer")
);
if (headings.length === 0) return;
function slugify(text) {
let slug = text
.toLowerCase()
.trim()
.replace(/[^\w\s-]/g, "")
.replace(/\s+/g, "-")
.replace(/-+/g, "-")
.replace(/^-|-$/g, "");
if (/^[0-9]/.test(slug)) slug = "h-" + slug;
return slug;
}
const tocContainer = document.createElement("div");
tocContainer.id = "toc-container";
tocContainer.innerHTML = `
<div id="toc-title">
<span>📖 Daftar Isi</span>
<span id="toc-toggle">▼</span>
</div>
<ul id="toc-list"></ul>
`;
const tocList = tocContainer.querySelector("#toc-list");
headings.forEach((heading) => {
const rawText = heading.textContent.trim();
const id = slugify(rawText);
heading.id = id;
const li = document.createElement("li");
li.innerHTML = `<a href="#${id}">${rawText}</a>`;
if (heading.tagName.toLowerCase() === "h3") {
li.style.marginLeft = "18px";
li.style.fontSize = "0.95em";
}
tocList.appendChild(li);
});
tocTarget.appendChild(tocContainer);
const tocTitle = tocContainer.querySelector("#toc-title");
tocTitle.addEventListener("click", () =>
tocContainer.classList.toggle("collapsed")
);
tocList.querySelectorAll("a").forEach((link) => {
link.addEventListener("click", (e) => {
e.preventDefault();
const target = document.querySelector(link.getAttribute("href"));
if (target) {
window.scrollTo({
top: target.offsetTop - 80,
behavior: "smooth",
});
history.pushState(null, "", link.getAttribute("href"));
}
});
});
});
</script>Selain itu, sudah dilengkapi efek scroll halus dan toggle buka-tutup daftar isi.
3. Implementasikan di Postingan Blogger
Setelah template siap, sekarang tinggal pasang daftar isi ke setiap artikel.
- Masuk ke Post Editor Blogger, buka artikel yang ingin diberi daftar isi.
- Beralih ke mode HTML.
- Tepat di bawah paragraf pembuka, tempel kode berikut:
<div id="toc"></div>Kode inilah yang menjadi wadah di mana daftar isi otomatis akan muncul setiap kali artikelmu dimuat.
4. Simpan dan Uji Coba
Klik Simpan → Pratinjau, lalu lihat hasilnya.
Jika semua benar, kamu akan melihat kotak Daftar Isi muncul otomatis di atas artikel, dan ketika diklik akan menampilkan semua subjudul H2 dan H3 di dalam kontenmu.
Manfaat Membuat Daftar Isi yang SEO Friendly
Banyak orang mengira daftar isi cuma pemanis artikel panjang. Padahal, di dunia SEO, Table of Contents punya peran penting banget baik untuk pembaca maupun mesin pencari. Berikut manfaat utamanya:
-
Meningkatkan Pengalaman Pembaca
Dengan daftar isi, pembaca bisa langsung lompat ke bagian yang mereka butuhkan tanpa harus scroll panjang ke bawah. Ini bikin pengalaman membaca jadi cepat, praktis, dan nyaman. Semakin mudah pembaca menjelajah artikelmu, semakin besar kemungkinan mereka betah lebih lama di halaman dan ini sinyal positif buat SEO.
-
Mengurangi Bounce Rate
Ketika pengunjung merasa artikelmu membantu dan mudah dinavigasi, mereka cenderung nggak langsung keluar. Google menangkap sinyal ini sebagai tanda bahwa kontenmu relevan dan bermanfaat, sehingga bisa membantu menaikkan posisi di hasil pencarian.
-
Membantu Google Memahami Struktur Konten
Daftar isi memberi petunjuk yang jelas ke Google tentang bagaimana artikelmu disusun. Setiap tautan di TOC yang mengarah ke subjudul membantu bot Google mengindeks halaman dengan lebih efisien. Akibatnya, struktur artikelmu jadi lebih mudah dipahami dan berpotensi muncul di hasil pencarian dengan format jump link di bawah meta title.
-
Potensi Tampil di Featured Snippet
Google sering menampilkan cuplikan dengan daftar subjudul dari artikel yang punya struktur jelas. Dengan TOC yang rapi, peluang artikelnya muncul di featured snippet atau People Also Ask bisa meningkat. Ini bonus besar untuk visibilitas organik.
-
Lebih Profesional dan Ramah Pengguna
Selain manfaat teknis, daftar isi juga bikin artikelmu terlihat lebih rapi dan profesional. Pembaca akan menilai blog kamu serius dan informatif karena memudahkan navigasi, apalagi jika tampilannya menarik seperti model TOC milikmu yang bisa diklik dan dilipat.
Singkatnya, daftar isi bukan hanya elemen visual tapi bagian penting dari strategi SEO on-page. Kalau kamu ingin artikel punya performa lebih baik di SERP, TOC wajib ada di setiap postingan yang panjang atau berisi banyak subjudul.
Sudah tahu cara membuat daftar isi yang SEO friendly? Sekarang saatnya pelajari cara menulis artikel SEO agar performa blogmu makin meningkat.
Posting Komentar