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

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

　前回は、SEO対策で重宝するgemのうち、サイトマップを生成するSitemapGeneratorとmetaタグを効率よく設置するMetaTagsの基本的な使い方を紹介しました。今回は、MetaTagsをActiveRecordと関連付けて使う方法を紹介するとともに、パンくずリストを生成するGretelというgemの使い方を紹介します。

MetaTagsをActiveRecordと関連付けて使う方法

　前回までのサンプルアプリケーションでは、Article（記事）の一覧ページに固定のtitleタグや各種metaタグをセットしました。より実践的なWebアプリケーションでは、Articleモデルが持つデータを動的にtitleタグやmetaタグにセットすることもあるでしょう。

　ここからは、MetaTagsの機能を使って、動的にSEO関連タグをセットする方法を確認します。

metaタグ用のデータ準備

　Articleモデルは、現時点ではtitle、bodyカラムを持っています。titleタグにはtitleカラムを、metaタグのdescriptionにはbodyカラムをセットすることで事足りそうです。

　一方、metaタグのkeywordsには、動的にセットできるカラムがないので、ここではArticleモデルにkeywordsカラムを追加して、サンプルデータを投入します。

　以下のコマンドを実行してマイグレーションファイルを作成します。

bin/rails g migration AddKeywordsToArticles

　作成されたマイグレーションファイルを以下のように修正し、keywordsカラムを文字列型で追加します。

［リスト 1］db/migrate/20181016064918_add_keywords_to_articles.rb

class AddKeywordsToArticles < ActiveRecord::Migration[5.2]
  def change
    add_column :articles, :keywords, :string
  end
end

　マイグレーションコマンドを実行し、keywordsカラムを追加します。

bin/rails db:migrate

　サンプルデータを投入するためのfixtureファイルを以下のように修正します。

［リスト 2］test/fixtures/articles.yml

<% 1000.times do |n| %>
article<%= n %>:
  title: <%= "title#{n}" %>
  body: <%= "body#{n}" %>
  keywords: <%= "keywords#{n}, keywords#{n + 1}" %> # 追記
<% end %>

　keywordsには、metaタグのkeywordsに指定するデータをカンマ区切りで指定することを想定しているので、サンプルデータでは、"keywords0, keywords1"といったデータをセットしています。

　以下のコマンドを実行し、サンプルデータを投入しなおします。

bin/rails db:fixtures:load

　ここまでの手順で、metaタグのkeywords用にセットするデータの準備が整いました。

モデルにto_meta_tagsメソッドを実装

　SEO用のタグをモデルのインスタンスから簡単に取得するには、MetaTagsが提供するインターフェイス用のto_meta_tagsメソッドをモデルクラスに実装します。

　以下の通り、Articleモデルにto_meta_tagsメソッドを追加します。

［リスト 3］app/models/article.rb

class Article < ApplicationRecord
  def to_meta_tags
    {
      title: title,
      description: body,
      keywords: keywords
    }
  end
end

　このように、to_meta_tagsメソッドでハッシュを返却しておくと、ビュー側ではset_meta_tagsの引数にモデルクラスのインスタンスを指定するだけでSEO用のタグをセットすることができます。

ビューファイルを修正

　記事詳細ページにSEO用のタグを表示するように、該当のビューファイルを以下の通り修正します。

［リスト 4］app/views/articles/show.html.erb

<% set_meta_tags @article %> # 追記

<p id="notice"><%= notice %></p>
…（中略）…

　こうして、set_meta_tagsメソッドにモデルのインスタンスを指定するだけで、モデルのto_meta_tagsメソッドに指定したハッシュに従ってSEO用のタグがセットされます。

動作確認

　意図するようにタグがセットされていることを確認します。rails sコマンドでpumaサーバーを起動し「http://localhost:3000/artices/1」にアクセスします。

　ブラウザのデベロッパーツールを使ってheadタグの中身を確認してみると、正しくtitleタグやmetaタグがセットされていることが確認できます。

title／metaタグが生成された