canonical（カノニカル）とは？
canonical（カノニカル）というものをご存知でしょうか？
インデックスされているページURLの正規化を行うために利用するlinkタグの属性で、
正規化したいページの<head>～</head>内に以下の様に記述します。
<link rel="canonical" href="正規URL">
同一コンテンツ（または、ほぼ同じ内容のコンテンツページ）でURLが分かれている場合に、
どれか一つのURLに統一することができるので、
Googleからの評価が複数のURLに分散されることがなくなります。
それに、同じようなページが複数存在していると、Googleからペナルティを喰らってしまって、全体的に順位が落ちてしまうのも避けたいですしね。
その為、canonical属性は、SEO上、とても重要な設定になります。
canonical属性の使いどころ
使いどころはというと、以下のようなパターンが考えられます。
内容が似通ったページが複数存在する場合
例えば、ECサイトや通販サイトだと「同じ商品だけど、色が違うだけ」「同じ商品だけど、模様が少し違うだけ」「同じ商品だけど、出品者が違うだけ」などで、
ほとんど内容が同じページが複数作られてしまうことってよくありますね。
例：
①、https://example.com/item.html <= 「アイテムページ」の白色バージョン（白色が基本）
②、https://example.com/item_red.html <= 「アイテムページ」の赤色バージョン
③、https://example.com/item_blue.html <= 「アイテムページ」の青色バージョン
④、https://example.com/item_black.html <= 「アイテムページ」の黒色バージョン
④、https://example.com/item_yello.html <= 「アイテムページ」のオレンジ色バージョン
という5つのページが存在していたとします。
↓
この場合、
仮に①のURLを正規化ページとすると、
②～⑤のページの<head>～</head>内に、以下を追記すればOKです。
<link rel="canonical" href="https://example.com/item.html">
同一コンテンツだが、PCとスマートフォンでページURLが異なる場合
同一コンテンツのサイトにもかかわらず、PCとスマートフォンでURLが異なることがあります。
こういった場合にも、スマートフォンサイトの<head>～</head>内にcanonical属性を記述します。
例えば、
PCサイトのURL：https://example.com/
スマートフォンサイトのURL：https://example.com/sp/
とします。
その場合には、
以下をスマートフォンサイトの<head>～</head>内に追記すればOKです。
<link rel="canonical" href="https://example.com/">
また、気を付けないといけないのが、
PCサイトの<head>～</head>内にはalternate属性を記述する必要があるという点です。
例えば、今回の例で説明すると、
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://example.com/sp/">
をPCサイトの<head>～</head>内に追記します。
最近はレスポンシブが主流になってきたので少なくなってきましたが、
まだ、PCサイトとスマートフォンサイトのURLが分かれてい場合があります。
その場合には、
canonicalとalternateを使って、PCサイトとスマートフォンサイトのURLが分散してしまわないようにしましょう！！
canonicalでの正規化は、良くない？
URLが分散してしまいそうな場合には、正しくcanonicalを設定して、URLの分散を防ぐようにしましょう。
ただ、本来は、同一コンテンツや似通った内容のページが複数存在することが問題です。
出来る限り、canonicalを使わないで済むようなページ設計・URL設計を行うようにして下さい。
