Navigation SEO: đảm bảo Google có thể crawl cấu trúc menu của bạn

Breadcrumbs và navigation: dữ liệu có cấu trúc cho công cụ tìm kiếm

Cách triển khai breadcrumb schema markup phù hợp với menu navigation của bạn và cải thiện kết quả phong phú.

Breadcrumbs là một trong những phần tử giao diện tưởng chừng nhỏ cho đến khi bạn hiểu được Google coi trọng chúng như thế nào. Chúng xuất hiện ở đầu trang sản phẩm và trang danh mục (Trang chủ → Nữ → Váy → Váy mùa hè) và giúp người dùng hiểu vị trí của họ trong cấu trúc trang web. Đó là lợi ích trải nghiệm người dùng. Lợi ích SEO thì lớn hơn: breadcrumbs tạo ra các liên kết nội bộ truyền quyền hạn qua trang web của bạn, và khi được đánh dấu bằng dữ liệu có cấu trúc, chúng xuất hiện trực tiếp trong kết quả tìm kiếm Google dưới dạng rich snippets.

Kết quả tìm kiếm có breadcrumbs nổi bật hơn. Thay vì hiển thị URL thuần (example.com/products/12345), Google sẽ hiển thị toàn bộ breadcrumb trail (Cửa hàng ví dụ → Nữ → Váy). Người dùng thấy bối cảnh trước khi nhấp vào. Kết quả trông có thẩm quyền hơn, nhận được nhiều lần nhấp hơn, và báo hiệu cho Google rằng trang web của bạn có cấu trúc phân cấp rõ ràng đáng được đánh dấu.

Nhưng breadcrumbs chỉ mở khóa những lợi ích này nếu chúng được triển khai chính xác: các liên kết HTML thực tế (không chỉ kiểu dáng trực quan), markup dữ liệu có cấu trúc (JSON-LD), và sự phù hợp với cấu trúc navigation chính của bạn. Nhiều cửa hàng thêm breadcrumbs như một phần tử thiết kế mà không thêm markup, và họ hoàn toàn bỏ lỡ giá trị SEO.

Đọc nhanh

Breadcrumbs tạo ra các liên kết nội bộ từ sản phẩm đến danh mục, truyền link equity lên trên.
Dữ liệu có cấu trúc (JSON-LD BreadcrumbList) báo cho Google hiển thị breadcrumbs trong kết quả tìm kiếm.
Breadcrumb trails nên phù hợp với cấu trúc URL và cấu trúc phân cấp navigation chính của bạn.
Kiểm tra bằng Công cụ Kết quả phong phú của Google và theo dõi Search Console để tìm lỗi.

Tại sao breadcrumbs quan trọng đối với SEO

Breadcrumbs phục vụ ba chức năng SEO:

1. Kiến trúc liên kết nội bộ

Mỗi breadcrumb là một tập hợp các liên kết nội bộ. Trang sản phẩm có breadcrumb “Trang chủ → Nữ → Váy → Sản phẩm” chứa ba liên kết nội bộ: một đến trang chủ, một đến Nữ, một đến Váy.

Những liên kết này truyền link equity từ trang sản phẩm trở lại trang danh mục. Nếu trang sản phẩm nhận được các backlink bên ngoài (một blog đánh giá sản phẩm và liên kết trực tiếp đến nó), một phần quyền hạn đó sẽ chảy trở lại trang danh mục thông qua các liên kết breadcrumb. Đây là đảo ngược của luồng điều hướng thông thường (trang chủ → danh mục → sản phẩm). Breadcrumbs tạo ra luồng hai chiều.

Breadcrumbs cũng cung cấp cho Google nhiều đường dẫn để khám phá trang. Google có thể theo breadcrumbs lên trên (từ sản phẩm đến danh mục đến trang chủ) và xuống (từ trang chủ đến danh mục đến sản phẩm), cải thiện hiệu quả crawl và giảm khả năng các trang trở thành orphaned.

2. Tín hiệu cấu trúc trang web

Breadcrumbs rõ ràng cho Google biết trang web của bạn được tổ chức như thế nào. Trail “Trang chủ → Nữ → Váy → Váy mùa hè” cho Google biết rằng Váy mùa hè là một danh mục con của Váy, là danh mục con của Nữ, là danh mục cấp cao nhất.

Google sử dụng cấu trúc phân cấp này để hiểu trang nào là hubs (danh mục được liên kết bởi nhiều breadcrumbs) và trang nào là leaves (các sản phẩm riêng lẻ). Các trang hub được coi là quan trọng hơn và được crawl thường xuyên hơn.

