rails6でmeta-tegsのmetaタグとOGPを設定する

8525 ワード
Rails Ruby SEO Rails6 meta-tags Ruby テキストリンク

gemのmet-tagsを使ったOGPの設定の情報が少なく感じましたし、なにせ結構な時間を取られてしまったので、調べてやったことをアウトプットしていこうと思います！

  • met-tagsの導入
  • デフォルトmeta-tagとOPGの設定
  • 個別にmeta-tagとOPGの設定
  • 開発環境でのチェック方法

以上の内容で記述していきますね！

meta-tagsの導入

gemなんで以下のように

gemfile
gem 'meta-tags'

ターミナルにて
bundle install
rails g meta_tags:install

これらを実行することで、config/initializers/meta_tags.rb というファイルが出来上がり、ここを編集することでmetaタグとOGP調整できます。

デフォルトmeta-tagとOPGの設定

config/initializers/meta_tags.rb
# frozen_string_literal: true

# 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 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 true, the output will not include new line characters between meta tags.
  # Default is false.
  # config.minify_output = false

  # 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

基本的にはデフォルトのままで大丈夫かと思います。

続いてメタタグとOGPの設定に移ります。

app/helpers/application_helper.rb
module ApplicationHelper

  def default_meta_tags
    {
      site: 'サイトネーム',
      title: 'タイトル',
      reverse: true,
      charset: 'utf-8',
      description: 'テキストテキストテキストテキストテキストテキストテキストテキストテキスト',
      keywords: 'キーワード１,キーワード2,キーワード3',
      canonical: request.original_url,
      separator: '|',　# これで　"タイトル | サイトネーム"ってなる
      icon: [
        { href: image_url('logo.png') },
        { href: image_url('top_image.png'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/png' },
      ],
      og: {
        site_name: :site,
        title: :title,
        description: :description,
        type: 'website',
        url: request.original_url,
        image: image_url('top_image.jpg'),
        local: 'ja-JP',
      },
      twitter: {
        card: 'summary_large_image',
        site: '@あなたのツイッターアカウント',
        image: image_url('top_image.jpg'),
      }
    }
  end
end

これは自分のアプリに合わせて変更を加えてください。

view/layout/application.html.erb
<head>
  ~省略
  <％= display_meta_tags（default_meta_tags） ％>　
</head>

これをタグないの一番下に記述します。これでメタタグとOPGの設定が完了します。
しかし、この内容は全てのページに反映されてしましますので、これから個別に設定していきます。

注意！

<title>サイトタイトル</title>

タイトルタグが設定してある場合は削除してください！

個別にmeta-tagとOPGの設定

試しに
モデル：　Model

テーブル
title string
content text

imageはActive storageを前提とします。

以上の条件でshowページに設定してみます。

view/models/show.html.erb
<% set_meta_tags title: @model.title, description: @model.content, keywords: "個別キーワード１, 個別キーワード2, 個別キーワード3", og:{image: image_url(url_for(@model.image))}, twitter:{image: image_url(url_for(@model.image))} %>

これをshowページの先頭に記述します。

イメージとしてはデフォルトで設定したものを個別に上書きするイメージです。

開発環境でのチェック方法

これを使って開発環境で確認できます。

文字列の回転配列/文字列の長さの取得
樹状無制限極分類getTree tree