javascript:WebページのURLをlocationからではなく、HTML文書中のcanonicalから取得する理由

イントロダクション

javascriptにて、ブラウザ側で動的にURLを取得する場合には、locationオブジェクトからではなく、ref 属性に "canonical" が指定された link タグの href からURLを取得する理由を記載します。

ただし、ref 属性に "canonical" が指定された link タグは、webページのHTML内に必ずあるものではないため、無い場合には代替手段として locationオブジェクトから取得するなどの方法を行う必要があります。

Webページの URL をブラウザ側で動的に取得しようとした場合に考慮すべきこと

Webページの URL をブラウザ側で動的に取得しようとした場合、考慮すべきことがあります。

それは、Web ページの同一性です。

Webページの URL をブラウザ側で動的に取得した場合の、Web ページの同一性という問題

インターネット上の Web ページは、同一のファイルであっても、異なる URL が付与されてしまうことがあります。

Webページの URL をブラウザ側で動的に取得しようとした場合、一般的に行われるのは、JavaScript にて、location オブジェクトのプロパティから、そのページの URL を取得する方法です。

window.location - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/Window/location

さて、location オブジェクトのプロパティから、そのページの URL を取得した場合に、Webページの同一性を考えるうえで、どのような点に注意しなければならないでしょうか？


詳しくは以下のページで、URLの要素ごとに考えていますが、URL を構成する、フラグメント(#), クエリ(?), ホスト, パス, ポート, スキーム, 認証情報などによって、異なるURLでも同じコンテンツを示すことがあります。

url:webページの同一性を考える-同じコンテンツでもURLに複数のバリエーションが出来てしまう!
http://upa-pc.blogspot.com/2015/03/url-same-content-or-different.html


そのため、Webページの URL をブラウザ側で動的に取得しようとした場合には、その Web ページ内に記載された正規化されたURLが、Webページの同一性を考える上でのヒントになります。

正規化されたURL : ref 属性に "canonical" が指定された link タグの href からURL

ref 属性に "canonical" が指定された link タグの href （正規化されたURL）は、web ページの制作者が同一として認識させたいコンテンツを明示的に指定できます。

正規 URL を使用する - ウェブマスター ツール ヘルプ
https://support.google.com/webmasters/answer/139066?hl=ja

canonical属性とは／link rel="canonical"によるURL正規化タグ——SEOにとって非常に重要な進歩（前編） | Moz - SEOとインバウンドマーケティングの実践情報 | Web担当者Forum

http://web-tan.forum.impressrd.jp/e/2009/03/05/5112

そのため、そこからURLを取得すれば、Web ページの同一性問題に対して、web ページの制作者の意図を反映させることができます。


なお、JavaScript を使用して正規化された URL を取得する方法を、以下のページにまとめました。

javascript:正規化された(canonical)URLを取得する - サンプルコードと使用例
http://upa-pc.blogspot.com/2015/03/javascript-canonical-url-get.html

但し、本当に同一コンテンツと見なしてよいのかは考える必要あり

何が同一であり、何が同一でないかは、その URL を使用する目的によって変わってくる可能性があります。

ページの内容や制作者の意図ではなく、URL を重視するのであれば、canonical ではなく、location オブジェクトからそのページの URL を取得する必要が出てくるケースもあります。

その点は十分に検討して、ブラウザ側で動的に URL を取得するための手段を選んだ方が良いでしょう。


また、自分自身が管理していない web ページの、ref 属性に "canonical" が指定された link タグの href の値を取得する場合には、その値が安全かどうかチェックしてから使用した方が良い場合もあります。

location オブジェクトからそのページの URL を取得する場合とは異なり、ref 属性に "canonical" が指定された link タグの href の値は、属性値として設定可能なものなら何でも記載できてしまいます。

そのため、悪意のある値（その web ページと関係のない URL が正規化された URL として記載されている、URL ではないものが記載されているなど）が入っていたとしても、安全に処理できるようにしておかねばなりません。


余談ですが、ページの内容でページの同一性を判断する場合には、次の点に注意が必要です。

最近では web サーバへアクセスする端末によって、通常版とモバイル版という形で異なるコンテンツを返してくる場合もあります。

通常版とモバイル版の URL は異なっていることもありますが、同一の URL である場合もあります。

そのため、web ページの内容で同一性を判断する場合には、その点にも注意が必要です。

まとめ

javascriptにて、ブラウザ側で動的にURLを取得する場合には、locationオブジェクトからではなく、ref 属性に "canonical" が指定された link タグの href からURLを取得する理由を記載しました。

locationオブジェクトでは、上記のような様々な要因が URL に含まれています。従って、同じコンテンツを示す URL なのに、様々なバリエーションが生まれることがあります。

そのため、canonical URL を使用することで、その URL の web ページの制作者が意図した URL を取得することができます。

ただし、canonical URL を使用する上でいくつか注意点があります。