Hướng dẫn cài đặt cấu trúc dữ liệu BreadcrumbList cho blogspot

Breadcrumb (Tập hợp liên kết phân cấp), đườ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, và có thể giúp người dùng hiểu và khám phá trang web một cách hiệu quả.

Blog nào chưa có thì có thể áp dụng 2 cách bên dưới, blog nào đã có rồi thì có thể bỏ qua bài viết này.

Link tham khảo: https://developers.google.com/search/docs/data-types/breadcrumb?hl=vi

Ví dụ đường dẫn Breadcrumb

Trang chủ / Thủ thuật / Hướng dẫn cài đặt cấu trúc dữ liệu BreadcrumbList cho blogspot

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 đó.

Cách thêm cấu trúc dữ liệu đường dẫn Breadcrumb cho blogspot thì mình sẽ làm theo 2 cách như sau:

1. Sử dụng mã JSON-LD

Các bạn copy đoạn mã sau dán dưới đường dẫn Breadcrumb trong blog của các bạn, mỗi blog sẽ có cấu trúc html khác nhau nên các bạn xem hình bên dưới cho dễ hiểu.

Các bạn mở bài viết lên sau đó nhấn chuột phải vô cái đường dẫn Breadcrumb để kiểm tra class hoặc id của nó sau đó tìm trong html và dán code JSON-LD vô dưới hoặc trên nó đều được.

Như trong hình của mình thì mình sẽ tìm <nav id = "breadcrumb"> đúng vị trí như hình trong blog của mình và dán code JSON-LD dưới nó

Code JSON-LD áp dụng cho Bài viết và Trang (Áp dụng cho Blog phiên bản mới)

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

         <script type='application/ld+json'>

             {

                 "@context": "http://schema.org",

                 "@type": "BreadcrumbList",

                 "itemListElement": [{

                     "@type": "ListItem",

                     "position": 1,

                     "name": "<data:messages.home/>",

                     "item": "<data:blog.homepageUrl.canonical/>"

                 }, {

                     "@type": "ListItem",

                     "position": 2,

                     "name": "<b:if cond='data:post.labels'><data:post.labels.first.name/></b:if>",

                     "item": "<data:post.labels.first.url.canonical/>"

                 }, {

                     "@type": "ListItem",

                     "position": 3,

                     "name": "<data:post.title/>",

                     "item": "<data:post.url.canonical/>"

                 }]

             }

         </script>

     </b:if>

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

         <script type='application/ld+json'>

             {

                 "@context": "http://schema.org",

                 "@type": "BreadcrumbList",

                 "itemListElement": [{

                     "@type": "ListItem",

                     "position": 1,

                     "name": "<data:messages.home/>",

                     "item": "<data:blog.homepageUrl.canonical/>"

                 }, {

                     "@type": "ListItem",

                     "position": 2,

                     "name": "<data:post.title/>",

                     "item": "<data:post.url.canonical/>"

                 }]

             }

         </script>

     </b:if>

Sau đó các bạn lưu lại và truy cập trang Công cụ kiểm tra cấu trúc dữ liệu check xem có lỗi hay không.

2. Viết trực tiếp lên HTML

Các bạn cũng tìm chỗ đường dẫn Breadcrumb bên trên và sửa như sau (ở đây là tham khảo mẫu bên dưới, để áp dụng vô blog của các bạn)

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

    <ul class='breadcrumb' itemscope='' itemtype='http://schema.org/BreadcrumbList'>

        <li class='home' itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>

            <a expr:href='data:blog.homepageUrl' itemprop='item'>

                <span itemprop='name'>

                    <data:messages.home />

                </span>

            </a>

            <meta content='1' itemprop='position' />

        </li>

        <li itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>

            <strong><a itemprop='item'><span itemprop='name'>

                        <data:blog.pageName /></span></a></strong>

            <meta content='2' itemprop='position' />

        </li>

    </ul>

    <b:else />

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

        <ul class='breadcrumb' itemscope='' itemtype='http://schema.org/BreadcrumbList'>

            <li class='home' itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>

                <a expr:href='data:blog.homepageUrl' itemprop='item'><span itemprop='name'>

                        <data:messages.home /></span></a>

                <meta content='1' itemprop='position' />

            </li>

            <b:if cond='data:post.labels.last.name'>

                <li itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>

                    <b:if cond='data:post.labels'>

                        <a class='changeurl' expr:href='data:post.labels.last.url' itemprop='item'>

                            <span itemprop='name'>

                                <data:post.labels.last.name /></span>

                        </a>

                    </b:if>

                    <meta content='2' itemprop='position' />

                </li>

            </b:if>

            <li itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>

                <strong><a itemprop='item'><span itemprop='name'>

                            <data:blog.pageName /></span></a></strong>

                <meta content='3' itemprop='position' />

            </li>

        </ul>

    </b:if>

</b:if>

Danh sách list Label (Nhãn) của blog được sắp xếp theo bảng chữ cái:

- Để lấy Label đầu tiên dùng: <data:post.labels.first.name/>
- Để lấy Label cuống cùng dùng: <data:post.labels.last.name/>

Lưu ý là mỗi blog sẽ có các class, div, id, html khác nhau nên bài viết trên mình chỉ hướng dẫn cách tạo, với cách thứ 2 thì lại phụ thuộc vô trình độ HTML, CSS của các bạn để có thể hoàn chỉnh CSS cho nó.

Trên đây là hướng dẫn các bạn tạo Cấu trúc dữ liệu chuẩn Breadcrumb cho blogspot