Mở đầu — vì sao bài này quan trọng
Có một sự thật khó chấp nhận với người viết: hầu như không ai đọc những gì bạn viết. Các nghiên cứu về hành vi web (nổi tiếng nhất là của Nielsen Norman Group) chỉ ra rằng người dùng chỉ đọc trung bình khoảng 20–28% lượng chữ trên một trang. Họ không đọc — họ quét (scan). Mắt họ nhảy từ tiêu đề này sang tiêu đề khác, dừng lại ở những từ in đậm, và chỉ khi bắt gặp điều đúng nhu cầu thì mới chậm lại để đọc kỹ.
Điều đó có nghĩa là: heading (tiêu đề) và page title (tiêu đề trang) chính là bộ khung mà người dùng dùng để định vị bản thân trong sản phẩm của bạn. Nếu khung này rõ ràng, họ tìm thấy điều cần trong vài giây. Nếu khung này mờ nhạt, sai thứ bậc, hoặc chỉ toàn từ chung chung, họ lạc lối — và rời đi.
Nhiều người viết UX nghĩ heading là phần "dễ", chỉ cần đặt cho có. Sai lầm lớn. Heading không chỉ để đẹp bố cục. Nó phục vụ ba nhóm đối tượng cùng lúc: người dùng đang quét bằng mắt, công cụ tìm kiếm (Google index theo heading), và người khiếm thị dùng screen reader — họ điều hướng cả trang bằng cách nhảy giữa các heading. Viết heading tốt là lúc bạn phục vụ cả ba nhóm này bằng một dòng chữ ngắn gọn.
Bài này sẽ dạy bạn cách xây dựng information hierarchy (thứ bậc thông tin) rõ ràng thông qua heading và page title — một kỹ năng nền tảng nhưng bị đánh giá thấp bậc nhất trong content design.
Khái niệm cốt lõi
Heading là gì, page title là gì?
Cần phân biệt hai thứ dễ nhầm:
- Page title là tên của cả trang. Trên web, nó xuất hiện ở tab trình duyệt và trong kết quả tìm kiếm Google (thẻ
<title>). Trong app, nó thường là dòng chữ trên thanh header (ví dụ: "Cài đặt", "Đơn hàng của tôi"). Page title trả lời câu hỏi: "Tôi đang ở đâu?" - Heading là tiêu đề của từng phần nội dung bên trong trang. Chúng chia trang thành các khối có nghĩa. Heading trả lời câu hỏi: "Phần này nói về gì, tôi có nên đọc không?"
<h1> đến <h6>. Nguyên tắc bất di bất dịch: mỗi trang chỉ có đúng một <h1> — đó chính là chủ đề chính của trang. Các phần con dùng <h2>, phần con của phần con dùng <h3>, cứ thế. Đây không phải chuyện chọn cỡ chữ to nhỏ, mà là chuyện cấu trúc ngữ nghĩa.Ba chức năng của heading
1. Scan-ability — giúp người dùng quét nhanh. Người dùng lướt mắt theo hình chữ F (F-pattern): đọc kỹ dòng đầu, lướt ngang các heading, rồi dừng lại ở phần liên quan. Heading tốt là "biển báo giao thông" giúp họ rẽ đúng chỗ.
2. Accessibility — hỗ trợ screen reader. Người khiếm thị dùng phím tắt để nhảy giữa các heading (trong JAWS/NVDA là phím H). Nếu bạn dùng đúng cấp <h1>, <h2>, <h3>, họ nghe được một "mục lục" của trang và nhảy thẳng đến phần cần. Nếu bạn chỉ bôi đen chữ cho trông giống tiêu đề mà không dùng thẻ heading thật, screen reader không nhận ra — người khiếm thị mất luôn khả năng điều hướng. (Chi tiết về accessibility sẽ được đào sâu ở Bài 21; ở đây ta chỉ nắm phần liên quan đến cấu trúc heading.)
3. SEO — công cụ tìm kiếm hiểu trang. Google đọc heading để hiểu trang nói về gì và xếp hạng. Một <h1> chứa từ khóa đúng, các <h2> mô tả rõ nội dung, giúp trang dễ được tìm thấy hơn.
Nguyên tắc viết heading tốt
- Rõ hơn kêu (clarity over cleverness). "Cách theo dõi đơn hàng" tốt hơn "Hành trình kiện hàng của bạn". Người quét cần hiểu ngay, không có thời gian giải mã ẩn dụ.
- Front-load từ khóa quan trọng. Đặt từ mang thông tin ở đầu heading, vì mắt người quét bắt 2–3 từ đầu tiên. "Chính sách hoàn tiền" tốt hơn "Tìm hiểu về việc hoàn tiền của chúng tôi".
- Song song về cấu trúc (parallel structure). Nếu heading này là danh từ, các heading cùng cấp cũng nên là danh từ. Sự nhất quán giúp mắt lướt mượt.
- Đủ để đứng một mình. Một người chỉ đọc riêng dàn heading (bỏ qua toàn bộ body) vẫn phải nắm được đại ý của trang. Đây là "phép thử heading" kinh điển.
Tình huống thực tế
Ví dụ 1 — Trang cài đặt của một ví điện tử Việt Nam
Hình dung một ví điện tử như MoMo hoặc ZaloPay. Đội sản phẩm thiết kế trang "Cài đặt" ban đầu với các heading như sau, tất cả cùng một cỡ chữ, không phân cấp:
> Tài khoản · Bảo mật · Thông báo · Ngôn ngữ · Trợ giúp · Về ứng dụng · Liên kết ngân hàng · Xác thực sinh trắc học · Đăng xuất
Người dùng phàn nàn khó tìm mục "Đổi mã PIN". Vì sao? Vì đây là một danh sách phẳng 9 mục ngang hàng, không có nhóm. Người dùng phải đọc từng dòng.
Nhóm content design tái cấu trúc thành thứ bậc hai cấp:
- Tài khoản (h2): Thông tin cá nhân · Liên kết ngân hàng
- Bảo mật (h2): Đổi mã PIN · Xác thực sinh trắc học · Thiết bị đăng nhập
- Ứng dụng (h2): Thông báo · Ngôn ngữ
- Khác (h2): Trợ giúp · Về ứng dụng · Đăng xuất
Ví dụ 2 — Page title trên tab trình duyệt của một trang thương mại điện tử
Một sàn TMĐT (giả định tên "Chợ Xanh") có nhiều trang sản phẩm. Ban đầu, mọi trang đều đặt thẻ <title> giống hệt: chỉ một chữ "Chợ Xanh".
Vấn đề lộ ra khi người dùng mở 6 tab để so sánh giá nồi chiên không dầu. Cả 6 tab hiển thị y hệt "Chợ Xanh" — không ai phân biệt được tab nào là sản phẩm nào. Đồng thời, kết quả Google cho mọi sản phẩm đều hiện tiêu đề "Chợ Xanh" chung chung, khiến tỷ lệ nhấp (CTR) thấp.
Đội SEO/content sửa lại công thức page title theo mẫu: {Tên sản phẩm} - {Danh mục} | Chợ Xanh. Ví dụ:
> Nồi chiên không dầu Lock&Lock 5.5L - Đồ gia dụng | Chợ Xanh
Kết quả sau một tháng: người dùng phân biệt được tab ngay lập tức, và CTR từ Google tăng đáng kể vì tiêu đề giờ chứa đúng từ khóa người ta gõ tìm.
Bài học rút ra: Page title không phải chỗ để "cắm logo thương hiệu". Front-load thông tin cụ thể nhất (tên sản phẩm), đẩy tên thương hiệu về cuối. Mỗi trang phải có một title duy nhất và mô tả đúng nội dung trang đó — quan trọng cho cả trải nghiệm đa tab lẫn SEO.
Ví dụ 3 — Trang landing của một nền tảng edtech
Một nền tảng học tiếng Anh online thiết kế landing page với heading cấp cao nhất là:
> "Chào mừng bạn đến với hành trình tri thức bất tận!"
Nghe thì hay, nhưng nó là một <h1> rỗng thông tin. Một người khiếm thị nhảy đến heading đầu tiên chỉ nghe được câu sáo rỗng, không biết trang bán gì. Một người quét nhanh cũng không hiểu đây là nền tảng học tiếng Anh hay bán sách. Và Google cũng không có từ khóa nào để xếp hạng.
Nhóm content đổi <h1> thành:
> "Học tiếng Anh giao tiếp với giáo viên bản ngữ, 20 phút mỗi ngày"
Rồi các <h2> bên dưới lần lượt là: "Lộ trình cá nhân hóa", "Học phí và các gói", "Đánh giá từ học viên". Đọc riêng dàn heading, ai cũng nắm được toàn bộ chào hàng.
Bài học rút ra: <h1> là bất động sản đắt giá nhất trang. Đừng lãng phí nó cho lời chào cảm xúc chung chung. Hãy để nó nói giá trị cụ thể — người quét, screen reader và Google đều cảm ơn bạn.
Hướng dẫn từng bước
Đây là quy trình để xây dựng heading và page title cho một màn hình mới:
Bước 1 — Xác định page title trước. Hỏi: "Người dùng đang ở đâu?" Đặt một cái tên ngắn, cụ thể, đúng chức năng trang. Với web, viết thẻ <title> theo công thức từ-cụ-thể-đến-thương-hiệu.
Bước 2 — Xác định <h1> duy nhất. Đây là chủ đề chính. Chỉ một cái. Nó nên gần với (nhưng không nhất thiết trùng hệt) page title, và phải chứa thông tin cụ thể nhất về trang.
Bước 3 — Vẽ dàn ý (outline) các phần. Trước khi viết chữ, liệt kê các khối nội dung của trang. Mỗi khối là một <h2>. Nếu một khối có phần con, dùng <h2>. Đừng nhảy cấp — không được đi từ <h1> thẳng xuống <h3>.
Bước 4 — Viết heading theo phép thử "đứng một mình". Đọc lại chỉ riêng dàn heading, bỏ hết body. Nếu bạn vẫn hiểu trang nói gì và theo đúng thứ tự logic, dàn heading đạt. Nếu thấy lỗ hổng hoặc mơ hồ, sửa.
Bước 5 — Front-load và cắt chữ thừa. Với mỗi heading, đẩy từ khóa lên đầu, cắt các từ đưa đẩy ("Tìm hiểu về...", "Một vài điều về..."). Nhắm heading dưới ~8 từ.
Bước 6 — Kiểm tra tính song song. Các heading cùng cấp có cùng dạng ngữ pháp không? (Cùng là danh từ, hoặc cùng là động từ mệnh lệnh.) Sửa cho nhất quán.
Bước 7 — Kiểm tra ngữ nghĩa HTML, không chỉ hình thức. Đảm bảo các cấp heading trong code đúng thứ bậc, không phải chỉ chữ to nhỏ. Đây là bước dev/design dễ bỏ sót nhất và là bước quyết định trải nghiệm cho người dùng screen reader.
Lỗi thường gặp & mẹo
Lỗi 1 — Dùng cỡ chữ để giả làm heading. Designer bôi đen, tăng cỡ chữ cho trông giống tiêu đề nhưng trong code vẫn là <p> thường. Với mắt thường thì ổn, nhưng screen reader và Google không nhận ra đó là heading. Luôn dùng thẻ heading thật.
Lỗi 2 — Nhảy cấp heading. Đi từ <h1> xuống thẳng <h3> vì thấy <h3> "cỡ chữ đẹp hơn". Điều này phá vỡ cấu trúc điều hướng của screen reader. Cấp heading là về thứ bậc, không phải cỡ chữ. Nếu muốn <h2> nhỏ hơn, hãy chỉnh CSS, đừng đổi thẻ.
Lỗi 3 — Nhiều hơn một <h1> mỗi trang. Mỗi trang chỉ một chủ đề chính, nên chỉ một <h1>. Nhiều <h1> khiến cả người dùng lẫn máy bối rối về đâu là trọng tâm.
Lỗi 4 — Heading chung chung vô nghĩa. "Thông tin", "Chi tiết", "Khác", "Nội dung" — những heading này không giúp ai quét cả vì chúng không nói gì. Hãy cụ thể: "Thông tin giao hàng" thay vì "Thông tin".
Lỗi 5 — Heading dài như một câu văn. Heading không phải chỗ để viết cả câu. Nếu nó dài quá một dòng trên mobile, mắt người quét không bắt kịp. Rút gọn.
Mẹo hay:
- Viết dàn heading trước, viết body sau. Cấu trúc sinh ra nội dung tốt, không phải ngược lại.
- Trên mobile, không gian hẹp — heading càng phải ngắn và front-load mạnh hơn.
- Với danh sách dài các mục cùng cấp, hãy tự hỏi: "Có thể nhóm chúng dưới 3–4 heading cha không?" Nhóm tốt giảm tải nhận thức cực mạnh.
- Đọc heading của bạn to thành tiếng. Nếu nghe gượng hoặc mơ hồ, người dùng cũng sẽ thấy vậy.
Bài tập thực hành
Bài 1 — Phép thử "đứng một mình". Chọn một trang web hoặc app bạn hay dùng (báo VnExpress, Shopee, một trang cài đặt bất kỳ). Chỉ đọc riêng các heading, bỏ qua toàn bộ nội dung. Bạn có nắm được trang nói gì và theo trình tự logic không? Viết ra 2 chỗ mà dàn heading bị hụt, và đề xuất cách sửa.
Bài 2 — Viết lại page title. Cho một trang chi tiết sản phẩm có <title> hiện tại là "Trang chủ - Cửa hàng ABC". Viết lại thẻ title theo công thức front-load cụ-thể-đến-thương-hiệu cho một sản phẩm cụ thể (ví dụ một chiếc áo thun). Giải thích vì sao bản của bạn tốt hơn cho cả người dùng đa tab lẫn SEO.
Bài 3 — Tái cấu trúc thứ bậc. Cho danh sách phẳng 8 mục sau của một trang cài đặt: "Đổi mật khẩu, Ảnh đại diện, Thông báo email, Ngôn ngữ, Xác thực 2 lớp, Tên hiển thị, Thông báo đẩy, Xóa tài khoản". Hãy nhóm chúng dưới 3–4 heading cha có nghĩa, và đặt tên các heading cha đó sao cho cụ thể, song song về cấu trúc.
Bài 4 — Chữa <h1> rỗng. Cho một <h1> sáo rỗng: "Trải nghiệm sự khác biệt cùng chúng tôi!" trên landing page của một app đặt đồ ăn. Viết lại thành một <h1> chứa giá trị cụ thể, rồi phác 3 <h2> bên dưới sao cho đọc riêng dàn heading vẫn hiểu toàn bộ chào hàng.
Tóm tắt
- Hầu hết người dùng quét chứ không đọc. Heading và page title là bộ khung giúp họ định vị và tìm thấy điều cần trong vài giây.
- Page title trả lời "Tôi đang ở đâu?"; heading trả lời "Phần này nói gì, có đáng đọc không?". Mỗi trang chỉ có đúng một
<h1>. - Heading phục vụ ba nhóm cùng lúc: người quét bằng mắt, screen reader (accessibility), và công cụ tìm kiếm (SEO).
- Viết heading rõ hơn kêu, front-load từ khóa, giữ song song cấu trúc, và đủ để đứng một mình khi đọc riêng cả dàn.
- Cấp heading là chuyện thứ bậc ngữ nghĩa, không phải cỡ chữ. Đừng giả heading bằng chữ to, đừng nhảy cấp, đừng dùng heading chung chung vô nghĩa.
- Page title nên duy nhất cho từng trang, front-load thông tin cụ thể, đẩy thương hiệu về cuối — tốt cho cả trải nghiệm đa tab lẫn thứ hạng tìm kiếm.