Không có breadcrumbs, Google phải suy ra cấu trúc phân cấp từ cấu trúc URL, các mẫu liên kết nội bộ và menu điều hướng. Breadcrumbs làm cho cấu trúc phân cấp trở nên rõ ràng, giảm bớt sự mơ hồ.

3. Rich results trong tìm kiếm

Khi bạn thêm markup dữ liệu có cấu trúc vào breadcrumbs, Google có thể hiển thị chúng trực tiếp trong kết quả tìm kiếm. Thay vì URL thuần, người dùng thấy toàn bộ breadcrumb trail.

Kết quả tìm kiếm không có breadcrumbs:

example.com › products › 12345-summer-dress

Kết quả tìm kiếm có breadcrumbs:

Cửa hàng ví dụ › Nữ › Váy › Váy mùa hè

Kết quả thứ hai có nhiều thông tin hơn và nhấp được hơn. Người dùng thấy bối cảnh danh mục trước khi truy cập trang. Điều này cải thiện tỷ lệ nhấp chuột (CTR), và CTR cao hơn là tín hiệu xếp hạng tích cực cho Google.

Cách triển khai breadcrumbs: cấu trúc HTML

Breadcrumbs phải là các liên kết HTML thực tế, không chỉ là văn bản được tạo kiểu. Mỗi cấp của breadcrumb trail nên là một thẻ neo chỉ đến trang danh mục thích hợp.

Cấu trúc HTML cơ bản

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Trang chủ</a></li>
    <li><a href="/collections/women">Nữ</a></li>
    <li><a href="/collections/dresses">Váy</a></li>
    <li><a href="/collections/summer-dresses">Váy mùa hè</a></li>
  </ol>
</nav>

Các phần tử chính:

<nav aria-label="Breadcrumb">: Wrapper là phần tử nav có nhãn ARIA để screen readers công bố nó là một breadcrumb trail (không chỉ là điều hướng chung).
<ol>: Một danh sách có thứ tự, vì breadcrumbs là một chuỗi (thứ tự quan trọng).
<a href="...">: Các thẻ neo thực tế với URL thực tế. Mỗi cấp breadcrumb có thể nhấp được và crawlable.

Mục cuối cùng (trang hiện tại) có thể là liên kết hoặc văn bản thuần. Google chấp nhận cả hai. Một số hướng dẫn UX khuyến nghị làm cho nó thành văn bản thuần (vì việc nhấp vào nó không làm gì — bạn đã ở trên trang đó), trong khi những hướng dẫn khác khuyến nghị giữ nó dưới dạng liên kết vì tính nhất quán. Cả hai đều hoạt động cho SEO.

Kiểu dáng CSS

Breadcrumbs thường được tạo kiểu dưới dạng danh sách ngang nội tuyến với các dấu phân cách (/ hoặc › hoặc >) giữa các mục. Các dấu phân cách có thể được thêm bằng các pseudo-element CSS:

nav[aria-label="Breadcrumb"] ol {
  list-style: none;
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

nav[aria-label="Breadcrumb"] li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  color: #999;
}

Các dấu phân cách chỉ có tính trực quan — chúng không phải là một phần của cấu trúc HTML. Google bỏ qua chúng.

Cách thêm markup dữ liệu có cấu trúc

Breadcrumbs HTML tạo các liên kết nội bộ và cải thiện trải nghiệm người dùng. Markup dữ liệu có cấu trúc cho Google biết rằng các liên kết này đại diện cho một breadcrumb trail và sẽ được hiển thị dưới dạng rich results.

Google hỗ trợ markup schema BreadcrumbList ở định dạng JSON-LD. Đây là một thẻ script chứa dữ liệu JSON mô tả cấu trúc breadcrumb.

Ví dụ JSON-LD BreadcrumbList

Thêm script này vào <head> hoặc cuối <body> trên mọi trang có breadcrumbs (trang sản phẩm, trang danh mục, trang bài viết):

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Trang chủ",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Nữ",
      "item": "https://example.com/collections/women"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Váy",
      "item": "https://example.com/collections/dresses"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Váy mùa hè",
      "item": "https://example.com/collections/summer-dresses"
    }
  ]
}
</script>

Các trường chính

