Breadcrumbs là đường dẫn điều hướng phụ cho biết trang hiện tại nằm ở đâu trong cấu trúc website, thường có dạng Trang chủ > Danh mục > Trang hiện tại. Breadcrumbs không thay thế menu chính; chúng giúp người dùng quay lại cấp cha, làm rõ quan hệ giữa các trang và bổ sung liên kết nội bộ theo tầng.
Trả lời nhanh: Website có danh mục, dịch vụ con, sản phẩm hoặc cụm bài nên cân nhắc dùng breadcrumbs theo phân cấp. Đường dẫn phải phản ánh cấu trúc hoặc hành trình điển hình, dễ sử dụng trên mobile, có ngữ nghĩa truy cập rõ và chỉ được tạo từ một nguồn để tránh hiển thị/schema trùng lặp.
Breadcrumbs là gì?
Breadcrumbs là chuỗi liên kết ngắn, thường bắt đầu từ trang chủ hoặc một khu vực cấp cao, đi qua danh mục cha rồi kết thúc ở trang hiện tại. Ví dụ:
Trang chủ > SEO > Technical SEO > Breadcrumbs là gì?Breadcrumb phải phản ánh trang cha có thật và hữu ích. Nếu một cấp chỉ được thêm để chứa từ khóa, trỏ đến trang rỗng hoặc không liên quan, đường dẫn sẽ làm người dùng khó định vị hơn.
Breadcrumbs khác menu và internal link thế nào?
| Thành phần | Nhiệm vụ chính | Phạm vi |
|---|---|---|
| Menu chính | Đưa người dùng đến các khu vực quan trọng. | Tương đối ổn định trên toàn website. |
| Breadcrumbs | Cho biết vị trí hiện tại và đường về cấp cha. | Thay đổi theo từng trang. |
| Internal link trong nội dung | Nối kiến thức, bước tiếp theo hoặc trang liên quan. | Phụ thuộc ngữ cảnh của đoạn nội dung. |
| CTA | Đưa người dùng đến một hành động rõ ràng. | Phụ thuộc mục tiêu và mức độ sẵn sàng. |
Bốn thành phần này bổ sung cho nhau. Breadcrumbs không thay thế menu và cũng không đủ để thay thế hệ thống internal link giúp người đọc khám phá nội dung theo nhu cầu.
Breadcrumbs giúp gì cho UX và SEO?
- Định hướng: người dùng biết mình đang ở khu vực nào và có thể về cấp cha bằng một lần bấm.
- Khám phá: trang danh mục trở thành lối đi đến các nội dung hoặc sản phẩm cùng nhóm.
- Cấu trúc liên kết: các trang con liên kết nhất quán về cấp cha.
- Ngữ cảnh cho công cụ tìm kiếm: markup BreadcrumbList mô tả vị trí trang trong hệ thống phân cấp.
Breadcrumbs không phải yếu tố “bật lên là tăng hạng” và không bảo đảm CTR cao hơn. Google tiếp tục hỗ trợ BreadcrumbList cho kết quả desktop, nhưng từ ngày 23/01/2025, kết quả tìm kiếm mobile chỉ hiển thị domain thay vì breadcrumb. Vì vậy, lợi ích ổn định nhất vẫn là điều hướng trên website và cấu trúc thông tin rõ ràng.
Khi đánh giá tổng thể, nên kiểm tra breadcrumb cùng menu, nội dung, hiệu năng và CTA bằng checklist website tốt.
Ba loại breadcrumbs phổ biến
| Loại | Phù hợp với | Lưu ý |
|---|---|---|
| Theo phân cấp | Website dịch vụ, blog, tài liệu, danh mục sản phẩm. | Nên ưu tiên cho phần lớn website doanh nghiệp. |
| Theo thuộc tính | Thương mại điện tử có màu sắc, kích thước, thương hiệu hoặc chất liệu. | Kiểm soát URL lọc và index để tránh tạo quá nhiều trang kém giá trị. |
| Theo lịch sử | Ứng dụng hoặc luồng cần quay lại kết quả vừa thao tác. | Không ổn định khi người dùng vào trực tiếp từ Search, quảng cáo hoặc link chia sẻ. |
Với website nội dung hoặc dịch vụ, breadcrumbs theo phân cấp thường dễ hiểu nhất. Một sản phẩm hoặc bài viết có thể thuộc nhiều nhóm, nhưng giao diện nên chọn một đường dẫn đại diện nhất quán thay vì thay đổi ngẫu nhiên theo phiên truy cập.
Khi nào nên và không nên dùng breadcrumbs?
| Nên dùng | Có thể không cần |
|---|---|
| Website có ít nhất hai cấp nội dung hữu ích. | Website một trang hoặc chỉ có vài trang ngang cấp. |
| Thương mại điện tử có danh mục và sản phẩm. | Landing page quảng cáo có luồng rất ngắn. |
| Website nhiều nhóm dịch vụ hoặc trang con. | Ứng dụng đã có cơ chế điều hướng phù hợp hơn cho tác vụ. |
| Blog, tài liệu hoặc trung tâm hỗ trợ có taxonomy rõ. | Cấu trúc chưa ổn định; cần sửa taxonomy trước khi tự động sinh breadcrumb. |
Nếu đang thiết kế lại website, hãy đưa breadcrumbs vào wireframe cùng menu, URL và taxonomy. Cách này tránh tình trạng mỗi thành phần thể hiện một cấu trúc khác nhau. Xem thêm quy trình thiết kế website.
Cách thiết kế breadcrumbs dễ dùng và dễ truy cập
- Đặt gần đầu nội dung để người dùng nhận biết vị trí trước khi đọc.
- Dùng nhãn ngắn, rõ; không nhồi từ khóa hoặc lặp nguyên tiêu đề dài.
- Liên kết các cấp cha đến URL thật, không lỗi và có nội dung hữu ích.
- Mục hiện tại có thể là văn bản; nếu là liên kết, tránh tạo vòng điều hướng gây nhầm lẫn.
- Dùng dấu phân cách quen thuộc và đảm bảo màu chữ, khoảng cách, vùng bấm đủ dễ sử dụng.
- Trên mobile, rút gọn cấp ít quan trọng hoặc dùng cuộn ngang có kiểm soát; đừng để breadcrumb đẩy H1 xuống quá sâu.
Theo Breadcrumb Pattern của W3C WAI-ARIA, đường dẫn nên nằm trong một vùng điều hướng có nhãn. Nếu trang hiện tại vẫn được trình bày dưới dạng liên kết, dùng aria-current="page"; nếu chỉ là văn bản, thuộc tính này không bắt buộc. Dấu phân cách nên là phần trình bày, tránh để trình đọc màn hình thông báo lặp lại không cần thiết.
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Trang chủ</a></li>
<li><a href="/seo/">SEO</a></li>
<li aria-current="page">Breadcrumbs là gì?</li>
</ol>
</nav>Cách triển khai BreadcrumbList Schema
BreadcrumbList là dữ liệu có cấu trúc mô tả đường dẫn phân cấp của trang. Nó không sửa được breadcrumb sai trên giao diện và cũng không bảo đảm Google sẽ hiển thị kết quả nâng cao. Phần hiển thị và markup cần cùng mô tả một cấu trúc hợp lý. Nếu chưa quen dữ liệu có cấu trúc, xem trước bài Schema Markup là gì.
Theo tài liệu Breadcrumb của Google, một BreadcrumbList cần itemListElement và ít nhất hai ListItem. Mỗi mục cần thứ tự position, tên name và URL item; riêng mục cuối có thể bỏ item, khi đó Google dùng URL của trang chứa markup.
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{"@type":"ListItem","position":1,"name":"SEO","item":"https://example.com/seo/"},
{"@type":"ListItem","position":2,"name":"Breadcrumbs là gì?"}
]
}Google khuyến nghị thể hiện đường đi điển hình của người dùng thay vì sao chép máy móc cấu trúc URL. Không bắt buộc đưa domain hoặc chính trang hiện tại vào danh sách nếu ngữ cảnh vẫn rõ.
Cách triển khai breadcrumbs trên WordPress
Breadcrumbs trên WordPress có thể đến từ theme, plugin SEO, plugin chuyên dụng hoặc Breadcrumbs block trên hệ thống hỗ trợ Site Editor. Tài liệu WordPress.org cho biết block này có thể đặt trong template để tự động xuất hiện trên nhiều trang.
- Chọn một nguồn duy nhất: tránh theme và plugin cùng xuất giao diện hoặc schema.
- Xác định taxonomy/trang cha chính: đặc biệt với bài thuộc nhiều category.
- Kiểm tra từng template: bài viết, trang dịch vụ, category, sản phẩm và custom post type.
- So sánh giao diện với markup: thứ tự và nhãn phải nhất quán.
- Kiểm thử có kiểm soát: triển khai trên một nhóm trang, dùng Rich Results Test và URL Inspection trước khi mở rộng.
- Kiểm tra sau thay đổi: rà lại khi đổi theme, plugin, category hoặc cấu trúc permalink.
Các lỗi breadcrumbs thường gặp
| Lỗi | Cách kiểm tra hoặc xử lý |
|---|---|
| Giao diện và schema khác nhau. | Đối chiếu từng cấp, tên và URL trong mã nguồn. |
| Cấp cha lỗi, rỗng hoặc chuyển hướng ngoài dự kiến. | Bấm thử từng liên kết và sửa trang đích trước. |
| Bài nhiều category chọn đường dẫn không nhất quán. | Thiết lập taxonomy chính hoặc quy tắc chọn ổn định. |
| Theme và plugin cùng tạo breadcrumb/schema. | Tắt nguồn trùng, giữ một nguồn chịu trách nhiệm. |
| Breadcrumb vỡ trên mobile hoặc khó bấm. | Thử trên thiết bị thật, rút nhãn và điều chỉnh layout. |
| Attribute breadcrumb sinh nhiều URL lọc. | Rà index, canonical, crawl và giá trị thực của trang lọc. |
| Markup thiếu hoặc sai thứ tự. | Kiểm tra itemListElement, position, name và item. |
Bên cạnh breadcrumb, nên rà cả lỗi điều hướng, popup, form và mobile UX. Bài những lỗi khiến website mất khách cung cấp checklist bổ sung.
Checklist nghiệm thu nhanh
- Breadcrumb xuất hiện đúng template và gần đầu nội dung.
- Đường dẫn phản ánh cấu trúc hoặc hành trình điển hình.
- Các cấp cha hoạt động và trang hiện tại không tự liên kết vô ích.
- Mobile không vỡ layout, chữ đọc được và thao tác thuận tiện.
- Vùng điều hướng có nhãn; trạng thái trang hiện tại được thể hiện đúng.
- Chỉ một nguồn tạo giao diện và BreadcrumbList.
- Markup có ít nhất hai ListItem, đúng thứ tự và URL.
- Đã chạy Rich Results Test, URL Inspection và kiểm tra trang thật.
- Không cam kết tăng CTR hoặc thứ hạng chỉ nhờ breadcrumb.
Kết luận
Breadcrumbs hiệu quả khi chúng phản ánh đúng cấu trúc, giúp người dùng về cấp cha và nhất quán với dữ liệu có cấu trúc. Hãy ưu tiên taxonomy rõ, thiết kế mobile, khả năng truy cập và một nguồn tạo breadcrumb duy nhất. Nếu website cần làm lại cấu trúc từ đầu, có thể tham khảo dịch vụ thiết kế website chuyên nghiệp.
Đoàn Trình Dục là Giảng viên Khoa Công nghệ Thông tin tại Đại học Công nghệ Sài Gòn (STU), với hơn 10 năm kinh nghiệm thực chiến trong các lĩnh vực Mạng máy tính, Marketing Online, SEO và Bảo mật hệ thống.
Với nền tảng sư phạm và kinh nghiệm tư vấn cho nhiều doanh nghiệp, thầy chuyên sâu vào việc xây dựng các giải pháp kỹ thuật số toàn diện và hiệu quả.