Ruby on Rails

【Ruby on Rails】gem gretelを使ってパンくずリストを作成してSEO対策

Rails でパンくずリストを作成するには、gem gretel を使うのが便利です。SEOの内部対策に欠かせないパンくずリストをRailsで実現するメモです。

まずはGemの選定

調べてみるとRuby on Railsでパンくずリストを実現するには以下の２つのGemを使うのが主流っぽい

  • breadcrumbs_on_rails
  • gretel

breadcrumbs_on_rails だとコントローラが汚れてしまうとのこと

gretelの使い方

https://github.com/lassebunk/grete://github.com/lassebunk/gretel

まずはおなじみのgem追加してbundle installを叩く

gem 'gretel'

以下のコマンドを叩くと、config/breadcrumbs.rbに設定ファイルが生成される

$ rails generate gretel:install

以下のように設定していく

# Root crumb
crumb :root do
  link "Home", root_path
end

# Issue list
crumb :issues do
  link "All issues", issues_path
end

# Issue
crumb :issue do |issue|
  link issue.title, issue
  parent :issues
end

設定したパンくずをViewで呼び出す
application.html.erbに以下を追記

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}
    %meta{:charset => "utf-8"}
    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1.0"}
    %meta{"http-equiv" => "x-ua-compatible", :content => "ie=edge"}
    %title YourHomePageTitle
    = csrf_meta_tags
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    %header
      = render 'layouts/header'
    %main
      = render 'layouts/alerts'
      = breadcrumbs
      .container
        .row
          .col-sm-3
            = render 'layouts/sidebar'
          .col-sm-9
            = yield
    %footer
      = render 'layouts/footer'

ex) ルート画面

- breadcrumb :root
...

-Ruby on Rails