Dữ liệu có cấu trúc loại Breadcrumb (BreadcrumbList)

Breadcrumb trong kết quả tìm kiếm

Đường dẫn breadcrumb trên một trang cho biết vị trí của trang trong hệ thống phân cấp trang web và có thể giúp người dùng hiểu cũng như khám phá trang web một cách hiệu quả. Người dùng có thể di chuyển từng cấp một lên cấp trên cùng của hệ thống phân cấp trang web, bắt đầu từ breadcrumb sau cùng trong đường dẫn breadcrumb.

Phạm vi cung cấp tính năng

Google cung cấp tính năng này trên máy tính cũng như ở mọi khu vực và ngôn ngữ mà người dùng có thể truy cập Google Tìm kiếm.

How to add structured data

Structured data is a standardized format for providing information about a page and classifying the page content. If you're new to structured data, you can learn more about how structured data works.

Here's an overview of how to build, test, and release structured data.

  1. Add the required properties. Based on the format you're using, learn where to insert structured data on the page.
  2. Follow the guidelines.
  3. Validate your code using the Rich Results Test and fix any critical errors. Consider also fixing any non-critical issues that may be flagged in the tool, as they can help improve the quality of your structured data (however, this isn't necessary to be eligible for rich results).
  4. Deploy a few pages that include your structured data and use the URL Inspection tool to test how Google sees the page. Be sure that your page is accessible to Google and not blocked by a robots.txt file, the noindex tag, or login requirements. If the page looks okay, you can ask Google to recrawl your URLs.
  5. To keep Google informed of future changes, we recommend that you submit a sitemap. You can automate this with the Search Console Sitemap API.

Ví dụ

Google Tìm kiếm sử dụng mã đánh dấu breadcrumb trong phần nội dung của trang web để phân loại thông tin trên trang trong kết quả tìm kiếm. Thông thường, người dùng có thể truy cập một trang thông qua các loại cụm từ tìm kiếm rất khác nhau, như được minh họa trong các trường hợp sử dụng sau đây. Mặc dù mỗi cụm từ tìm kiếm có thể trả về cùng một trang web, breadcrumb sẽ phân loại nội dung theo ngữ cảnh của cụm từ đó trên Google Tìm kiếm. Trang dành cho những người chiến thắng giải thưởng sách tiểu thuyết có thể sử dụng các đường dẫn breadcrumb sau:

Một đường dẫn breadcrumb

Nếu chỉ có một đường dẫn breadcrumb có thể dẫn đến trang, thì trang đó có thể chỉ định đường dẫn breadcrumb sau:

Sách › Khoa học viễn tưởng › Sách đạt giải thưởng

JSON-LD

Dưới đây là ví dụ về mã JSON-LD hỗ trợ breadcrumb đó:


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

Dưới đây là ví dụ về mã RDFa hỗ trợ breadcrumb đó:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="3">
      </li>
    </ol>
  </body>
</html>

Vi dữ liệu

Dưới đây là ví dụ về Vi dữ liệu hỗ trợ breadcrumb đó:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

HTML

Dưới đây là ví dụ về đoạn breadcrumb HTML trong trang, là một phần của thiết kế hình ảnh.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Nhiều đường dẫn breadcrumb

Nếu có nhiều cách để chuyển đến một trang trên trang web của bạn, bạn có thể chỉ định nhiều đường dẫn breadcrumb cho một trang. Sau đây là một đường dẫn breadcrumb đến một trang về sách đạt giải thưởng:

Sách › Khoa học viễn tưởng › Sách đạt giải thưởng

Đây là một đường dẫn breadcrumb khác dẫn đến cùng trang đó:

Văn học › Sách đạt giải thưởng

JSON-LD

Dưới đây là ví dụ về đoạn mã JSON-LD hỗ trợ nhiều đường dẫn breadcrumb:


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    [{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Literature",
        "item": "https://example.com/literature"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Award Winners"
      }]
    }]
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

