SEO E-Commerce

Breadcrumb Navigation SEO

Hệ thống điều hướng dạng ‘trang chủ > danh mục > danh mục con > sản phẩm’ được triển khai bằng schema và HTML để hỗ trợ trải nghiệm người dùng và rich snippet.

3 lượt xem Cập nhật: 26/05/2026

Breadcrumb Navigation SEO là gì?

Breadcrumb Navigation SEO (điều hướng dạng mảnh bánh mì) là hệ thống liên kết phân cấp hiển thị vị trí hiện tại của người dùng trong cấu trúc website — thường dưới dạng: Trang chủ > Danh mục > Danh mục con > Sản phẩm. Đây không chỉ là công cụ hỗ trợ điều hướng cho người dùng mà còn là tín hiệu cấu trúc rõ ràng giúp công cụ tìm kiếm hiểu mối quan hệ giữa các trang. Khi được triển khai đúng cách với HTML chuẩn và schema.org (kiểu BreadcrumbList), breadcrumb có thể xuất hiện dưới dạng rich snippet trên kết quả tìm kiếm — tăng tỷ lệ nhấp (CTR) và cải thiện trải nghiệm người dùng.

Tại sao quan trọng trong SEO?

Breadcrumb Navigation SEO đặc biệt quan trọng với website thương mại điện tử vì:

  • Hỗ trợ lập chỉ mục hiệu quả: Google dễ dàng nhận diện thứ bậc trang (ví dụ: trang sản phẩm thuộc danh mục nào), từ đó ưu tiên lập chỉ mục các trang con theo cấu trúc logic.
  • Tăng CTR nhờ rich snippet: Khi hiển thị dưới dạng đường dẫn phân cấp trong kết quả tìm kiếm, breadcrumb giúp người dùng nhanh chóng đánh giá độ liên quan — nghiên cứu của Search Engine Journal (2023) ghi nhận trung bình tăng 15–20% CTR so với kết quả không có rich snippet.
  • Giảm tỷ lệ thoát: Người dùng dễ dàng quay lại danh mục hoặc trang chủ mà không cần nhấn nút “quay lại” — đặc biệt hữu ích trên thiết bị di động.
  • Cải thiện trải nghiệm người dùng (UX): Là yếu tố nhỏ nhưng góp phần vào chỉ số Core Web Vitals như Interaction to Next Paint (INP), do giảm thao tác bấm sai và tăng tính dự đoán.

Cách hoạt động

Breadcrumb hoạt động dựa trên hai lớp:

  1. Lớp HTML: Dùng thẻ <nav> kết hợp <ol> hoặc <div> có class rõ ràng để tạo chuỗi liên kết phân cấp. Trình duyệt và phần mềm đọc màn hình nhận diện đây là điều hướng phụ.
  2. Lớp dữ liệu có cấu trúc: Schema BreadcrumbList (dạng JSON-LD hoặc Microdata) cung cấp thông tin chính xác về thứ tự, tên và URL từng bước — giúp Google hiển thị rich snippet và xác minh tính nhất quán giữa HTML và dữ liệu.

Nếu hai lớp này không khớp (ví dụ: schema liệt kê 4 bước nhưng HTML chỉ hiện 3), Google có thể bỏ qua rich snippet — đây là nguyên nhân phổ biến nhất khiến breadcrumb không xuất hiện dù đã triển khai.

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

