スマホサイトやAMPなどのcaonicalタグの設置方法

yanataka: 日々奮闘中のSEOエンジニア

前回に引き続き、今回もcanonicalタグのお話です。
前回の記事では、canonicalタグの役割について詳しくご紹介しました。
URLの正規化におけるcanonicalタグの役割について

今回は、スマホサイトやAMPなどのURLの正規化が必要な場合を挙げながら、canonicalタグの設置方法を紹介していきます。

「wwwのありなし」などの重複するページのURLが複数ある場合

「.htaccess」などでリダイレクトの処理を行ってURLを統一されておらず、「wwwのありなし」、「index.html（php）のありなし」、セキュリティ強化のための常時SSL化「http / https」などのURLで、同じ内容のコンテンツページが表示される場合があります。

・http://example.com/
・http://example.com/index.html
・http://example.com/index.php
・http://www.example.com/
・http://www.example.com/index.html
・http://www.example.com/index.php
・https://example.com/
・https://example.com/index.html
・https://example.com/index.php
・https://www.example.com/
・https://www.example.com/index.html
・https://www.example.com/index.php

同じ内容のコンテンツページが異なるURLからアクセスできる場合、評価が分散するおそれがあり、検索エンジンから重複ページと判断されると、SEOにおいて不利に働きます。
これを防ぐために、正規ページ（オリジナルのURLのページ）のURLをcanonicalタグに記述して設置します。

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

ECサイトなどで類似した商品ページが複数ある場合

ECサイトなどで、色違いやサイズ違いの商品などが存在し、商品それぞれに異なるURLのページを持たせている場合です。

・商品A（黒色）のURL
http://www.example.com/color_black.html

・商品B（白色）のURL
http://www.example.com/color_white.html

・商品C（赤色）のURL
http://www.example.com/color_red.html

上記のように、色しか違わない異なるURLが存在した場合、検索エンジンに重複ページと認識される可能性があります。
このような場合は、優先させたいページ（正規ページ）のURLを決め、それ以外のページに優先させたいページのURLをcanonicalタグに記述して設置します。
今回は、商品Aを優先させたいページとします。

・商品A（黒色）：http://www.example.com/color_black.html
<head>
  <link rel="canonical" href="http://www.example.com/color_black.html">
</head>

・商品B（白色）：http://www.example.com/color_white.html
<head>
  <link rel="canonical" href="http://www.example.com/color_black.html">
</head>

・商品C（赤色）：http://www.example.com/color_red.html
<head>
  <link rel="canonical" href="http://www.example.com/color_black.html">
</head>

PCサイトとスマホサイトでURLが異なる場合

PCサイトとスマホサイトが別々で制作されており、コンテンツは同一でそれぞれが異なるURLで運用されている場合です。

このような場合は、PCサイトとスマホサイトとのURLの関係性を検索エンジンに正しく伝える必要があります。
正しく伝えなければ、コンテンツが同一のために検索エンジンに重複ページと認識される可能性があります。
したがって、PCサイトからスマホサイトは別のURLでページが存在していることを伝え、スマホサイトからPCサイトは別のURLでページが存在していることを検索エンジンに伝える必要があります。

まず、PCサイトには通常の「canonicalタグ」を設置したうえで、同一コンテンツのスマホサイトが異なるURLで存在することを知らせるために、「alternate（オルトネイト）タグ」を設置します。
canonicalタグに記述するURLはPCサイトのURLを、alternateタグに記述するURLはスマホサイトのURLを設置します。

// PCサイト
<head>
  <link rel="canonical" href="http://PCサイトのURL">
  <link rel="alternate" media="only screen and (max-width: 640px)" href="http://スマホサイトのURL">
</head>

スマホサイトには、PCサイトのURLを記述して設置します。

// スマホサイト
<head>
  <link rel="canonical" href="http://PCサイトのURL">
</head>

AMPを実装している場合

AMPを実装していると、AMP用のページが必要になります。そうなると、AMPページと非AMPページ（本体のページ）ではコンテンツが重複します。

GoogleがAMPに対応したことを知らせるために専用のタグを用意しています。
それが、「amphtmlタグ」というものです。このamphtmlタグに、AMPページのURLを記述し、非AMPページに設置します。
もちろんですが、通常のcanonicalタグと一緒に設置します。

// 非AMPページ（本体のページ）
<head>
  <link rel="canonical" href="http://非AMPページ（本体のページ）のURL">
  <link rel="amphtml" href="http://AMPページのURL" />
</head>

AMPページには、非AMPページのURLを記述したcanonicalタグを設置します。

// AMPページ
<head>
  <link rel="canonical" href="http://非AMPページ（本体のページ）のURL">
</head>

canonicalタグは絶対パスで記述する

canonicalタグに記述するURLは、「相対パス」ではなく、「絶対パス」で設定しましょう。
相対パスで設置してしまうと、検索エンジンが正しく認識しない可能性があります。

// 正しい設置例（絶対パスで記述）
<head>
  <link rel="canonical" href="http://example.com/post.php">
</head>

// 間違った設置例（相対パスで記述）
<head>
  <link rel="canonical" href="../post.php">
</head>

wordpressのcanonicalタグ

wordpressを導入したサイトを見ていると、たまにcanonicalタグが正しく設置されていないサイトがあります。
これは、wordpressのデフォルト機能でcanonicalタグを自動で出力するためです。
しかし、正しいURLで出力されていなかったり、手動で記述したcanonicalタグと重複してしまうと、検索エンジンに正しく認識されないことがあります。
これでは、SEOにおいて不利に働くので、シンプルな解決方法をご紹介します。

まず、自動的に出力されるcanonicalタグを表示させないように、「functions.php」に以下の1行を記述します。

// canonicalタグの削除
remove_action('wp_head', 'rel_canonical');

そして、同じテーマ内にある「header.php」の任意の場所に、以下のコードを記述します。

// canonicalタグの出力
<?php
if (is_home()) {
  $canonical_url = get_bloginfo('url')."/";
}
elseif (is_category()) {
  $canonical_url = get_category_link(get_query_var('cat'));
}
elseif (is_page() || is_single()) {
  $canonical_url = get_permalink();
}
if ($paged >= 2 || $page >= 2) {
  $canonical_url = $canonical_url.'page/'.max($paged, $page).'/';
}
?>
<link rel="canonical" href="<?php echo $canonical_url; ?>">

以上で、wordpressに正しくcanonicalタグが設置されます。

SEOを意識した正しいcanonicalタグの設置

canonicalタグは、きちんと理解すれば、それほど難しいものではありません。ここで紹介したことを参考にcanonicalタグを設置することで、SEOの効果を高めます。
SEOを意識した正しいcanonicalタグの設置を心がけましょう。

コラム