Trong thế giới tối ưu hóa công cụ tìm kiếm (SEO), dữ liệu có cấu trúc đóng vai trò vô cùng quan trọng trong việc cải thiện thứ hạng và trải nghiệm người dùng trên trang web. Một trong những loại dữ liệu có cấu trúc được sử dụng phổ biến là breadcrumb, giúp người dùng dễ dàng định hướng và hiểu được vị trí của họ trong hệ thống phân cấp trang web. Bài viết này sẽ cung cấp một hướng dẫn chi tiết về cách thêm và sử dụng dữ liệu có cấu trúc loại breadcrumb trên trang web của bạn.
Đường dẫn Breadcrumb trên một trang đóng vai trò xác định vị trí của trang trong hệ thống phân cấp nội dung của website, hỗ trợ người dùng dễ dàng nắm bắt và điều hướng trang web một cách hiệu quả. Người dùng có thể di chuyển qua từng cấp bậc trong hệ thống, bắt đầu từ liên kết Breadcrumb cuối cùng và lần lượt đi lên các cấp cao hơn trong cấu trúc trang web.
Lưu ý: Giao diện thực tế trong kết quả tìm kiếm có thể sẽ khác. Bạn có thể xem trước hầu hết các tính năng trong công cụ Kiểm tra kết quả nhiều định dạng.
Cách thêm dữ liệu có cấu trúc
Dữ liệu có cấu trúc là một định dạng tiêu chuẩn hóa được sử dụng để cung cấp thông tin chi tiết về một trang và phân loại nội dung trên trang đó. Nếu bạn mới làm quen với khái niệm dữ liệu có cấu trúc, hãy tìm hiểu thêm về cách thức hoạt động và tầm quan trọng của nó trong việc tối ưu hóa công cụ tìm kiếm (SEO).
Dưới đây là tổng quan về quy trình xây dựng, kiểm tra và triển khai dữ liệu có cấu trúc. Để có hướng dẫn chi tiết từng bước về cách thêm dữ liệu có cấu trúc vào trang web của bạn, hãy tham khảo các khóa học chuyên sâu về lập trình dữ liệu có cấu trúc.
- Đầu tiên, hãy thêm các thuộc tính bắt buộc. Tùy thuộc vào định dạng mà bạn đang sử dụng, xác định vị trí phù hợp để chèn dữ liệu có cấu trúc trên trang.
- Nếu bạn đang sử dụng hệ thống quản lý nội dung (CMS), việc sử dụng trình bổ trợ tích hợp trong CMS có thể giúp đơn giản hóa quy trình này.
- Nếu bạn đang làm việc với JavaScript, hãy tìm hiểu cách tạo dữ liệu có cấu trúc thông qua JavaScript.
- Luôn tuân thủ các nguyên tắc của Google để đảm bảo dữ liệu có cấu trúc của bạn đáp ứng yêu cầu.
- Sau khi hoàn tất, hãy xác thực mã của bạn bằng công cụ kiểm tra kết quả nhiều định dạng để khắc phục các lỗi nghiêm trọng. Bạn cũng nên xem xét sửa các vấn đề nhỏ mà công cụ này phát hiện, bởi việc này có thể cải thiện chất lượng của dữ liệu có cấu trúc, mặc dù không bắt buộc để nội dung của bạn đủ điều kiện xuất hiện dưới dạng kết quả nhiều định dạng.
- Triển khai thử nghiệm trên một vài trang chứa dữ liệu có cấu trúc và sử dụng công cụ kiểm tra URL để kiểm tra xem Google nhìn nhận trang của bạn như thế nào. Đảm bảo rằng Google có thể truy cập vào trang của bạn và rằng không có bất kỳ tệp robots.txt, thẻ noindex, hoặc yêu cầu đăng nhập nào cản trở việc này. Nếu không có vấn đề nào xuất hiện, bạn có thể yêu cầu Google thu thập lại dữ liệu các URL của mình.
- Lưu ý rằng quá trình thu thập dữ liệu và lập chỉ mục có thể mất vài ngày sau khi bạn xuất bản một trang.
- Để thông báo cho Google về các thay đổi sau này, bạn nên gửi một sơ đồ trang web. Quy trình này có thể được tự động hóa bằng Search Console Sitemap API.
Ví dụ
Google tìm kiếm sử dụng mã đánh dấu breadcrumb trong 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 nhiều loại cụm từ tìm kiếm khác nhau, như được minh họa trong các trường hợp sử dụng dưới đây. Mặc dù mỗi cụm từ tìm kiếm có thể dẫn đến 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 ancillaryjustice.html có thể hiển thị các đường dẫn breadcrumb khác nhau tùy thuộc vào ngữ cảnh tìm kiếm:
Một đường dẫn breadcrumb cụ thể
Một cụm từ tìm kiếm liên quan đến giải thưởng theo thể loại trong một năm cụ thể, ví dụ: “tiểu thuyết hay nhất giải thưởng tinh vân năm 2014”, có thể tạo thành đường dẫn breadcrumb sau:
Sách › Khoa học viễn tưởng › Sách đạt giải thưởng
Dưới đây là ví dụ về đoạn 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>
Dưới đây là ví dụ về đoạn 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>
Dưới đây là ví dụ về đoạn mã 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>
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 trang web của bạn có nhiều cách để dẫn đến cùng một trang, bạn có thể chỉ định nhiều đường dẫn breadcrumb cho trang đó. Dưới đây là một ví dụ về đường dẫn breadcrumb cho một trang liên quan đến 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 cũng dẫn đến cùng trang đó:
Văn học › Sách đạt giải thưởng
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>
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>
Dưới đây là ví dụ về đoạn mã 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>
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 cần tuân thủ các nguyên tắc này để đảm bảo đủ điều kiện xuất hiện cùng với breadcrumb trên Google tìm kiếm.
Cảnh báo: Nếu Google phát hiện mã đánh dấu trên các trang của bạn sử dụng các kỹ thuật không tuân theo nguyên tắc về dữ liệu có cấu trúc, trang web của bạn có thể bị áp dụng hình phạt thủ công.
- Nguyên tắc cơ bản của tìm kiếm
- Nguyên tắc chung về dữ liệu có cấu trúc
Bạn nên cung cấp các breadcrumb phản ánh đường dẫn điển hình mà người dùng thường theo dõi để truy cập một trang, thay vì tham chiếu theo cấu trúc của URL. Một số phần trong đường dẫn URL có thể không giúp người dùng hiểu rõ vị trí của trang đó trên website của bạn. Ví dụ: Trong URL https://example.com/pages/books/catcher_in_the_rye.html, cả phần pages và tên miền cấp cao nhất example.com đều không cung cấp thêm thông tin nào hữu ích cho người dùng.
Định nghĩa các loại dữ liệu có cấu trúc
Để chỉ định breadcrumb, bạn cần xác định một thuộc tính BreadcrumbList chứa ít nhất 2 ListItems. Bạn phải bổ sung 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.
Mã đánh dấu data-vocabulary.org không còn đủ điều kiện cho các tính năng của Google trong kết quả nhiều định dạng. Tìm hiểu thêm về việc ngừng hỗ trợ data-vocabulary.
BreadcrumbList
BreadcrumbList là thành phần chứa tất cả các phần tử trong một danh sách breadcrumb. Bạn có thể xem định nghĩa đầy đủ về BreadcrumbList tại schema.org/BreadcrumbList. Dưới đây là các thuộc tính mà Google hỗ trợ:
Thuộc tính bắt buộc
itemListElement
ListItem
Một mảng (array) breadcrumb được liệt kê theo thứ tự cụ thể. Mỗi breadcrumb phải được chỉ định 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 cụ thể trong danh sách. Bạn có thể xem định nghĩa đầy đủ về ListItem tại schema.org/ListItem. Dưới đây là các thuộc tính mà Google hỗ trợ:
Thuộc tính bắt buộc
item
URL hoặc loại phụ của Thing
URL trỏ đế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 ID để 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: Sử dụng href hoặc itemid để chỉ định URL.
- RDFa: 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, 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ẽ tự động 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 bạn đang sử dụng Thing với name thay vì URL để chỉ định item, thì không cần phải chỉ định name.
position
Integer
Vị trí của breadcrumb trong đường dẫn. 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ụ hỗ trợ bạn theo dõi hiệu suất của các trang web trong Google tìm kiếm. Bạn không cần phải đăng ký sử dụng search console để trang web của mình được xuất hiện trên Google tìm kiếm, nhưng việc sử dụng công cụ này sẽ giúp bạn hiểu rõ hơn và cải thiện cách Google nhìn nhận trang web của bạn. Bạn nên kiểm tra search console trong các trường hợp sau:
- Sau khi triển khai dữ liệu có cấu trúc lần đầu
- Sau khi phát hành mẫu mới hoặc cập nhật mã nguồn của trang
- Khi thực hiện phân tích lưu lượng truy cập định kỳ
Sau khi triển khai dữ liệu có cấu trúc lần đầu
Sau khi Google lập chỉ mục các trang của bạn, hãy kiểm tra báo cáo trạng thái kết quả nhiều định dạng để phát hiện vấn đề. Lý tưởng nhất là số lượng mục hợp lệ sẽ tăng lên và số mục không hợp lệ không tăng. Nếu bạn phát hiện vấn đề trong dữ liệu có cấu trúc, hãy thực hiện các bước sau:
- Sửa các mục không hợp lệ.
- Kiểm tra URL đang hoạt động để đảm bảo vấn đề đã được khắc phục.
- 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ã nguồn
Khi bạn thực hiện những thay đổi đáng kể trên trang web, 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ó gia tăng hay không. Nếu số mục không hợp lệ tăng, có thể bạn đã triển khai một mẫu mới không hoạt động đúng cách hoặc trang web tương tác với mẫu hiện có theo cách không hợp lệ. Nếu số mục hợp lệ giảm (nhưng số mục không hợp lệ không tăng), có thể dữ liệu có cấu trúc đã không còn được nhúng trên các trang của bạn. Sử dụng công cụ kiểm tra URL để xác định nguyên nhân gây ra vấn đề.
Cảnh báo: Đừng sử dụng các liên kết lưu trong bộ nhớ đệm để gỡ lỗi trên các trang. Thay vào đó, hãy sử dụng công cụ kiểm tra URL vì công cụ này cung cấp phiên bản mới nhất của các trang.
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 từ Google tìm kiếm bằng cách sử dụng báo cáo hiệu suất. Báo cáo này cung cấp thông tin về tần suất trang web của bạn 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 thông qua search console API.
Khắc phục sự cố
Nếu bạn gặp khó khăn khi triển khai hoặc gỡ lỗi dữ liệu có cấu trúc, bạn có thể tham khảo các tài nguyên trợ giúp sau:
- Nếu bạn đang sử dụng hệ thống quản lý nội dung (CMS) hoặc có người quản lý trang web của bạn, hãy yêu cầu họ hỗ trợ. Đừng quên chuyển tiếp mọi thông báo từ search console để họ hiểu rõ vấn đề.
- Google không đảm bảo rằng các tính năng sử dụng dữ liệu có cấu trúc sẽ xuất hiện trong kết quả tìm kiếm. Để biết danh sách các lý do phổ biến khiến Google không hiển thị nội dung của bạn trong kết quả nhiều định dạng, hãy xem Nguyên tắc chung về dữ liệu có cấu trúc.
- Có thể có lỗi trong dữ liệu có cấu trúc của bạn. Hãy xem danh sách các lỗi liên quan đến dữ liệu có cấu trúc.
- Nếu trang của bạn bị áp dụng biện pháp thủ công, dữ liệu có cấu trúc trên trang sẽ bị bỏ qua (mặc dù trang vẫn có thể xuất hiện trong các kết quả tìm kiếm của Google). Để khắc phục các vấn đề về dữ liệu có cấu trúc, hãy sử dụng báo cáo Biện pháp thủ công.
- Xem lại các nguyên tắc để xác định xem nội dung của bạn có tuân thủ đúng nguyên tắc hay không. Nguyên nhân gây lỗi có thể là do bạn sử dụng nội dung không hợp lệ hoặc thẻ đánh dấu không hợp lệ. Tuy nhiên, vấn đề không phải lúc nào cũng là lỗi cú pháp, và do đó, công cụ kiểm tra kết quả nhiều định dạng có thể không xác định được những vấn đề này.
- Khắc phục sự cố thiếu kết quả nhiều định dạng hoặc giảm tổng số kết quả nhiều định dạng
- Hãy dành thời gian cho Google thu thập dữ liệu và lập chỉ mục lại trang của bạn. Xin lưu ý rằng sau khi bạn xuất bản một trang, có thể mất vài ngày để Google tìm và thu thập dữ liệu trang đó. Đối với các câu hỏi chung về quá trình thu thập dữ liệu và lập chỉ mục, hãy tham khảo phần Câu hỏi thường gặp về việc thu thập dữ liệu và lập chỉ mục trên Google tìm kiếm.
- Nếu bạn vẫn gặp khó khăn, hãy đăng câu hỏi trong diễn đàn của Trung tâm Google tìm kiếm.
Breadcrumb không chỉ là một công cụ hữu ích cho người dùng mà còn là một yếu tố quan trọng trong chiến lược SEO. Bằng cách triển khai đúng cách và tuân thủ các nguyên tắc của Google, bạn có thể tối ưu hóa trang web của mình cho các kết quả tìm kiếm và cải thiện trải nghiệm người dùng. Hãy bắt đầu triển khai breadcrumb ngay hôm nay để nâng cao hiệu quả SEO của trang web của bạn.
