Bạn cứ thử mở điện thoại lên, bấm vào một bài viết dài bốn nghìn từ hướng dẫn kỹ thuật rồi bắt đầu lướt bằng ngón tay cái mà xem. Lướt mỏi cả tay qua năm trang màn hình vẫn chưa thấy phần mình cần tìm. Cảm giác lúc đó rất ức chế. Đa số mọi người sẽ bấm nút quay lại ngay lập tức để tìm một trang khác rõ ràng hơn. Người làm nội dung hay đổ lỗi cho thuật toán khi bài viết tụt hạng, nhưng đôi khi nguyên nhân lại nằm ở việc bài viết thiếu một khung điều hướng tử tế. Nắm vững cách làm table of content chuẩn chỉnh chính là chiếc chìa khóa giữ chân độc giả ở lại trang web lâu hơn, đồng thời giúp bọ tìm kiếm của Google hiểu rõ cấu trúc bài viết trong tích tắc.
Nhiều bạn nghĩ làm mục lục cho bài viết trên website chỉ đơn giản là cài một cái plugin rồi bật chế độ tự động lên là xong chuyện. Đến khi giao diện trên điện thoại bị vỡ, người đọc bấm vào tiêu đề thì bị thanh menu che mất nửa chữ, hoặc đường dẫn nhảy loạn xạ sang trang khác, lúc đó mới cuống cuồng đi tìm cách sửa. Việc dựng mục lục cần sự tính toán cẩn thận từ cấu trúc thẻ cho đến trải nghiệm thực tế của người dùng.
Bản chất cấu trúc: Cách làm table of content bắt đầu từ kiến trúc thẻ
Một mục lục hoạt động mượt mà dựa trên nguyên lý cực kỳ đơn giản của ngôn ngữ web: mỏ neo liên kết (anchor link). Trình duyệt web cần biết chính xác điểm đến trong cùng một tài liệu thông qua một định danh duy nhất. Định danh này nằm ở thuộc tính nhận diện (id) gắn trong các thẻ tiêu đề từ H2 đến H4. Khi bạn bấm vào một đường dẫn có đuôi chứa dấu thăng (#), trình duyệt sẽ cuộn màn hình đến đúng vị trí của thẻ mang định danh đó.
Rất nhiều bạn mới làm web mắc một lỗi sơ đẳng: bôi đậm một dòng chữ, chỉnh cỡ chữ to lên cho giống tiêu đề rồi tạo liên kết nhảy đến đó bằng tay. Cách làm này khiến hệ thống website hoàn toàn mất phương hướng. Trình duyệt lẫn công cụ tìm kiếm chỉ nhận diện cấu trúc bài viết qua hệ thống phân cấp tiêu đề chuẩn từ H1, H2, H3 đến H4. Thẻ H1 đại diện cho tiêu đề duy nhất của cả bài. Các phần lớn bắt buộc phải là thẻ H2. Những ý nhỏ bổ trợ cho H2 sẽ dùng thẻ H3. Nếu bạn nhảy cóc từ H2 xuống thẳng H4 bỏ qua H3, cấu trúc bài viết sẽ lập tức gãy vụn.
Khi bạn dựng đúng cây phân cấp tiêu đề này, công việc tạo mục lục mới thực sự bắt đầu. Mục lục bản chất là một danh sách chứa các liên kết nội bộ trỏ thẳng vào các thẻ tiêu đề bên dưới. Thiếu đi một cây tiêu đề chuẩn mực, mọi công cụ tự động tạo bảng mục lục đều trở nên vô dụng hoặc hiển thị lộn xộn.
Một kiến trúc tiêu đề chuẩn còn mang lại lợi ích khổng lồ cho khả năng thu thập dữ liệu của công cụ tìm kiếm. Khi hệ thống của Google quét qua trang, nó đọc cấu trúc các thẻ này để phân tích xem bài viết của bạn có giải quyết thấu đáo vấn đề của người tìm kiếm hay không. Một bài viết dài mà các thẻ tiêu đề nằm lộn xộn sẽ khiến điểm đánh giá trải nghiệm trang bị giảm sút nghiêm trọng.
Tự tay viết HTML và CSS: Cách làm table of content siêu nhẹ
Cài plugin luôn là giải pháp nhanh nhất, nhưng lạm dụng plugin lại là con đường ngắn nhất biến website WordPress thành một cỗ máy nặng nề. Mỗi plugin mục lục thường kéo theo hàng tá file mã kịch bản JavaScript và bảng kiểu dáng CSS ngoài luồng, khiến tốc độ tải trang chậm đi rõ rệt. Với những trang bài viết thông tin đơn giản hoặc tài liệu hướng dẫn kỹ thuật dài, tự viết mã HTML và CSS là phương án tối ưu nhất để giữ mã nguồn sạch sẽ tuyệt đối.
Để dựng một mục lục bằng tay, bạn chỉ cần hai thành phần: danh sách liên kết ở đầu bài và thuộc tính định danh gắn vào từng tiêu đề. Thao tác này diễn ra ngay trong khung soạn thảo văn bản của WordPress.
Ở phần đầu bài viết, bạn tạo một khối danh sách điều hướng bằng thẻ nav và thẻ ul:
<nav class="custom-toc">
<p class="toc-title">Nội dung chính trong bài</p>
<ul>
<li><a href="#phan-1">1. Tổng quan về kiến trúc điều hướng</a></li>
<li><a href="#phan-2">2. Các bước dựng mã HTML chuẩn</a></li>
<li><a href="#phan-3">3. Khắc phục lỗi hiển thị trên điện thoại</a></li>
</ul>
</nav>
Tiếp theo, ở các đoạn nội dung tương ứng bên dưới, bạn mở trình chỉnh sửa mã HTML của khối tiêu đề và gắn thuộc tính định danh vào:
<h2 id="phan-1">1. Tổng quan về kiến trúc điều hướng</h2>
<h2 id="phan-2">2. Các bước dựng mã HTML chuẩn</h2>
<h2 id="phan-3">3. Khắc phục lỗi hiển thị trên điện thoại</h2>
Thuộc tính định danh này cần viết bằng chữ thường, không dấu, các từ nối với nhau bằng dấu gạch ngang và tuyệt đối không bắt đầu bằng số. Bạn phải đảm bảo mỗi định danh trong bài là duy nhất. Nếu có hai tiêu đề trùng một định danh, trình duyệt sẽ nhảy đến tiêu đề đầu tiên và bỏ qua vị trí thứ hai.
Sau khi có khung HTML, bạn thêm một chút CSS vào mục tùy biến giao diện để mục lục nhìn chuyên nghiệp và dễ đọc hơn:
.custom-toc {
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 20px;
margin: 25px 0;
}
.toc-title {
font-weight: 700;
margin-bottom: 12px;
color: #1e293b;
}
.custom-toc ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.custom-toc li {
margin-bottom: 8px;
}
.custom-toc a {
text-decoration: none;
color: #2563eb;
}
.custom-toc a:hover {
text-decoration: underline;
}
Điểm tuyệt vời của cách làm thuần này là tốc độ tải trang gần như bằng không mi-li-giây phụ trội. Trình duyệt đọc mã HTML trực tiếp mà không cần chờ nạp thêm bất kỳ file script cồng kềnh nào từ máy chủ.
Mẹo xử lý lỗi thanh điều hướng che mất tiêu đề
Dân làm web tự viết code hay gặp phải một pha xu cà na kinh điển: bấm vào mục lục xong, màn hình cuộn xuống nhưng tiêu đề H2 lại bị cái thanh menu ghim trên cùng (sticky header) che mất nửa trên. Người đọc chỉ thấy được phần đuôi của chữ hoặc nội dung của đoạn văn bên dưới.
Để xử lý triệt để vấn đề này mà không cần động vào JavaScript phức tạp, bạn hãy dùng thuộc tính CSS scroll-margin-top. Bạn chỉ cần thêm một dòng CSS đơn giản vào toàn bộ các thẻ tiêu đề nhận diện:
h2[id], h3[id], h4[id] {
scroll-margin-top: 90px;
}
Thông số 90px này nên được chỉnh nhỉnh hơn chiều cao thực tế của thanh menu khoảng 15 đến 20 pixel. Khi độc giả nhấp vào liên kết mục lục, trình duyệt sẽ tự động chừa lại một khoảng đệm phía trên vừa vặn, giúp tiêu đề hiển thị trọn vẹn, thanh thoát ngay trước mắt người xem.
Dùng công cụ tự động: Khi nào nên cài plugin cho WordPress?
Viết tay bằng mã HTML rất nhẹ, nhưng nếu website của bạn có hàng trăm bài viết phân tích chuyên sâu, mỗi bài dài năm nghìn từ với cả chục nhánh ý nhỏ, ngồi gắn id cho từng thẻ sẽ tiêu tốn quá nhiều thời gian. Lúc này, việc nhờ cậy đến các công cụ tự động hóa là lựa chọn thực tế hơn cả.
Khi chọn giải pháp tự động, bạn cần phân biệt rõ hai trường phái: dùng plugin tạo mục lục chuyên dụng và dùng khối mục lục tích hợp sẵn trong trình biên tập khối Gutenberg.
Các khối mục lục tích hợp sẵn
Nếu bạn đang sử dụng các bộ mở rộng cho Gutenberg như Spectra, Kadence Blocks hay chính khối mục lục của plugin SEO Rank Math, bạn hãy tận dụng ngay các khối này. Ưu điểm lớn nhất của khối dựng sẵn là chúng tạo ra mã HTML tĩnh ngay lúc bạn lưu bài viết. Khi khách truy cập vào trang, máy chủ chỉ việc trả về đoạn mã đã render sẵn, không cần tốn tài nguyên chạy các hàm quét nội dung trong bộ nhớ tạm.
Khối mục lục của Rank Math là một ví dụ điển hình. Bạn chỉ cần gõ lệnh tìm kiếm khối và chèn vào vị trí mong muốn, plugin sẽ tự động rà soát toàn bộ các thẻ H2, H3 trong bài để kéo vào danh sách. Bạn có thể ẩn đi những tiêu đề phụ không cần thiết chỉ bằng một cú nhấp chuột ngay trên giao diện soạn thảo.
Lựa chọn giữa các plugin chuyên dụng
Trong trường hợp website dùng theme cổ điển hoặc cần các tùy biến nâng cao về mặt hiển thị, hai cái tên phổ biến nhất hiện nay là LuckyWP Table of Contents và Easy Table of Contents. Mỗi công cụ có một đặc tính riêng biệt mà bạn cần cân nhắc kỹ trước khi bấm kích hoạt.
- LuckyWP Table of Contents: Điểm mạnh của công cụ này là tối ưu mã rất sạch, hỗ trợ sẵn dữ liệu có cấu trúc schema và cho phép tùy biến sâu về giao diện trực quan ngay trong trang cài đặt. Nó cho phép bạn chọn số lượng tiêu đề tối thiểu để mục lục xuất hiện, tránh tình trạng bài viết ngắn ngủi chỉ có hai mục mà mục lục vẫn hiện ra trơ trọi.
- Easy Table of Contents: Đây là công cụ có lượng người dùng đông đảo nhờ tính năng tự động chèn vào hàng loạt bài viết theo điều kiện định sẵn. Nhược điểm của nó là tạo ra khá nhiều mã CSS phụ và đôi khi gây xung đột nhỏ với các bộ nhớ đệm trang nếu cấu hình chưa chuẩn.
Dù dùng bất kỳ công cụ nào, nguyên tắc cốt lõi bạn phải nhớ là giới hạn độ sâu của mục lục. Rất nhiều bạn tham lam bật hiển thị từ thẻ H2 đến tận thẻ H6. Kết quả là mục lục dài bằng nửa bài viết, các nhánh thụt đầu dòng chằng chịt như ma trận khiến người đọc hoa mắt. Giới hạn dừng lại ở thẻ H3 là con số lý tưởng cho phần lớn các bài viết phân tích chuyên sâu.
Tối ưu Schema và trải nghiệm di động: Giữ chân độc giả
Mục lục sinh ra trước hết là để phục vụ người đọc, kế đến là hỗ trợ công cụ tìm kiếm phân loại dữ liệu. Một mục lục chuẩn SEO thời điểm này bắt buộc phải giải quyết trơn tru hai bài toán: cấu trúc dữ liệu cho bọ tìm kiếm và trải nghiệm lướt web trên ngón tay cái của người dùng điện thoại.
Về mặt kỹ thuật SEO, một mục lục được thiết kế chuẩn sẽ giúp website có cơ hội nhận được các đường liên kết mở rộng (sitelinks) hiển thị ngay dưới kết quả tìm kiếm trên trang kết quả của Google. Để hiểu rõ cách thức Google thu thập và xử lý các liên kết nhảy trang này, bạn có thể tham khảo trực tiếp tài liệu hướng dẫn kỹ thuật tại Trung tâm Google Tìm kiếm. Khi bài viết có các điểm neo rành mạch, Google sẽ tự động gắp các phần nội dung quan trọng để đưa thẳng lên bảng hiển thị, tăng tỷ lệ nhấp chuột tự nhiên từ người dùng.
Một số plugin hiện nay chèn trực tiếp schema SiteNavigationElement vào mục lục. Tuy nhiên, điều quan trọng nhất vẫn là tính đồng nhất giữa văn bản neo (anchor text) trên mục lục và nội dung thực tế của thẻ tiêu đề bên dưới. Đừng bao giờ đặt tên trên mục lục một đằng rồi tiêu đề bên dưới lại viết một nẻo. Sự bất nhất này khiến thuật toán đánh giá thấp độ tin cậy của bài viết.
Chuyển sang góc độ giao diện điện thoại, đây là nơi bộc lộ nhiều điểm yếu nhất của các trang web hiện nay. Hơn bảy mươi phần trăm lượng truy cập thông tin đến từ thiết bị di động. Một chiếc mục lục mở bung toàn bộ mười lăm mục lớn nhỏ sẽ chiếm trọn hai đến ba lượt cuộn màn hình của người dùng. Họ muốn đọc nội dung ngay mà phải cuộn mãi qua một cái bảng dài thượt thì tỷ lệ thoát trang sẽ tăng vọt.
Giải pháp xử lý trên điện thoại đòi hỏi sự tinh tế:
- Mặc định thu gọn trên màn hình nhỏ: Khi chiều rộng màn hình dưới 768px, bảng mục lục nên ở trạng thái đóng lại và chỉ hiện tiêu đề kèm nút bấm mở rộng. Ai có nhu cầu xem tổng quan mới bấm để xem.
- Khoảng cách chạm ngón tay vừa vặn: Các dòng trong mục lục phải có khoảng cách dòng (line-height) tối thiểu 1.6 và đệm trên dưới rõ ràng. Bố trí các dòng quá sát nhau sẽ khiến độc giả liên tục bấm nhầm vào mục họ không muốn xem.
- Nút cuộn lên đầu trang: Khi người dùng đã bấm vào mục lục để nhảy xuống mục số 5 ở tận cuối bài viết, bạn cần cung cấp cho họ một nút bấm nhỏ nổi ở góc phải màn hình để quay ngược lại mục lục hoặc đầu trang trong một phần mười giây.
Xây dựng trải nghiệm đọc mượt mà từ những chi tiết nhỏ này giúp chỉ số thời gian trên trang tăng lên đáng kể. Khi bạn kết hợp một bài viết có cấu trúc điều hướng hoàn hảo với các chiến dịch phân bổ sức mạnh thông qua dịch vụ backlink uy tín, hiệu quả nâng đỡ thứ hạng bài viết trên bảng xếp hạng tìm kiếm sẽ bền vững hơn rất nhiều so với việc chỉ tập trung viết nội dung chay.
Quy trình chuẩn: Cách làm table of content từng bước một
Để không bị sót việc hoặc gặp lỗi vặt trong quá trình xuất bản bài viết, người viết tổng hợp lại một quy trình năm bước rõ ràng mà bất kỳ ai cũng có thể làm theo ngay trên website của mình.
Bước 1: Rà soát lại toàn bộ cây tiêu đề trong bài viết
Trước khi nghĩ đến chuyện chèn bảng, bạn hãy mở chế độ xem tổng quan tài liệu trong WordPress để nhìn bao quát toàn bộ bài viết. Kiểm tra xem thẻ H2 đã thực sự là các ý lớn nhất chưa. Các mục con bên trong H2 có bị nhảy cấp thành H4 hay không. Nếu có, hãy sửa lại thành H3 ngay lập tức. Đảm bảo các tiêu đề này ngắn gọn, súc tích và chứa đúng từ khóa phụ hoặc ý đồ tìm kiếm của người đọc.
Bước 2: Chuẩn hóa định danh neo (Anchor ID)
Nếu bạn dùng trình soạn thảo khối Gutenberg, hãy bấm vào từng khối tiêu đề, mở thanh cài đặt bên tay phải, tìm đến mục Nâng cao (Advanced) và điền vào ô HTML Anchor. Hãy đặt các tên ngắn gọn như `tong-quan`, `huong-dan-chi-tiet`, `cac-loi-thuong-gap`. Tránh để các định danh quá dài dòng hoặc chứa các ký tự đặc biệt như dấu phẩy, dấu chấm hỏi.
Bước 3: Chèn bảng mục lục vào vị trí đắc địa
Vị trí đặt mục lục lý tưởng nhất không phải là ngay dưới tiêu đề H1, mà là nằm ngay sau đoạn văn mở đầu bài viết (khoảng 2 đến 3 đoạn văn giới thiệu vấn đề). Vị trí này cho phép người đọc nắm được bối cảnh của bài viết trước khi đưa ra quyết định xem họ nên nhảy đến phần nào để tìm câu trả lời nhanh nhất.
Bước 4: Cấu hình giao diện và số cấp hiển thị
Trong bảng cài đặt của khối hoặc plugin, thiết lập chỉ cho phép quét thẻ H2 và H3. Đặt tiêu đề cho bảng thật tự nhiên và thân thiện, ví dụ như “Nội dung bài viết” hoặc “Bạn cần tìm gì trong bài này?”. Hãy kích hoạt tính năng làm mượt hiệu ứng cuộn trang (smooth scroll) để khi độc giả bấm vào liên kết, màn hình sẽ lướt nhẹ nhàng xuống dưới thay vì giật cục sang vị trí mới.
Bước 5: Kiểm tra thực tế trên nhiều kích thước màn hình
Sau khi lưu bài, bạn hãy mở bài viết bằng cửa sổ ẩn danh trên cả máy tính lẫn điện thoại cá nhân. Bấm thử vào từng liên kết trong mục lục để kiểm tra ba yếu tố: tiêu đề có bị menu che khuất không, trang có nhảy đúng vị trí thẻ H2 tương ứng không, và nút quay lại đầu trang có hoạt động bình thường không. Khi cả ba yếu tố này vận hành trơn tru, bài viết của bạn mới thực sự hoàn tất khâu kỹ thuật.
Bắt bài những lỗi ngớ ngẩn khiến mục lục nhảy loạn xạ
Nhiều bạn làm xong mục lục nhưng lại phát hiện bảng điều hướng nhảy lung tung hoặc không hoạt động như ý muốn. Dưới đây là những nguyên nhân cốt lõi gây ra tình trạng này và giải pháp xử lý dứt điểm.
Nguyên nhân đầu tiên nằm ở xung đột kịch bản cuộn trang mượt (smooth scroll). Nhiều giao diện WordPress hiện đại đã tích hợp sẵn hiệu ứng cuộn mượt bằng mã CSS hoặc JavaScript của theme. Nếu bạn lại kích hoạt thêm tính năng cuộn mượt trong plugin mục lục, hai đoạn mã này sẽ đánh nhau. Hậu quả là màn hình bị giật liên hồi hoặc nhảy sai vị trí điểm đến. Cách xử lý rất đơn giản: tắt tính năng này trong cài đặt của plugin và để giao diện gốc tự xử lý.
Nguyên nhân thứ hai là việc đặt tiêu đề quá dài. Một tiêu đề H2 dài ba dòng chữ khi được kéo vào mục lục sẽ làm vỡ tan nát bố cục bảng, đặc biệt là trên màn hình điện thoại. Hãy giữ tiêu đề H2 dưới mười hai chữ. Ngắn gọn, đanh thép, đi thẳng vào bản chất của nội dung.
Nguyên nhân thứ ba liên quan đến bộ nhớ đệm (cache) của website. Khi bạn vừa sửa lại tên một tiêu đề hoặc thay đổi định danh mỏ neo bên dưới nhưng không xóa bộ nhớ đệm, mục lục vẫn giữ lại đường dẫn cũ. Người đọc bấm vào sẽ bị kẹt lại tại chỗ hoặc nhảy về đầu trang. Sau mỗi lần chỉnh sửa cấu trúc bài viết, bạn cần xóa bộ đệm của trang đó để trình duyệt tải lại tệp mã mới nhất.
Đừng xem mục lục là một thứ gắn vào cho có để đối phó với các danh sách kiểm tra SEO cứng nhắc. Một mục lục được tính toán tỉ mỉ chính là bản đồ dẫn đường cho độc giả, biến một tập tài liệu dài ngoằng thành một trải nghiệm tiếp nhận thông tin thoải mái và ngăn nắp. Hãy mở ngay bài viết dài nhất trên trang web của bạn ra, bấm thử từng đường dẫn trên điện thoại và chỉnh lại những phần neo đang bị che khuất ngay hôm nay.
Leave a Reply