💡 Tạo Mục Lục Tự Động Cho Blogspot Bằng JavaScript – Chuẩn SEO, Dễ Dùng

Bạn đang tìm cách tạo mục lục tự động (table of contents) cho bài viết trên Blogspot mà không cần phải chèn thủ công từng dòng code mỗi lần? Trong bài viết này, CPB4BLOGGER sẽ chia sẻ đoạn mã đơn giản giúp bạn tạo mục lục tự động từ các thẻ tiêu đề <h2>, <h3>, thân thiện với người dùng và đặc biệt là đáp ứng tiêu chí SEO của Google.

✅ Lợi ích của mục lục tự động trên Blogspot

📌 Cải thiện trải nghiệm người đọc: dễ dàng nắm bắt nội dung bài viết.
🚀 Tối ưu SEO: Google ưu tiên các nội dung có cấu trúc rõ ràng.
⏱️ Tiết kiệm thời gian: không cần chèn thủ công các link mục lục mỗi lần viết bài.

🔧 Mã JavaScript tạo mục lục tự động cho Blogspot

Bạn chỉ cần chèn đoạn mã dưới đây vào cuối bài viết hoặc trong phần HTML của theme:

<div class="mbtTOC"> 
  <span style="font-family: inherit; font-size: large;">
    <button onclick="mbtTOC()">Nội dung chính</button> 
  </span>
  <ol id="mbtTOC" style="display:none;"></ol> 
</div>

<script>
function mbtTOC() {
  const toc = document.getElementById("mbtTOC");
  if (!toc) return;

  if (toc.style.display === "block") {
    toc.style.display = "none";
    return;
  } else {
    toc.style.display = "block";
  }

  if (toc.hasChildNodes()) return;

  const content = document.querySelector(".post-body");
  if (!content) {
    toc.innerHTML = "<li>Không tìm thấy nội dung bài viết.</li>";
    return;
  }

  const headers = content.querySelectorAll("h2, h3");
  if (headers.length === 0) {
    toc.innerHTML = "<li>Không có mục lục</li>";
    return;
  }

  let currentSubList = null;

  headers.forEach((header, index) => {
    if (!header.id) {
      header.id = "mbtTOC_" + index;
    }

    if (header.tagName.toLowerCase() === "h2") {
      const li = document.createElement("li");
      const a = document.createElement("a");
      a.href = "#" + header.id;
      a.textContent = header.textContent;
      li.appendChild(a);
      toc.appendChild(li);

      currentSubList = document.createElement("ol");
      li.appendChild(currentSubList);

    } else if (header.tagName.toLowerCase() === "h3") {
      if (!currentSubList) {
        currentSubList = document.createElement("ol");
        toc.appendChild(currentSubList);
      }

      const li = document.createElement("li");
      const a = document.createElement("a");
      a.href = "#" + header.id;
      a.textContent = header.textContent;
      li.appendChild(a);
      currentSubList.appendChild(li);
    }
  });
}
</script>

📋 Một số lưu ý quan trọng

Đảm bảo phần nội dung bài viết của bạn có class .post-body. Nếu theme bạn dùng có class khác, hãy sửa dòng:
```
const content = document.querySelector(".post-body");
```
Để tự động hiển thị mục lục khi tải trang, thêm dòng sau vào cuối script:
```
document.addEventListener("DOMContentLoaded", mbtTOC);
```
Mục lục sẽ tự động lấy các thẻ <h2> làm tiêu đề chính và <h3> làm mục phụ.

📈 Kết luận

Việc thêm mục lục tự động không chỉ giúp nội dung blog của bạn rõ ràng hơn mà còn tăng điểm SEO, tăng thời gian on-site và cải thiện tỷ lệ kiếm tiền từ Google AdSense. Đây là một tiện ích đơn giản nhưng hiệu quả, bạn nên áp dụng ngay hôm nay!

🔗 Đừng bỏ lỡ:

📣 Theo dõi CPB4BLOGGER để cập nhật thêm nhiều mẹo hay về kiếm tiền từ Blogspot, tối ưu SEO và các đoạn mã tiện ích cực chất!

Bạn muốn tìm kiếm gì khác trên cpb4blogger không?

Tìm kiếm Blog này

Sổ tay Blogger