Edited at

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

More than 5 years have 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
%...



参考