Tạo Table of Contents (TOC) (mục lục bài viết) trên blog WordPress

Tạo Table of Contents (TOC) (mục lục bài viết) trên blog WordPress giúp cải thiện trải nghiệm người dùng và tăng cơ hội SEO. Đây là cách thực hiện:

1. Sử dụng Plugin Để Tạo TOC

Các plugin hỗ trợ tự động tạo mục lục dễ dàng và linh hoạt.

Cách 1: Plugin Table of Contents Plus

Cài đặt plugin:
- Vào Dashboard → Plugins → Add New.
- Tìm kiếm “Table of Contents Plus”.
- Cài đặt và kích hoạt.
Cấu hình TOC:
- Đi tới Settings → TOC+.
- Tùy chỉnh:
  - Auto Insert: Chọn tự động thêm mục lục vào các bài viết.
  - Show when: Đặt số lượng tiêu đề tối thiểu (thường là 3).
  - Heading Levels: Chọn mức tiêu đề (H2, H3, H4, …).
  - Position: Chọn vị trí mục lục (thường là Before first heading).
Hiển thị TOC:
- TOC sẽ tự động hiển thị trong bài viết dựa trên các tiêu đề (H1, H2, H3, …).

Cách 2: Plugin Easy Table of Contents

Cài đặt plugin:
- Vào Dashboard → Plugins → Add New.
- Tìm kiếm “Easy Table of Contents”.
- Cài đặt và kích hoạt.
Cấu hình TOC:
- Vào Settings → Table of Contents.
- Chọn:
  - Enable Support: Bật cho Post, Page, hoặc các loại bài viết khác.
  - Auto Insert: Tự động thêm vào bài viết.
  - Appearance: Chọn màu sắc, độ rộng, hoặc ẩn/hiện mục lục.

2. Tạo TOC Thủ Công

Nếu bạn không muốn sử dụng plugin, có thể tự tạo TOC bằng cách sử dụng HTML và CSS.

Bước 1: Viết HTML TOC

Thêm mã mục lục ở đầu bài viết: <div id="toc"> <h2>Table of Contents</h2> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> </ul> </div>
Gắn ID cho từng tiêu đề trong bài viết: <h2 id="section1">Section 1</h2> <p>Content of section 1...</p> <h2 id="section2">Section 2</h2> <p>Content of section 2...</p> <h2 id="section3">Section 3</h2> <p>Content of section 3...</p>

Bước 2: Tùy chỉnh CSS (Tuỳ chọn)

Thêm CSS vào Appearance → Customize → Additional CSS:

#toc {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
}
#toc h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
#toc ul {
    list-style: none;
    padding-left: 0;
}
#toc ul li {
    margin: 5px 0;
}
#toc ul li a {
    text-decoration: none;
    color: #0073aa;
}
#toc ul li a:hover {
    text-decoration: underline;
}

3. Kết Hợp TOC Với SEO

Từ khóa: Chèn từ khóa chính trong tiêu đề (H2, H3) để mục lục dễ đọc và tối ưu SEO.
Anchor links: Các liên kết trong TOC giúp tăng trải nghiệm người dùng và cải thiện thứ hạng trên Google.
Tăng tỷ lệ click (CTR): TOC giúp bài viết chuyên nghiệp và dễ đọc hơn, giữ người dùng lâu hơn.

Mình thì sử dụng plugin Fixed TOC dưới (plugin ko có visrus or shell đâu a/e nhé: https://drive.google.com/file/d/1VWlxA7Q9zVkxS5nFERyY2kkX9lBRNqck/view?usp=sharing

Với các bước trên, bạn sẽ dễ dàng tạo TOC cho bài viết trên blog WordPress!

Tạo Table of Contents (TOC) (mục lục bài viết) trên blog WordPress