LoginSignup
1
0

More than 3 years have passed since last update.

[Rails][data-vocabulary.org スキーマのサポートは終了します。]gem Gretelをschema.orgに対応させる方法。

Posted at

data-vocabulary.org スキーマのサポートは終了します。

スクリーンショット 2020-03-10 11.47.24.png

2020年4月6日からGoogleで「data-vocabulary.org」を利用した構造化データがリッチリザルトとしてサポートされなくなるので、引き続きリッチリザルトを利用したい場合は「schema.org」を利用した構造化データに移行する必要があります。

パンくずリスト  |  Google 検索デベロッパー ガイド  |  Google Developers
https://developers.google.com/search/docs/data-types/breadcrumb?hl=ja

Gem Gretelとは

Gretel( https://rubygems.org/gems/gretel/versions/3.0.7 )は設定ファイルを書くことで、簡単にパンクズリストを出力することができるようになるGemです。
パンクズの出力のオプションでsemantic: trueをつけることによりリッチリザルトにも対応していました(data-vocabulary.org)。

しかし、このGemはメンテナンスが長いこと止まっており、Googleの「schema.org」を利用するにはパッチを当てる必要がります。
自分で検索した所同じような対応をしている人が散見されたので、僕の方法を示して行こうと思います。

※ 本来は別のGemなどに移行することをオススメしますが、昔から使っている人がお手軽に対応できる方法を本記事にしています。

モンキーパッチを当てる

Gretel Gemを使っているRailsプロジェクトで config/initializers/gretel.rb を作成して

ruby
# frozen_string_literal: true

module Gretel
  module ViewHelpers
    delegate :breadcrumbs_json_ld, to: :gretel_renderer
  end

  class Renderer
    # rubocop:disable Rails/OutputSafety
    def breadcrumbs_json_ld
      {
        "@context": 'http://schema.org/',
        "@type": 'BreadcrumbList',
        "itemListElement": links.map.with_index do |link, i|
          {
            '@type': 'ListItem',
            'position': i + 1,
            'item': {
              '@id': "#{root_url.chop}#{link}",
              'name': link.text
            }
          }
        end
      }.to_json.html_safe
    end
    # rubocop:enable Rails/OutputSafety
  end
end

Yamitake gist gretel.rb https://gist.github.com/yamitake/3659b9d87404ad975f8a881b05971e33

使い方

breadcrumbs_json_ldを宣言したので、viewファイル側で下記のように宣言することにより、schema.orgに対応したjsonLDが出力されます。

.breadcrumbs
  == breadcrumbs
  = tag.script(breadcrumbs_json_ld, type: 'application/ld+json')

おわりに

今までGretelで開発してきた人が暫定対応としては上記の方法でお手軽に対応できますが、gretelはメンテナンスが長いことされていないので別のGemを探すか自前でパンクズの実装をした方がいいと思います。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0