CodeZine(コードジン)

特集ページ一覧

RailsでSEO対策の定番gemをさらに使いこなそう!「meta-tags」と「gretel」

これだけは押さえておきたい!Rails開発で使えるgemパッケージ/ツール 第8回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/12/13 11:00
目次

Gretelとは

 Gretelは、いわゆる「パンくずリスト」をページごとに簡単にセットできるようにするgemです。

 パンくずリストとは、「TOPページ > 東京 > 目黒区のお店」のように、表示されているページを階層構造で表現するパーツのことです。このパンくずリストを表示することで、動的なページの構造を検索エンジンに正しく伝えることができ、内部リンクも生成されるため、SEO対策として有効とされています。

Gretelの導入

 ここからは、既存のRailsプロジェクトにGretelを導入して、パンくずリストを表示する手順を紹介します。

gemインストール

 Gemfileに以下の通り記述します。

[リスト 5]Gemfile
…(中略)…
gem 'gretel'
…(中略)…

 以下のコマンドを実行しgemをインストールします。

bin/bundle

設定ファイルのインストール

 Gretelでは、設定ファイルにRubyで記述された形式にのっとってページごとのパンくずリストを管理します。

 まず、Gretelが提供する以下のコマンドを実行して設定ファイルを作成します。

bin/rails g gretel:install

 ▼

create  config/breadcrumbs.rb

 インストール用コマンドを実行すると、設定ファイルであるconfig/breadcrumbs.rbが生成されます。

 設定ファイルを確認すると、デフォルトでトップページにあたるroot_path定義が有効になっており、その他はサンプルの記述がコメントアウトされた状態となっています。

[リスト 6]config/breadcrumbs.rb
crumb :root do
  link "Home", root_path
end
…(中略)…

 このroot_pathに該当する記述は、Gretelの最も基本的な定義です。「crumb [パンくずリスト名] do~end」とブロックを定義します。[パンくずリスト名]はシンボルで記述します。ブロック内では、「link [リンクテキスト], [パス]」と記述して、そのパンくずリストのリンクテキストを定義します。このlinkメソッドはGretelが提供するものですが、Railsのlink_toヘルパーと同じような形式で記述することができます。

 デフォルトの設定は、トップページのリンクを「Home」というテキストにし「/」ページにリンクする、といった定義です。

記事一覧/記事詳細へのパンくずリスト設置(1)

 ここからは、トップページ(/)を定義して、記事一覧ページ(/articles)と記事詳細ページ(/articles/:id)にパンくずリストを設置していきます。パンくずリストの構造として以下のような構造を想定します。

パンくずリストの構造
ページ パス   設置する形式   
トップ / ※設置なし
記事一覧 /articles Home > 記事一覧
記事詳細 /articles/:id  Home > 記事一覧 > 記事タイトル

トップページの準備

 まず、トップページを用意して記事一覧ページへのリンクを設置します。以下の通りルーティング定義を追加します。

[リスト 7]config/routes.rb
…(中略)…
  root to: 'home#index'
…(中略)…

 次に、トップページ用のコントローラーを作成します。

[リスト 8]app/controllers/home_controller.rb
class HomeController < ApplicationController
  def index
  end
end

 indexアクションに対応するビューを作成します。

[リスト 9]app/views/home/index.html.erb
<div>
  <%= link_to '記事一覧', articles_path %>
</div>

パンくずリストを表示するための下準備

 記事一覧/記事詳細ページにパンくずリストを表示するために、下準備が必要です。パンくずリストはページごとに異なるので、ページに対応するビューファイルでbreadcrumbメソッドを使って設定ファイルで定義したパンくずリストを呼び出します。

 呼び出したパンくずリストを表示するには、まずレイアウトファイルにパンくずリストをビューごとに呼び出す共通処理を入れる必要があります。

 以下のようにレイアウトファイルを修正します。

[リスト 10]app/views/home/index.html.erb
…(中略)…
	<body>
    <%= breadcrumbs %>
    <%= yield %>
  </body>
</html>

 このように、Gretelが提供するbreadcrumbsメソッドをレイアウトで呼び出しておくことで、ビューごとにbreadcrumbメソッドを使ってパンくずリストを表示することができます。

 レイアウトでの定義は「breadcrumbs」と複数形で、ビューでの定義は「breadcrumb」と単数形となっている点に注意が必要です。

記事一覧のパンくずリスト設置

 ここからはパンくずリストをページごとに設置していきます。まずは記事一覧ページにパンくずリストを設置します。

 記事一覧用のパンくずリストを設定ファイルに定義します。

[リスト 11]config/breadcrumbs.rb
crumb :articles do
  link '記事一覧', articles_path
end

 ここでは、記事一覧のルーティングであるarticlesというパンくずリスト名を定義し、「記事一覧」と文字列で表記し、下層にあるページを表示した場合のリンク先を記事一覧のパスに指定しています。

 設定ファイルに記述したパンくずリストを呼び出す記述をビューに追記します。

[リスト 12]app/views/articles/index.html.erb
…(中略)…
<% keywords %w(Ruby Rails gem) %>
<% breadcrumb :articles %> # 追記

<p id="notice"><%= notice %></p>
…(中略)…

 このようにbreadcrumbメソッドは、「breadcrumb [パンくずリスト名]」と記述することで設定ファイルで定義したパンくずリスト名をシンボル形式で呼び出すことができます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:これだけは押さえておきたい! Rails開発で使えるgemパッケージ/ツール

もっと読む

著者プロフィール

  • WINGSプロジェクト 竹馬 力(チクバ ツトム)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5