Main landmark là gì và vì sao bắt buộc
Main landmark là vùng đại diện cho nội dung cốt lõi của trang, được khai báo bằng thẻ <main> hoặc vai trò role="main". Trình đọc màn hình cho phép người dùng nhảy thẳng tới vùng này, bỏ qua header, menu và các thành phần lặp lại.
Theo chuẩn accessibility hiện đại:
- Mỗi trang chỉ được có một main landmark
- Main landmark phải chứa nội dung trung tâm của trang
- Không được lồng
<main>vào<header>,<footer>,<nav>hoặc<aside>
Nguyên nhân gây ra lỗi “Document does not have a main landmark”
Lỗi này thường xuất hiện do một trong các nguyên nhân sau:
- Trang không có thẻ
<main> - Sử dụng quá nhiều
<div>mà không gán vai trò ngữ nghĩa - Nội dung chính bị phân tán, không có vùng trung tâm rõ ràng
- Theme hoặc layout cũ chưa cập nhật theo chuẩn HTML5
Cách khắc phục đúng chuẩn và an toàn SEO
Cách tốt nhất là thêm một thẻ <main> duy nhất bao quanh phần nội dung chính của trang.
Ví dụ sai thường gặp
<div class="content">
<h1>Tiêu đề bài viết</h1>
<p>Nội dung chính của trang</p>
</div>
Ví dụ đúng chuẩn
<main id="main-content">
<h1>Tiêu đề bài viết</h1>
<p>Nội dung chính của trang</p>
</main>
Nếu vì lý do kỹ thuật không thể dùng thẻ <main>, có thể dùng giải pháp thay thế:
<div role="main">
Nội dung chính
</div>
Tuy nhiên, <main> luôn được ưu tiên hơn vì rõ ràng, ngữ nghĩa tốt và thân thiện SEO.
Những sai lầm cần tránh
- Dùng nhiều thẻ
<main>trên cùng một trang - Bọc
<main>bên trong<header>hoặc<footer> - Dùng
<main>chỉ để bao layout, không chứa nội dung thực - Dùng
<main>cho popup hoặc modal
Lợi ích khi sửa lỗi main landmark
Khi trang có main landmark đúng chuẩn, bạn sẽ đạt được nhiều lợi ích rõ ràng:
- Cải thiện accessibility cho người dùng sử dụng trình đọc màn hình
- Điểm Lighthouse và Core Web Vitals tốt hơn
- Cấu trúc HTML rõ ràng, dễ bảo trì
- Hỗ trợ SEO ngữ nghĩa và khả năng hiểu nội dung của công cụ tìm kiếm
Kết luận
Lỗi Document does not have a main landmark không phải lỗi nghiêm trọng, nhưng là dấu hiệu cho thấy cấu trúc HTML của trang chưa thân thiện với accessibility. Chỉ cần thêm đúng một thẻ <main> cho mỗi trang, đặt đúng vị trí và chứa đúng nội dung, bạn đã giải quyết triệt để vấn đề này một cách gọn gàng, chuẩn kỹ thuật và lâu dài.
Bình luận