SEO WordPress #10: Thẻ Heading, cấu trúc H1-H6 đúng logic

1. Thẻ Heading đóng vai trò gì trên trang WordPress?

Heading tạo một outline giúp người đọc hiểu trang nói về gì, đang ở phần nào và phần tiếp theo có quan hệ ra sao. Người đọc thị giác thường quét tiêu đề trước khi đọc chi tiết. Người dùng trình đọc màn hình có thể mở danh sách heading và nhảy trực tiếp tới phần cần thiết.

W3C Headings Tutorial mô tả heading như tín hiệu tổ chức nội dung và hỗ trợ điều hướng trong trang. H1 có rank cao nhất, H6 thấp nhất; heading cùng cấp hoặc cấp cao hơn mở section mới, còn cấp thấp hơn mở subsection.

Bản đầy đủ của mục này có thêm: bảng 5 dòng (cột: Đối tượng, Heading giúp gì?, Dấu hiệu triển khai đúng). Xem bản đầy đủ

Heading không tự làm một trang có thứ hạng cao. Nó làm nội dung dễ hiểu và dễ kiểm tra hơn. Nếu phần dưới H2 không trả lời điều H2 hứa hẹn, đổi thẻ từ div sang H2 cũng không sửa được vấn đề nội dung.

2. Bảng kiểm 10 tiêu chí Heading từ 64 đến 73

Bảng kiểm 10 tiêu chí Heading từ 64 đến 73 gom ba lớp: tiêu đề chính, outline nội dung và cách template dựng thẻ trong DOM. Mỗi mã từ 64 tới 73 đi kèm điều kiện và trọng số, có mã bắt buộc, có mã xếp mức quan trọng. Audit phải xem HTML sau render, không chỉ nhìn giao diện. Bảng là cổng nghiệm thu chứ không phải công thức đếm số thẻ trên trang.

Bản đầy đủ của mục này có thêm: bảng 10 dòng (cột: Mã, Tiêu chí, Điều kiện chính, Trọng số). Xem bản đầy đủ

Bảng này là cổng nghiệm thu, không phải công thức đếm heading. Trang ngắn có thể chỉ cần H1 và vài H2. Trang tài liệu dài có thể cần H4. Không cần cố dùng đủ H1-H6.

3. Tiêu chí 64: Mỗi trang có một H1 chính

Mỗi trang nên có một H1 mô tả chủ đề chính, dễ nhận biết và xuất hiện như tiêu đề nổi bật đầu tiên của nội dung. H1 có thể tương tự Title nhưng không cần trùng từng ký tự; từ khóa nên xuất hiện tự nhiên khi nó thật sự là tên chủ đề.

Google Search Essentials khuyên đặt những từ người dùng dùng để tìm nội dung ở vị trí nổi bật như title và main heading. Tài liệu về title link cũng lưu ý rằng nhiều heading lớn có cùng độ nổi bật có thể làm tiêu đề chính thiếu rõ ràng.

Bản đầy đủ của mục này có thêm: danh sách 5 dòng. Xem bản đầy đủ

H1 từ logo trong header cộng H1 của bài là lỗi template phổ biến. Logo nên là liên kết hoặc hình ảnh có accessible name, không cần bọc trong H1 trên mọi trang.

Trọng số: Bắt buộc. Công cụ: DevTools, Screaming Frog và Meta Tag Checker của Novaverb.

4. H1 và thẻ Title nên giống hay khác nhau?

H1 và Title nên cùng mô tả một chủ đề nhưng có thể tối ưu cho hai bối cảnh đọc khác nhau. Title xuất hiện trong tab trình duyệt và có thể được Google dùng làm nguồn tạo title link. H1 nằm trên trang, gắn trực tiếp với phần mở đầu và không gian thiết kế.

Bản đầy đủ của mục này có thêm: bảng 2 dòng (cột: Thành phần, Vai trò chính, Cách viết). Xem bản đầy đủ

