酒と泪とRubyとRailsと

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

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

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

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

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


meta-tags GitHubsitemap_generator GitHub

Gemのインストール

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

1
2
3
# SEO
gem 'meta-tags', :require => 'meta_tags'
gem 'sitemap_generator'

meta-tagsの設定

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

view - layouts/application

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

1
2
3
4
!!! 5
%html{dir: "ltr", "xmlns:fb": "http://www.facebook.com/2008/fbml", "xmlns:og": "http://ogp.me/ns#"}
  %head
    = render partial: 'layouts/meta_tags'

view - layouts/_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
%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'}/

- 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

:ruby
  opg = {
    title: page_title,
    type: 'website',
    url: canonical_url,
    image: page_og_image,
    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'}/

slimの場合はこちら!

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
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'

- set_meta_tags site: page_title
- set_meta_tags description: page_description
- set_meta_tags keywords: page_keywords
- set_meta_tags canonical: canonical_url

ruby:
  opg = {
    title: page_title,
    type: 'website',
    url: canonical_url,
    image: page_og_image,
    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'

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
    "#{Settings.site.url}#{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
site:
  title: "Site Title"
  meta:
    description: "sample page description"
    keywords: ["sample", "page", "keyword"]
    og:
      app_id: "app id"
      image: "og_image_path"
      type: "website"

confing/settings/xxx.yml について

1
2
site:
  url: "Site URL"

これで

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

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

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

補足:Capistranoと連携してDeploy時にSitemapを生成する

Deployの自動化Gem「Capistrano」を使っている場合は、Delopy時にSitemapを自動で生成/更新することができます。deploy.rbに以下の内容を追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
after "deploy:update_code", "deploy:copy_old_sitemap"
after "deploy", "refresh_sitemaps"
namespace :deploy do
  desc "古いサイトマップの削除"
  task :copy_old_sitemap do
    run "if [ -e #{previous_release}/public/sitemap_index.xml.gz ]; then cp #{previous_release}/public/sitemap* #{current_release}/public/; fi"
  end

  desc "sitemapの更新"
  task :refresh_sitemaps do
    run "cd #{latest_release} && RAILS_ENV=#{rails_env} bundle exec rake sitemap:refresh"
  end
end

もしRailsのDeploy自動化Gem「Capistrano」に興味が有る場合は、「Rals3.2.9で始める Git連携Capistranoによる自動デプロイ」を参考にしてください。

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で動作確認

ハッカソンハウス遊びに来ませんか?

ハッカソンハウス
クリエーターが無料で、自由に開発に集中できるスペース「Hackathon House」を作りました。 『ハッカソンハウス - カレンダー』にOPENしている日時を書いていますので、是非遊びに来てください! (場所はHPのお問い合わせからご連絡ください)

なぜ始めたのか?

僕はアメリカの有名なインキュベーション・オフィスを少しだけ訪問させて頂いたことがあります。あそこはプロダクトの可能性を目一杯引き出してくれる夢のような空間でした。僕はあんな場所を日本にも作りたいとずっと想い続けてきました。この企画を一緒にやっているくりしーさんは、『サウス・バイ・サウスウエスト』を通して、「あのワクワクする空間、熱気溢れるカオスな空間を日本でも創りたい。」というビジョンで一緒にやっています!



押さえておきたい書籍

いかがだったでしょうか?
もし説明がわかりにくかったり、間違っている場所があればぜひ一言!

Comments