meta-tagsでRailsアプリのmetaタグとOGP設定

スポンサーリンク
スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

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

スポンサーリンク

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

インストール実行。

デフォルトのmetaタグ情報を作成

まずは meta タグのデフォルト設定を作成します。ここでは多言語化を考慮して、config/locales 以下に yaml ファイルとして作成しました。設定用ファイルなどでも良いかと思います。

config/locales/meta_tags.ja.yml

config/locales/meta_tags.en.yml

metaタグ設定/出力用のヘルパー作成

続いて meta タグの設定用ヘルパー(assign_meta_tags)と出力用ヘルパー(show_meta_tags)を作成しました。それぞれ meta-tags が用意する set_meta_tags と display_meta_tags をラップしたメソッドです。

app/helpers/application_helper.rb

これらのヘルパーを利用することで、個別ビューで meta タグ設定がない場合はデフォルトの meta タグを出力して、また個別ビューで meta タグを上書き設定することも簡単にできるようになります。

レイアウトビューで meta タグを出力

レイアウト用ビュー(application.html.erb)に、meta タグ出力用に作成したヘルパー show_meta_tags を追記します。

app/views/layouts/application.html.erb

これで、個別のビューで meta タグを設定しない場合は、デフォルト情報の meta タグが出力されるようになる。

meta タグを個別ビューで上書き

meta タグを個別のビューで上書きして、ページ毎に異なる meta タグを設定することも可能です。作成した assign_meta_tags ヘルパーの options 引数にハッシュを渡して呼び出す。

app/views/users/index.html.erb

このビューのページでは、meta タグが以下のように上書きされて出力される。

meta-tags の使い方と実装例の紹介でした。

スポンサーリンク
パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!