Cấu trúc dữ liệu Schema BreadcrumbList

Đườ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ả. 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 breadcrumb đó.


Cấu trúc dữ liệu BreadcrumbList

Để thêm cấu trúc dữ liệu BreadcrumbList cho blogspot thì chúng ta có thể làm như sau:

Sử dụng mã JSON-LD để thiết lập breadcrumb.

Các bạn copy đoạn mã JSON-LD bên dưới sau đó vào template chỉnh sửa HTML nhấn CTRL F tìm thẻ <b:includable id='postCommentsAndAd' var='post'> nó có một vị trí duy nhất và dán đoạn mã ngay dưới nó.



<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>


Cách khác nếu không dùng mã JSON-LD bạn cũng có thể viết trực tiếp lên HTML như dưới, các bạn có thể tham khảo



<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>


Sau khi thêm dữ liệu xong thì các bạn vào trang kiểm tra cấu trúc có dữ liệu để test.

Như vậy là mình đã hướng dẫn cài đặt Cấu trúc dữ liệu Schema BreadcrumbList cho blogspot chuẩn seo mới nhất 2020 dành cho các Seoer hiện nay trên nền tảng Blogger của Google.

Nhận xét

×