@context và @type: Các khai báo schema.org chuẩn. Những cái này cho Google biết đây là một BreadcrumbList.
itemListElement: Một mảng các mục breadcrumb, theo thứ tự từ trang chủ đến trang hiện tại.
position: Thứ tự của mỗi mục (1 cho trang chủ, 2 cho danh mục đầu tiên, 3 cho danh mục con, v.v.).
name: Văn bản hiển thị của breadcrumb (những gì người dùng thấy).
item: URL đầy đủ của trang (phải là tuyệt đối, bắt đầu bằng https://).

Mục cuối cùng (trang hiện tại) phải bao gồm trường item. Tài liệu Google cũ hơn gợi ý loại bỏ nó, nhưng thực tiễn tốt nhất hiện tại là bao gồm nó cho tất cả các mục.

Lỗi 1: Sử dụng URL tương đối thay vì URL tuyệt đối

Google yêu cầu URL tuyệt đối trong dữ liệu có cấu trúc. Điều này không xác thực:

"item": "/collections/women"

Điều này xác thực:

"item": "https://example.com/collections/women"

Nếu theme Shopify của bạn sử dụng Liquid để tạo markup breadcrumb, hãy chắc chắn sử dụng bộ lọc url với absolute_url:

"item": ""

Lỗi 2: HTML và JSON-LD không khớp

Breadcrumbs HTML và markup JSON-LD nên mô tả cùng một trail. Nếu HTML hiển thị “Trang chủ → Nữ → Váy” nhưng JSON-LD hiển thị “Trang chủ → Quần áo → Váy,” Google có thể bỏ qua markup hoặc coi nó là lỗi.

Điều này xảy ra khi các theme tạo breadcrumbs động dựa trên cấu trúc URL nhưng hardcode markup JSON-LD. Luôn tạo cả hai từ cùng một nguồn dữ liệu.

Một số theme bao gồm tiêu đề trang hiện tại trong breadcrumb trail, ngay cả khi nó không phải là liên kết có thể điều hướng:

<li>Sản phẩm: Váy bông mùa hè</li>

Điều này ổn cho HTML (nó cung cấp bối cảnh cho người dùng), nhưng mục JSON-LD tương ứng vẫn nên đại diện cho một trang danh mục hoặc phần, không phải chính sản phẩm đó. Mục cuối cùng nên là danh mục mẹ:

{
  "position": 3,
  "name": "Váy",
  "item": "https://example.com/collections/dresses"
}

Nếu bạn bao gồm sản phẩm dưới dạng mục breadcrumb cuối cùng, hãy chắc chắn nó có URL thực:

{
  "position": 4,
  "name": "Váy bông mùa hè",
  "item": "https://example.com/products/summer-cotton-dress"
}

Lỗi 4: Breadcrumbs không phù hợp với navigation

Nếu navigation chính của bạn có danh mục gọi là “Quần áo Nữ” nhưng breadcrumbs của bạn hiển thị “Nữ,” Google có thể bị nhầm lẫn về việc liệu những cái này có phải là cùng một danh mục hay không.

Sử dụng tên nhất quán trên toàn bộ navigation, breadcrumbs và URL. Nếu navigation nói “Quần áo Nữ,” breadcrumb cũng nên như vậy. Nếu URL là /collections/womens-clothing, tên danh mục trong dữ liệu có cấu trúc nên khớp.

Công cụ Kết quả phong phú của Google

Google cung cấp một công cụ miễn phí để xác thực dữ liệu có cấu trúc: Công cụ Kết quả phong phú (tìm kiếm “Google Rich Results Test” và nhập URL của bạn).

Công cụ crawl trang của bạn, trích xuất dữ liệu có cấu trúc, và hiển thị xem nó có hợp lệ không. Đối với breadcrumbs, nó sẽ hiển thị:

“BreadcrumbList” được phát hiện
Số lượng mục
Tên và URL của mỗi mục

Nếu công cụ hiển thị lỗi (“Missing required field: item” hoặc “Invalid URL”), hãy sửa chúng trước khi triển khai.

Kiểm tra View Source thủ công

Mở trang sản phẩm hoặc danh mục của bạn trong trình duyệt, View Source (Ctrl+U / Cmd+Option+U), và tìm kiếm BreadcrumbList. Bạn sẽ thấy script JSON-LD với tất cả các mục breadcrumb được liệt kê.

Xác minh:

Tất cả URL đều là tuyệt đối (bắt đầu bằng https://).
Breadcrumb trail khớp với breadcrumbs HTML hiển thị trên trang.
Các giá trị position là tuần tự (1, 2, 3, …).

Google Search Console

Sau khi triển khai markup breadcrumb, hãy kiểm tra Google Search Console → Enhancements → Breadcrumb. Báo cáo này hiển thị:

Có bao nhiêu trang có markup breadcrumb hợp lệ
Có bao nhiêu trang có lỗi hoặc cảnh báo
Những lỗi cụ thể nào Google tìm thấy

Google có thể mất vài ngày để crawl các trang và điền báo cáo này. Nếu lỗi xuất hiện, hãy nhấp vào chi tiết lỗi để xem trang nào bị ảnh hưởng và thông báo lỗi là gì.

Breadcrumbs và cấu trúc URL

Breadcrumbs hoạt động tốt nhất khi chúng phù hợp với cấu trúc URL của bạn. Nếu URL của sản phẩm là:

https://example.com/collections/women/products/summer-dress

Breadcrumb nên phản ánh đường dẫn đó:

Trang chủ → Nữ → Váy mùa hè

Nếu URL không khớp với breadcrumb trail (URL nói /collections/women nhưng breadcrumb hiển thị “Quần áo → Nữ”), người dùng và công cụ tìm kiếm nhận được các tín hiệu xung đột về cấu trúc phân cấp trang web.

Đối với cửa hàng Shopify, điều này có thể khó khăn. URL sản phẩm Shopify phẳng theo mặc định:

https://example.com/products/summer-dress

Không có danh mục trong URL. Sản phẩm có thể xuất hiện trong nhiều bộ sưu tập (Nữ, Váy, Khuyến mại mùa hè), vì vậy không có breadcrumb trail canonical duy nhất.

Giải pháp:

1. Chọn một bộ sưu tập chính. Nếu một sản phẩm thuộc về nhiều bộ sưu tập, hãy chỉ định một bộ làm chính. Sử dụng bộ sưu tập đó cho breadcrumbs. Các theme Shopify thường làm điều này bằng cách kiểm tra bộ sưu tập nào mà người dùng đến từ (thông qua HTTP referrer), nhưng điều này không hoạt động cho người dùng đáp xuống trực tiếp trang sản phẩm từ kết quả tìm kiếm.

2. Sử dụng tham số URL. Một số theme nối thêm một tham số bộ sưu tập vào URL sản phẩm: /products/summer-dress?collection=women. Breadcrumb sau đó có thể được tạo từ tham số đó.

3. Sử dụng URL sản phẩm dựa trên bộ sưu tập của Shopify. Trong quản trị Shopify, bạn có thể bật URL sản phẩm dựa trên bộ sưu tập: Settings → General → Product URL format. Điều này thay đổi URL sản phẩm thành /collections/women/products/summer-dress. Bộ sưu tập hiện đã là một phần của URL, làm cho việc tạo breadcrumb trở nên đơn giản.

Breadcrumbs để điều hướng faceted

Điều hướng faceted (lọc trang danh mục theo các thuộc tính như kích thước, màu sắc, thương hiệu) tạo breadcrumbs động phản ánh trạng thái bộ lọc hiện tại:

Trang chủ → Nữ → Váy → Kích thước: Vừa → Màu: Xanh

Những lựa chọn bộ lọc này có nên xuất hiện trong dữ liệu có cấu trúc breadcrumb không?

Hướng dẫn của Google: breadcrumbs nên đại diện cho cấu trúc phân cấp trang web, không phải trạng thái bộ lọc tạm thời. Dữ liệu có cấu trúc nên hiển thị:

Trang chủ → Nữ → Váy

Breadcrumbs HTML có thể hiển thị toàn bộ trail bao gồm bộ lọc (cho trải nghiệm người dùng), nhưng JSON-LD nên loại bỏ các bộ lọc. Các bộ lọc không phải là URL ổn định (chúng thay đổi với mỗi tương tác của người dùng), và chúng không đại diện cho một cấu trúc phân cấp có thể điều hướng.

Ngoại lệ: nếu các kết hợp bộ lọc được quảng bá dưới dạng các trang danh mục độc lập (ví dụ: bộ sưu tập “Váy xanh Nữ” có URL riêng và nội dung), đó là một danh mục thực tế và nên xuất hiện trong breadcrumbs.

Cách breadcrumbs tương tác với navigation chính

Breadcrumbs không thay thế navigation chính — chúng bổ sung cho nó. Navigation chính (menu tiêu đề) cung cấp các danh mục cấp cao nhất và truy cập nhanh vào các phần chính. Breadcrumbs cung cấp bối cảnh phân cấp và điều hướng lên từ các trang sâu.

Hai cái nên được sắp xếp:

Nếu navigation chính của bạn có danh mục “Nữ,” breadcrumbs trên các trang sản phẩm dưới danh mục đó nên bao gồm “Nữ.”
Nếu navigation chính của bạn sử dụng “Quần áo Nam” làm nhãn, breadcrumbs nên sử dụng “Quần áo Nam,” không phải “Nam.”

Việc đặt tên không nhất quán làm nhầm lẫn người dùng (“Liệu ‘Nữ’ có giống như ‘Quần áo Nữ’?”) và làm suy yếu tín hiệu SEO (Google thấy hai nhãn khác nhau cho cùng một danh mục và phải suy ra rằng chúng giống nhau).

Kiểm tra triển khai nhanhMở trang sản phẩm trên cửa hàng của bạn. View Source và tìm kiếm "BreadcrumbList." Nếu không có gì xuất hiện, bạn không có dữ liệu có cấu trúc breadcrumb. Thêm nó — markup này mất 10 phút để triển khai và có thể cải thiện tỷ lệ nhấp chuột trong vài ngày.

Breadcrumbs như một công cụ hiệu quả crawl

Ngoài rich results và liên kết nội bộ, breadcrumbs giúp Google crawl trang web của bạn hiệu quả hơn. Khi Google crawl trang sản phẩm, nó trích xuất tất cả các liên kết, bao gồm các liên kết breadcrumb. Nếu breadcrumb bao gồm ba liên kết (Trang chủ, Nữ, Váy), Google hiện có ba URL bổ sung để crawl.

Đối với các cửa hàng lớn, điều này quan trọng. Google phân bổ ngân sách crawl hữu hạn — nó sẽ không crawl mọi trang mỗi ngày. Các trang được liên kết thường xuyên hơn (từ nhiều trang) được crawl thường xuyên hơn. Các danh mục xuất hiện trong breadcrumbs trên hàng trăm trang sản phẩm được crawl thường xuyên hơn nhiều so với các danh mục chỉ được liên kết trong navigation chính.

Điều này đặc biệt quan trọng đối với các sản phẩm có ít hoặc theo mùa. Nếu một sản phẩm hết hàng, bạn muốn Google crawl lại trang danh mục nhanh chóng để cập nhật kết quả tìm kiếm. Các liên kết breadcrumb từ trang sản phẩm đến trang danh mục tăng khả năng Google crawl lại trang danh mục trong vài giờ hoặc ngày, chứ không phải vài tuần.

Triển khai breadcrumbs trong Shopify

Hầu hết các theme Shopify hiện đại bao gồm hỗ trợ breadcrumb, nhưng không phải tất cả đều bao gồm markup dữ liệu có cấu trúc. Kiểm tra tài liệu theme của bạn hoặc kiểm tra mã breadcrumb trong các tệp Liquid của theme của bạn.

Nếu theme của bạn không bao gồm markup JSON-LD, bạn có thể thêm nó theo cách thủ công. Trong tệp theme.liquid của theme (hoặc trong một snippet được bao gồm trên các trang sản phẩm và bộ sưu tập), hãy thêm một script như thế này:

{% if template contains 'product' %}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Trang chủ",
        "item": "{{ shop.url }}"
      }
      {% if collection %}
      ,{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ collection.title | escape }}",
        "item": "{{ collection.url | absolute_url }}"
      }
      {% endif %}
      ,{
        "@type": "ListItem",
        "position": {% if collection %}3{% else %}2{% endif %},
        "name": "{{ product.title | escape }}",
        "item": "{{ product.url | absolute_url }}"
      }
    ]
  }
  </script>
{% endif %}

Điều này tạo markup breadcrumb cho các trang sản phẩm. Điều chỉnh nó cho các trang bộ sưu tập bằng cách thay thế product bằng collection và điều chỉnh breadcrumb trail cho phù hợp.

Đối với các cửa hàng sử dụng các ứng dụng như Navi+ AI Menu Builder, markup breadcrumb thường được xử lý tự động như một phần của gói điều hướng — hãy kiểm tra cài đặt ứng dụng hoặc tài liệu của bạn.

Breadcrumbs là một trong những triển khai dữ liệu có cấu trúc có ROI cao nhất mà bạn có thể làm. Markup rất đơn giản, các công cụ xác thực miễn phí, và tác động (rich results, liên kết nội bộ, hiệu quả crawl) là ngay lập tức. Nếu cửa hàng của bạn chưa có breadcrumbs, hãy thêm chúng. Nếu nó có breadcrumbs nhưng không có dữ liệu có cấu trúc, hãy thêm JSON-LD. Nỗ lực tăng thêm thấp, và lợi ích SEO tăng theo thời gian.

This article is part of the larger guide on Navigation SEO: making sure Google can crawl your menu structure.