Ví dụ Title có thể là “SEO WordPress #10: Thẻ Heading H1-H6”, còn H1 là “SEO WordPress #10: Thẻ Heading, cấu trúc H1-H6 đúng logic”. Hai câu cùng intent nhưng H1 diễn đạt rõ giá trị của bài hơn.

Không tạo chênh lệch intent giữa hai thành phần. Nếu Title hứa hướng dẫn sửa Heading nhưng H1 chỉ nói định nghĩa, người đọc và hệ thống tìm kiếm nhận hai tín hiệu khác nhau. Không lặp từ khóa nhiều lần trong cả hai.

5. Tiêu chí 65: Cấu trúc H2-H6 theo cấp bậc logic

H2 mở phần trực thuộc H1, H3 mở phần con của H2, H4 mở phần con của H3; chỉ dùng cấp sâu hơn khi outline thật sự có tầng tương ứng. W3C khuyên tránh nhảy từ H2 sang H4 vì có thể gây nhầm lẫn.

Bản đầy đủ của mục này có thêm: mẫu để chép. Xem bản đầy đủ

Quay từ H4 về H2 không phải nhảy cấp sai: nó đóng các subsection trước và mở phần lớn mới. Vấn đề thường nằm ở chiều đi xuống, chẳng hạn H2 tiếp ngay H4 mà không có H3 làm cha.

Heading rank không được chọn theo cỡ chữ mong muốn. Nếu H3 cần to hơn trong một landing page, sửa CSS. Không đổi thành H2 nếu quan hệ outline vẫn là subsection của H2.

Trọng số: Quan trọng. Công cụ: Screaming Frog, Meta Tag Checker của Novaverb và PageSpeed Checker của Novaverb.

6. Cách thiết kế outline trước khi chọn cấp Heading

Hãy viết tên các phần như mục lục tài liệu trước, sau đó xác định quan hệ cha con và gán cấp heading. Cách này tránh tình trạng chọn H2 vì nó trông đẹp rồi cố giải thích cấu trúc sau.

Bản đầy đủ của mục này có thêm: danh sách 7 dòng. Xem bản đầy đủ

Một outline tốt vẫn hiểu được khi bỏ toàn bộ đoạn văn. Nếu danh sách chỉ gồm “Giới thiệu”, “Thông tin”, “Chi tiết”, người đọc không biết từng phần nói gì. Heading nên đủ mô tả nhưng không biến thành một đoạn văn dài.

Phép kiểm: xuất toàn bộ heading thành danh sách thụt cấp. Nếu quan hệ cha con không giải thích được bằng ngôn ngữ, cần sửa outline trước khi sửa HTML.

7. Tiêu chí 66: Heading không để trống hoặc chỉ chứa icon

Mỗi H1-H6 phải có accessible name mô tả section; heading rỗng, chỉ có khoảng trắng hoặc icon không nhãn đều không đạt. CSS pseudo-element tạo chữ bằng ::before có thể nhìn thấy nhưng không phải nguồn nội dung tin cậy.

Bản đầy đủ của mục này có thêm: bảng 5 dòng (cột: Markup, Vấn đề, Cách sửa). Xem bản đầy đủ

Heading rỗng thường do page builder tạo block spacer, trường tiêu đề chưa nhập hoặc component render khi dữ liệu thiếu. Sửa tại template để tránh cùng lỗi trên hàng trăm URL.

Trọng số: Bắt buộc. Công cụ: Screaming Frog, axe DevTools và Meta Tag Checker của Novaverb.

8. Tiêu chí 67: Không dùng Heading chỉ để tạo kiểu chữ

Tiêu chí 67 nói rằng không dùng Heading chỉ để tạo kiểu chữ: H1 tới H6 đặt tên cho một section nội dung, không thay cho class chữ lớn hay đậm. MDN và W3C đều khuyên chọn CSS cho cỡ font thay vì chọn rank theo hình thức. Một câu cảnh báo, giá tiền hay con số KPI hãy đặt vào p, span, strong hoặc blockquote. Tắt CSS là phép kiểm hữu ích, vì outline HTML phải vẫn có nghĩa.

