Triển khai cấu trúc Breadcrumbs JSON Markup cho trang bài viết Blogger

Breadcrumbs là 1 thành phần rất quan trọng với website nói chung và blog nói riêng, triển khai đúng cấu trúc breadcrumbs khi được index lên Google sẽ giúp kết quả tìm kiếm trang của bạn được mạch lạc rõ ràng, chuyên nghiệp và tăng tỉ lệ click.

Đại đa số các bài viết triển khai Breadcrumbs hiện nay chỉ đề cập đến đánh dấu dạng microdata bằng việc thêm các thuộc tính vào tag HTML để google nhận diện thứ tự đường dẫn, cách đó không có gì sai tuy nhiên nhìn mã rất rối.

Hiện nay thì google đã giới thiệu thêm một phương thức đánh dấu Breadcrumbs bằng json rất gọn gàng chuyên nghiệp dễ hiểu. Bạn quan tâm có thể tìm hiểu tại đây https://developers.google.com/search/docs/data-types/breadcrumb

Áp dụng cho nền tảng blogspot, ngoài cấu trúc json bạn cần nắm bắt một số thẻ xml để có thể lặp qua các label (với bài có nhiều label) cùng với các toán tử cộng để điều chỉnh thứ tự item cụ thể sẽ được trình bày trong bài viết này

Việc làm đầu tiên đó là tìm và xóa toàn bộ dữ liệu liên quan đến Breadcrumbs cũ (chuyển đến tiện ích Blog1), thường thì sẽ là 1 thẻ b:includable và 1 thẻ gọi b:include

Tiếp theo ta đăng kí mới một thẻ b:includable với nội dung như sau

<b:includable id='postBreadcrumbs' var='post'>
<script type='application/ld+json'>
{
  &quot;@context&quot;: &quot;http://schema.org&quot;,
  &quot;@type&quot;: &quot;BreadcrumbList&quot;,
  &quot;itemListElement&quot;: [{
    &quot;@type&quot;: &quot;ListItem&quot;,
    &quot;position&quot;: 1,
    &quot;item&quot;: {
      &quot;name&quot;: &quot;<data:messages.home/>&quot;,
      &quot;@id&quot;: &quot;<data:blog.homepageUrl.jsonEscaped/>&quot;
    }
  }<b:loop index='i' values='data:post.labels' var='label'>,{
    &quot;@type&quot;: &quot;ListItem&quot;,
    &quot;position&quot;: <b:eval expr='data:i + 2'/>,
    &quot;item&quot;: {
      &quot;name&quot;: &quot;<data:label.name.jsonEscaped/>&quot;,
      &quot;@id&quot;: &quot;<data:label.url.jsonEscaped/>&quot;
    }
  }</b:loop>,{
    &quot;@type&quot;: &quot;ListItem&quot;,
    &quot;position&quot;: <b:eval expr='data:post.labels.length + 2'/>,
    &quot;item&quot;: {
      &quot;name&quot;: &quot;<data:post.title.jsonEscaped/>&quot;,
      &quot;@id&quot;: &quot;<data:post.url.jsonEscaped/>&quot;
    }
  }]
}
</script>
</b:includable>

Hơi khó hiểu ở chỗ vòng lặp nhỉ nhưng thôi bạn chẳng cần quan tâm làm gì 😋

Cuối cùng ta sẽ gọi nó ra để sử dụng bạn dán code sau vào bên dưới thẻ <b:includable id='main' var='this'> hoặc <b:includable id='main'>

<b:include cond='data:view.isPost' data='post' name='postBreadcrumbs'/>

Sau đó lưu mẫu lại vào 1 trang bài viết bất kì để kiếm tra (view-sources xem cấu trúc file json) bằng cách dán mã vào trang https://search.google.com/structured-data/testing-tool?hl=vi

Lưu ý nếu bạn vẫn muốn hiển thị breadcrumbs dạng mã HTML ra ngoài giao diện cho người dùng thấy thì hãy thêm lại code cũ nhưng phải loại bỏ các thuộc tính như xmlns:v='http://rdf.data-vocabulary.org/#', typeof='v:Breadcrumb', property='v:title', rel='v:url' để không bị xung đột/thừa thãi với cấu trúc khai báo json trên

Chúc bạn thành công !