Dưới đây là ví dụ về đoạn mã RDFa hỗ trợ nhiều đường dẫn breadcrumb:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction/awardwinners">
          <span property="name">Award Winners</span></a>
        <meta property="position" content="3">
      </li>
    </ol>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/literature">
          <span property="name">Literature</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="2">
      </li>
    </ol>
  </body>
</html>

Vi dữ liệu

Dưới đây là ví dụ về Vi dữ liệu hỗ trợ nhiều đường dẫn breadcrumb:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
          <span itemprop="name">Award Winners</span></a>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/literature">
          <span itemprop="name">Literature</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award Winners</span>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
  </body>
</html>

HTML

Dưới đây là ví dụ về đoạn breadcrumb HTML trong trang, là một phần của thiết kế hình ảnh.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="https://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Nguyên tắc

Bạn phải tuân thủ những nguyên tắc này để đủ điều kiện xuất hiện kèm theo breadcrumb trong Google Tìm kiếm.

Bạn nên cung cấp những breadcrumb thể hiện một đường dẫn điển hình mà người dùng thường đi theo để truy cập một trang thay vì tham chiếu theo cấu trúc của URL. Bạn không bắt buộc phải thêm breadcrumb ListItem cho đường dẫn cấp cao nhất (miền hoặc tên máy chủ lưu trữ của trang web) cũng như cho chính trang đó.

Định nghĩa các kiểu dữ liệu có cấu trúc

Để chỉ định breadcrumb, hãy xác định một thuộc tính BreadcrumbList có chứa ít nhất 2 ListItems. Bạn phải thêm các thuộc tính bắt buộc để nội dung của bạn đủ điều kiện xuất hiện kèm theo breadcrumb.

BreadcrumbList là mục chứa mọi thành phần trong danh sách. Bạn có thể xem định nghĩa đầy đủ về BreadcrumbList tại schema.org/BreadcrumbList. Sau đây là các thuộc tính được Google hỗ trợ:

Thuộc tính bắt buộc
itemListElement

ListItem

Một mảng (array) breadcrumb được liệt kê theo một thứ tự cụ thể. Chỉ định từng breadcrumb bằng thuộc tính ListItem. Ví dụ:

{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  }]
}

ListItem

ListItem chứa thông tin chi tiết về một mục riêng lẻ trong danh sách. Bạn có thể xem định nghĩa đầy đủ về ListItem tại schema.org/ListItem. Sau đây là các thuộc tính được Google hỗ trợ:

Thuộc tính bắt buộc
item

URL hoặc loại phụ của Thing

URL đến trang web đại diện cho breadcrumb. Có hai cách để chỉ định item:

  • URL: Chỉ định URL của trang. Ví dụ: 
    "item": "https://example.com/books"
  • Thing: Sử dụng mã nhận dạng để chỉ định URL dựa trên định dạng mã đánh dấu bạn đang sử dụng:
    • JSON-LD: Sử dụng @id để chỉ định URL.
    • Vi dữ liệu: Bạn có thể sử dụng href hoặc itemid để chỉ định URL.
    • RDFa: Bạn có thể sử dụng about, href hoặc resource để chỉ định URL.

Nếu breadcrumb là mục cuối cùng trong đường dẫn breadcrumb, thì bạn không cần phải chỉ định item. Nếu item không được sử dụng cho mục cuối cùng, Google sẽ sử dụng URL của trang chứa.

name

Text

Tiêu đề của breadcrumb hiển thị cho người dùng. Nếu đang sử dụng Thing với name thay vì URL để chỉ định item, thì bạn không cần phải chỉ định name.
position

Integer

Vị trí của breadcrumb trong đường dẫn breadcrumb. Vị trí 1 biểu thị điểm bắt đầu của đường dẫn.

Theo dõi kết quả nhiều định dạng bằng Search Console

