Tạo Mục Lục Bài Viết Tự Động Cho Blogger (Table of Contents Chuẩn SEO)
Marketing Ctrl A | Kiến thức • Case study • Tool miễn phí • Growth | Giúp bạn hiểu đúng để làm đúng 🚀
Trong các bài viết dài, việc bổ sung
mục lục (Table of Contents)
là yếu tố cực kỳ quan trọng giúp cải thiện trải nghiệm người dùng và tăng hiệu
quả SEO. Bài viết này sẽ hướng dẫn bạn cách
tạo mục lục tự động cho Blogspot, hỗ trợ nhiều cấp như H2, H3, H4 một cách chuyên nghiệp.
{tocify} $title = {Mục lục}
Mục lục bài viết Blogspot là gì?
Mục lục bài viết (TOC) là danh sách các tiêu đề chính trong bài, giúp
người đọc:
- Dễ dàng điều hướng đến nội dung mong muốn
- Tiết kiệm thời gian đọc
- Tăng trải nghiệm người dùng (UX)
- Giữ chân người đọc lâu hơn
Đặc biệt với những bài viết dài (1000+ từ), việc có mục lục sẽ giúp bài
viết chuyên nghiệp và dễ hiểu hơn rất nhiều.
Hướng dẫn tạo mục lục tự động cho Blogger
Bước 1: Thêm CSS cho mục lục
Vào Blogger -> Chủ đề -> Chỉnh sửa HTML
Dán đoạn CSS bên dưới trước thẻ </b:skin> và
lưu lại
Lưu ý: nên copy qua Notepad trước để tránh lỗi format, sau đó mới copy từ notepad sang trình HTML chỉnh sửa nhằm tránh sai xót về định dạng.
post-body ul{padding:0 0 0 15px;margin:10px 0}.rtl .post-body ul{padding:0 15px 0 0}.post-body li{margin:5px 0;padding:0}.post-body ul li,.post-body ol ul li{list-style:none}.post-body ul li:before{display:inline-block;content:'\2022';margin:0 5px 0 0}.rtl .post-body ul li:before{margin:0 0 0 5px}.post-body ol{counter-reset:ify;padding:0 0 0 15px;margin:10px 0}.rtl .post-body ol{padding:0 15px 0 0}.post-body ol > li{counter-increment:ify;list-style:none}.post-body ol > li:before{display:inline-block;content:counters(ify,'.')'.';margin:0 5px 0 0}.rtl .post-body ol > li:before{margin:0 0 0 5px}#toc li a{color:#4285f4;font-weight:normal}.tocify-wrap{display:block;width:100%;clear:both;margin:0}.tocify-inner{position:relative;max-width:100%;background-color:rgba(155,155,155,0.05);display:flex;flex-direction:column;overflow:hidden;font-size:14px;color:var(--title-color);line-height:1.6em;border-radius:4px}a.tocify-title{position:relative;height:58px;background-color:rgba(155,155,155,0.05);font-size:24px;color:#344955;font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 15px;margin:0;border-radius:4px}a.tocify-title.is-expanded{border-radius:4px 4px 0 0}.tocify-title:after{content:'\2261';font-size:18px;font-weight:400;margin:0 0 0 25px}.rtl .tocify-title:after{margin:0 25px 0 0}.tocify-title.is-expanded:after{font-weight:900}a.tocify-title:hover{text-decoration:none}#toc{display:none;padding:8px 15px;margin:0}#toc ol{padding:0 0 0 15px}.rtl #toc ol{padding:0 15px 0 0}#toc li{font-size:14px;margin:7px 0}#toc li a:hover{color:#4285f4;text-decoration:underline}
Bước 2: Thêm JavaScript
Dán đoạn JS bên dưới trước thẻ </body>
Lưu ý: nên copy qua Notepad trước để tránh lỗi format, sau đó mới copy từ notepad sang trình HTML chỉnh sửa nhằm tránh sai xót về định dạng.
<b:if cond='data:view.isSingleItem'><script>//<![CDATA[function shortCodeIfy(t,n,i){for(var e=t.split("$"),o=/[^{\}]+(?=})/g,c=0;c<e.length;c++){var a=e[c].split("=");if(a[0].trim()==n)return null!=(i=a[1]).match(o)&&String(i.match(o)).trim()}return!1}!function(t){"use strict";var n=function(n){return this.each(function(){var i,e,o=t(this),c=o.data(),a=[o],r=this.tagName,s=0;i=t.extend({content:"body",headings:"h1,h2,h3"},{content:c.toc||void 0,headings:c.tocHeadings||void 0},n),e=i.headings.split(","),t(i.content).find(i.headings).attr("id",function(n,i){return i||function(t){0===t.length&&(t="?");for(var n=t.replace(/\s+/g,"_"),i="",e=1;null!==document.getElementById(n+i);)i="_"+e++;return n+i}(t(this).text())}).each(function(){var n=t(this),i=t.map(e,function(t,i){return n.is(t)?i:void 0})[0];if(i>s){var o=a[0].children("li:last")[0];o&&a.unshift(t("<"+r+"/>").appendTo(o))}else a.splice(0,Math.min(s-i,Math.max(a.length-1,0)));t("<li/>").appendTo(a[0]).append(t("<a/>").text(n.text()).attr("href","#"+n.attr("id"))),s=i})})},i=t.fn.toc;t.fn.toc=n,t.fn.toc.noConflict=function(){return t.fn.toc=i,this},t(function(){n.call(t("[data-toc]"))})}(window.jQuery),$(".post-body b").each(function(){var t=$(this),n=t.text();n.toLowerCase().trim().match("{tocify}")&&(n=0!=shortCodeIfy(n,"title")?shortCodeIfy(n,"title"):"Table of Contents",t.replaceWith('<div class="tocify-wrap"><div class="tocify-inner"><a href="javascript:;" class="tocify-title" role="button" title="'+n+'">'+n+'</a><ol id="toc"></ol></div></div>'),$(".tocify-title").each(function(t){(t=$(this)).on("click",function(){t.toggleClass("is-expanded"),$("#toc").slideToggle(170)})}),$("#toc").toc({content:".post-body",headings:"h2,h3,h4"}),$("#toc li a").each(function(t){(t=$(this)).click(function(){return $("html,body").animate({scrollTop:$(t.attr("href")).offset().top-20},500),!1})}))});//]]></script></b:if>
Bước 3: Soạn bài đúng chuẩn
Khi viết bài, bạn cần sử dụng đúng cấu trúc heading:
H1 = Tiêu đề bài Viết
H2 = Tiêu đề chính
H3 = Tiêu đề phụ
H4 = Tiêu đề nhỏ
Điều này giúp mục lục hiển thị đúng cấp bậc và Google hiểu nội
dung tốt hơn.
Bước 4: Hiển thị mục lục trong bài viết
Tại vị trí bạn muốn hiển thị mục lục, chèn:
{tocify}:
Sau đó bôi đậm đoạn này (BOLD) để kích hoạt
Tuỳ chỉnh tiêu đề mục lục
Nếu muốn đổi tên “Table of Contents”, dùng:
{tocify} $title = {Mục lục bài viết}:
Nhớ bôi đậm toàn bộ đoạn trên
Kết quả đạt được
- Mục lục tự động lấy từ H2, H3, H4
- Có thể thu gọn / mở rộng
- Giao diện đẹp, chuyên nghiệp
- Tăng UX + SEO rõ rệt
Kết luận
Việc tạo mục lục tự động cho Blogger không quá phức tạp nhưng
mang lại giá trị rất lớn:
- Tăng thời gian on-site
- Giảm tỷ lệ thoát
- Tối ưu SEO bài viết
Chỉ cần làm đúng từng bước và copy code chính xác, bạn hoàn
toàn có thể triển khai thành công.