カテゴリ: JavaScript 更新日: 2026/08/08

JavaScriptでURLを正規化（canonical）する方法を徹底解説！初心者向けにわかりやすく解説

JavaScriptのURLの正規化（canonical）とは？仕組みと実装例
JavaScriptのURLの正規化（canonical）とは？仕組みと実装例
先生と生徒の会話形式で理解しよう

生徒

「先生、ウェブサイトのURLって同じ内容でもいろんな書き方がありますよね？これってSEOに影響するんですか？」

先生

「そうですね。例えば https://example.com/page と https://example.com/page/ は見た目はほぼ同じページですが、検索エンジンは別ページと判断することがあります。そこで『URLの正規化』、つまりcanonicalを設定することで、検索エンジンに正しいURLを伝えることができます。」

生徒

「canonicalって聞きなれない言葉です。どういう意味ですか？」

先生

「canonicalとは『正しい』『代表的な』という意味です。つまり複数の似たURLがある場合に、どれが公式で正しいURLかを検索エンジンに教える仕組みです。」

1. URL正規化（canonical）の基本とは？

1. URL正規化（canonical）の基本とは？
1. URL正規化（canonical）の基本とは？

URLの正規化とは、同じ内容のページが複数のURLでアクセスできる場合、検索エンジンに対して「こちらが正式なURLです」と示すことです。これにより、SEO対策として重複コンテンツの問題を防ぎ、検索順位を正しく評価してもらうことができます。

例えば、次のようなURLが存在する場合があります。


https://example.com/page
https://example.com/page/
https://example.com/page?utm_source=newsletter
https://www.example.com/page

これらは同じ内容を表示している場合、canonicalを設定することで検索エンジンに公式URLを知らせます。

2. HTMLでのcanonical指定の基本

2. HTMLでのcanonical指定の基本
2. HTMLでのcanonical指定の基本

HTMLでは、<link rel="canonical">タグを使って正規URLを指定します。headタグ内に書くことで、検索エンジンに正しいURLを伝えることができます。


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

この方法はシンプルで、SEO対策としても標準的です。

3. JavaScriptで動的にcanonicalを設定する方法

3. JavaScriptで動的にcanonicalを設定する方法
3. JavaScriptで動的にcanonicalを設定する方法

JavaScriptを使えば、ページが動的に生成される場合でもcanonicalを設定できます。例えば、ページがユーザーの操作によってURLパラメータが変わる場合です。


const link = document.createElement('link');
link.rel = 'canonical';
link.href = window.location.origin + '/page';
document.head.appendChild(link);

このコードは、現在のサイトのドメインを取得して公式URLとしてheadに追加しています。

4. URLの正規化で注意すべきポイント

4. URLの正規化で注意すべきポイント
4. URLの正規化で注意すべきポイント

URL正規化をする際には、以下の点に注意が必要です。

  • 常に公式のURLを統一する
  • パラメータ付きのURLはcanonicalで統一する
  • wwwあり・なしを統一する
  • HTTPとHTTPSも正規化を考える

例えば次のようにJavaScriptでwwwあり・なしを統一することも可能です。


let canonicalUrl = window.location.href;
if (!canonicalUrl.includes('www.')) {
  canonicalUrl = canonicalUrl.replace('://', '://www.');
}
const link = document.createElement('link');
link.rel = 'canonical';
link.href = canonicalUrl;
document.head.appendChild(link);

5. パラメータ付きURLの正規化方法

5. パラメータ付きURLの正規化方法
5. パラメータ付きURLの正規化方法

ニュースレターや広告のURLには、?utm_source=xxxのようなパラメータがつくことがあります。これも正規化でSEO評価を正しく保つことが重要です。


function getCanonicalUrl() {
  const url = new URL(window.location.href);
  url.search = ''; // パラメータを削除
  return url.href;
}
const link = document.createElement('link');
link.rel = 'canonical';
link.href = getCanonicalUrl();
document.head.appendChild(link);

このようにパラメータを除外することで、同じ内容のページを1つのURLとして評価させられます。

6. 動的サイトやSPAでのcanonical設定

6. 動的サイトやSPAでのcanonical設定
6. 動的サイトやSPAでのcanonical設定

シングルページアプリケーション（SPA）の場合、URLが画面遷移で変わってもページのHTMLは同じです。この場合もcanonicalをJavaScriptで動的に更新することがSEOに効果的です。


