酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

meta-tagsとsitemap_generatorで始めるRails 5.0時代のSEO対策

Rails5.0時代のSEO対策をしてくれるRubyGemの紹介を全面リニュアールしてご紹介します!

meta-tags : メタタグ / open graphタグ / headerのtitleの管理
sitemap_generator : サイトマップを生成してくれる

どちらも簡単に導入できて、機能は充実しているので是非試してみて下さい。


meta-tags GitHubsitemap_generator GitHub

Gemのインストール

Gemfileに以下のコードを追加して、bundle installを実行。

1
2
3
4
5
6
# SEO
gem 'meta-tags', require: 'meta_tags'
gem 'sitemap_generator'

# Multi-environment configuration
gem 'config'

setting.yml の生成

1
bundle exec rails g config:install

meta-tagsの設定

ここからは僕の個人的にやっているやり方です。かなり我流なので、「GitHubの公式リポジトリ」の方が最初はいいかもです。

view - layouts/application

app/views/layouts/application.html.hamlに次のコードを追加。

1
2
3
4
!!! 5
%html
  %head
    = render partial: 'layouts/meta_tags'

view partial meta_tags

app/views/layouts/_meta_tags.html.hamlに次のコードを追加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
%meta{charset: 'UTF-8'}

-# デスクリプションを不用意に変更されないようにする
%meta{CONTENT: 'NOYDIR', NAME: 'ROBOTS'}
%meta{CONTENT: 'NOODP', NAME: 'ROBOTS'}

-# Twitter用のTwitter Cart対策
%meta{content: 'summary', name: 'twitter:card'}
%meta{content: '@twitter_user_name', name: 'twitter:site'}

-# モバイルに対応している場合のみ書く
%link{media: 'handheld', rel: 'alternate', href: canonical_url}

-# RSSを作成している場合のみ書く
%link#gallery{href: 'RSS-URL', rel: 'alternate', title: '', type: 'application/rss+xml'}

:ruby
  set_meta_tags title: page_title, site: Settings.site.title, reverse: true
  set_meta_tags description: page_description
  set_meta_tags keywords: page_keywords
  set_meta_tags canonical: canonical_url

  opg = {
    title: page_title,
    type: 'website',
    url: canonical_url,
    image: page_og_image_url,
    site_name: Settings.site.title,
    description: page_description,
    locale: 'ja_JP'
  }
  set_meta_tags open_graph: opg

= display_meta_tags
%meta{content: "#{Settings.facebook.app_id}", property: 'fb:app_id'}

-# favicon
%link{href: '/apple-icon-57x57.png', rel: 'apple-touch-icon', sizes: '57x57'}
%link{href: '/apple-icon-60x60.png', rel: 'apple-touch-icon', sizes: '60x60'}
%link{href: '/apple-icon-72x72.png', rel: 'apple-touch-icon', sizes: '72x72'}
%link{href: '/apple-icon-76x76.png', rel: 'apple-touch-icon', sizes: '76x76'}
%link{href: '/apple-icon-114x114.png', rel: 'apple-touch-icon', sizes: '114x114'}
%link{href: '/apple-icon-120x120.png', rel: 'apple-touch-icon', sizes: '120x120'}
%link{href: '/apple-icon-144x144.png', rel: 'apple-touch-icon', sizes: '144x144'}
%link{href: '/apple-icon-152x152.png', rel: 'apple-touch-icon', sizes: '152x152'}
%link{href: '/apple-icon-180x180.png', rel: 'apple-touch-icon', sizes: '180x180'}
%link{href: '/android-icon-192x192.png', rel: 'icon', sizes: '192x192', type: 'image/png'}
%link{href: '/favicon-32x32.png', rel: 'icon', sizes: '32x32', type: 'image/png'}
%link{href: '/favicon-96x96.png', rel: 'icon', sizes: '96x96', type: 'image/png'}
%link{href: '/favicon-16x16.png', rel: 'icon', sizes: '16x16', type: 'image/png'}
%link{href: '/manifest.json', rel: 'manifest'}
%meta{content: '#ffffff', name: 'msapplication-TileColor'}
%meta{content: '/ms-icon-144x144.png', name: 'msapplication-TileImage'}
%meta{content: '#ffffff', name: 'theme-color'}

