2018.03.11 2019.01.11

Rails開発でmeta-tagsを導入してSEO対策をしよう

「今更改めて Ruby On Railsの開発を行う〜 Part11」です。meta-tagsというgemを導入してhtmlのmetaタグを生成していきます。

Ruby RubyOnRails

バックエンド

[ 目次 ]

はじめに
meta-tags インストール
セットアップ
各ファイルの設定

app/helpers/application_helper.rb
config/locales/defaults/ja.yml
config/locales/defaults/en.yml
meta_tag設定
各ページでtitle, descriptionを変更

最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

この記事は過去に運用していたブログからの移行記事になります。

今回はkpumuk/meta-tagsというgemを利用して、SEO対策を行いたいと思います。

meta-tags インストール

まずはGemfileにmeta-tagsの設定を追加します

# Gemfile
gem 'meta-tags'

続いてbundle installコマンドを実行し、ライブラリをインストールしてください。

$ bundle install
or
$ bundle install --path=vendor/bundle

※ 環境に合わせてプロジェクト配下にインストールするかどうかでコマンドを選択してください。

セットアップ

以下のコマンドで初期化ファイルconfig/initializers/meta_tags.rbを作成します。

$ rails g meta_tags:install

今回は以下のような内容にしました。

MetaTags.configure do |config|
  config.title_limit        = 70
  config.description_limit  = 300
end

title_limit : タイトルタグの文字数
description_limit : metaのdescriptionの文字数

※ googleの検索エンジンはkeywodsをみていないようなので今回はスルーします。

各ファイルの設定

今回はhelperを利用してmeta_tagsのデフォルトの値を設定したいと思います。app/helpers/application_helper.rbに以下のメソッドを追加します。

app/helpers/application_helper.rb

# app/helpers/application_helper.rb
def default_meta_tags
    sitename = I18n.t('site.sitename')
    title = I18n.t('site.meta_tag.title', { sitename: sitename })
    description = I18n.t('site.meta_tag.description', { sitename: sitename })
    {
        site: title,
        title: '',
        description: description,
        charset: 'utf-8',
        keywords: [],
        reverse: true,
    }
end

翻訳ファイルにmeta_tag用の設定を追加します。

config/locales/defaults/ja.yml

# config/locales/defaults/ja.yml
ja:
  site:
    # 以下を追加
    sitename: "Online Shop"
    meta_tag:
      title: "%{sitename}: ショッピングを楽しむWEBサイトです"
      description: "ショッピングサイト「%{sitename}」は、素早く、簡単に色々なものを購入できるショッピングサイトです。"
 　 # ここまで
    title: "オンラインショップ"
  date:
    formats:
      default: "%Y/%m/%d"
      long: "%Y年%m月%d日(%a)"
      short: "%m/%d"
  time:
    formats:
      default: "%Y/%m/%d %H:%M:%S"
      long: "%Y年%m月%d日(%a) %H時%M分%S秒 %z"
      short: "%y/%m/%d %H:%M"

config/locales/defaults/en.yml

# config/locales/defaults/en.yml
en:
  site:
    # 以下を追加
    sitename: "Online Shop"
    meta_tag:
      title: "%{sitename}: The Shopping Website"
      description: "This is %{sitename}. The fast and easy way to buy almost anything."
 　 # ここまで
    title: "Online Shop"
  date:
    formats:
      default: "%m/%d/%Y"
      long: "%B %d, %Y"
      short: "%m.%d.%y"
  time:
    formats:
      default: "%m/%d/%Y %H:%M:%S"
      long: "%B %d, %Y %H時%M分%S秒 %z"
      short: "%m.%d.%y %H:%M"

※ 内容は仮となります。

meta_tag設定

続いて、レイアウトhtmlにmeta_tagの読み込みを追加します。
app/views/layouts/application.html.erbにタグを追加します。meta_tagライブラリがtitleタグを生成するので、titleタグは削除しましょう。

<!-- app/views/layouts/application.html.erb -->
<%= display_meta_tags default_meta_tags %>

各ページでtitle, descriptionを変更

以下のように各ページのhtmlに設定することで、title, descriptionを変更することができます。

<% set_meta_tags title: "ログインページ" %>
<% set_meta_tags description: "Online Shop のログインページです" %>

最後に

今回は簡単な設定のみです、複数言語のページがある場合は alternate を利用したり、一覧ページなどでページングがある場合、prev, nextを利用したりします。

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

こちらのgithubからご自身のサービスにあったmeta_tagの設定をしましょう。

今回の成果物はこちらになります。

Nakamu Blog