Công cụ tạo breadcrumb schema và HTML
Tạo dữ liệu có cấu trúc BreadcrumbList và HTML breadcrumb dễ tiếp cận (nav, ol, aria-current) từ danh sách tên trang và URL. JSON-LD sẵn sàng để sao chép.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Blog",
"item": "https://example.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Cold Brew Guide",
"item": "https://example.com/blog/cold-brew"
}
]
}
</script><nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav>Tạo breadcrumb là gì?
Công cụ này biến danh sách các mục breadcrumb (tên + URL, từ trang chủ xuống trang hiện tại) thành hai đầu ra: JSON-LD BreadcrumbList theo schema.org cho công cụ tìm kiếm và markup HTML dễ tiếp cận cho người truy cập.
Cách sử dụng Tạo breadcrumb
- Sửa các mục: mỗi cấp một dòng gồm tên và URL tuyệt đối.
- Thêm hoặc xóa dòng; dòng cuối là trang hiện tại và có thể không có URL.
- Đặt aria-label của phần tử điều hướng theo ngôn ngữ của website bạn.
- Sao chép khối JSON-LD và HTML vào trang.
Ví dụ
Home → Blog → Cold Brew Guide
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav> Khi nào nên dùng Tạo breadcrumb
Dùng công cụ cho những trang có hiển thị đường dẫn breadcrumb, đặc biệt trong cấu trúc website nhiều tầng như cửa hàng hay tài liệu. Dữ liệu có cấu trúc nên khớp với breadcrumb hiển thị trên trang. Hãy tạo kiểu cho ký tự phân cách bằng CSS thay vì thêm ký tự vào markup.
Tạo breadcrumb hoạt động như thế nào
Mỗi dòng không trống trở thành một ListItem với vị trí đánh số từ 1, tên và URL item (bỏ qua khi trống). HTML là một <nav aria-label> chứa danh sách có thứ tự; các mục phía trước là liên kết và mục cuối được gắn aria-current="page", theo mẫu breadcrumb của WAI-ARIA. Tên và URL được thoát ký tự HTML; URL tương đối sẽ kích hoạt cảnh báo vì dữ liệu có cấu trúc nên dùng URL tuyệt đối.
Các Trường Hợp Sử Dụng Phổ Biến
- Thêm rich results breadcrumb cho trang danh mục và trang sản phẩm.
- Tạo HTML breadcrumb dễ tiếp cận cho một website tài liệu.
- Thay breadcrumb dùng ký tự phân cách dạng văn bản bằng markup có ngữ nghĩa.
- Tạo markup cho website tĩnh không có plugin breadcrumb.
Câu Hỏi Thường Gặp
Mục cuối có cần URL không?
Không. Google cho phép trang hiện tại bỏ qua item; nếu bạn nhập URL thì nó vẫn được đưa vào.
Markup breadcrumb có đảm bảo hiển thị breadcrumb trên kết quả tìm kiếm không?
Không. Nó giúp công cụ tìm kiếm hiểu cấu trúc website và khiến kết quả đủ điều kiện hiển thị đường dẫn kiểu breadcrumb, nhưng Google quyết định hiển thị gì.
Một trang có thể có nhiều đường breadcrumb không?
Có, hãy thêm một BreadcrumbList cho mỗi đường nếu trang truy cập được qua nhiều lối.