app/helpers/seo_helper.rb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module SeoHelper
  # canonical url
  def canonical_url
  end

  # 各ページ毎のデスクリプション
  def page_description
    t("meta.description.#{controller_name}.#{action_name}")
  end

  # 各ページ毎の代表画像
  def page_og_image
    "http://#{Settings.site.domain}#{Settings.site.meta.og.image}"
  end

  # 各ページ毎のキーワード
  def page_keywords
    t("meta.keywords.#{controller_name}.#{action_name}")
  end

  # 各ページ毎のタイトル
  def page_title
    t("meta.title.#{controller_name}.#{action_name}")
  end
end

Facebook app_id/og_type の入手

app_idを取得する

Facebook Developers App List

og_typeを取得する

facebook OGP(Open Graph Protocol)設定 og:type 一覧

config/settings.yml

1
2
3
4
5
6
7
8
9
10
site:
  title: "Site Title"
meta:
  description: "sample page description"
  keywords: ["sample", "page", "keyword"]
  og:
    image: "og_image_path"
    type: "website"
facebook:
  app_id:

confing/settings/xxx.yml について

1
2
site:
  domain: "Site URL"

Favicon &App Icon の生成

Favicon & App Icon Generator

で Favicon と App Icon を生成します。生成したら public 直下に設置するようにしてください。

これで

(1) metaタグ
(2) Open Graphプロトコルのmetaタグ
(3) Twitterカード
(4) headerのtitle
(5) URLの重複回避(canonical)
(6) RSSの運用支援
(7) Favicon &App Icon の設置

を制御できるようになります。

Metaタグは奥が深い

これだけはありません。メタタグは本当に奥が深いです。例えば次のような要素もあります。

* Noindex: Indexさせないページの指定
* Nofollow: Link先にリンクジュースを渡さない用に設定
* Pagination links(prev/next): ページネーション情報
* Refresh interval and redirect URL: リダイレクト先のURLの指定
* author: 著者の情報(主にGoogle+対策)

などなど。下記は公式サイトで更に詳しく紹介されています!

meta-tags GitHub

sitemap_generatorの設定

config/sitemap.rbを生成。

1
rake sitemap:install

config/sitemap.rbをサイト構成に合わせて修正。
ここでは、sitemapを生成できるようにするために、SitemapGenerator::Sitemap.default_hostのみ修正。

1
SitemapGenerator::Sitemap.default_host = 'http://example.com'

詳細は、Sitemap Configuration | kjvarga/sitemap_generator | GitHubを参照。

sitemapファイルをpublic/に生成。

1
2
3
4
5
# Development/Testの場合(pingをsearchエンジンに送付しない)
rake sitemap:refresh:no_ping

# Productionの場合(pingをsearchエンジンに送付する)
rake sitemap:refresh

実行結果が以下の様になっていれば成功です。

1
2
3
4
5
rake sitemap:refresh:no_ping
> In /app_path/to/public/
> + sitemap1.xml.gz                                          1 links > /  340 Bytes
> + sitemap_index.xml.gz                                  1 sitemaps > /  241 Bytes
> Sitemap stats: 1 links / 1 sitemaps / 0m00s

sitemap_genreatorはCapistranoと連携してデプロイ時に自動生成することもできるので、良かったら公式サイトも見て下さい。

sitemap_generator GitHub

Special Thanks

Yuki HariguchiさんにCapistranoのデプロイの記述について修正コードを教えて頂きました。ありがとうございます!

変更来歴

2012/12/18 09:25 TITLEを PAGE_TITLE | SITE_TITLEにする記述を追記
2012/12/21 17:45 「補足:Capistranoと連携してDeploy時にSitemapを生成する」を追加
2013/12/03 21:45 全面リニュアール、Rails4.0で動作確認
2014/07/29 12:00 Rails 4.1 対応
2015/01/18 12:55 Capistrano2のコードがあったため、一旦削除
2016/10/10 17:40 Rails 5.0 対応

おすすめの書籍