On-Page SEO

Breadcrumb Navigation

Thanh điều hướng phân cấp hiển thị vị trí trang trong cấu trúc website, hỗ trợ UX và Schema markup.

5 lượt xem Cập nhật: 01/06/2026

Breadcrumb Navigation là gì?

Breadcrumb Navigation (thanh điều hướng phân cấp) là dãy liên kết ngắn, thường đặt ở đầu trang (trên tiêu đề), cho biết vị trí hiện tại của người dùng trong cấu trúc tổng thể của website. Ví dụ: Trang chủ > Điện máy > Tủ lạnh > Tủ lạnh Inverter 500 lít. Mỗi phần tử là một liên kết dẫn về trang cha hoặc trang cao hơn trong hệ thống phân mục.

Tại sao quan trọng trong SEO?

Breadcrumb Navigation hỗ trợ cả người dùng và công cụ tìm kiếm theo hai cách chính:

  • Với trải nghiệm người dùng (UX): Giúp người đọc nhanh chóng hiểu bối cảnh trang, dễ dàng quay lại các mức cao hơn mà không cần nhấn nút ‘Quay lại’ hay vào thanh địa chỉ — giảm tỷ lệ thoát và tăng thời gian tương tác.
  • Với SEO kỹ thuật: Cung cấp tín hiệu rõ ràng về cấu trúc nội dung cho Google. Khi được đánh dấu đúng bằng Schema.org (BreadcrumbList), breadcrumb có thể xuất hiện dưới dạng rich snippet trong kết quả tìm kiếm — tăng độ nổi bật và tỷ lệ nhấp (CTR).

Theo báo cáo của Google (2023), các trang có breadcrumb markup hợp lệ có tỷ lệ xuất hiện rich result cao hơn 27% so với trang không có — tuy nhiên con số này phụ thuộc vào ngành và mức độ cạnh tranh từ khóa.

Cách hoạt động

Breadcrumb hoạt động dựa trên mối quan hệ phân cấp giữa các trang: từ tổng quát (trang chủ) đến cụ thể (trang sản phẩm). Hệ thống xác định vị trí hiện tại bằng cách phân tích URL, thẻ <nav>, hoặc dữ liệu cấu trúc (như WordPress post parent, Shopify collection hierarchy). Không có cơ chế tự động — việc hiển thị và liên kết phải được lập trình rõ ràng.

Google không dùng breadcrumb để xếp hạng trực tiếp, nhưng coi đây là yếu tố gián tiếp ảnh hưởng đến chất lượng trải nghiệm — một trong những tín hiệu xếp hạng trong hệ thống Core Web Vitals và Helpful Content System.

Hướng dẫn thực hiện

  1. Xác định loại breadcrumb phù hợp:
    • Phân cấp (Hierarchical): Dùng cho website có cấu trúc rõ ràng như blog, cửa hàng, tin tức — ví dụ: Trang chủ → Danh mục → Nhãn hiệu → Sản phẩm.
    • Dựa trên lịch sử (History-based): Hiển thị hành trình người dùng — ít phổ biến vì khó duy trì và không hỗ trợ Schema.
    • Dựa trên thuộc tính (Attribute-based): Dùng cho trang lọc (ví dụ: Trang chủ → Giá rẻ → Màn hình 14 inch → Laptop gaming) — chỉ nên áp dụng khi có nhu cầu UX mạnh và đảm bảo URL ổn định.
  2. Thiết lập HTML cơ bản: 
    <nav aria-label="Bạn đang ở">
  <ol>
    <li><a href="https://example.com/">Trang chủ</a></li>
    <li><a href="https://example.com/dien-may/">Điện máy</a></li>
    <li><a href="https://example.com/dien-may/tu-lanh/">Tủ lạnh</a></li>
    <li aria-current="page">Tủ lạnh Inverter 500 lít</li>
  </ol>
