サキ今回はcanonicalタグについて説明します。
制作だけでなく、SEO対策もしっかり！
制作者だと結構知らなかったりするので、正しく設定できるようにしましょう。
canonicalタグとは？
canonicalタグは、ウェブサイト内の重複するコンテンツ問題を解決するために使用されるHTML要素です。
このタグを利用することで、検索エンジンに対してどのURLがそのコンテンツの「正規」バージョンであるかを伝えることができます。
canonicalタグの重要性
canonicalタグはSEO対策において非常に重要です。
例えば、商品ページがバリエーション違いなどにより複数のURLでアクセス可能な場合、検索エンジンはどのページをインデックスすべきか迷ってしまいます。canonicalタグを使用することで、URLの正規化が行われ、検索エンジンの混乱を避け、ページランクの分散を防ぎます。
URLの正規化とは
類似ページがあるとGoogleは重複コンテンツ（コピーコンテンツ）などと認識してしまう場合があり、マイナスの評価に繋がる可能性があります。
複数の類似ページがある場合にURLを1つ指定し、Googleからの評価を集中させます。
この方法をURLの正規化と言います。
正しく指定することで、検索エンジンに対する信頼性を向上させ、重複コンテンツでのペナルティを避けることができます。
必要なケースは次で説明します。
canonicalタグが必要なケース
canonicalタグを使用するケースについては以下のような場合が考えられます。
- HTTPとHTTPSのプロトコル違い
- wwwの有無
- トレイリングスラッシュの違い（URL末尾/の有無）
- URLパラメータの有無（広告パラメータやECサイトのバリエーション違いパラメータなど）
- ディレクトリ指定かファイル指定の違い（index.htmlをURLに含むか）
- PCとSPで別ページが存在する場合
- 同一内容のLPなどが存在する場合
これらは主に同一のソースコードでURL違いがほとんどですが、PCとSPなどで全く別のソースコードやURLが存在するが基本構造や内容が同一といった場合もcanonicalを設置した方が良いでしょう。
注意点としては、検索ページの2ページ目などに1ページ目への指定などはしないようにしてください。
1ページ目と2ページ目でコンテンツの内容や価値が違うものになるので、こういった場合は一つにまとめる必要はありません。
パラメータの有無が判断の指標ではなく、あくまで本質的に同じものを選ぶようにしてください。
canonicalタグの使い方
使用方法は以下の通りです。
headタグにlinkタグでrel属性の値としてcanonicalを設定します。
href属性には「正規」のURLを指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="canonical" href="https://www.example.com/products/" />
</head>
<body>
</body>
</html>最後に
今回はcanonicalタグについて説明しました。
Web制作者はページを制作するスキルだけでなく、SEO対策やパフォーマンスなどそのサイトの価値を上げるための知識も必要となります。
細かいところもしっかり学んで実務で活用していきたいですね。
