爆速ということで、さっそくやっていきます。
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: 'ディスクリプション変更' %>
これで終わりです。