WEB歴 7年の専門家がホームページやブログ運営に役立つ情報を発信しています。

更新日:2020年4月14日

rel = canonical の書き方【URL正規化ケース別】SEO基礎

当記事は rel = canonicalの書き方についてわかりやすく説明したものです。

基本的な書き方から「URLを正規化するウェブページの種類ごとに適した」書き方まで幅広く紹介しています。

URLの正規化については次の記事で詳しく説明しています。

»【SEO初心者むけ】URLの正規化とは?重要な理由と方法も説明

rel = canonical 属性の基本的な書き方

はじめに、rel = canonical 属性の基本的な書き方を説明します。

HTMLの書き方

rel = canonical 属性のHTMLの書き方は次のとおりです。


                                    <link rel="canonical" href="正規ページのURL" />
                            

正規ページ … 検索エンジンに一番重要だと認識してもらいたいページ

なお、この際に指定する正規ページのURLは「httpから」始まる絶対パスで指定します。理由は Googleがそのように指定しているからです。

rel="canonical" リンク要素では、相対パスではなく絶対パスを使用します。

適切な構造: https://www.example.com/dresses/green/greendresss.html
不適切な構造: /dresses/green/greendress.html

そして、rel= canonical 属性は <head>タグのなかに書くというルールがあります。したがって、最終的には次のようなHTMLになります。

<head>
                                <link rel="canonical" href="正規ページのURL" />
                    </head>

rel = canonical 属性を記述するページ

rel = canonical 属性を記述するページは、正規ページを除いた重複ページの全てです。

正規ページ … 検索エンジンに一番重要だと認識してもらいたいページ

具体的に説明します。たとえば、ウェブサイトに次のようなページが 3つあるとします。

同じ商品の色違いページ

  • くつ(白色):https://ec-site.com/white/ ← 正規ページ
  • くつ(黒色):https://ec-site.com/black/
  • くつ(赤色):https://ec-site.com/red/

そして、この中の「くつ(白色)」を正規ページにするとします。

この場合ならば、くつ(黒色)とくつ(赤色)のページに rel = canonical 属性 を記述します。リストで表すと次のとおりです。

くつ(白色)を正規ページにする場合

  • くつ(白色):https://ec-site.com/white/
  • くつ(黒色):https://ec-site.com/black/ ← 記述する
  • くつ(赤色):https://ec-site.com/red/ ← 記述する

ちなみに、この際に記述する rel = canonical 属性は次のとおりです。


                                        <link rel="canonical" href="https://ec-site.com/white/" />
                                

上記コードを見ると、正規ページ(くつ白色)のURLが指定されていることが分かるかと思います。このコードを、くつ(黒色)とくつ(赤色)のページに記述します。

rel = canonical 属性を記述する際の注意点

rel = canonical 属性を記述する際の注意点は次の 6つです。

  1. 正規ページのURLは絶対パス(絶対 URL)で指定する
  2. <head> の中に書く。<body>の中には書かない
  3. 1 つのページに 2 つ以上記述しない
  4. rel=canonical のリンク先ページ(正規ページのURL)を間違えない
  5. 複数ページにまたがるコンテンツの 1 ページ目を 正規ページにしない
  6. カテゴリ ページで特集記事への rel=canonical リンクを指定しない

1, 2 については先述したとおりです。

3 は rel=canonical を 1 つのページに 2 つ以上記述すると全ての rel=canonical が無視されので注意してください、という意味です。

4 は 正規ページとして指定するURLを入力ミスしたり違うページのURLを指定したりしない、という意味です。

5,6 については次のページでわかりやすく解説されていますので、そちらをご覧ください。

自己参照 canonical 属性の意味と書き方

次に、URLを正規化をする際に必要な自己参照 canonical 属性について説明します。

自己参照 canonical 属性は、正規ページのHTMLに「そのページ自身のURL」を正規ページとして canonical 属性で指定することです。

具体的に説明します。たとえば、ウェブサイトに次のようなページが 3つあるとします。

同じ商品の色違いページ

  • くつ(白色):https://ec-site.com/white/ ← 正規ページ
  • くつ(黒色):https://ec-site.com/black/
  • くつ(赤色):https://ec-site.com/red/

この場合ならば、正規ページである「くつ(白色)」のHTMLに次のようなcanonical 属性を記述します。


                        <link rel="canonical" href="https://ec-site.com/white/" />
                

上記コードを見ると分かるように、正規ページである「くつ(白色)」のHTMLに「くつ(白色)= そのページ自身のURL」
を正規ページとしてcanonical 属性で指定します。

これが、自己参照 canonical 属性です。

自己参照 canonical 属性は基本的には不要です。しかし、URL正規化のケースによっては記述する必要がありますので覚えておいてください。

