Ruby on Rails

【Ruby on Rails】gem meta-tags を使ってメタタグを生成してSEO対策

メタタグの生成は、SEO対策に欠かせない要素の一つです。Ruby on Railsでは、MetaTagsというGemを使うと、メタタグをカンタンに実装することができます。実際に使ってみた際の備忘録メモです。

Gem MetaTagsの使い方

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

1. お決まりのGemfile追加からのbundle install

gem 'meta-tags'

2. 初期ファイル生成コマンド meta_tags:install を叩く

$ rails generate meta_tags:install

config/initializers/meta-tags.rbが作られる

MetaTags.configure do |c|
  # 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 300.
  # Set to nil or 0 to remove limits.
  # config.description_limit = 300

  # Maximum 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

  # When false, generated meta tags will be self-closing (<meta ... />) instead
  # of open (`<meta ...>`). Default is true.
  # config.open_meta_tags = true

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

ひとまずGithubに書いてあるのが推奨値っぽいのでそのまま使ってみる（日本語もこの値でいいのか？）

TODO この場所で設定値変更できるから、好きがってに書き換えてねってGithubには書いてあるから、日本語での設定方法を調べて反映する

3. 基本設定

Titles - タイトル

ページタイトルはサーチエンジンにとって、とーっても重要とのこと
ブラウザのタイトルバーに表示されるし、サーチエンジンはタイトルを見てそのページがどんなページか判定するんだって
MetaTagsでは以下のように設定する

set_meta_tags title: 'Member Login'
# <title>Member Login</title>
set_meta_tags site: 'Site Title', title: 'Member Login'
# <title>Site Title | Member Login</title>
set_meta_tags site: 'Site Title', title: 'Member Login', reverse: true
# <title>Member Login | Site Title</title>

タイトルは70文字以内で、10単語ぐらいがいい

Description

タイトルのように直接はブラウザに表示されないが、検索結果に表示される

set_meta_tags description: "All text about keywords, other keywords"
# <meta name="description" content="All text about keywords, other keywords" />

160文字以内がおすすめ

Keywords

キーワードを不必要に書きすぎると検索エンジンに嫌われちゃうから気をつけてね

set_meta_tags keywords: %w[keyword1 Keyword2 KeyWord3]
# <meta name="keywords" content="keyword1, keyword2, keyword3" />

255文字以内、20キーワード以下がおすすめ

Noindex

インデックスさせたくないページをサーチエンジンに伝える手段

set_meta_tags noindex: true
# <meta name="robots" content="noindex" />
set_meta_tags noindex: 'googlebot'
# <meta name="googlebot" content="noindex" />

ログインページとかプラポリページなどコンテンツに価値が無いページはNoindex

Nofollow

サーチエンジンにこれ以上先にはリンクを辿らないでってお願いするにはNofollowタグを
アフィリエイトリンクとかはこれを使うといい

set_meta_tags nofollow: true
# <meta name="robots" content="nofollow" />
set_meta_tags nofollow: 'googlebot'
# <meta name="googlebot" content="nofollow" />

Follow

Noindexだけどページに有るリンクを辿ってほしいときはFollow

set_meta_tags noindex: true, follow: true
# <meta name="robots" content="noindex, follow" />

TODO ・・・と長いので続きはいつか

4. MetaTagsを実際に埋め込む

<head>
  <%= display_meta_tags site: 'My website' %>
</head>

<h1><%= title 'My page title' %></h1>

Gem configと組み合わせてメタタグ管理

configというGemと組み合わせると管理しやすくなる

おなじみのGemfile追加からのbundle installを叩く

gem `config`

からの以下のコマンドを叩く

$ rails g config:install

すると、

      create  config/initializers/config.rb
      create  config/settings.yml
      create  config/settings.local.yml
      create  config/settings
      create  config/settings/development.yml
      create  config/settings/production.yml
      create  config/settings/test.yml
      append  .gitignore

が作られる。

今回は、config/settings.ymlにメタタグで使うサイト情報をいれていく

site:
  name: "あなたのサイト名"
  title: "デフォルトのサイトタイトル"
  description: "デフォルトのディスクリプション"
  keywords: "デフォルトののキーワード"

この情報を使って、app/helper/application_helper.rbにデフォルトのメタタグ設定を書いていく

module ApplicationHelper
  def default_meta_tags
    {
      site: Settings.site.name,
      reverse: true,
      title: Settings.site.title,
      description: Settings.site.description,
      keywords: Settings.site.keywords,
      canonical: request.original_url,
    }
  end
end

app/views/layouts/application.html.erbを以下のように記載

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}
    %meta{:charset => "utf-8"}
    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1.0"}
    %meta{"http-equiv" => "x-ua-compatible", :content => "ie=edge"}
    = display_meta_tags default_meta_tags
    = csrf_meta_tags
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
・・・

-Ruby on Rails