2017年6月20日

プログラミング

RailsでSEO上の問題からcanonicalタグを設定する方法

目次

  1. はじめに
  2. rel=”canonical”とは?
  3. meta-tagsのGemを使用
  4. yieldを使用
  5. まとめ

はじめに

サイトを運用していると、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

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

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

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP