Gem meta-tags について
今回SEO対策として何か実装したいと考えて調べてみた所、meta-tagsというGemを知りましたので、実際に使ったので備忘録として記入したいと思います。
#meta-tagsの導入
routes.rb
Gem 'meta-tags'
bundlerでインストール
bundle exec
これで導入完了です
各種設定
上記の作業を正常に完了してればconfig/initializers/meta_tags.rb
という感じにファイルが生成されています。
meta-tagsの内容は下記の通りです。
meta_tags.rb
# 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 160.
# Set to nil or 0 to remove limits.
# config.description_limit = 160
# Maxumum 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
# List of additional meta tags that should use "property" attribute instead
# of "name" attribute in tags.
# config.property_tags.push(
# 'x-hearthstone:deck',
# )
end
こちらの記述は「タイトルでも文字数制限などを設定できますが、デフォルトでも大丈夫らしいので、今回はこのままです。
各種サイトの条件に合わせて設定してください。
metaタグの初期設定をおこなうため、「app/helpers/application_helper.rb」にdefault_meta_tagsメソッドを実装します。
application_helper.rb
module ApplicationHelper
def default_meta_tags
{
site: 'サイト名',
title: 'タイトル',
reverse: true,
charset: 'utf-8',
description: 'description',
keywords: 'キーワード',
canonical: request.original_url,
separator: '|',
icon: [
{ href: image_url('favicon.ico') },
{ href: image_url('icon.jpg'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/jpg' },
],
og: {
site_name: 'サイト名', # もしくは site_name: :site
title: 'タイトル', # もしくは title: :title
description: 'description', # もしくは description: :description
type: 'website',
url: request.original_url,
image: image_url('ogp.png'),
locale: 'ja_JP',
},
twitter: {
card: 'summary',
site: '@ツイッターのアカウント名',
}
}
end
end
これまでの作業が終わればあとは、application.html.erbのhead内に<%= display_meta_tags(default_meta_tags) %>
を記述すればviewに表示できます。
以上です。