breadcrumbs_on_railsでパンくずリストのmetadata対応


Ruby on Railsでパンくずリストを生成するRubyGems「breadcrumbs_on_rails」でmetadataに対応するための手順です。

🎂 インストール

Gemfileに次の内容を追加してbundle installを実行。

# Breadcrumbs
gem 'breadcrumbs_on_rails'

🗻 Controller

Controller側にパンくずリストの内容を記述します。

class MyController
add_breadcrumb 'home', :root_path
add_breadcrumb 'my', :my_path
def index
# ...
add_breadcrumb 'index', index_path
end
end

🗽 Custom Builder

app/lib/breadcrumbs/custom_builder.rbに以下を追加します。

module Breadcrumbs
class CustomBuilder < BreadcrumbsOnRails::Breadcrumbs::Builder
def render
@context.render '/shared/breadcrumbs', elements: @elements
end
end
end

😀 View

Bootstrap & Hamlでの記述方法です。app?views/shared/_breadcrumbs.hamlを追加します。

- if elements.present? && elements.count > 1
.breadcrumb{ itemscope: '', itemtype: 'http://data-vocabulary.org/Breadcrumb' }
.container
.row
.col-sm-12
%ol
- elements[0..-2].each do |element|
%li.breadcrumb__item
- if element.path.present?
%a{:href => element.path, :itemprop => 'url'}
%span{:itemprop => 'title'}= element.name
- else
%span{:itemprop => 'title'}= element.name
%li
%span{:itemprop => 'title'}
= elements.last.name

パンくずリストを表示する部分に次の内容を追加します。

= render_breadcrumbs builder: ::Breadcrumbs::CustomBuilder

🐠 CSS

CSSでパンくずリストの要素と要素の間に「>」を表示するようにします。

breadcrumb__item:after {
content: " > "; color: #999;
}

🐞 動作確認

構造化データ テストツール」で構造化されたデータが正しく読み取れているか確認できます。

🏀 参考リンク

📚 おすすめの書籍