canonicalタグの設定場所を初心者向けに解説

"canonicalタグをどこに設定すればいいか分からない初心者向けに、基本形・CMSやフレームワークごとの設定場所・正規URLの決め方・反映確認までの手順を整理しました。index数の確認ではなく、設定場所そのものに絞った内容です。"

新しいドメインでサイトを立ち上げると、「canonicalタグはどこに書けばいいのか」というところでつまずく人が多くいます。筆者自身も、新規ドメインを立ち上げた際に同じところで一度手が止まりました。

本記事では、Google Search Consoleでのインデックス数の確認方法ではなく、canonicalタグを「どこに」「どう」設定するかという基本的な場所と手順に絞って整理します。

今日の結論

canonicalタグは<head>内に<link rel="canonical" href="...">として記述するのが基本形

設定場所はCMS・フレームワークによって異なる（手動編集／プラグイン設定／フレームワークの機能を使う方法など）

正規URLは「読者に見せたい1つのURL」を先に決めてから設定する

設定後はページソースとGSCの両方で反映を確認する

詳細な書き方は使用しているCMS・フレームワークのバージョンによって変わる場合があるため、公式ドキュメントもあわせて確認する

① canonicalタグの基本形を確認する

基本形は、HTMLの<head>内に次のように記述します。

<link rel="canonical" href="https://example.com/page/" />

役割は、内容が似ている・同じページが複数のURLで存在する場合に、「検索エンジンに正規はこのURLだと伝える」ことです。新規ドメインでは、wwwあり/なしやURL末尾のスラッシュの有無などで意図せず重複が起きやすいため、早い段階で設定しておくと安心です。

② 自分のCMS・フレームワークでの設定場所を確認する

手動でHTMLを編集できる場合

ページの<head>内に、直接<link rel="canonical" ...>を記述します。

WordPressなど主要CMSの場合

多くのSEOプラグインには、記事編集画面の中にcanonical URLを指定する項目が用意されています。項目名や場所はプラグインのバージョンによって異なることがあるため、自分の環境の編集画面で実際に確認してください。

Next.jsなどのフレームワークの場合

App Routerでは、metadataオブジェクトのalternates.canonicalで指定する書き方が一般的です（Pages Routerではnext/headを使って直接<link>タグを書く方法もあります）。Next.jsはバージョンによって書き方が変わることがあるため、利用中のバージョンの公式ドキュメントで最新の書き方を確認してから実装することをおすすめします。

③ 正規URLとして出したいURLを決める

wwwあり/なし、末尾スラッシュあり/なしなどの表記揺れがあると、重複コンテンツとして扱われる可能性があります
1つのページに対して「これを正式なURLにする」というものを、設定前に決めておきます
すべてのページで同じルール（wwwの有無など）を統一しておくと、後の管理がしやすくなります

④ 設定後にページソース・GSCで反映を確認する

ブラウザの「ページのソースを表示」で、canonicalタグが意図したURLになっているかを確認します
Google Search Consoleの「URL検査」ツールで、Googleが現在認識している正規URLを確認します
反映には時間がかかる場合があるため、すぐに変わらなくても焦らずに待つことをおすすめします

まとめ・次に読む

canonicalタグは、基本形を理解したうえで「自分の環境ではどこに設定するか」を確認し、正規URLを決めてから設定し、最後にソースとGSCで反映を確認する、という流れで進めると迷いにくくなります。

新規ドメインのSEO全体については、Hub記事「新規ドメインSEOトラブルシューティング」でまとめていますので、あわせてご覧ください。

なお、canonicalタグの具体的な設定方法は、使用しているCMSやフレームワークのバージョンによって異なる場合があります。本記事は執筆時点（2026-06-25）の一般的な内容であり、実装の際は各公式ドキュメントもあわせて確認することをおすすめします。