Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

 前回は、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タグが生成された
title/metaタグが生成された

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

著者プロフィール

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

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

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

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

バックナンバー

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

もっと読む

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