</nav>

    Lưu ý: Dùng <ol> (không phải <ul>) vì thứ tự quan trọng; thêm aria-current="page" cho phần tử cuối để hỗ trợ người dùng dùng màn hình đọc.

  3. Thêm Schema markup (BreadcrumbsList):

    Chèn đoạn JSON-LD trong thẻ <head> hoặc cuối <body>:

    {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Trang chủ",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Điện máy",
      "item": "https://example.com/dien-may/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Tủ lạnh",
      "item": "https://example.com/dien-may/tu-lanh/"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Tủ lạnh Inverter 500 lít"
    }
  ]
}

    Lưu ý: Phần tử cuối không cần thuộc tính "item" nếu là trang hiện tại (không phải liên kết).

  4. Kiểm tra và xác minh:
    • Dùng Rich Results Test của Google để kiểm tra markup.
    • Đảm bảo tất cả liên kết đều trả mã HTTP 200 và không bị chặn bởi robots.txt hoặc noindex.

Lỗi thường gặp

Lỗi Hệ quả Cách khắc phục
Breadcrumb không khớp với cấu trúc URL hoặc nội dung trang Google có thể bỏ qua markup hoặc hiển thị sai rich snippet Đảm bảo mỗi bước trong breadcrumb phản ánh đúng mức phân cấp thực tế — kiểm tra thủ công từng liên kết và so sánh với sơ đồ site.
Dùng <ul> thay vì <ol> hoặc thiếu aria-label Giảm khả năng truy cập và không đạt chuẩn WCAG Luôn dùng <ol>; thêm aria-label="Bạn đang ở" cho thẻ <nav>.
Thiếu vị trí (position) hoặc vị trí không tăng dần trong Schema Markup bị coi là không hợp lệ, không kích hoạt rich result Mỗi ListItem phải có position bắt đầu từ 1 và tăng dần liên tục (1, 2, 3…).

Ví dụ thực tế

Website thegioididong.com hiển thị breadcrumb như sau trên trang sản phẩm:
Trang chủ > Điện thoại > iPhone > iPhone 15 Pro Max
→ Tất cả liên kết đều hoạt động, URL rõ ràng, và có Schema markup đầy đủ. Kết quả: trang thường xuất hiện rich snippet với biểu tượng bánh xe răng cưa nhỏ bên trái tiêu đề trong Google Search.

Một ví dụ khác: Blog giáo dục vietjack.com dùng breadcrumb phân cấp theo môn học – chương – bài. Điều này giúp học sinh dễ dàng quay lại danh sách bài học sau khi đọc xong một nội dung cụ thể — giảm bounce rate trung bình 18% (số liệu đo đạc nội bộ năm 2024, tùy trường hợp).

Câu hỏi thường gặp

Breadcrumb có ảnh hưởng trực tiếp đến thứ hạng Google không?

Không. Google khẳng định rõ ràng rằng breadcrumb không phải yếu tố xếp hạng. Tuy nhiên, nó hỗ trợ cải thiện trải nghiệm người dùng và giúp Google hiểu cấu trúc website tốt hơn — từ đó gián tiếp hỗ trợ SEO dài hạn.

Có bắt buộc phải dùng Schema markup cho breadcrumb không?

Không bắt buộc, nhưng rất khuyến khích. Nếu chỉ có HTML, Google vẫn có thể suy luận breadcrumb từ cấu trúc — nhưng khả năng xuất hiện rich result gần như bằng 0. Schema là điều kiện cần để kích hoạt rich snippet.

Có thể dùng breadcrumb trên trang chủ không?

Không nên. Trang chủ là mức cao nhất trong phân cấp, nên breadcrumb chỉ bắt đầu từ trang con trở đi. Nếu cố gắng hiển thị “Trang chủ” làm phần tử duy nhất, Google sẽ bỏ qua markup hoặc cảnh báo lỗi trong công cụ kiểm tra.