【Rails】パンくずリストを作るbreadcrumbs_on_railsを使って構造化データ対応する

Ruby on Railsで「パンくずリスト」を簡単に実現してくれるGembreadcrumbs_on_railsを使って「構造化データ」を実現する方法を紹介します。

構造化データとは！？

構造化データとはGoogle公式の情報の記載を引用します。

Google 検索では、ページのコンテンツを理解するよう取り組んでいます。ページに構造化データを含めて、ページの内容についての明白な判断材料を提供すると、Google でそのページをより正確に理解できるようになります。構造化データとは、ページに関する情報を提供し、ページコンテンツ（たとえばレシピのページでは、材料、加熱時間と加熱温度、カロリーなど）を分類するための標準化されたデータ形式です。

そのままですが、ページ情報を正しくGoogleに伝えるための仕組みです。

すごく多くの種類があるのですが、例えば以下のようなものです。

記事
書籍
パンくずリスト
カルーセル
イベント
ライブ配信

今回は、この中の「パンくずリスト」を表示させるためにどうすれば良いか！？をRails使って実現したいと思います。

f:id:opiyotan:20191012032019p:plain — パンくずリストのGoogle表示例

各種類のイメージや使い方はこちらから参照してください。 https://developers.google.com/search/docs/guides/search-gallery?hl=ja

breadcrumbs_on_railsの使い方

Gem breadcrumbs_on_railsの使い方は以下の記事でまとめてありますので、こちらを参照してください。

opiyotan.hatenablog.com

実装方法

パンくずリストの構造化データを実現するには以下のような記載が必要です。

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <!-- Method 1 (preferred) -->
    <a itemprop="item" href="https://example.com/books">
        <span itemprop="name">Books</span></a>
    <meta itemprop="position" content="1" />
  </li>
<ol>

見慣れないプロパティがありますが、これが構造化データですよ！と伝える為の記述になります。

詳細な内容は、こちらのGoogle公式のページに記載されているのでチェックして見てください。

https://developers.google.com/search/docs/data-types/breadcrumb?hl=ja

今回は、これをrails x gem breadcrumbs_on_railsを使って実現していきます。

Viewの記述

# haml
.breadcrumbs{itemscope: '', itemtype: 'http://schema.org/BreadcrumbList'}
  %ul
    - @breadcrumbs.each.with_index(1) do |breadcrumb, i|
      %li{itemprop: 'itemListElement', itemscope: '', itemtype: 'http://schema.org/ListItem'}
        - if breadcrumb.path.present?
          %a{href: breadcrumb.path, itemprop: 'item'}
            %span{:itemprop => 'name'}= breadcrumb.name
          %meta{:itemprop => 'position', content: i}
        - else
          %span{:itemprop => 'name'}= breadcrumb.name
          %meta{:itemprop => 'position', content: i}

↓

# html
<div class="breadcrumbs" itemscope="" itemtype="http://schema.org/BreadcrumbList">
  <ul>
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
      <a href="root_url" itemprop="item">
          <span itemprop="name">HOME</span>
      </a>
      <meta content="1" itemprop="position">
    </li>
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
      <span itemprop="name">登録ユーザーの一覧</span>
      <meta content="2" itemprop="position">
    </li>
  </ul>
</div>

構造化データが正しく実装できているかは、構造化データテストツールから確認できます！

失敗しているとエラーでお知らせしてくれます。

おぴよの気まぐれ日記

岡山やプログラミング、ファッションのこと、子育てや人生、生き方についての備忘録。

【Rails】パンくずリストを作るbreadcrumbs_on_railsを使って構造化データ対応する

構造化データとは！？

breadcrumbs_on_railsの使い方

実装方法

Viewの記述