Help us understand the problem. What is going on with this article?

【備忘録】リンク要素<link>のrel="canonical"を使った重複したURLを統合するときの書き方についてのメモ

More than 1 year has passed since last update.

rel="canonical"(rel(リレーションシップ)属性の属性値「canonical(カノニカル)」)は、
検索結果ページなど、「(大量の)類似ページが発生」する際にお世話になる事が多いかと思います。
ということで、rel="canonical" リンクタグを使用する場合の
href(ハイパーリファレンス)属性の中身(属性値)の書き方についての備忘録です。

詳細は、Search Console ヘルプをご参照下さい。

重複した URL を統合する
類似ページや重複ページについて正規ページを設定する
参考URL:重複した URL を統合する - Search Console ヘルプ

<link>要素のcanonicalについて

重複ページや類似ページについて、正規のページを指定したいときに使います。
重複ページや類似ページの<head>要素内に下記のようなリンク要素を書くと、
記載したページが別ページ(正規ページ)の重複ページである事を示す事ができます。

  • 重複したページにリンク要素の rel="canonical" を使って正規ページの指定を書き込む場合
    <link rel="canonical" href="【正規ページのURL】">

  • 正規ページにモバイル向けのページがあった場合
    <link rel="alternate" media="only screen and (max-width: 640px)" href="【モバイルの正規ページのURL】">
    ※ rel="alternate" リンクを追加して、モバイル版の正規ページを指定します。

※詳細は、Search Console ヘルプ 「rel="canonical" リンクタグを使用する」をご参照下さい。

rel="canonical" リンク要素に記載するURLは絶対パス

重複した URL を統合する - Search Console ヘルプ曰く、
正規ページのURLを記載する場合は、絶対パスが適切とのこと。

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

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

記載の際は、http://https://のどちらが正規なのか等も含めて
正規ページのURL指定を間違えないように気をつけたほうが良さそうです。

※と、メモ程度に書いてはみるものの、表現が適切かどうか自信が無いので、
 間違いがあったらコメント等でご指摘を頂けると幸いです。。。

ka-ko
おもに、Web制作のアシスタント業務を行ってます。 一人前になれるように勉強中です(´・ω・`)
ayudante
いつもユーザー中心で技術者とコンサルタントがとことん考え抜く それがアユダンテです
https://ayudante.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away