Thêm dữ liệu có cấu trúc BreadcrumbList trong bài viết

BreadcrumbList hiểu theo cách đơn giản nó cũng chỉ là đường dẫn Breadcrumb cho các nhãn trong bài viết mà khi googlebot theo dõi lập chỉ mục lên kết quả tìm kiếm đều như nhau, BreadcrumbList và Breadcrumb chỉ khác nhau do BreadcrumbList là danh sách được đánh số thứ tự từ 1,2,3...,n.

Khi chúng ta soạn bài viết có tùy chọn thêm các Nhãn cho đường dẫn bài viết nằm trong đường dẫn của nhãn đó. Khi một bài viết được thêm nhiều nhãn chúng ta sẽ có một danh sách nhãn được hiển thị từ trái qua phải theo ký tự của bảng chữ cái A,B,C,... ví dụ:

Trang chủ › Nhãn A › Nhãn B › Nhãn C...

=> Nhãn A là nhãn chính, Nhãn B là nhãn con của Nhãn A, Nhãn C là nhãn con của Nhãn B và cũng là con của Nhãn A.

Khi googlebot theo dõi lập chỉ mục cho bài viết nếu trong bài viết được thêm dữ liệu có cấu trúc Breadcrumb hoặc BreadcrumbList thì Google sẽ lập chỉ mục cho bài viết đó lên kết quả tìm kiếm như sau:

Url trang chủ › Nhãn A › Nhãn B › Nhãn C...

Nếu không tìm thấy dữ liệu có cấu trúc Google sẽ thay bằng url chính của bài viết.

Lợi ích khi thêm dữ liệu có cấu trúc Breadcrumb thứ nhất đường dẫn được sắp xếp gọn gàng, thứ hai khi người tìm kiếm họ sẽ biết bài viết đó thuộc chuyên mục mục nào do đó tăng khả năng nhấp chuột vào đường dẫn.

Trở lại với bài viết nếu như bạn đã thêm dữ liệu có cấu trúc Breadcrumb và đã được lập chỉ mục lên kết quả tìm kiếm thì không nhất thiết phải thêm dữ liệu có cấu trúc BreadcrumbList vì chúng là như nhau. Dưới đây là cách thêm dữ liệu có cấu trúc BreadcrumbList như sau:

Trong thẻ tag <b:includable id='breadcrumb' var='posts'>...</b:includable> mở rộng dấu ... ra chúng ta sẽ có đoạn <b:if cond='data:view.isPost'> điều kiện trong bài viết, bây giờ mình sẽ phân tích rõ ràng để các bạn hiểu:

Copy

<b:if cond='data:view.isPost'> // Điều kiện trong bài viết

<b:loop values='data:posts' var='post'> // Vòng lặp bài viết bắt buộc

<div class='breadcrumbs'> // thêm class định hình không bắt buộc

// Dữ liệu BreadcrumbList trong này

</div>

</b:loop>

</b:if>

Ta có:

Copy

<b:if cond='data:view.isPost'>

<b:loop values='data:posts' var='post'>

  <div class='breadcrumbs'>

    <ul typeof='BreadcrumbList' vocab='http://schema.org/'> // dữ liệu có cấu trúc BreadcrumbList

      <li property='itemListElement' typeof='ListItem'> // liên kết đến trang chủ Blog

        <a expr:href='data:blog.homepageUrl' expr:title='data:messages.home' property='item' typeof='WebPage'><span property='name'><data:messages.home/></span></a>

        <meta content='1' property='position'/> // danh sách bắt đầu bằng 1

      </li>                    

      <b:loop index='item' values='data:post.labels' var='label'> // vòng lặp Nhãn lấy giá trị bằng item

        <b:if cond='data:label.isLast != &quot;true&quot;'> › </b:if> // thêm ký tự giữa tên các Nhãn

        <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> // tên nhãn

          <b:if cond='data:label.isLast != &quot;true&quot;'><meta expr:content='data:item + 2' property='position'/></b:if> danh sách bắt đầu bằng 2

        </li> 

      </b:loop>

    </ul>

  </div>

</b:loop>

</b:if>

Hình minh họa:

Kiểm tra dữ liệu có cấu trúc theo đường dẫn https://search.google.com/structured-data/testing-tool/u/0/

Như vậy mình đã vừa hướng dẫn cách thêm dữ liệu có cấu trúc BreadcrumbList trong bài viết mà mình đã đề cập trong bài viết nếu bạn kiểm tra bài viết đã có dữ liệu có cấu trúc Breadcrumb và đã được lập chỉ mục trên kết quả tìm kiếm rồi thì không nhất thiết phải thêm dữ liệu có cấu trúc BreadcrumbList. Chấm hết bài!!!

Nội dung chính