Search Console là công cụ giúp bạn theo dõi hiệu quả hoạt động của các trang web trong Google Tìm kiếm. Bạn không cần đăng ký sử dụng Search Console để đưa trang web vào Google Tìm kiếm, nhưng việc làm vậy có thể giúp bạn hiểu và cải thiện cách Google nhìn thấy trang web của bạn. Bạn nên kiểm tra Search Console trong những trường hợp sau:

  1. Sau lần đầu triển khai dữ liệu có cấu trúc
  2. Sau khi phát hành mẫu mới hoặc cập nhật mã của bạn
  3. Phân tích lưu lượng truy cập định kỳ

Sau lần đầu triển khai dữ liệu có cấu trúc

Sau khi Google lập chỉ mục các trang của bạn, hãy tìm vấn đề bằng cách sử dụng Báo cáo trạng thái kết quả nhiều định dạng có liên quan. Lý tưởng nhất là số mục hợp lệ tăng lên và số mục không hợp lệ không tăng. Nếu bạn tìm thấy vấn đề trong dữ liệu có cấu trúc:

  1. Sửa các mục không hợp lệ.
  2. Kiểm tra URL đang hoạt động để xem vấn đề còn tồn tại không.
  3. Yêu cầu xác thực bằng cách sử dụng báo cáo trạng thái.

Sau khi phát hành các mẫu mới hoặc cập nhật mã

Khi bạn thực hiện những thay đổi đáng kể trên trang web của mình, hãy theo dõi xem số lượng mục dữ liệu có cấu trúc không hợp lệ có tăng lên hay không.
  • Nếu bạn thấy số mục không hợp lệ gia tăng, thì có lẽ bạn đã triển khai một mẫu mới không hoạt động được hoặc trang web của bạn tương tác với mẫu hiện có theo cách mới và không hợp lệ.
  • Nếu bạn thấy số mục hợp lệ giảm (nhưng số mục không hợp lệ không tăng), thì có thể bạn không còn nhúng dữ liệu có cấu trúc trên các trang của mình nữa. Hãy sử dụng Công cụ kiểm tra URL để tìm hiểu nguyên nhân gây ra vấn đề.

Phân tích lưu lượng truy cập định kỳ

Phân tích lưu lượng truy cập bạn nhận được qua Google Tìm kiếm bằng cách sử dụng Báo cáo hiệu suất. Dữ liệu báo cáo sẽ cho bạn biết bạn tần suất trang web xuất hiện dưới dạng kết quả nhiều định dạng trong Tìm kiếm, tần suất người dùng nhấp vào trang và vị trí trung bình của trang trong kết quả tìm kiếm. Bạn cũng có thể tự động lấy các kết quả này bằng Search Console API.

Troubleshooting

If you're having trouble implementing or debugging structured data, here are some resources that may help you.

  • If you're using a content management system (CMS) or someone else is taking care of your site, ask them to help you. Make sure to forward any Search Console message that details the issue to them.
  • Google does not guarantee that features that consume structured data will show up in search results. For a list of common reasons why Google may not show your content in a rich result, see the General Structured Data Guidelines.
  • You might have an error in your structured data. Check the list of structured data errors and the Unparsable structured data report.
  • If you received a structured data manual action against your page, the structured data on the page will be ignored (although the page can still appear in Google Search results). To fix structured data issues, use the Manual Actions report.
  • Review the guidelines again to identify if your content isn't compliant with the guidelines. The problem can be caused by either spammy content or spammy markup usage. However, the issue may not be a syntax issue, and so the Rich Results Test won't be able to identify these issues.
  • Troubleshoot missing rich results / drop in total rich results.
  • Allow time for re-crawling and re-indexing. Remember that it may take several days after publishing a page for Google to find and crawl it. For general questions about crawling and indexing, check the Google Search crawling and indexing FAQ.
  • Post a question in the Google Search Central forum.