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

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

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

…（中略）…
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メソッドを呼び出す場合、以下のようなハッシュ形式でオプションを指定します。

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

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

まとめ

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