KaQiita

新米社会人が適当なことを書いてます。温かく見守ってやってください。

【Rails】schema.org を使用したパンくずの構造化データを Rails で作る

はじめに

Rails でパンくずを作るとき、とても便利な gretel という Gem があります。

簡単にパンくずリストを作成できる上に、semantic: true と書き足すだけで構造化データまで作ってくれるため、簡単にSEO 対策まで行うことができます。

しかし、作成される構造化データが data-vocabulary.org で、google が推奨している schema.org ではありません。

そのため google が推奨する方法で構造化データを作る場合、gretel のオプション機能だけでは作れません。

パンくずの構造化データの作り方を解説した記事は多いですが、Rails に特化していてかつ分かりやすい記事は見つけられず、初めて作るときに少し苦戦したので、ここにまとめておきます。

なお、以下では gretel を使ってパンくずリストを実装していることを仮定します。

Rails でのパンくずの構造化データを JSON-LD で作る

まずはパンくずを表示させている view に以下のように記述します。

<%= render partial: 'breadcrumbs_json_ld', breadcrumbs: breadcrumbs %>

つまり _breadcrumbs_json_ld.html.erb という partial に breadcrumbs を渡します。

上記の記述は application.html.erb などの layout ファイルに書いておくと、いちいち全ての view に上記のコードを書く必要がなくなるかと思います。

記述は HTML ファイル内のどこでも可能ですが、パフォーマンスの面から body 閉じタグの直前に記述すると良いです。

次に _breadcrumbs_json_ld.html.erb の中身ですが、たとえば以下のように書くと構造化データをマークアップできます。

<script type="application/ld+json">
  {
 <% breadcrumbs.tap do |links| %>
   <% if links.any? %>
   "@context": "http://schema.org",
   "@type": "BreadcrumbList",
   "itemListElement": [
     <% links.each_with_index do |link, i| %>
     {
       "@type": "ListItem",
       "position": "<%= i + 1 %>",
       "item": {
         "@id": "https://example.jp<%= link.url %>",
         "name": "<%= link.text %>"
       }
       <% if i == links.length - 1 %>
     }
       <% else %>
     },
       <% end %>
     <% end %>
   ]
   <% end %>
 <% end %>
 }
 </script>

partial に切らずに直接 script タグを書き込んでもマークアップできますが、見にくくなるのでパーシャルに切ると良いと思います。

正しく構造化データが作成されているかテストする

では本当に正しく構造化データが作成されているのか確認してみましょう。

構造化データテストツールを使うことですぐにテストすることができます。

使い方も簡単で、アクセスしたらすぐに現れる下記のようなポップアップにテストしたいページの URL を記述するだけです。

f:id:KakkiiiiKyg:20190930204354p:plain

正しく構造化データが作成されていれば下記のように BreadcrumbList というアイテムが表示されるかと思います。

f:id:KakkiiiiKyg:20190930204558p:plain

終わりに

以上が Rails での schema.org を使用したパンくずの構造化データの作り方でした。

_breadcrumbs_json_ld.html.erb の中身はもう少し上手く書けそうな気がしていたり、インデントが気持ち悪かったりするので、より良い書き方分かる方いらっしゃいましたら、ご教示いただけると嬉しいです!