CÁCH TẠO BREADCRUMBLIST CHO WEBSITE | Duy Kiên Blogger





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. 

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 
  • Cảm Ơn Bạn Đã Ghé Thăm Duy Kiên Blogger !
  • Mọi thứ trên website đều là miễn phí.Được Leech Từ Nhiều Nguồn , Nếu Có Vấn Đề Bản Quyền Hãy Liên Hệ Với Chúng Tôi!
  • Tuyệt đối không click spam (click tặc quảng cáo). Hãy là một người sử dụng internet thông minh và có văn hóa! Xin cảm ơn.
CÓ THỂ BẠN ĐANG TÌM