meta-tags で Rails アプリの SEO は万全に

  • 127
    Like
  • 0
    Comment
More than 1 year has passed since last update.

概要

meta-tags という gem を利用するととても簡単に、かつクリーンに meta タグを設定することができます。Rails アプリで SEO を行う場合にとても有用です。

実装例

meta-tags はコンパクトで取り回しやすい gem です。
そのため個々人で色々な実装方法があるかと思います。

ここでは一例を挙げます。

  • デフォルト値を設定する
  • 個別 View 内で titledescription を上書きする

という方針。

1. パーシャル内でデフォルト値を設定する

まずは meta タグのデフォルト値を設定するためのパーシャルを用意します。

layouts/_meta_tags.html.haml
%meta{charset: 'UTF-8'}/
%meta{name: 'viewport', content: 'width=device-width, initial-scale=1.0'}

%link{media: 'handheld', rel: 'alternate', href: request.original_url}/

- # 各種メタタグのデフォルト設定
- # 必要に応じて各 View 内で上書きすること
- #
- # 例: set_meta_tags title: "ほげほげ"
= display_meta_tags default_meta_tags

この中で set_meta_tags title: "ほげ" と設定してもよいのですが、そうすると各 View 内で上書きができなくなってしまうため、デフォルト値の設定のみ行います。

デフォルト値の項目が多いため、ヘルパーに default_meta_tags を定義しました。また、定数管理(Settings)には binarylogic/settingslogic を使っています。このあたりはお好みで。

ポイントとしては og 内の title:title と設定してやることで、ogp の title に meta タグの title と同じ値が設定されます。description も同様。

参考: kpumuk/meta-tags

helpers/application_helper.rb
def default_meta_tags
  {
    site: Settings.site.name,
    reverse: true,
    title: Settings.site.page_title,
    description: Settings.site.page_description,
    keywords: Settings.site.page_keywords,
    canonical: request.original_url,
    og: {
      title: :title,
      type: Settings.site.meta.ogp.type,
      url: request.original_url,
      image: image_url(Settings.site.meta.ogp.image_path),
      site_name: Settings.site.name,
      description: :description,
      locale: 'ja_JP'
    }
  }
end

作成したパーシャルを application.html.haml から読み込みます。

layouts/application.html.haml
!!!
%html
  %head
    = render :partial => "layouts/meta_tags"
    = stylesheet_link_tag 'application', media: 'all'
    = javascript_include_tag 'application'
    = csrf_meta_tags

2. 各 View 内でデフォルト値を上書きする

set_meta_tags を利用してデフォルト値を上書きします。

users/edit.html.haml
- set_meta_tags title: "プロフィールの変更"

%div.container
  %div.row
    %...

title, description, keywords となどといったヘルパーを利用すると少しスッキリかけます。

users/edit.html.haml
- title "プロフィールの変更"

%div.container
  %div.row
    %...

参考