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

🐠 動作確認

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

👽 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)