また、自己参照 canonical 属性は全ての正規ページに記述しても問題ないので、記述するべきか迷った場合はとりあえず記述しておくことをお勧めします。

WordPress は「自己参照 canonical 属性」を自動設定

WordPressの場合は「自分で」自己参照Canonical属性を設定する必要はありません。

理由は WordPressのシステムが自動で自己参照Canonical属性を設定するからです。設定なども一切不要です。

インターネットの情報によると「WordPress3.4」あたりから自己参照Canonicalが自動で設定されるようになったそうです。

2020年3月時点の最新バージョンは「WordPress5.3」です。したがって、WordPressのシステムをアップデートしながら使用している人は「自分で」自己参照Canonicalを設定する必要はありません。

同じドメイン内で URL正規化をする場合の rel = canonical 属性の書き方4パターン

URLの正規化をしたいウェブページの種類によって rel = canonical 属性の書き方は違います。ここでは、次の 4 パターンの rel = canonical 属性の書き方について紹介します。

↑ クリックすると移動します。

同じような内容のページが複数ある場合の書き方

一つ目のケースは、ウェブサイトに同じような内容のページが複数ある場合です。

具体的には、EC(通販)サイトで「同じ商品の色違いページ」がある場合などが、このケースに該当します。

具体例で説明

たとえば、ウェブサイトに次のようなページがあるとします。

同じ商品の色違いページ

  • カバン(茶色)https://sample.com/bag/brown/
  • カバン(白色)https://sample.com/bag/white/
  • カバン(黒色)https://sample.com/bag/black/

URLの末尾が異なる

そして、カバン(茶色)を正規ページにしたいとします。

この場合ならば、カバン(白色)とカバン(黒色)のページに rel = canonical 属性 を記述します。記述する rel = canonical 属性は次のとおりです。


                            <link rel="canonical" href="https://sample.com/bag/brown/" />
                    

上記コードに指定するURLは正規ページ(カバン茶色)のURLです。

カバン(茶色)には rel = canonical 属性を記述する必要はありません。

カバン(茶色)に自己参照 canonical属性を指定したい場合は、次のコードをカバン(茶色)のHTMLに記述します。← 基本的には不要


                                            <link rel="canonical" href="https://sample.com/bag/brown/" />
                                    

ちなみに、上記コードはカバン(白色)とカバン(黒色)に指定したcanonical属性と同じです。

複数の URL で同じページが表示される

二つ目のケースは、複数の URL で同じページが表示される場合です。

具体的には URLの転送設定(301リダイレクト)を行っていない場合です。その場合、同じウェブページを複数のURLで表示する事ができます。

具体例で説明

URLの転送設定を行っていないと、次の全てのURLは同じウェブページを表示します。

先頭が http

  • http://tk-create.com/what-is-seo/
  • http://tk-create.com/what-is-seo/index.html
  • http://www.tk-create.com/what-is-seo/

先頭が https

  • https://tk-create.com/what-is-seo/
  • https://tk-create.com/what-is-seo/index.html
  • https://www.tk-create.com/what-is-seo/

その他の違い … 「index.html」と「www」の有無

このような場合は、まず全てのURLの中から正規ページにするURLを一つ選びます。

そして、その次に正規ページのURLを rel = canonical 属性に指定してウェブページの HTML に記述します。

たとえば、https://tk-create.com/what-is-seo/ というURLを正規ページにするとします。その場合ならば、次のrel=canonical 属性を記述します。


                        <link rel="canonical" href="https://tk-create.com/what-is-seo/" />
                

rel = canonical 属性を記述するのは 1ページのみです。理由は、同じページを表示するURLは複数ありますが、表示しているウェブページのデータは同じだからです。

なお、301リダイレクト(URL転送処理)によってURL正規化をする場合は rel = canonical
属性は必要はありません。また、その場合でも自己参照canonicalとして書くのは問題ありません。

PCとスマホ(モバイル端末)で表示するページが違う

三つ目のケースは、PCとスマホ(モバイル端末)で表示するページが違う場合です。

具体例で説明

たとえば、次のような場合です。

  • PC用 https://sample.com/
  • スマホ用 https://sample.com/sp/

このような場合はスマホ用ページに「rel = canonical 属性」、PC用ページに「rel = alternate 属性」を指定します。

具体的には次のとおりです。

PC用ページには rel = alternate 属性


                        <link rel="alternate" media="only screen and (max-width: 640px)" href="https://tk-create.com/what-is-seo/sp/" />
                    

PC用ページは 今までと次の点が異なりますので注意してください。

