Breadcrumbs là gì ?
BreadCrumbList được hiểu nôm là đường dẫn trên trang cho biết của trang trong hệ thống phân cấp trang web, bạn có thể điều hướng tất cả con đường phân cấp , bằng cách bắt đầu cuối cùng trong đường dẫn.
Hình Minh Họa
Trường hợp sử dụng
Google Tìm kiếm sử dụng đánh dấu đường dẫn trong phần nội dung của trang web để phân loại thông tin từ trang trong kết quả tìm kiếm.
Thông thường, như được minh họa trong các trường hợp sử dụng sau, người dùng có thể đến một trang từ các loại truy vấn tìm kiếm rất khác nhau. Mặc dù mỗi tìm kiếm có thể trả lại cùng một trang web, đường dẫn phân loại nội dung trong ngữ cảnh của truy vấn Tìm kiếm của Google.
Thông thường, như được minh họa trong các trường hợp sử dụng sau, người dùng có thể đến một trang từ các loại truy vấn tìm kiếm rất khác nhau. Mặc dù mỗi tìm kiếm có thể trả lại cùng một trang web, đường dẫn phân loại nội dung trong ngữ cảnh của truy vấn Tìm kiếm của Google.
Ví dụ 1 : truy vấn tìm kiếm tiêu đề sách
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/books",
"name": "Books",
"image": "http://example.com/images/icon-book.png"
}
},{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/books/authors",
"name": "Authors",
"image": "http://example.com/images/icon-author.png"
}
},{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://example.com/books/authors/annleckie",
"name": "Ann Leckie",
"image": "http://example.com/images/author-leckie-ann.png"
}
},{
"@type": "ListItem",
"position": 4,
"item": {
"@id": "https://example.com/books/authors/ancillaryjustice",
"name": "Ancillary Justice",
"image": "http://example.com/images/cover-ancillary-justice.png"
}
}]
}
</script>
Ví dụ 2 : truy vấn tìm kiếm trong 1 năm
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/books">
<span itemprop="name">Books</span>
<img itemprop="image" src="http://example.com/images/icon-bookicon.png" alt="Books"/></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/books/sciencefiction">
<span itemprop="name">Science Fiction</span>
<img itemprop="image" src="http://example.com/images/icon-science-fiction.png" alt="Genre: Science Fiction"/></a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/books/sciencefiction/ancillaryjustice">
<span itemprop="name">Ancillary Justice</span>
<img itemprop="image" src="http://example.com/images/cover-ancillary-justice.png" alt="Ancillary Justice"/></a>
<meta itemprop="position" content="3" />
</li>
</ol>
Ví dụ 3 : đánh dấu nhiều đường dẫn
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/books">
<span itemprop="name">Books</span>
<img itemprop="image" src="http://example.com/images/icon-bookicon.png" alt="Books"/></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/books/sciencefiction">
<span itemprop="name">Science Fiction</span>
<img itemprop="image" src="http://example.com/images/icon-science-fiction.png" alt="Genre: Science Fiction"/></a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
<span itemprop="name">Award Winners</span>
<img itemprop="image" src="http://example.com/images/icon-award.png" alt="2014 Award Winner"/></a>
<meta itemprop="position" content="3" />
</li>
</ol>
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/literature">
<span itemprop="name">Literature</span>
<img itemprop="image" src="http://example.com/images/icon-literature.png" alt="Literature"/></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/literature/speculativefiction">
<span itemprop="name">Speculative Fiction</span>
<img itemprop="image" src="http://example.com/images/icon-speculative-fiction.png" alt="Genre: Speculative Fiction"/></a>
<meta itemprop="position" content="2" />
</li>
</ol>
Chú ý
Các bạn thay những url example.com thành url site các bạn nhé , trong trường hợp sử dụng bạn có thể chạy trước thông qua Công Cụ Dữ liệu Cấu Trúc để chạy kiểm tra và sử dụng nhé . theo mình khuyến khích thì nên dùng đánh dấu dữ liệu json-ld ở đoạn JavaScript bên trên
Hình minh Họa
Lời kết
Chúc các bạn thành công nhé , hãy share để ủng hộ blog mình ngày càng phát triển thêm nhé code : Google develop
