【爆速】Rails6で’meta-tags’を使ったmetaタグとOGPタグの設定方法

爆速ということで、さっそくやっていきます。

Gemfileに’meta-tags’を記述

Gemfileに下記を追記。

gem 'meta-tags'

これでbundle installをします。

app/helpers/application-helper.rbを編集

app/helpers/application-helper.rbに下記を記述。

module ApplicationHelper
  def default_meta_tags
    {
      site: 'サイト名',
      title: 'タイトル',
      reverse: true,
      separator: '|',
      description: 'ディスクリプション',
      keywords: 'キーワード',
      canonical: request.original_url,
      noindex: ! Rails.env.production?,
      icon: [
        { 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のID'
      }
    }
  end
end

画像の名前や、その他日本語の説明は自分にあわせて変更してください。

また、画像の置き場所は、通常通りのapp/assets/images内に入れるとOKです。

サイズとしては、

• ファビコン→32×32px
• apple用アイコン→180×180px
• OGP画像→1200×630px

が標準です。

metaタグを出力

metaタグを出力するために、app/views/layouts/application.html.erbのhead内に以下を追記。

<%= display_meta_tags(default_meta_tags) %>

これでブラウザを確認すれば、metaタグが反映されています。

ページごとに違うmetaタグを設定する方法

違うmetaタグを入れたいページのhtml.erbファイルの一番最初に下記を追記。

<% set_meta_tags title: 'タイトル変更', description: 'ディスクリプション変更' %>

これで終わりです。