Một câu cảnh báo, giá tiền, số thống kê hoặc câu quote không tự động là heading. Nếu nó không mở một phần nội dung có thể được đặt tên trong outline, hãy dùng p, strong, blockquote hoặc component phù hợp.

Bản đầy đủ của mục này có thêm: danh sách 6 dòng. Xem bản đầy đủ

Trọng số: Quan trọng. Công cụ: DevTools, WAVE và PageSpeed Checker của Novaverb. Tắt CSS là một phép kiểm hữu ích: outline HTML phải vẫn có nghĩa.

9. Tiêu chí 68: Tiêu đề trực quan phải dùng HTML Heading

Văn bản nhìn và hoạt động như tiêu đề section nên dùng H1-H6, không chỉ dùng div, span hoặc strong được phóng to bằng CSS. Nếu chỉ tạo kiểu thị giác, công nghệ hỗ trợ không nhận được quan hệ cấu trúc tương đương.

W3C Easy Checks khuyên xác nhận mọi văn bản trông như heading đều được đánh dấu là heading và mọi heading thật sự đóng vai trò tiêu đề. Hai chiều kiểm này ngăn cả thiếu semantics lẫn lạm dụng semantics.

Bản đầy đủ của mục này có thêm: bảng 4 dòng (cột: Nhìn trên giao diện, HTML hiện tại, Quyết định). Xem bản đầy đủ

Trọng số: Quan trọng. Công cụ: DevTools, axe DevTools và PageSpeed Checker của Novaverb.

10. Tiêu chí 69: Thứ tự DOM khớp thứ tự người dùng đọc

Heading trong DOM cần xuất hiện theo trình tự nội dung mà người dùng nhìn thấy và đọc, không bị CSS Grid, Flexbox hoặc position sắp lại thành một câu chuyện khác. Trình đọc màn hình và bàn phím thường theo DOM, không theo tọa độ thị giác.

Một layout desktop có sidebar bên phải nhưng đặt sidebar trước main trong DOM có thể khiến danh sách heading bắt đầu bằng “Bài liên quan” trước H1. CSS order có thể đổi vị trí nhìn thấy mà không đổi thứ tự truy cập.

Bản đầy đủ của mục này có thêm: danh sách 6 dòng. Xem bản đầy đủ

W3C Page Regions khuyên cấu trúc hiển thị nhất quán giữa kích thước màn hình khi có thể. Responsive nên thay cách bố trí, không thay câu chuyện nội dung.

Trọng số: Quan trọng. Công cụ: DevTools, Accessibility Tree và PageSpeed Checker của Novaverb.

11. Tiêu chí 70: Không có Heading liên tiếp thiếu nội dung

Mỗi heading phải mở một section có nội dung; nhiều heading liên tiếp chỉ hợp lý khi heading đầu giới thiệu một nhóm và heading sau mở subsection đầu tiên có quan hệ rõ. Chuỗi H2 rồi H3 rồi H4 không có đoạn, danh sách hoặc component nào thường là dấu hiệu outline bị chia quá sâu.

Ví dụ hợp lý: H2 “Công cụ kiểm tra” có một câu giới thiệu, sau đó các H3 cho từng nhóm công cụ. Ví dụ yếu: H2 “SEO”, H3 “Technical SEO”, H4 “Heading”, rồi mới có một đoạn. Hai cấp đầu không cung cấp nội dung hoặc phạm vi rõ.

Bản đầy đủ của mục này có thêm: danh sách 5 dòng. Xem bản đầy đủ

Trọng số: Quan trọng. Công cụ: Screaming Frog và kiểm tra trực tiếp.

12. Tiêu chí 71: Heading trong menu, sidebar và footer không lấn át nội dung

