1. ホーム
  2. Ruby on Rails
  3. RailsでSEO上の問題からcanonicalタグを設定する方法

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 を使用することで他のメタタグやデフォルトの設定などができるのでとても便利です。

Author Profile

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

この記事は
参考になりましたか?

PAGE TOP