【html】カノニカル属性（canonical）の必要性

htmlでheadタグ内に記述する属性です。

記述しなくてもページは問題なく表示されるので気にしていない人もいると思いますが、SEO的にとても重要です。

重要な理由

例えば、このページのURLは以下です。

https://seo-coding.com/778

このページにアンカーリンクを付けたコンテンツがあったとします。URLは以下になります。

https://seo-coding.com/778/#link

また、クエリパラメータを付ける場合もあります。URLは以下になります。

https://seo-coding.com/778?color=red

このようになるわけですが、全て同じページが表示されます。

しかし、検索エンジンは全て違うページの閲覧数としてカウントしてしまいます。

同じ割合でアクセスがあった場合、検索エンジン的には閲覧数が三分の一になってしまうんです。

非常にもったいないです。

クエリパラメータがあるページは、パターンがもっとあったりするのでどんどん閲覧数が分割されてしまいます。

なので、「上記は全て同じページですよ」と検索エンジンに伝えるのが「カノニカル」です。

<link rel="canonical" href="https://seo-coding.com/778/">

PHPファイルやWordPressの場合の便利な書き方

静的ファイルの場合はファイル毎に記述する必要がありますが、PHPファイル（WordPress）場合は以下のように書けばページ毎に記述する必要はありません。

<?php 
$current_url = ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$current_url = explode('#',$current_url);
$current_url = explode('?',$current_url[0]); 
?>
<link rel="canonical" href="<?= $current_url[0] ?>">