- 更新日: 2016年7月7日
- Rails
meta-tagsでRailsアプリのmetaタグとOGP設定
Rails アプリケーションで、タイトルタグ（title）や meta タグ/meta keywords, meta description など、また Facebook OGP や Twitterカード用のタグなどを設定するには、meta-tags という gem を利用すると簡単に実現できます。meta タグ周りをすっきり実装できるので、メンテナンス性も上がるかと思います。
GitHub – kpumuk/meta-tags: Search Engine Optimization (SEO) plugin for Ruby on Rails applications.
— 環境 —
Rails 4.2
Ruby 2.3
画像付き英語辞書 Imagict | 英単語をイメージで暗記GitHub の README を読めば分かりますが、コントローラーかビューで set_meta_tags メソッドを使うことにより、出力する meta タグを設定できます。そしてビューで display_meta_tags メソッドを呼び出すことで、set_meta_tags により設定された meta タグが出力されます。
当初コントローラーで set_meta_tags を使って meta タグを設定する実装を考えていたのですが、途中で方針を変更してビューで set_meta_tags するようにしました。meta タグはビューに関連性が強いですし、config/locales/views 内の既存の翻訳用 yaml ファイルを使いたいという実装上の都合もありまして。以降 meta-tags の使い方および実装例の紹介です。
meta-tags インストール
まずは meta-tags をインストールします。Gemfile 追記後に bundle install。
Gemfile
|
1 2 3 |
gem 'meta-tags' |
インストール実行。
|
1 2 3 |
$ bundle install |
デフォルトのmetaタグ情報を作成
まずは meta タグのデフォルト設定を作成します。ここでは多言語化を考慮して、config/locales 以下に yaml ファイルとして作成しました。設定用ファイルなどでも良いかと思います。
config/locales/meta_tags.ja.yml
|
1 2 3 4 5 6 7 |
ja: meta_tags: defaults: site: 'サイト名' description: 'サイトの説明文' keywords: 'キーワード1,キーワード2,キーワード3' title: 'トップページ' |
config/locales/meta_tags.en.yml
|
1 2 3 4 5 6 7 |
en: meta_tags: defaults: site: 'website name' description: 'explanations of the website' keywords: 'keyword1,keyword2,keyword3' title: 'top page' |
metaタグ設定/出力用のヘルパー作成
続いて meta タグの設定用ヘルパー（assign_meta_tags）と出力用ヘルパー（show_meta_tags）を作成しました。それぞれ meta-tags が用意する set_meta_tags と display_meta_tags をラップしたメソッドです。
app/helpers/application_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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
module ApplicationHelper def show_meta_tags if display_meta_tags.blank? assign_meta_tags end display_meta_tags end def assign_meta_tags(options = {}) defaults = t('meta_tags.defaults') options.reverse_merge!(defaults) site = options[:site] title = options[:title] description = options[:description] keywords = options[:keywords] image = options[:image].presence || image_url('image.png') configs = { separator: '|', reverse: true, site: site, title: title, description: description, keywords: keywords, canonical: request.original_url, og: { type: 'article', title: title.presence || site, description: description, url: request.original_url, image: image, site_name: site }, fb: { app_id: '*****' }, twitter: { site: '@twitter_account', card: 'summary', } } set_meta_tags(configs) end end |
これらのヘルパーを利用することで、個別ビューで meta タグ設定がない場合はデフォルトの meta タグを出力して、また個別ビューで meta タグを上書き設定することも簡単にできるようになります。
レイアウトビューで meta タグを出力
レイアウト用ビュー（application.html.erb）に、meta タグ出力用に作成したヘルパー show_meta_tags を追記します。
app/views/layouts/application.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <%= show_meta_tags %> </head> // ... |
これで、個別のビューで meta タグを設定しない場合は、デフォルト情報の meta タグが出力されるようになる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<title>トップページ | サイト名</title> <meta content="サイトの説明文" name="description" /> <meta content="キーワード1,キーワード2,キーワード3" name="keywords" /> <link href="http://example.com/" rel="canonical" /> <meta content="article" property="og:type" /> <meta content="トップページ" property="og:title" /> <meta content="サイトの説明文" property="og:description" /> <meta content="http://example.com/" property="og:url" /> <meta content="http://example.com/assets/image.png" property="og:image" /> <meta content="サイト名" property="og:site_name" /> <meta content="*****" name="fb:app_id" /> <meta content="@twitter_account" name="twitter:site" /> <meta content="summary" name="twitter:card" /> |
meta タグを個別ビューで上書き
meta タグを個別のビューで上書きして、ページ毎に異なる meta タグを設定することも可能です。作成した assign_meta_tags ヘルパーの options 引数にハッシュを渡して呼び出す。
app/views/users/index.html.erb
|
1 2 3 |
<% assign_meta_tags title: 'ユーザーのリスト', description: 'ユーザーのリストです', keywords: 'ユーザー,リスト' %> |
このビューのページでは、meta タグが以下のように上書きされて出力される。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<title>ユーザーのリスト | サイト名</title> <meta content="ユーザーのリストです" name="description" /> <meta content='ユーザー,リスト' name="keywords" /> <link href="http://example.com/users/index" rel="canonical" /> <meta content="article" property="og:type" /> <meta content="ユーザーのリスト" property="og:title" /> <meta content="ユーザーのリストです" property="og:description" /> <meta content="http://example.com/users/index" property="og:url" /> <meta content="http://example.com/assets/image.png" property="og:image" /> <meta content="サイト名" property="og:site_name" /> <meta content="*****" name="fb:app_id" /> <meta content="@twitter_account" name="twitter:site" /> <meta content="summary" name="twitter:card" /> |
meta-tags の使い方と実装例の紹介でした。
- – 参考リンク –
- meta-tags で Rails アプリの SEO は万全に – Qiita
- Rails の関連記事
- RailsでMySQLパーティショニングのマイグレーション
- Rails ActiveRecordでdatetime型カラムのGROUP BY集計にタイムゾーンを考慮する
- RailsプラグインGemの作成方法、RSpecテストまで含めたrails pluginの作り方
- RailsでAMPに対応するgemをリリースしました
- Railsでrequest.urlとrequest.original_urlの違い
- Railsでwheneverによるcronバッチ処理
- Google AnalyticsのRails Turbolinks対応
- Railsアプリにソーシャル・シェアボタンを簡単設置
- Rails監視ツール用にErrbitをHerokuで運用
- Facebook APIバージョンのアップグレード手順(Rails OmniAuth)
- 初回公開日: 2016年7月6日
Leave Your Message!