Thẻ Heading là hệ tiêu đề từ H1 đến H6 dùng để mô tả cấu trúc và quan hệ giữa các phần nội dung trên trang. Một trang nên có một H1 chính rõ chủ đề, các H2 mở phần lớn, H3 chia phần con và các cấp tiếp theo chỉ xuất hiện khi thật sự có tầng nội dung tương ứng.
Bài số 10 trong series SEO WordPress chuyển 10 tiêu chí từ 64 đến 73 thành quy trình kiểm tra được: H1 duy nhất, cấp H2-H6 logic, heading không rỗng, đúng ngữ nghĩa, thứ tự DOM, nội dung sau heading, vùng lặp lại, responsive duplicate và ID mục lục.
Nguyên tắc: thiết kế outline theo ý nghĩa trước, chọn cấp heading sau, rồi dùng CSS để kiểm soát hình thức.
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.
| Đối tượng | Heading giúp gì? | Dấu hiệu triển khai đúng |
|---|---|---|
| Người đọc | Quét nhanh và chọn phần cần đọc | Tiêu đề ngắn, mô tả đúng phần sau |
| Trình đọc màn hình | Điều hướng theo danh sách heading | Heading HTML thật, hierarchy có nghĩa |
| Công cụ tìm kiếm | Nhận tín hiệu về nội dung nổi bật và cấu trúc | H1 rõ, nội dung quanh heading nhất quán |
| Hệ thống mục lục | Tạo liên kết tới section | ID duy nhất, anchor hoạt động |
| Người biên tập | Duy trì outline khi cập nhật | Block và component dùng đúng vai trò |
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.
| Mã | Tiêu chí | Điều kiện chính | Trọng số |
|---|---|---|---|
| 64 | H1 duy nhất | Một H1 chính mô tả rõ chủ đề | Bắt buộc |
| 65 | H2-H6 logic | Không nhảy cấp thiếu lý do cấu trúc | Quan trọng |
| 66 | Không heading rỗng | Có văn bản truy cập được | Bắt buộc |
| 67 | Không dùng để tạo kiểu | Heading chỉ đánh dấu tiêu đề section | Quan trọng |
| 68 | Tiêu đề trực quan có semantics | Không chỉ dùng div, span hoặc strong | Quan trọng |
| 69 | Thứ tự DOM | Khớp trình tự đọc và hiển thị | Quan trọng |
| 70 | Có nội dung sau heading | Không xếp heading liên tiếp vô nghĩa | Quan trọng |
| 71 | Vùng lặp lại | Không lấn át outline nội dung chính | Quan trọng |
| 72 | Không nhân đôi responsive | Không có hai bản desktop và mobile trong DOM | Bắt buộc |
| 73 | ID và mục lục | ID duy nhất, anchor trỏ đúng đích | Quan trọng |
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.
- Trang bài viết: H1 là tên bài.
- Trang sản phẩm: H1 là tên sản phẩm hoặc biến thể đang xem.
- Trang danh mục: H1 mô tả nhóm nội dung hoặc sản phẩm.
- Trang tìm kiếm: H1 có thể mô tả truy vấn và trạng thái kết quả.
- Trang chủ: H1 mô tả giá trị chính, không nhất thiết chỉ là logo.
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ế.
| Thành phần | Vai trò chính | Cách viết |
|---|---|---|
| Title | Nhận diện tài liệu ngoài trang và trong kết quả tìm kiếm | Ngắn, mô tả, phân biệt với URL khác |
| H1 | Tiêu đề chính người đọc thấy trên trang | Rõ chủ đề, hợp với answer-first bên dưới |
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.
<h1>SEO hình ảnh WordPress</h1>
<h2>Alt text</h2>
<h3>Ảnh thông tin</h3>
<h3>Ảnh trang trí</h3>
<h2>Định dạng ảnh</h2>
<h3>WebP</h3>
<h3>AVIF</h3>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.
- Viết một câu mô tả nhiệm vụ chính của trang.
- Đặt H1 từ nhiệm vụ đó.
- Liệt kê các câu hỏi lớn người đọc phải giải quyết, đây là ứng viên H2.
- Nhóm chi tiết chỉ phục vụ một H2 thành H3.
- Chỉ thêm H4 khi một H3 có nhiều nhánh thật sự độc lập.
- Kiểm mỗi heading có nội dung và không trùng phạm vi với heading khác.
- Đọc riêng danh sách heading như một mục lục.
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.
| Markup | Vấn đề | Cách sửa |
|---|---|---|
<h2></h2> | Heading rỗng | Xóa thẻ hoặc thêm tiêu đề thật |
<h2> </h2> | Chỉ có khoảng trắng | Dùng margin hoặc padding bằng CSS |
| H2 chỉ chứa SVG icon | Không có tên truy cập được | Thêm văn bản hoặc accessible name phù hợp |
| H2 chứa img alt rỗng | Không có tên | Viết text hoặc alt đúng chức năng |
| H2 ẩn chữ bằng CSS | Có thể tạo outline gây hiểu sai | Kiểm mục đích và dùng nhãn vùng phù hợp |
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.
- Giá sản phẩm: dùng phần tử văn bản và class giá.
- Eyebrow trên tiêu đề: dùng p hoặc span.
- Nhãn badge: dùng span.
- Câu quote: dùng blockquote.
- Con số KPI: dùng data hoặc span trong component.
- Tiêu đề card thật sự mở nội dung: có thể dùng heading ở cấp phù hợp.
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.
| Nhìn trên giao diện | HTML hiện tại | Quyết định |
|---|---|---|
| Tiêu đề mở nhóm FAQ | div class title | Đổi sang H2 hoặc H3 phù hợp |
| Tên từng câu FAQ | button trong accordion | Đặt button bên trong heading hoặc liên kết semantics phù hợp |
| Nhãn “Mới” trên card | strong | Giữ nhãn, không phải heading |
| Tên bài trong card liên quan | p | Cân nhắc heading nếu card là section độc lập |
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.
- Tắt CSS và đọc trang từ trên xuống.
- Mở Accessibility Tree và danh sách heading.
- Tab qua các phần tử tương tác.
- So thứ tự này với giao diện desktop và mobile.
- Đưa main content trước phần bổ trợ nếu đó là thứ tự đọc hợp lý.
- Dùng landmark main, nav, aside và footer để phân vùng.
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õ.
- Gộp heading nếu hai tiêu đề nói cùng một ý.
- Thêm đoạn answer-first dưới heading nhóm.
- Hạ tiêu đề trang trí thành nhãn nếu không mở section.
- Không tạo heading chỉ để hệ thống mục lục trông nhiều mục.
- Kiểm accordion và tab có nội dung thực trong DOM.
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.
| Vùng | Cách xử lý | Lỗi thường gặp |
|---|---|---|
| Header | Logo, nav và search có landmark hoặc accessible label | Logo H1 xuất hiện trên mọi trang |
| Sidebar | Heading ổn định, nằm trong aside | H2 cùng cấp và cùng độ nổi bật với nội dung chính |
| Popup | Dialog có tên; heading chỉ khi có section | Heading ẩn vẫn nằm trong DOM sau khi đóng |
| Footer | Nhóm link có heading hoặc nhãn phù hợp | Money keyword được biến thành hàng loạt H2 |
| Mục lục | Nhãn không tự lọt vào danh sách mục lục | H2 “Mục lục” tự liệt kê chính nó |
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.
- Dùng một heading và thay layout bằng CSS.
- Nếu nội dung khác thật sự, xác định đó có phải hai section khác nhau không.
- Không dùng
display:nonenhư cách sửa duy nhất cho H1 duplicate. - Kiểm DOM ở mobile và desktop, không chỉ ảnh chụp.
- Kiểm breakpoint giao nhau để tránh cả hai cùng hiện.
- Rà component server-side và client-side cùng render tiêu đề.
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.
<h2 id="cau-truc-heading">Cấu trúc Heading</h2>
<a href="#cau-truc-heading">Cấu trúc Heading</a>- Slug ID bằng chữ thường, ngắn và dễ đọc.
- Không dùng cùng ID cho desktop và mobile.
- Không tạo ID chỉ từ số thứ tự dễ thay đổi.
- Nếu đổi heading, cân nhắc giữ ID cũ để link ngoài không gãy.
- Kiểm ký tự tiếng Việt và encoding trong fragment.
- Bù chiều cao sticky header bằng
scroll-margin-top. - Kiểm smooth scroll dừng hẳn trước khi đo vị trí.
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.
| Nguồn lỗi | Triệu chứng | Nơi sửa |
|---|---|---|
| Theme | Logo H1 hoặc title archive sai cấp | Template header và archive |
| Block Editor | Người viết chọn cấp theo cỡ chữ | Guideline và block style |
| Page builder | Desktop và mobile duplicate | Component responsive |
| Plugin FAQ | Câu hỏi chỉ là div hoặc H4 nhảy cấp | Template accordion |
| Plugin TOC | ID trùng hoặc mục lục lấy cả sidebar | Selector và thuật toán slug |
| Related posts | Tên card trở thành H2 hàng loạt | Card component và phạm vi outline |
| Widget footer | Heading rỗng khi title widget chưa nhập | Điều kiện render |
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.
- Xác định component có thật sự tạo section độc lập không.
- Nếu chỉ là link hoặc nhãn, không dùng heading.
- Nếu là section, truyền cấp heading từ template cha.
- Giới hạn giá trị trong H2-H6 và cung cấp mặc định an toàn.
- Không tạo thẻ động từ dữ liệu chưa kiểm soát.
- Không render heading khi title rỗng.
- Viết test snapshot cho một vài ngữ cảnh lồng nhau.
- Kiểm desktop, mobile và trạng thái ẩn hiện.
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.
- Crawl URL indexable và xuất H1-H6 theo thứ tự.
- Nhóm URL theo template và content type.
- Lọc trang không H1, nhiều H1, heading rỗng và duplicate.
- Phát hiện nhảy cấp theo chiều đi xuống.
- Đánh dấu chuỗi heading liên tiếp thiếu nội dung.
- So Title, H1, answer-first và intent.
- Mở mẫu bằng DevTools, tắt CSS và xem DOM.
- Kiểm Accessibility Tree và landmark.
- Thử mobile, desktop, popup, accordion và lazy component.
- Kiểm ID trùng và bấm toàn bộ mục lục.
- Sửa ở template trước, nội dung sau.
- Crawl lại và so số lỗi trước sau.
| Đầu ra | Trường tối thiểu |
|---|---|
| H1 audit | URL, Title, số H1, text H1, template |
| Outline audit | Thứ tự, cấp, text, vùng DOM |
| Empty heading | Selector, component, accessible name |
| Responsive duplicate | Text, breakpoint, trạng thái hiển thị |
| TOC audit | Href, target ID, duplicate ID, offset |
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.
| Câu hỏi | Nếu có | Nếu không |
|---|---|---|
| Đây có phải tiêu đề chính duy nhất của trang? | Dùng H1 | Xét câu tiếp theo |
| Nó có mở phần trực thuộc nội dung chính? | Dùng H2 | Xét vai trò component |
| Nó có mở phần con của H2 hiện tại? | Dùng H3 | Không chọn cấp theo cỡ chữ |
| Nó chỉ là nhãn, giá, badge hoặc quote? | Dùng phần tử văn bản phù hợp | Kiểm lại outline |
| Nó là nhãn cho landmark hoặc dialog? | Heading hoặc aria-labelledby phù hợp | Accessible label khác |
| Nó chỉ khác vị trí giữa mobile và desktop? | Giữ một phần tử, đổi layout bằng CSS | Kiểm hai nội dung có thật sự khác |
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ẻ.
Kết luận: 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.