· Tác giả: Trường — Founder Webchốt
Liên quan: Webchốt xây web bán hàng Next.js với semantic HTML chuẩn từ ngày đầu — không cần chỉnh sửa lại sau khi launch.
Khi AI Search đọc một trang web, nó không thấy giao diện đẹp hay màu sắc bắt mắt — nó đọc cấu trúc HTML và ngữ nghĩa của từng thẻ. Thẻ <main> báo "nội dung chính ở đây"; thẻ <article> báo "đây là bài viết độc lập"; thẻ <h2> báo "đây là tiêu đề phần"; thẻ <ul> báo "đây là danh sách không có thứ tự". Nếu trang dùng <div> cho mọi thứ, AI phải đoán và kết quả không nhất quán.
Bài này đi qua tám lớp cấu trúc cụ thể, viết từ góc nhìn người trực tiếp dựng HTML cho website Next.js, không phải lý thuyết học thuật. Mỗi mục có ví dụ đúng/sai và lý do tại sao AI xử lý khác nhau.
Trong bài này có gì
- Semantic HTML5 — bản đồ thẻ và vai trò
- Cây heading H1 H2 H3 — quy tắc và cạm bẫy
- Độ dài đoạn văn — tại sao 40-80 từ?
- Thẻ ul/ol/dl — danh sách có ngữ nghĩa
- Bảng dữ liệu — caption, thead, th
- Alt text — AI đọc hình ảnh qua đây
- Figure và figcaption — bối cảnh hình ảnh
- Schema.org — tầng khai báo song song
- Tốc độ tải — AI crawler cũng bỏ cuộc khi chậm
- Ví dụ trước/sau: trang thiếu cấu trúc và bản đã sửa
- Mười sai lầm phổ biến nhất
- Câu hỏi thường gặp
Semantic HTML5 — bản đồ thẻ và vai trò
HTML5 giới thiệu tập thẻ ngữ nghĩa để thay thế pattern div-và-class. Ý nghĩa mỗi thẻ là một cam kết với trình đọc — kể cả AI crawler — về loại nội dung bên trong. Dùng sai thẻ không phá vỡ trang hiển thị cho người, nhưng làm AI phân loại sai vùng nội dung và đánh giá trọng số không đúng.
Điểm dễ mắc lỗi nhất: dùng <div class="nav"> thay <nav>; dùng <div class="main-content"> thay <main>; dùng <span> cho ngày tháng thay <time datetime>. CSS class là tên gọi cho người lập trình, không phải ngữ nghĩa cho AI. Cần cả hai: thẻ semantic đúng VÀ class CSS tiện styling.
Cây heading H1, H2, H3 — quy tắc và cạm bẫy
Heading là xương sống mà AI dùng để lập cây chủ đề trang. Trước khi đọc nội dung từng đoạn, AI đọc cây heading để biết trang viết về những gì, phần nào là cấp cao và phần nào là chi tiết bên dưới. Cây heading lộn xộn làm AI dựng sai sơ đồ chủ đề này — trang mất đi lợi thế được trích dẫn đúng mục.
Quy tắc thực tế: mỗi trang đúng một H1, mô tả chính xác chủ đề trang đó. Toàn bộ phần con dùng H2 rồi H3 nếu cần phân cấp tiếp. Không nhảy cóc từ H2 xuống H4. Không dùng H1 hoặc H2 vì muốn chữ to hơn — kích thước chữ là trách nhiệm của CSS, không phải heading level. Với Next.js App Router, heading level được kiểm soát rõ ở component layer và không bị override ngẫu nhiên như khi dùng theme WordPress.
Độ dài đoạn văn — tại sao 40-80 từ?
AI Search hay trích đoạn 40 đến 80 từ vì khoảng đó vừa đủ để là thông tin hoàn chỉnh, vừa không quá dài để phải cắt bỏ. Đoạn 150 từ trở lên, AI vẫn đọc được nhưng thường chỉ nhặt phần đầu và phần sau bị bỏ. Đoạn dưới 20 từ thường quá mảnh để trích độc lập mà không mất ngữ cảnh.
Không cần mọi đoạn đều 40-80 từ. Đoạn dẫn nhập, đoạn kết, đoạn chuyển tiếp có thể ngắn hơn hoặc dài hơn. Quy tắc áp dụng cho đoạn chứa thông tin trả lời câu hỏi cụ thể. Câu đầu tiên của đoạn đó phải khẳng định thẳng vào điểm, không dẫn nhập vòng vo. Nếu viết "Như đã đề cập ở phần trên..." ở đầu câu, đó là dấu hiệu đoạn này không đứng độc lập được và sẽ bị AI bỏ qua.
Thẻ ul, ol, dl — danh sách có ngữ nghĩa
Danh sách là một trong những cấu trúc AI trích dẫn nhiều nhất vì mỗi item là đơn vị thông tin hoàn chỉnh, dễ tách ra và hiển thị trong câu trả lời AI. Nhưng chỉ khi dùng đúng thẻ ngữ nghĩa, không phải div với CSS giả bullet.
Item trong li nên ngắn, một ý hoàn chỉnh, không dài hơn 25-30 từ. Nếu cần giải thích dài hơn, tách thành section riêng với heading. Tránh li lồng nhau quá 2 cấp. Dùng div với ký tự "•" trước văn bản thay ul/li là lỗi ngữ nghĩa phổ biến nhất trên các trang WordPress cũ không dùng block editor.
Bảng dữ liệu — caption, thead, th
Bảng HTML chứa thông tin so sánh là loại AI trích rất tốt vì cấu trúc hàng/cột giúp AI lấy đúng giá trị theo chiều ngang lẫn dọc. Nhưng chỉ khi bảng có cấu trúc ngữ nghĩa đầy đủ: thẻ caption mô tả bảng, thẻ thead đánh dấu hàng tiêu đề, thẻ th kèm scope="col" xác định đây là tiêu đề cột.
Bảng trang trí thuần túy không cần caption. Bảng chứa dữ liệu so sánh dịch vụ, tính năng, giá thì bắt buộc đủ cấu trúc ngữ nghĩa. Quy tắc đơn giản: nếu người dùng cần bảng để so sánh thông tin, bảng đó cần caption, thead và th scope để AI đọc được đúng.
Alt text — AI đọc hình ảnh qua đây
AI không nhìn thấy hình ảnh theo cách người nhìn. Nó đọc alt text và suy ra nội dung ảnh. Alt text tốt không phải mô tả màu sắc hay bố cục ảnh mà là mô tả thông tin ảnh đó truyền đạt trong ngữ cảnh bài viết. Đây là một trong những điểm bị bỏ qua nhiều nhất khi làm web.
Đặc biệt với hình ảnh có chứa thông tin như sơ đồ, bảng dữ liệu hoặc hình minh hoạ kỹ thuật, alt text là bản dịch ngôn ngữ tự nhiên của thông tin trong hình. Nếu hình SVG inline, thêm role="img" và aria-label mô tả đầy đủ vào thẻ svg. Hình trang trí thuần túy như background, divider dùng alt="" để AI biết bỏ qua.
Figure và figcaption — bối cảnh hình ảnh
Thẻ figure kết hợp figcaption đóng gói hình ảnh và mô tả của nó vào một đơn vị ngữ nghĩa. AI nhận biết đây là hình ảnh kèm mô tả chứ không phải hình ảnh ngẫu nhiên cạnh đoạn văn bất kỳ. figcaption thêm bối cảnh mà alt text không đủ chỗ diễn đạt — ví dụ nguồn ảnh, ghi chú kỹ thuật, hoặc cảnh báo đây là "sơ đồ minh hoạ".
Schema.org — tầng khai báo song song
Schema không thay thế cấu trúc HTML tốt. Nó bổ sung một kênh khai báo thứ hai cho AI và search engine đọc song song với HTML. Khi HTML semantic và schema đồng thuận về cùng thông tin, mức độ tin cậy AI gán cho nội dung tăng lên đáng kể. Khi hai kênh mâu thuẫn — ví dụ schema ghi tên tác giả nhưng HTML không có tên tác giả ở đâu hết — mức tin cậy giảm.
Tốc độ tải — AI crawler cũng bỏ cuộc khi chậm
Googlebot và các AI crawler đặt timeout cho mỗi trang. Trang tải chậm có thể bị crawl không đầy đủ. LCP trên 4 giây là ngưỡng nguy hiểm không chỉ cho người dùng mà cả cho crawler — nội dung cuối trang có nguy cơ không được đọc.
Ví dụ trước/sau: trang thiếu cấu trúc và bản đã sửa
Trang "Tại sao chọn chúng tôi" là loại trang thường có cấu trúc kém nhất trong website dịch vụ: div lồng div, heading dùng để trang trí, danh sách dùng CSS thay ul, nội dung vague không có dữ kiện. AI đọc được nhưng không trích được.
Bản "sau" sửa bốn điểm: div thành section, div.big-title thành h2 thật có câu hỏi thực tế, div.item thành ul/li đúng thẻ, và nội dung vague thành dữ kiện cụ thể có thể xác minh. Cùng lượng thông tin nhưng AI đọc được cả cấu trúc lẫn nội dung.
Mười sai lầm phổ biến nhất
Liên quan trong cụm: thiết kế web chuẩn AI Search 2026 — tổng quan kỹ thuật đầy đủ và checklist thực chiến. web design để ChatGPT và Gemini trích dẫn — góc nhìn từ phía LLM model thay vì Google AI Overview.
Câu hỏi thường gặp
Semantic HTML là gì và tại sao AI cần nó?
Semantic HTML là cách dùng thẻ HTML đúng vai trò: header/main/article/section/nav/footer. AI crawler đọc cấu trúc thẻ trước khi đọc nội dung để xác định vùng nào là nội dung trả lời câu hỏi. Dùng div cho mọi thứ buộc AI đoán, kết quả không nhất quán.
Trang được phép có mấy thẻ H1?
Một thẻ H1 duy nhất mỗi trang, tiêu chuẩn HTML5 và khuyến nghị của Google. H1 mô tả chính xác chủ đề trang đó. Tất cả tiêu đề phần còn lại dùng H2 rồi H3, không nhảy cóc hay dùng H1 vì muốn chữ to.
Đoạn văn bao nhiêu từ là phù hợp cho AI đọc?
40 đến 80 từ mỗi đoạn chứa thông tin quan trọng là khoảng AI hay trích nhất — đủ hoàn chỉnh, không quá dài. Không áp dụng cứng cho mọi đoạn. Đoạn chuyển tiếp hoặc dẫn nhập ngắn hơn là bình thường.
Viết alt text thế nào để AI đọc được?
Mô tả nội dung ảnh thật kèm ngữ cảnh bài viết. Ví dụ thay "hình ảnh website" dùng "Màn hình laptop hiển thị trang thiết kế web với LCP 0.8 giây đo trên DevTools". Không nhồi từ khóa. Hình trang trí dùng alt rỗng.
Dùng thẻ ul/ol hay div để làm danh sách?
Luôn dùng ul/ol. AI xác định danh sách qua thẻ ngữ nghĩa, không qua CSS. Không thứ tự dùng ul; có thứ tự quan trọng dùng ol. Mỗi li một ý hoàn chỉnh, không dài quá 30 từ.
Bảng HTML có cần thẻ caption và thead không?
Có, với bảng dữ liệu thật: caption mô tả bảng, thead đánh dấu hàng tiêu đề, th scope="col" xác định tiêu đề cột. Bảng trang trí không cần. Bảng so sánh dịch vụ/tính năng/giá thì bắt buộc đủ cấu trúc.
Webchốt thiết kế web có semantic HTML chuẩn không?
Có. Mọi website Webchốt dùng Next.js App Router: layout phân tầng rõ, heading H1 đúng 1 lần mỗi trang, ul/ol thật, bảng có thead, hình ảnh trong figure với alt đầy đủ, thẻ time datetime rõ ràng. Demo concept 48 giờ. Gọi 0905 151 701.
Webchốt xây web với cấu trúc nội dung chuẩn như thế nào
Mọi website Webchốt được dựng bằng Next.js App Router với cấu trúc semantic từ ngày đầu: layout phân tầng rõ ràng, heading hierarchy H1 đến H2 đến H3 đúng cấp, danh sách dùng ul và ol thật, hình ảnh trong figure và figcaption với alt đầy đủ, bảng dữ liệu có thead và caption, thẻ time datetime cho ngày tháng. Không phải chỉnh sửa thêm sau launch — là kiến trúc mặc định. LCP nhắm dưới 1 giây để cả người dùng lẫn AI crawler đọc đầy đủ. Xem thêm: thiết kế web bán hàng · thiết kế web doanh nghiệp.
Liên Hệ Webchốt
Website của bạn đang dùng div cho mọi thứ, heading lộn xộn hay bảng không có thead? Webchốt kiểm tra miễn phí và nói thẳng danh sách cần sửa. Demo concept 48 giờ, bảo hành 12 tháng, hoàn 100% trong 7 ngày nếu không đúng scope, source code 100% giao khách.
- 0905 151 701
- Zalo
- hi@webchot.com
- STK 0905151701 — NGUYEN VAN TRUONG
- 262/1/93 Phan Anh, Phường Phú Thạnh, TP.HCM
Xem thêm dịch vụ · blog · công cụ. Bài liên quan: thiết kế web chuẩn AI Search 2026 · web design để ChatGPT/Gemini trích dẫn.
Reference: html.spec.whatwg.org, web.dev/vitals, schema.org, developers.google.com/search/docs, nextjs.org/docs