Heading ở vùng lặp lại cần phục vụ nhãn cấu trúc của vùng đó và giữ cấp nhất quán, không cạnh tranh độ nổi bật với H1 hoặc làm mục lục bài nuốt tiêu đề của sidebar. Không phải mọi nhãn menu đều cần H2.

Bản đầy đủ của mục này có thêm: bảng 5 dòng (cột: Vùng, Cách xử lý, Lỗi thường gặp). Xem bản đầy đủ

W3C lưu ý cấp heading của các section cố định như sidebar nên nhất quán giữa các trang thay vì đổi theo nội dung từng bài. Hệ mục lục cần giới hạn phạm vi trong main article hoặc loại rõ các vùng bổ trợ.

Trọng số: Quan trọng. Công cụ: DevTools và HeadingsMap.

13. Tiêu chí 72: Heading responsive không bị nhân đôi

Tiêu chí 72 đòi Heading responsive không bị nhân đôi: đừng dựng hai thẻ giống nhau rồi chỉ ẩn một bản bằng CSS. Cả hai vẫn cùng tồn tại trong DOM, crawl report và accessibility tree, làm H1 hoặc outline bị lặp. Lỗi thường lộ ra khi page builder dựng section cho desktop và section cho mobile. Hãy giữ một thẻ, đổi layout bằng CSS và kiểm DOM ở cả hai phía.

Lỗi thường xuất hiện khi page builder có hai section “desktop only” và “mobile only”. Nếu CSS chưa tải, media query lỗi hoặc công nghệ hỗ trợ xử lý khác dự kiến, người dùng có thể gặp cả hai bản.

Bản đầy đủ của mục này có thêm: danh sách 6 dòng. Xem bản đầy đủ

Trọng số: Bắt buộc. Công cụ: DevTools, Screaming Frog và Meta Tag Checker của Novaverb.

14. Tiêu chí 73: ID Heading và liên kết mục lục hợp lệ

Mỗi ID dùng làm neo phải duy nhất trong tài liệu, ổn định và được liên kết mục lục trỏ đúng bằng fragment tương ứng. Nếu ID trùng, trình duyệt thường nhảy tới phần tử đầu tiên, khiến mục lục mở sai section.

Bản đầy đủ của mục này có thêm: danh sách 7 dòng, mẫu để chép. Xem bản đầy đủ

Mục lục tạo từ DOM cần loại heading của navigation, sidebar, card liên quan và chính khối mục lục. Nếu title H2 nằm trong link card, đó là tên bài khác chứ không phải section của trang hiện tại.

Trọng số: Quan trọng. Công cụ: DevTools và Link Checker.

15. Các lỗi Heading thường gặp trong WordPress

Các lỗi Heading thường gặp trong WordPress đến từ chồng lớp giữa theme, block editor, page builder, plugin mục lục và component động. Sửa từng bài là chưa đủ nếu template vẫn sinh lỗi mới. Ví dụ: logo thành H1, tên card related posts thành H2 hàng loạt, widget footer rỗng khi chưa nhập title, ID mục lục trùng nhau. Hãy đếm lỗi theo template, vì một file theme hỏng cùng mẫu trên 500 URL thì sửa file đó có giá trị hơn chỉnh 500 bài.

Bản đầy đủ của mục này có thêm: bảng 7 dòng (cột: Nguồn lỗi, Triệu chứng, Nơi sửa). Xem bản đầy đủ

Hãy đếm lỗi theo template. Nếu 500 URL có H1 duplicate cùng mẫu, sửa một file theme có giá trị hơn chỉnh 500 bài. Sau sửa, crawl lại toàn bộ nhóm URL và kiểm vài trang bằng Accessibility Tree.

16. Cách sửa Heading trong component và page builder

Component cần nhận heading level theo ngữ cảnh hoặc có cấu trúc cố định đã được chứng minh, không tự mặc định mọi title thành H2. Cùng một card có thể nằm ngay dưới H1 ở trang danh mục nhưng nằm dưới H2 trong một section bài viết.

