Đường dẫn breadcrumb là một yếu tố kiểm soát đồ họa thường được sử dụng như một trợ giúp điều hướng trong giao diện người dùng và trên các trang web. Nó cho phép người dùng theo dõi và duy trì nhận thức về vị trí của họ trong các chương trình, tài liệu hoặc trang web.
Đườ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. Một người dùng có thể di chuyển lên cấp trên cùng trong hệ thống phân cấp trang web, mỗi lần một cấp, bằng cách bắt đầu từ breadcrumb cuối cùng trong đường dẫn đó.
Kể từ ngày 6 tháng 4 năm 2020, thẻ đánh dấu data-vocabulary.org sẽ không còn đủ điều kiện cho tính năng breadcrumb trong Google Tìm kiếm. Để đủ điều kiện sau ngày 6 tháng 4 năm 2020, bạn cần thay thế thẻ đánh dấu data-vocabulary.org bằng thẻ đánh dấu schema.org. Hãy tìm hiểu thêm về việc ngừng hỗ trợ đối với data-vocabulary.
Trích dẫn Google
Google Tìm kiếm sử dụng thẻ đá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 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 nội dung 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 truy vấn trên Google Tìm kiếm.
 |
| Đường dẫn breadcrumb trên Google tìm kiếm |
Hướng dẫn thêm dữ liệu có cấu trúc Breadcrumb trong bài viết
Sử dụng một trong ba mã dưới đây đều hỗ trợ breadcrumb trên các trang tìm kiếm, chèn trong tiện ích Bài đăng trên blog, widget Blog1
Mã JSON-LD
<b:if cond='data:view.isPost'>
<script type='application/ld+json'>
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{<b:with value='data:post.labels' var='filter'><b:loop index='i' values='data:filter' var='label'>
"@type": "ListItem",
"position": <b:eval expr='data:i + 1'/>,
"name": "<data:label.name/>",
"item": "<data:label.url/>"
<b:if cond='data:filter.size neq data:i + 1'>},{</b:if></b:loop></b:with>}]
}
</script>
</b:if>
Mã RDFa
<b:if cond='data:view.isPost'>
<b:loop values='data:posts' var='post'>
<ol class='breadcrumbs' vocab='https://schema.org/' typeof='BreadcrumbList'>
<li>
<a expr:href='data:blog.homepageUrl' expr:title='data:messages.home'><span><data:messages.home/></span></a>
</li>
<b:loop index='i' values='data:post.labels' var='label'>
<li property='itemListElement' typeof='ListItem'>
<a expr:href='data:label.url' expr:title='data:label.name' property='item' typeof='WebPage'><span property='name'><data:label.name/></span></a>
<meta expr:content='data:i + 1' property='position'/>
</li>
</b:loop>
</ol>
</b:loop>
</b:if>
Mã Microdata
<b:if cond='data:view.isPost'>
<b:loop values='data:posts' var='post'>
<ol class='breadcrumbs' itemscope='' itemtype='https://schema.org/BreadcrumbList'>
<li>
<a expr:href='data:blog.homepageUrl' expr:title='data:messages.home'><span><data:messages.home/></span></a>
</li>
<b:loop index='i' values='data:post.labels' var='label'>
<li itemprop='itemListElement' itemscope='' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url' expr:title='data:label.name' itemprop='item'><span itemprop='name'><data:label.name/></span></a>
<meta expr:content='data:i + 1' itemprop='position'/>
</li>
</b:loop>
</ol>
</b:loop>
</b:if>
Lưu ý với hai mã RDFa và Microdata mình bỏ dữ liệu có cấu trúc breadcrumb cho liên kết trang chủ vì Google cập nhật luôn cả trang chủ trên tìm kiếm nên có thể bỏ đi. Sau khi đã thêm dữ liệu có cấu trúc Breadcrumb trong bài viết, kiểm tra đường dẫn URL bài viết bằng công cụ kiểm tra dữ liệu có cấu trúc của Google.
Bài viết có sử dụng nguồn của Google. Xem bài viết gốc