function updateCanonical(path) {
  let link = document.querySelector('link[rel="canonical"]');
  if (!link) {
    link = document.createElement('link');
    link.rel = 'canonical';
    document.head.appendChild(link);
  }
  link.href = window.location.origin + path;
}
updateCanonical('/page/subpage');

このコードは、SPAでページが切り替わるときにcanonicalを更新して検索エンジンに正しいURLを知らせます。

7. 実際にSEO効果を確認する方法

7. 実際にSEO効果を確認する方法
7. 実際にSEO効果を確認する方法

canonicalを正しく設定したら、Google Search Consoleでインデックス状況を確認できます。また、SEO分析ツールで重複コンテンツが減っているかチェックすることも大切です。


// canonicalが設定されているか確認する簡単なチェック
console.log(document.querySelector('link[rel="canonical"]')?.href);

このように確認するだけでも、canonicalが意図通りに設定されているかがわかります。

8. まとめにかけての注意点とベストプラクティス

8. まとめにかけての注意点とベストプラクティス
8. まとめにかけての注意点とベストプラクティス

URL正規化はSEOの基本的な施策の一つです。HTMLでの固定canonicalとJavaScriptでの動的canonicalを状況に応じて使い分けましょう。ポイントは以下の通りです。

  • 同じ内容のページは必ず1つのURLに統一する
  • パラメータ付きURLやwwwあり・なし、HTTP/HTTPSも統一する
  • SPAや動的ページではJavaScriptでcanonicalを更新する
  • 設定後はGoogle Search Consoleなどで正しく反映されているか確認する

これらを守ることで、重複コンテンツによるSEO評価の分散を防ぎ、検索順位の安定化に役立ちます。

まとめ

まとめ
まとめ

JavaScriptを活用したURL正規化（canonical）の設定は、現代のSEO対策において非常に重要な手法です。今回学んだように、同じコンテンツが複数のURLでアクセス可能な場合、検索エンジンはそれぞれ別ページとして扱うことがあります。この重複コンテンツの問題を防ぎ、正しいページを評価してもらうためには、canonicalを適切に指定することが不可欠です。HTMLで固定canonicalを設定する方法から、JavaScriptで動的にcanonicalを生成する方法まで理解することで、静的サイトだけでなく、SPAや動的サイトでもSEO効果を最大化できます。さらに、wwwあり・なしやHTTP/HTTPSの統一、パラメータ付きURLの処理といった注意点を押さえることで、検索エンジンに正確な情報を伝えることができ、検索順位の安定化に貢献します。

サンプルコード例：JavaScriptで動的canonicalを設定

 function setCanonical(path) { let link = document.querySelector('link[rel="canonical"]'); if (!link) { link = document.createElement('link'); link.rel = 'canonical'; document.head.appendChild(link); } link.href = window.location.origin + path; } setCanonical('/page/subpage'); console.log('現在のcanonical:', document.querySelector('link[rel="canonical"]')?.href);

このコードでは、既存のcanonicalタグをチェックし、存在しない場合は新しく作成して、動的にページのURLに合わせて設定しています。SPAや動的にURLが変化するページでも、常に正しいURLを検索エンジンに通知することが可能です。