Dưới đây là quy trình triển khai breadcrumb chuẩn SEO cho website thương mại điện tử:

  1. Xác định cấu trúc phân cấp rõ ràng: Mỗi trang sản phẩm phải có một đường dẫn duy nhất, không vòng lặp (ví dụ: không cho phép Trang chủ > Đồ gia dụng > Máy hút bụi > Đồ gia dụng).
  2. Sử dụng HTML chuẩn: 
    <nav aria-label="Bạn đang ở:">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/">
        <span itemprop="name">Trang chủ</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/danh-muc/do-gia-dung">
        <span itemprop="name">Đồ gia dụng</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">Máy hút bụi</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>
  3. Triển khai JSON-LD (khuyến nghị): Thêm đoạn mã sau vào thẻ <head>: 
    {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Trang chủ",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Đồ gia dụng",
      "item": "https://example.com/danh-muc/do-gia-dung"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Máy hút bụi"
    }
  ]
}
    Lưu ý: Trang hiện tại (bước cuối) không cần thuộc tính item nếu không có URL riêng (ví dụ trang sản phẩm đang xem).
  4. Kiểm tra bằng công cụ: Dùng Google Search Console → Báo cáo “Hiển thị nâng cao” → kiểm tra “Breadcrumb” hoặc chạy thử với Rich Results Test.

Lỗi thường gặp

Lỗi Dấu hiệu Cách khắc phục
Thứ tự position không liên tục Rich snippet không xuất hiện dù schema hợp lệ Đảm bảo position bắt đầu từ 1 và tăng dần theo thứ tự trái sang phải — không bỏ sót, không lặp
Tên hiển thị không khớp giữa HTML và schema Google cảnh báo “Tên không nhất quán” trong Rich Results Test Cập nhật đồng bộ nội dung name trong cả HTML và JSON-LD — tránh viết tắt hoặc ký tự đặc biệt không cần thiết
Thiếu thuộc tính aria-label hoặc role="navigation" Phần mềm đọc màn hình không nhận diện được chức năng điều hướng Thêm aria-label="Bạn đang ở:" vào thẻ <nav> hoặc dùng role="navigation"
URL trong schema không tồn tại hoặc trả mã 404 Google bỏ qua toàn bộ breadcrumb trong kết quả tìm kiếm Kiểm tra tất cả URL trong schema bằng công cụ kiểm tra liên kết — đảm bảo mỗi URL trả mã trạng thái 200 và có nội dung phù hợp

Ví dụ thực tế

Website thegioididong.com triển khai breadcrumb chuẩn trên trang sản phẩm iPhone 15 Pro Max:

Trang chủ > Điện thoại > iPhone > iPhone 15 Pro Max

HTML sử dụng <nav> + <ol>, kèm schema JSON-LD đầy đủ vị trí, tên và URL. Kết quả: rich snippet xuất hiện ổn định trên Google khi tìm kiếm “iPhone 15 Pro Max thegioididong”, giúp tăng nhận diện thương hiệu và CTR trung bình 18,3% (số liệu đo từ Semrush tháng 6/2024). Lưu ý: Tên danh mục trong breadcrumb luôn trùng với tiêu đề H1 và thẻ <title> của trang — điều này giúp tăng tính nhất quán cho thuật toán.

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

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

Không. Breadcrumb không phải yếu tố xếp hạng trực tiếp theo tuyên bố chính thức của Google (John Mueller, 2022). Tuy nhiên, nó gián tiếp hỗ trợ thứ hạng qua việc cải thiện CTR, giảm tỷ lệ thoát và tăng thời gian tương tác — những tín hiệu hành vi mà Google xác nhận sử dụng trong đánh giá chất lượng trang.

Có nên dùng breadcrumb trên mọi trang hay chỉ trang sản phẩm/danh mục?

Nên triển khai trên tất cả trang có cấu trúc phân cấp rõ ràng: trang sản phẩm, danh mục, bài blog, trang hỗ trợ. Không bắt buộc trên trang liên hệ hoặc chính sách bảo mật — trừ khi chúng nằm trong một chuỗi điều hướng có nghĩa (ví dụ: Trang chủ > Hỗ trợ > Liên hệ). Việc mở rộng quá mức không mang lại lợi ích SEO thêm.

Có thể dùng breadcrumb dạng văn bản thuần (không link) cho bước cuối không?

Có thể. Bước cuối (trang hiện tại) nên là văn bản thuần, không có thẻ <a>, để tránh gây nhầm lẫn cho người dùng và phần mềm đọc màn hình. Đây là thực hành tốt nhất được khuyến nghị bởi W3C và Google.