Bản đầy đủ của mục này có thêm: danh sách 8 dòng. Xem bản đầy đủ

Với accordion, button điều khiển có thể nằm bên trong heading: heading cung cấp outline, button cung cấp tương tác mở đóng. Với dialog, tên dialog có thể dùng heading nhưng cần được liên kết bằng aria-labelledby khi phù hợp.

ARIA role="heading" và aria-level hữu ích khi sửa hệ thống legacy không thể đổi markup, nhưng W3C khuyên ưu tiên phần tử H1-H6 gốc khi có thể.

17. Quy trình audit Heading toàn website

Quy trình audit Heading toàn website đi từ crawl diện rộng tới kiểm template, DOM, accessibility tree và hành vi mục lục. Crawl URL indexable, xuất H1 tới H6 theo thứ tự, nhóm theo template rồi lọc trang không H1, nhiều H1, heading rỗng và duplicate. Mở mẫu bằng DevTools, tắt CSS, xem DOM, thử popup, accordion và component lazy. Sửa ở template trước, nội dung sau, rồi crawl lại và so số lỗi hai đầu. Đừng kết luận chất lượng chỉ từ cột count.

Bản đầy đủ của mục này có thêm: bảng 5 dòng (cột: Đầu ra, Trường tối thiểu), danh sách 12 dòng. Xem bản đầy đủ

18. Ma trận quyết định khi gặp một dòng chữ nổi bật

Ma trận quyết định khi gặp một dòng chữ nổi bật dựa trên một câu hỏi: dòng đó có đặt tên cho một section nội dung hay không? Nếu có, chọn cấp heading hợp với phần nó mở ra. Nếu nó chỉ là nhãn, giá, badge hay quote, hãy dùng phần tử văn bản phù hợp. Ma trận giúp thiết kế, content và developer thống nhất cách chọn, rồi tách cấu trúc khỏi kiểu chữ bằng class.

Bản đầy đủ của mục này có thêm: bảng 6 dòng (cột: Câu hỏi, Nếu có, Nếu không). Xem bản đầy đủ

Sau khi chọn semantics, designer có thể tùy chỉnh font, màu, khoảng cách và responsive bằng class. Tách cấu trúc khỏi kiểu chữ giúp đổi giao diện mà không phá outline.

19. Công cụ kiểm tra, tài liệu gốc và lộ trình học tiếp

Công cụ tự động giúp tìm phạm vi lỗi; Accessibility Tree và kiểm tra trực tiếp giúp xác nhận heading có đúng vai trò hay không. Không hạ hoặc nâng cấp hàng loạt chỉ để báo cáo trở thành màu xanh.

Công cụ kiểm tra nhanh

Công cụ kiểm tra nhanh gồm Meta Tag Checker của Novaverb cho Title, H1 và metadata, cùng PageSpeed Checker cho cảnh báo hiệu năng. DevTools soi DOM, computed style và Accessibility Tree; Screaming Frog xuất H1 tới H6; axe, WAVE và HeadingsMap đọc outline cùng semantics.

• Meta Tag Checker của Novaverb: kiểm Title, H1 và metadata chính của trang.
• PageSpeed Checker của Novaverb: xem các cảnh báo hiệu năng và accessibility liên quan.
• DevTools: kiểm DOM, computed style, Accessibility Tree và ID.
• Screaming Frog: xuất H1-H6 theo tập URL.
• axe DevTools, WAVE và HeadingsMap: soi semantics và outline.

Tài liệu gốc

Tài liệu gốc cho phần Heading gồm W3C Headings Tutorial, W3C Easy Checks, MDN Heading Elements, Google title link guidance và Google Search Essentials. Đọc tiếp các bài SEO WordPress số 11 tới 15 về hình ảnh, Internal Link, Core Web Vitals và điểm PageSpeed.

• W3C Headings Tutorial
• W3C Easy Checks
• MDN Heading Elements
• Google title link guidance
• Google Search Essentials

