概要
meta-tags という gem を利用するととても簡単に、かつクリーンに meta タグを設定することができます。Rails アプリで SEO を行う場合にとても有用です。
実装例
meta-tags はコンパクトで取り回しやすい gem です。
そのため個々人で色々な実装方法があるかと思います。
ここでは一例を挙げます。
- デフォルト値を設定する
- 個別 View 内で
titleやdescriptionを上書きする
という方針。
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
%...