【Rails】『meta-tags』gemを使ってSEO対策をおこなう方法

2017/12/10 2019/02/14

Pocket

こんにちは、okutani(@okutani_t)です。本記事では、Ruby on Railsに『meta-tags』gemを導入して、SEO対策をおこなう方法について解説しています。

meta-tagsを利用することで、以下の項目がかんたんに実装できます。

サイト名の設定
各ページごとのタイトルの設定
OGP（オープングラフプロトコル）の設定
Twitter OGPの設定
Facebook OGPの設定（別途追加のmetaタグが必要）

Facebookだけ、一行metaタグを追加する用意する必要がありますが、それ以外の項目はmeta-tagsだけで完結して便利です。

meta-tagsのGitHubページは以下です。

LINKkpumuk/meta-tags: Search Engine Optimization (SEO) for Ruby on Rails applications.

なお、今回の実装環境はRuby2.4.1、Rails5.1.4です。

それでは、さっそくmeta-tagsの導入方法から見ていきましょう。

1 meta-tagsの導入
2 設定ファイルの生成
3 default_meta_tagsの用意
4 metaタグの出力
- 4.1 Facebook OGPの設定
5 別ページでmetaタグを上書き
6 noindexの設定方法
7 まとめ

meta-tagsの導入

Gemfileに以下を記述します。

gem 'meta-tags'

bundlerで導入。今回はプロジェクト直下に配置しました。

$ bundle install --path vendor/bundle

これでmeta-tagsが導入されました。

設定ファイルの生成

次に設定ファイルを生成します。以下のコマンドを実行。

$ bundle exec rails generate meta_tags:install

「config/initializers/meta_tags.rb」が作成されました。内容をそのまま載せておきます。

# Use this setup block to configure all options available in MetaTags.
MetaTags.configure do |config|
  # How many characters should the title meta tag have at most. Default is 70.
  # Set to nil or 0 to remove limits.
  # config.title_limit = 70

  # When true, site title will be truncated instead of title. Default is false.
  # config.truncate_site_title_first = false

  # Maximum length of the page description. Default is 160.
  # Set to nil or 0 to remove limits.
  # config.description_limit = 160

  # Maxumum length of the keywords meta tag. Default is 255.
  # config.keywords_limit = 255

  # Default separator for keywords meta tag (used when an Array passed with
  # the list of keywords). Default is ", ".
  # config.keywords_separator = ', '

  # When true, keywords will be converted to lowercase, otherwise they will
  # appear on the page as is. Default is true.
  # config.keywords_lowercase = true

  # List of additional meta tags that should use "property" attribute instead
  # of "name" attribute in  tags.
  # config.property_tags.push(
  #   'x-hearthstone:deck',
  # )
end

こちらのファイルでは「titleの文字数制限」「descriptionの文字数制限」などが設定できます。

デフォルトのままでもOKなので、今回は特にいじらず先に進みました。プロジェクトに合わせて適宜設定してみてください。

default_meta_tagsの用意

metaタグの初期設定をおこなうため、「app/helpers/application_helper.rb」にdefault_meta_tagsメソッドを実装します。

以下のように実装してみました。