パラメータ付きURLを除去してcanonicalを設定する例

 function getCanonicalUrl() { const url = new URL(window.location.href); url.search = ''; // クエリパラメータを削除 return url.href; } const link = document.createElement('link'); link.rel = 'canonical'; link.href = getCanonicalUrl(); document.head.appendChild(link); console.log('正規化されたcanonical:', link.href);

ニュースレターや広告URLなどで追加されるパラメータを除去することで、同じコンテンツを1つの公式URLとして評価させることができます。これにより、SEO評価の分散を防ぎ、検索結果での順位安定化を図れます。

また、canonical設定後は必ずGoogle Search Consoleなどで確認することが推奨されます。document.querySelector('link[rel="canonical"]')?.hrefを使えば、実際に設定されているURLを簡単に確認可能です。これにより、意図したURLが正しく検索エンジンに伝わっているかを検証できます。

先生と生徒の振り返り会話

生徒

「先生、今回の学習でURL正規化の重要性がよくわかりました。同じ内容のページが複数あるとSEOに悪影響があるんですね。」

先生

「そうです。検索エンジンはURLごとにページを評価するため、canonicalを設定しないと重複コンテンツと判断され、SEO評価が分散してしまいます。」

生徒

「HTMLで固定canonicalを設定する方法も、JavaScriptで動的に設定する方法も理解できました。特にSPAでは動的設定が必須になるんですね。」

先生

「その通りです。SPAや動的サイトでは、ページ遷移に応じてcanonicalを更新することがSEO効果を維持する鍵になります。また、wwwあり・なしやHTTP/HTTPSの統一、パラメータ除去も重要なポイントです。」

生徒

「設定後はSearch Consoleで確認することも忘れずに行います。実際に正しいURLが反映されているかをチェックするのが大切ですね。」

先生

「その通り。こうして正しいURLを検索エンジンに伝えることで、重複コンテンツのリスクを減らし、検索順位の安定化に役立ちます。今回の内容を応用すれば、どんなサイトでもSEO評価を最大化できますよ。」

関連記事:
・ JavaScriptのイベントループの仕組みを理解しよう ｜ JavaScriptのイベントループの仕組みを徹底解説！非同期処理・コールバック・Promise・async/awaitを初心者向けにやさしく理解
・ JavaScriptで非同期処理中にエラーハンドリングを行うテクニック ｜ JavaScriptで非同期処理中にエラーハンドリングを行うテクニックを徹底解説！初心者向け完全ガイド
・ JavaScriptのモジュール化のメリットとデメリットを解説 ｜ JavaScriptのモジュール化のメリットとデメリットを徹底解説 初心者向け完全ガイド
・ JavaScriptのモジュール化とWebpack・Rollupなどビルドツールの活用 ｜ JavaScriptのモジュール化とWebpack・Rollupなどビルドツールの活用を徹底解説【初心者向け完全ガイド】
・ JavaScriptのコーディング規約とエディタ設定（Prettier, ESLint） ｜ JavaScriptのコーディング規約とエディタ設定完全ガイド 初心者向けPrettierとESLint入門
・ JavaScriptのセミコロンの有無問題を解決するベストプラクティス ｜ PostgreSQLでインデックスが使われない理由を徹底解説！初心者でもわかるデータベース高速化
・ JavaScriptの非同期処理（Promise）のエラーハンドリング方法 ｜ JavaScriptの非同期処理(Promise)のエラーハンドリングを初心者向けに徹底解説
・ JavaScriptでエラーを発生させる方法（throw文の基本） ｜ JavaScriptでエラーを発生させる方法を完全解説！初心者でもわかるthrow文の基本
カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptのwindow.onloadの使い方と注意点
JavaScriptのwindow.onloadの使い方と注意点を初心者向けに解説
New2
JavaScript
JavaScriptの条件式でよくあるエラーとその対処法まとめ
JavaScriptの条件式でよくあるエラーとその対処法まとめ
New3
TypeScript
TypeScriptの型安全なオブジェクト設計をインターフェースで実現するコツ
TypeScriptの型安全なオブジェクト設計をインターフェースで実現するコツ
New4
Claude Code
Claude Codeでバグの再現手順をまとめるプロンプト例
Claude Codeでバグの再現手順をまとめるプロンプト例
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ！Windows・Mac・Linux別にステップ解説
 52
JavaScriptのインストール方法まとめ！Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptの比較演算子（==, ===, !=, !==）の違いを整理しよう
 44
JavaScriptの比較演算子（==, ===, !=, !==）の違いを初心者向けにわかりやすく解説
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptプログラムの実行方法まとめ！ブラウザ・Node.js・コンソールの使い方
 37
JavaScriptプログラムの実行方法まとめ！ブラウザ・Node.js・コンソールの使い方
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptのReact入門！最初のコンポーネントを作ろう
 37
JavaScriptのReact入門！最初のコンポーネントを作ろう
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptの始め方：開発環境の構築手順【初心者向け】
 36
TypeScriptの始め方：開発環境の構築手順【初心者向け】
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptの配列の一部を切り出す（slice, spliceの使い方）
 35
JavaScriptの配列の一部を切り出す（slice, spliceの使い方）
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptで要素の表示・非表示を切り替える方法（display, visibility）
 33
JavaScriptで要素の表示・非表示を切り替える方法（display・visibility）を完全解説
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのライフサイクルとは？ブラウザ上の動きをやさしく解説
 33
JavaScriptのライフサイクルとは？ブラウザでの読み込み順序をやさしく解説