2017年6月20日
プログラミング
RailsでSEO上の問題からcanonicalタグを設定する方法


はじめに
サイトを運用していると、URLの正規化が問題になることがあります。
ULRの正規化とは、「いくつかのURLで同じ内容のコンテンツが表示されてしまう事象」を解決することです。
例えばよくあるのがPC用とスマートフォン用で /hoge.html
と /sp/hoge.html
のようにURLを分けるパターンです。
この場合、URLが異なるにも関わらず内容がほぼ一緒なので、Googleが重複コンテンツと見なし、それが著しく多い場合に正しい評価が下されないことがあります。
単純にURLを1つに絞りたい場合はリダイレクト処理を行うことで対処できますが、今回のようにデバイスごとにURLが異なるケースや、AMPの対応などにおいて rel=”canonical”を使用しURLを正規化する方法をご紹介します。
rel=”canonical”とは?
前述のように内容が重複するURLが複数ある際に、「検索エンジンのインデックス(検索エンジンが認識するURL)上はこっちのURLを見てね!」と指定する書き方がこちらです。
<link rel="canonical” href=”https://example.com/">
link rel="canonical
でインデックスさせたいURLを指定することで、正規のページを検索エンジンに教えることができます。
POINT!!
Googleのサポート上は、必ずしもこの結果になることが保障できないとありますのでご注意ください。
また、他の301リダイレクトの方法やサイトマップでの対象方法も書いてあるので、ぜひこちらのサポートページは目を通してみてください。
Googleサポート
meta-tagsのGemを使用
ではシステムで実装する場合はどのようにcanonicalを設定すれば良いのでしょうか。
Ruby on Railsでの実装方法を見ていきます。
まずはmeta-tagsというGemを使った指定方法です。
kpumuk/meta-tags: Search Engine Optimization (SEO) for Ruby on Rails applications.
まずはGemをインストールしましょう。
gem install meta-tags
bundle install
このGemを使うことで、titleやmeta-descriptionなどmetaタグを簡単に指定することができます。
デフォルト値の設定なども簡単な為、動的に項目を設定したい場合に便利です。
canonicalを追加する為にはこちらを指定するだけです。
例えば@articleというインスタンス変数のurlに正規のURLがある場合、Viewファイルに
<% set_meta_tags canonical: @article.url %>
このように書くだけです。
POINT!!
最近正規化が必要な場面が増えた理由として、AMP対応があります。
AMP用のURLと通常のURLを2つ用意する場合が多く、その場合にはAMP側には rel=”canonical” を指定し通常のURLを指す必要があります。
また、通常のURL側にはAMPのURLがどれかを教える為に rel=”amphtml” を指定しAMP側のURLを指してあげましょう。
このamphtml対応もこのGemですとこのように簡単に対応することができます。
<% set_meta_tags amphtml: url_for(format: 'amp', only_path: false) %>
yieldを使用
上記のmeta-tagsのGemを使うことでも便利に正規化ができますが、Gemを使わずyeildを使用しても簡単に正規化が可能です。
まずheadタグ内にyeildでcanonicalを指定します。
app/layouts/application.html.erb
<%= yield :canonical %>
show.html.erb
# 正規化したいviewファイル
<% content_for :canonical do %>
<link rel='canonical' rel='<%= @article.url %>' >
<% end %>
POINT!!
通常のHTMLにrelの値だけRubyのコードで変えるのは少し気持ち悪いですよね。
今回のケースとは少し違いますが、ページが一定のルールで置き換えることができるのであれば、こちらのcanonical-railsというGemを利用することもできます。
jumph4x/canonical-rails: Quick and configurable canonical tag to use in Rails views.
まとめ
最近ではAMP対応等、モバイルページの切り分けなどでURLの正規化が必要なシーンが増えています。
そんなときは rel="canonical"
を使用しURLの正規化を行いましょう。
yeildでも可能ですが、meta_tags
を使用することで他のメタタグやデフォルトの設定などができるのでとても便利です。
Ruby on Railsのお仕事に関するご相談
Bageleeの運営会社、palanではRuby on Railsに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか?
0
0
関連記事

2021年12月23日
RailsアプリにGoogle Mapから緯度経度情報を取得する機能を追加する

2021年12月22日
RDBでセットメニューを表現する方法

2021年12月11日
Railsでツリー構造アプリを作ってみた

2021年12月10日
Dockerで作成したRailsアプリケーションをHerokuにデプロイする

2021年12月9日
モデルに書いていたメソッドをPOROに切り出してみた!

2021年12月7日
gem cancancanを使ってみた!
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー

Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

Damien
WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

かっきー

まりな

suzuki
miyagi

ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと
デザイナーをしています。 好きな食べ物はラーメンです。

taishi kobari
フロントエンドの開発を主に担当してます。Blitz.js好きです。

kubota shogo
サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!
nishi tomoya

aihara
グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。
nagao
SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

Kainuma
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto
asama
ando
iwasawa ayane

oshimo
異業界からやってきたデザイナー。 palanARのUIをメインに担当してます。 これからたくさん吸収していきます!