コンテンツにスキップ

122. Canonical URLs（正規URL：検索エンジンに「本物の居場所」を教える）

原理：住所の「表記ゆれ」をなくす

検索エンジンが迷わないために

同じ内容のページなのに、URLが微妙に違うことがあります。 - example.com/blog/123 - example.com/blog/123?ref=top - example.com/blog/123?lang=ja HTMXで部分更新を繰り返していると、こうした「おまけのついたURL」が履歴に残りがちです。

Googleなどの検索エンジン（SEO）から見て、これらがすべて「別のページ」と判断されてしまうと、本来一つに集まるべき評価が分散してしまいます。「正規URL（Canonical URL）」とは、「いろいろなURLがあるけれど、このページの本当の（正式な）住所はこれですよ！」と宣言することです。

実践：SEOに強いHTMXアプリを作る

HTMXで画面を切り替えたとき、タイトル（120.）と同じように、この正規URLタグも最新の状態にしてあげることが重要です。

<!-- サーバーが返すHTMLの断片の中に含める -->
<link rel="canonical" href="https://example.com/real-page-address">

<div id="main-content">
    <!-- コンテンツ -->
</div>
※ HTMXは、レスポンス内の <link> タグを自動で見つけて、ページの <head> セクションを更新してくれます。

2. なぜHTMXアプリで重要なのか？

SPA（シングルページアプリケーション）は、昔から「SEOに弱い」と言われてきました。その理由の一つが、URLと中身の関係が崩れやすかったからです。HTMXで常に正しい canonical タグを返すようにしておけば、古いSPAのようなSEOの悩みから解放されます。

3. ステップ・バイ・ステップ解説

  1. 「正式な名前」を決める: そのページを一意に表す、最もシンプルなURLを決めます。
  2. タグの埋め込み: サーバーがHTMLを返す際、ヘッダー（または断片のどこか）に rel="canonical" を書き込みます。
  3. 確認: ブラウザの「ソースを表示」で、あるいはSEOチェックツールで、正規URLが期待通りになっているかを確認します。

比較：何もしない vs 正規URLを設定する

何もしない

  • リスク: 重複コンテンツとみなされ、検索順位が上がりにくくなる。URLの共有時に、不要なパラメータが混ざり続ける。

正規URLを設定する

  • 利点: 検索エンジンの評価が一つに集まる。どの入り口から来ても「正しい住所」へユーザーを（検索エンジン上で）導ける。

まとめ：初心者のための「Webの品質」

正規URLの管理は、Webのプロフェッショナルとして、そして優れた情報発信者としての「基礎体力」です。

  • URLは慎重に: 住所がコロコロ変わるサイトは信頼されません。hx-push-url で作るURLは、常にこの canonical と一致させるのが鉄則です。
  • HTTPSへの統一: http と https が混在している場合なども、このタグを使って https が正解であることを伝えましょう。
  • 見えない気遣い: ユーザーの目には直接見えないタグですが、これがしっかりしているサイトは「中身も良い」と推測されます。

住所を磨き、信頼を積み上げる。正規URLという「Webの羅針盤」を正しく設定して、どんな検索エンジンからも、そして世界中のユーザーからも見つけやすい、ハイクオリティなWebアプリを目指してください。次の記事では、サーバー側から強制的に場所を変える「リダイレクト（123. Handling Redirects）」をご紹介します。