Đọc tiếp SEO WordPress #11 về hình ảnh, SEO WordPress #12 về Internal Link và nội dung, SEO WordPress #13 về Core Web Vitals, SEO WordPress #14 về điểm PageSpeed và SEO WordPress #15 về hình ảnh và code.

Nếu muốn thực hành trên website thật theo một hệ thống, có thể tham khảo chương trình đào tạo SEO, trang tổng hợp khóa học SEO và cấu trúc chuyên sâu của khóa học SEO Master. Các trang trình bày phạm vi và cách học để người đọc tự đối chiếu nhu cầu.

Chuỗi thực hành: xuất outline, phân vùng DOM, xác định lỗi template, sửa semantics, kiểm responsive, bấm mục lục và crawl lại.

20. Câu hỏi thường gặp và kết luận

Các câu hỏi thường gặp và kết luận chốt lại những nhầm lẫn phổ biến khi tối ưu H1 tới H6 trên WordPress: nhiều H1 có bị phạt không, H1 có phải giống Title từng ký tự không, có bắt buộc dùng đủ sáu cấp không, nhảy từ H2 xuống H4 có luôn sai không. Câu trả lời gọn là mục tiêu nằm ở outline dễ hiểu, không phải ở một tỷ lệ heading cố định.

Một trang có nhiều H1 có bị phạt không?

Không nên diễn giải thành một hình phạt tự động. Tuy nhiên, nhiều H1 hoặc nhiều tiêu đề lớn cùng độ nổi bật làm tiêu đề chính kém rõ ràng. Một H1 chính là quy ước dễ kiểm soát và phù hợp cho hầu hết trang.

H1 có bắt buộc giống Title từng ký tự?

Không. Hai thành phần nên cùng mô tả một chủ đề và intent. Title có thể gọn cho kết quả tìm kiếm, còn H1 có thể diễn đạt tự nhiên hơn trên trang.

Có bắt buộc dùng đủ H1 đến H6 không?

Không. Chỉ dùng cấp cần thiết cho outline. Nhiều bài chỉ cần H1, H2 và H3. Cấp sâu không làm nội dung chuyên sâu hơn.

Nhảy từ H2 xuống H4 có luôn sai không?

Nên tránh khi H4 được dùng như subsection trực tiếp của H2 vì thiếu cấp H3. Ngược lại, đi từ H4 về H2 có thể hoàn toàn hợp lý khi đóng phần con và mở section lớn mới.

Heading có được chỉ chứa icon không?

Heading phải có accessible name mô tả section. Nếu icon có tên truy cập phù hợp thì có thể không rỗng về kỹ thuật, nhưng văn bản nhìn thấy thường rõ ràng hơn cho mọi người đọc.

Có nên dùng H2 cho mọi tiêu đề card?

Không. Chỉ dùng khi mỗi card là một section có vai trò trong outline. Card điều hướng ngắn có thể dùng liên kết hoặc phần tử văn bản, đặc biệt khi hàng chục card làm outline lấn át nội dung chính.

Ẩn H1 mobile bằng CSS có xử lý duplicate không?

Không phải cách tốt nếu cả hai H1 vẫn tồn tại trong DOM. Nên render một H1 và thay đổi vị trí, kích thước hoặc bố cục bằng CSS.

Đổi text Heading có nên đổi ID mục lục theo không?

Không nhất thiết. Giữ ID ổn định giúp bookmark và liên kết cũ tiếp tục hoạt động. Chỉ đổi khi ID sai nghiêm trọng và có phương án bảo vệ các fragment đã được chia sẻ.

Heading tốt bắt đầu từ cấu trúc nội dung, không bắt đầu từ cỡ chữ hay mật độ từ khóa. Một H1 rõ, outline H2-H6 có quan hệ, heading có tên và nội dung, thứ tự DOM hợp lý, vùng lặp được kiểm soát, responsive không nhân đôi và ID mục lục ổn định sẽ làm trang WordPress dễ đọc, dễ điều hướng và dễ bảo trì hơn.