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

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

記事一覧／記事詳細へのパンくずリスト設置（2）

記事詳細のパンくずリスト設置

　同様に、記事詳細ページにもパンくずリストを設置します。以下のように設定ファイルに追記します。

［リスト 13］config/breadcrumbs.rb

…（中略）…
crumb :article do |article|
  link article.title, article_path(article)
  parent :articles
end
…（中略）…

　パンくずリスト名は、記事一覧と同じように記事詳細のルーティングであるarticle（単数形）を指定しています。呼び出し元のbreadcrumbメソッドの第2引数に変数を指定することで、このようにcrumbブロック内で引き渡した変数を使うことができます。

　呼び出し元で、Articleモデルのインスタンスを渡す想定なので、表示するテキストを動的に設定することができます。ここでは、titleカラムの値をセットしています。

　parentメソッドは、親ページを指定することができます。「parent [パンくずリスト名]」のように記述して使います。ここでは、articles（記事一覧）用のパンくずリストを指定しているので、「記事一覧 > 記事詳細」のようなパンくずリストを定義していることになります。

　なお、記事一覧用のパンくずリストでは、parentメソッドはありませんでした。parentを省略した場合は、トップページ用のパンくずリスト（root）が指定されたとみなされます。つまり、「Home > 記事一覧」のようなパンくずリストの形式となります。

パンくずリストの動作確認

　定義したパンくずリストの動作確認を行います。

　rails sコマンドでpumaサーバーを起動し「http://localhost:3000」にアクセスすると、新たに定義したトップページに記事一覧へのリンクテキストが表示されます。

　記事一覧へのリンクをクリックすると、以下のように記事一覧用のパンくずリストが表示されることが確認できます。

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

　記事一覧ページでは、パンくずリストの「Home > 記事一覧」のうち、Homeにのみトップページへのリンクが設置されていることに注目してください。

　次に、いずれかの記事詳細ページを確認します。ここでは、「title0」の記事詳細を表示しました。

記事詳細用のパンくずリスト

　記事詳細用のパンくずリストが「Home > 記事一覧 > title0」と表示され、Home／記事一覧に正しくリンクが設置されていることが確認できます。

breadcrumbsメソッドのオプション

　レイアウトファイルで定義したbreadcrumbsメソッドにはさまざまなオプションが用意されています。詳細はGretelのREADMEを参照してください。

　ここでは代表的なオプションを紹介しておきます。

breadcrumbsメソッドのオプション

オプション	機能	指定できる値	デフォルト値
:style	出力するHTMLの形式	:inline／:ol／:ul／:bootstrap	:inline
:separator	ページごとの区切り文字	エスケープ文字列	" › "（>に前後半角スペース）
:link_current	自分自身のページのパンくずリストにリンクを設置するか	true／false	false
:semantic	Googleが推奨するマークアップに合わせた形式とするか	true／false	false

　オプションを指定してbreadcrumbsメソッドを呼び出す場合、以下のようなハッシュ形式でオプションを指定します。

［リスト 14］app/views/layouts/application.html.erb

…（中略）…
    <%= breadcrumbs link_current: true, semantic: true %>
…（中略）…

　再度、記事詳細にアクセスしてブラウザのデベロッパーツールで検証すると、記事詳細へのリンクが設置され、Googleが推奨するitemscopeなどのマークアップとなっていることが確認できます。

breadcrumbsメソッドのオプション指定結果

まとめ

　ここまで、連載2回にわたり、SEO対策で重宝するgemであるSitemapGenerator／MetaTags／Gretelの基本的な使い方を紹介しました。次回は、ファイルアップローダーのgemであるcarrierwave／refile／shrineを紹介する予定です。