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に表示できます。
以上です。

meta-tagsについて

Gem meta-tags について

meta-tagsの導入

各種設定