9
5

More than 3 years have passed since last update.

[Rails] metaタグを設定する方法

Last updated at Posted at 2021-03-19

metaタグとは

SEO対策のうちの1つで、設定することでサイト名やタイトル名などや、OGP設定、Google検索に載せたくないページを設定することができます。

metaタグ設定方法

gemをインストールする

Gemfile に以下を追記して、 bundle install します。

Gemfile
gem 'meta-tags'

設定ファイルの作成をする

以下を実行すると、 config/initializers/meta_tags.rb にデフォルトのファイルが作成され、titleの文字数制限やdescriptionの文字数制限などが編集できます。
デフォルトのままでもOKです。

$ bundle exec rails g meta_tags:install

OGPの設定をする

OGPは、SNSのタイムライン上でURLがシェアされたときなどに表示されます。
application-helper.rb に以下を追記します。
オプション(github)

app/helpers/application-helper.rb
module ApplicationHelper
  def default_meta_tags
    def default_meta_tags
    {
      site: 'サイト名',
      title: 'タイトル',
      reverse: true,
      separator: '|',   #Webサイト名とページタイトルを区切るために使用されるテキスト
      description: 'ページの説明',
      keywords: 'ページキーワード',   #キーワードを「,」区切りで設定する
      canonical: request.original_url,   #優先するurlを指定する
      noindex: ! Rails.env.production?,
      icon: [                    #favicon、apple用アイコンを指定する
        { href: image_url('favicon.ico') },
        { href: image_url('icon.jpg'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/jpg' },
      ],
      og: {
        site_name: 'サイト名',
        title: 'タイトル',
        description: 'ページの説明', 
        type: 'website',
        url: request.original_url,
        image: image_url('ogp.png'),
        locale: 'ja_JP',
      },
      twitter: {
        card: 'summary_large_image',
        site: '@ツイッターのアカウント名',
      }
      fb: {
        app_id: '自身のfacebookのapplication ID'
      }
    }
  end
  end
end

metaタグを出力させる

application.html.erb<head>内に以下を追記します。

app/views/layouts/application.html.erb
<head>
  <%= display_meta_tags(default_meta_tags) %>
</head>

検索に引っかかって欲しくないページの指定をする

お問い合わせフォームなどの検索に引っかかって欲しくないページに noindex: true を設定します。

view
<% set_meta_tags noindex: true %>

参考にしたサイト

9
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
5