module ApplicationHelper
  def default_meta_tags
    {
      site: 'サイト名',
      title: 'タイトル',
      reverse: true,
      charset: 'utf-8',
      description: 'description',
      keywords: 'キーワード',
      canonical: request.original_url,
      separator: '|',
      icon: [
        { href: image_url('favicon.ico') },
        { href: image_url('icon.jpg'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/jpg' },
      ],
      og: {
        site_name: 'サイト名', # もしくは site_name: :site
        title: 'タイトル', # もしくは title: :title
        description: 'description', # もしくは description: :description
        type: 'website',
        url: request.original_url,
        image: image_url('ogp.png'),
        locale: 'ja_JP',
      },
      twitter: {
        card: 'summary',
        site: '@ツイッターのアカウント名',
      }
    }
  end
end

今回、デフォルト値として設定した項目は以下のとおり。

site	サイト名を設定
title	タイトルを設定
reverse	trueを設定することで「タイトル \| サイト名」の並びで出力してくれる
charset	文字コードの設定
description	descriptionを設定
keywords	キーワードを「,」区切りで設定
canonical	canonicalタグを設定
separator	ページ名とサイト名の区切りを設定。デフォルトは「\|」
icon	favicon、apple用アイコンの設置

og:site_name	サイト名を設定
og:title	各ページのタイトルを設定
og:description	descriptionを設定
og:type	[‘website’, ‘article’, ‘blog’, …]などからひとつ設定
og:url	URLを設定
og:image	シェア用の画像を設定
og:locale	リソースの言語を設定

上記の設定はプロジェクトに合わせて好きに設定してみてください。

いくつか重複している内容があるので、DRYにしたい場合は「config」gemを使ってみてもいいかと思います。

[2019/02/14 追記]： ogの該当する項目をそれぞれ :site, :title, :descriptionとすることで、該当の文字列をミラーリングして設定することができ、かんたんにDRYに書くことができました

【Rails】「config」gemを使って定数管理をおこなう方法

こんにちは、okutani(@okutani_t)です。「config」gemを利用することで、Ruby ...

2017-09-17 14:55

定数として管理すると、見た目もすっきりして良いかと思います。

metaタグの出力

設定した項目を実際にviewに出力します。

「app/views/layouts/application.html.erb」のhead内に以下を記述。

<head>
  ...省略...
  <%= display_meta_tags(default_meta_tags) %>
  ...省略...
</head>

上記の書き方で、先ほど設定した設定項目がviewに出力されます。

このとき、titleタグがすでにhead内で定義されていたら削除してください。

erb以外のテンプレートエンジン（slimやhaml）をお使いの方は、適宜書き換えてみてください。

Facebook OGPの設定

FacebookのOGPを利用したい場合は、以下のコードをhead内に記述する必要があります。

<meta property="fb:app_id" content="your_app_id" />

「your_app_id」は適宜ご自身のFacebookのアプリケーションIDに置き換えてください。

これでheadに設定した項目に合わせて、HTMLを吐き出してくれます。

TOPページはこのままでOKですが、別ページではいくつかの項目を上書きして利用したいですね。設定していきましょう。

別ページでmetaタグを上書き

ページごとにmetaタグを書き換えていきたいので、今回は一例として記事ページ（article）ごとにmetaタグを上書きしてみようと思います。

今回、modelとcontrollerの生成方法は省略しています。ArticleモデルとArticlesコントローラーがあると仮定して読み進めてください。

記事の詳細ページのmetaタグを上書きするため、「app/views/articles/show.html.erb」の上部に以下を記述しました。

<% set_meta_tags title: @article.title, description: @article.description, og: { title: @article.title, type: 'article', image: @article.image_url } %>

Articleモデルには、それぞれ「title」「description」「image_url」が設定されていると仮定しています。

これで、各記事ごとにmetaタグを上書きすることができます。

プロジェクトに合わせて設定してみてください。

noindexの設定方法

meta-tagsを使ってページごとにnoindexを設定するには、以下のコードをnoindex設定したいviewに記述すればOKです。

<% set_meta_tags noindex: true %>

お問い合わせフォームなど、検索に引っかかって欲しくないページに設定しておくとよいですね。

まとめ

本記事ではRailsでSEO対策をかんたんにおこなえる「meta-tags」gemの使い方について解説しました。

viewファイルもすっきり見やすくなるので、早めに導入しておくとよいですね。

Railsユーザーの参考になれば幸いです。

Pocket

okutani (okutani_t) のヒトコト

okutani_t

以前はviewに直接metaタグを書いて、ページごとに分岐させてたのですが、meta-tags gemを使ったら超すっきりしました。便利です

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。

「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio

- Ruby on Rails