記述する際の注意点

  • rel = alternate( rel = canonicalではない)
  • media=〇〇が必要
  • URL = スマホ用ページ

media="only screen and
(max-width:640px)"は「ウェブページを表示する端末のディスプレイ幅が640px以下ならスマホ用のページを表示してください」という意味です。

記述するコードを見ると難しく感じると思いますが安心してください。

変更する部分はスマホ用URL部分だけで OK です。下記コードの黄色の文字部分を自分が正規ページにしたいURLに変更するだけです。


                        <link rel="alternate" media="only screen and (max-width: 640px)" href="https://tk-create.com/what-is-seo/sp/" />
                    

その他の部分は変更せずに上記コードをそのまま使用すれば大丈夫です。

スマホ用ページには rel = canonical 属性


                        <link rel="canonical" href="https://tk-create.com/what-is-seo/" />
                    

スマホ用ページには、これまでと同様に rel = canonical 属を記述します。指定するURLはパソコン用のページURLです。

ウェブページの印刷用バージョンやPDFバージョンがある

四つ目のケースは、ウェブページの印刷用バージョンやPDFバージョンがある場合です。

具体例で説明

たとえば、次のような場合です。

  • 通常用 https://sample.com/
  • 印刷用 https://sample.com/print/
  • PDF版 https://sample.com/pdf/

上記の例で通常用ページを正規ページにするとします。その場合の rel = canonical 属性の書き方は次のとおりです。

通常用ページには自己参照 canonicalを設定

通常用ページには先述した自己参照 canonical を設定します。具体的には、次のコードを通常用ページに記述します。


                        <link rel="canonical" href="https://sample.com/" />
                

印刷用ページには rel = canonical 属性で通常用ページを指定

印刷用ページは rel = canonical 属性に通常用ページを指定します。具体的には、次のコードを印刷用ページに記述します。


                        <link rel="canonical" href="https://sample.com/" />
                

PDFは指定しない

PDFはデータファイルなのでHTMLを記述することが出来ません。したがって、rel = canonical 属性の指定は出来ません。

先ほど通常用ページにcanonicalを設定した理由はこのためです。

自己参照 canonicalを設定した理由

たとえば、検索エンジンが通常用ページとPDFページのどちらを正規ページにするか迷ったとします。

この時に、検索エンジンが通常用ページにあるcanonical 属性を見れば「通常用ページが正規ページである」と判断することが出来ます。

これが、先ほど通常用ページに自己参照 canonicalを設定した理由です。


以上で【URL正規化ケース別】rel = canonical 属性の書き方の紹介は終了です。

異なるドメイン間(クロスドメイン)でURL正規化をする場合の rel = canonical 属性の書き方

次に異なるドメイン間(クロスドメイン)でURLを正規化する場合の rel = canonical 属性の書き方について説明します。

参考までに「異なるドメインでもURLを正規化する必要がある」とGoogleが説明している文章を紹介しておきます。

正規 URL の指定が重要な理由

シンジケーション コンテンツを管理するため。 他のドメインで公開するコンテンツをシンジケートする場合、使用する URL にページ
ランキングを統合する必要があります。

ちなみに、今から説明する異なるドメイン間(クロスドメイン)とは具体的には次のような場合のことです。

  • ページ A https://sample.com/
  • ページ B https://abc.com/

上記 2つはそれぞれ別の独自ドメイン

URL正規化する手順とrel = canonical 属性の書き方

異なるドメイン間でURL正規化をする場合に行うべきことは次の2つです。

①まず正規ページにするURLを一つ選ぶ。

②正規ページではないウェブページに「正規ページのURLを指定した rel = canonical 属性」を記述する。

具体例で説明

具体例を使用しながら分かりやすく説明していきます。

  • ページ A https://sample.com/
  • ページ B https://abc.com/

上記 2つはそれぞれ別の独自ドメイン

まず、ページAを正規ページにするとします。

その場合ならば、ページ B に次の rel=canonical 属性を記述します。具体的には次のコードをページ B に記述します。


                                        <link rel="canonical" href="https://sample.com/" />
                                

↑ URLには正規ページである「ページ A のURL」を指定。

以上で、URL正規化作業は終了です。正規ページであるページ A には何も設定する必要はありません。

参考サイトの紹介【Google】

最後に、rel = canonical 属性の書き方について Googleが説明しているページを紹介します。それが次のページです。


以上で、当記事の内容は終了です。

これから「ウェブサイトのURL正規化をする!」という人の参考になればと思います。

おわり

当記事の内容が役にたったという方は、他の方に紹介していただけると嬉しいです。

— スポンサーリンク— 

  • カテゴリ:
  • SEO
タグ:

これからブログを始めたい人にオススメの記事

トップへ戻るボタン