SEO対策・meta-tagsのマイベスト設定

SEO対策にはmetaタグの設定が必須ですが、Railsではmeta-tagsというgemを使うとMetaタグを簡単に動的に設定することができます。

meta-tags https://github.com/kpumuk/meta-tags

まずはざっくりとgithubの説明に目を通してから以下の設定を見てみることをおすすめします。

#1. metaタグ用のpartialを作る
views/layouts/以下にメタタグ設定用のpartialを作りlayouts/application.htmlから読み込みます。

layouts/application.html.slim

doctype html
html
  head
    = render partial: 'layouts/meta_tags'
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags

layouts/_meta_tags.html.slim

meta charset='UTF-8'

-# デスクリプションを不用意に変更されないようにする
meta content='NOYDIR' name='ROBOTS'
meta content='NOODP' name='ROBOTS'

-# モバイル設定
link media='handheld' rel='alternate'
meta name="viewport" content="width=device-width,initial-scale=1.0"

-# Twitter用のTwitter Card対策
- set_meta_tags twitter: { card: "summary", site: "@username" }

-# favicon
- set_meta_tags icon: '/favicon.ico'

-# Noindex/Nofollow
- if noindex?
  - set_meta_tags noindex: true, nofollow: true

-# デフォルト設定
= display_meta_tags(default_meta_tags)

最終行に default_meta_tags というメソッドがあります。
これはメタタグのデフォルトの内容を設定するためのメソッドで、application_helperでこの内容を設定していきます。

注意

• set_meta_tagsの前は-でなければなりません。
• display_meta_tagsは必ず最後に置かなければなりません。
• set_meta_tagsを追加する場合はdisplay_meta_tagsより前に追加します。

2. application_helperにデフォルトのメタタグ内容を設定

application_helper.rb

  def default_meta_tags
    {
      site: Settings.site.name,
      reverse: true,    # タイトルタグ内の表記順をページタイトル|サイトタイトルの順にする
      # title: ,          デフォルトページタイトル
      # description: ,    デフォルトページディスクリプション
      # keywords:         デフォルトページキーワード
      canonical: request.original_url,
      og: default_og
    }
  end

  def default_og
    return if noindex?
    {
      title: :title,
      description: :description,
      type: Settings.site.meta.ogp.type,
      url: request.original_url,
      image: page_og_image,
      site_name: Settings.site.name,
      locale: 'ja_JP'
    }
  end

  def page_og_image
    @page_image||image_url(Settings.site.meta.ogp.image_path)
  end

  def noindex?
	noindexにする場合の条件
  end

settingslogicでサイト全体のメタ情報を管理

__Settings.site.name__という記述がありますが、これはrailsの定数管理に便利なsettingslogicというgemの機能を使っています。
https://github.com/binarylogic/settingslogic

settingslogicを使ってapplication.ymlにmetaサイト全体で使うメタタグの情報をまとめて書きます。

config/application.yml

defaults: &defaults
  site:
    name: サイト名
    meta:
      ogp:
        app_id: Facebook App ID
        type: article
        image_path: /images/og-image.png

ページごとのイメージを設定する

application_helperに page_og_image というメソッドを作りました。
サイト全体で共通のOGP画像を一つ用意 (Settings.site.meta.ogp.image_path = /images/og-image.png)、各ページごとに異なる画像を使う場合にはコントローラーかビューで@page_imageにURLを設定すれば反映される寸法です。

3. 各view用の設定

meta title,description,keywordsはすべてのviewに必要な要素です。
各viewで異なる内容を動的に参照できるようにapplication_controllerから設定します。

application_controller.rb

  after_action :set_page_meta_tags

  private
  def set_page_meta_tags
    @page_title       = t('.title')
    @page_description = t('.description')
    @page_keywords    = t('.keywords')
  end

t('.title)のように設定することで、ロケールファイルの各viewごとのtitle,description,keywordsを参照します。

config/localesの下にmeta.ja.ymlというファイルを作り各ページごとのメタタグ情報だけをまとめます。

config/locales/meta.ja.yml

ja:
  tests: # view名
    index:  # action名
      title: テストタイトル             # このviewの中では t('.title')と記載できる
      keywords: テストキーワード
      description: てすとでぃすくりぷしょん
    new:
      title:
      keywords:
      description:
    show:
      title:
      keywords:
      description:
    edit:
      title:
      keywords:
      description:

ここでは仮にtestsというview名にしていますが、プロジェクト内の各viewごとにこのようなセットを作ってメタタグ情報を記述します。

metaタグの設定は奥が深いので、サイトの内容によってはまだ他にも設定できることがある場合もありますが、どのようなサイトでも使える基本設定としてまとめてみました。

参考：
meta-tagsとsitemap_generatorで始めるRails 4.1時代のSEO対策 - 酒と泪とRubyとRailsと
meta-tags で Rails アプリの SEO は万全に
Ruby on RailsのI18nで使用する名前空間に関してのまとめと、ベストプラクティスの検討。- 波打際のブログさん