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年4月16日
ElasticBeanstalkでAmazonLinux2 Ruby環境にデプロイする

2021年3月23日
Google Analyticsの新バージョン!「Google Analytics 4(GA4)」のレポートデータをRubyで取得する

2020年12月16日
Ruby Enumerableモジュールを理解して繰り返し処理を書く際の選択肢を増やす

2020年12月14日
SendGridのEvent Webhookについて調査してみた

2020年12月7日
ActionTextとrails5系でも使えるWYSIWYGエディターgemをいろいろ試してみた

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

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

しまだ デザイナー
WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。
Miu マーケター
ドイツでWEBマーケティングしています。
しんのき エンジニア
主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

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

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
うえまつゆい エンジニア
サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

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

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

Damien
WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

ゲスト デザイナー

かっきー

まりな

suzuki

taro
xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。
miyagi

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