Help us understand the problem. What is going on with this article?

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
    %...

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした