【Ruby on Rails】meta-tagsを使ってサイトのmetaタグを設定する方法

こんにちは、nishi_talk(@nishi_talk)です。
今回はrailsのmeta-tagsの設定方法とSEO対策をした方法をご紹介します。

設定したときの環境

ruby 2.2.8
Rails 5.1.6

インストール

まずはGemfileに以下の記述してパッケージをインストールします。

# メタタグ機能
gem 'meta-tags'

bundle install

meta-tagsの設定

/config/locales/ja.ymlにサイトやアプリケーションのデフォルトの設定を記述します。

meta_tags:
  base:
    site: サイトのタイトル
    description: サイトのディスクリプション
    keywords:
      - キーワード1
      - キーワード2

/app/controllers/concernsに以下の新規ファイル作成します。
今回は例としてmeta_taggable.rbという名前で作成します。

meta_taggable.rbに以下の記述を追加します。

module MetaTaggable
  extend ActiveSupport::Concern

  include ActionView::Helpers::AssetUrlHelper

  included do
    before_action :prepare_meta_tags
  end

  private

  def prepare_meta_tags(options = {})
    base = t('meta_tags.base')

    site = base[:site]
    description = base[:description]
    title = t("meta_tags.titles.#{controller_name}.#{action_name}", default: '')
    image = image_url('ogp.png')
    image = options[:image].presence || image_url('ogp.png')

    defaults = {
      site: site,
      title: title,
      description: description,
      keywords: base[:keywords],
      canonical: request.url,
      og: {
        url: request.url,
        title: title.presence || site,
        description: description,
        site_name: site,
        type: 'article',
        image: image
      },
      twitter: {
        card: 'summary',
        site: '@ツイッターのアカウント名',
        title: title.presence || site,
        description: description,
        image: image
      }
    }

    options.reverse_merge!(defaults)

    set_meta_tags(options)
  end
end

/app/controllers/application_controller.rbに以下の記述を追加します。

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  include MetaTaggable
end

metaタグの出力

/app/views/layouts/application.html.erbに以下の記述を追加します。

<%= display_meta_tags reverse: true %>

• Twitter
• Facebook