日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年3月2日月曜日

javascript:正規化された(canonical)URLを取得する - サンプルコードと使用例

イントロダクション

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

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

javascript:WebページのURLをlocationからではなく、HTML文書中のcanonicalから取得する理由
http://upa-pc.blogspot.com/2015/03/javascript-why-should-get-the-url-from-canonical.html


それを考慮すると、正規化されたURL(link タグの ref 属性に "canonical" が指定されているものの、href 属性の値)を取得したいケースがあります。

正規化された URL とは?

正規化されたURL は、同じコンテンツなのに、異なる URL を持つために重複して検索エンジンに認識されるのを防ぐために HTML 文書中に記載する URL です。

正規 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 ページをどんな URL として扱って欲しいのかを明示的に示したものです。

従って、Webページの URL をブラウザ側で動的に取得しようとした場合、location オブジェクトから取得する場合には、URL の表記に様々なバリエーションが生まれてしまいますが、正規化された URL を用いれば、そのコンテンツに対する URL を一つに限定できます。

正規化された URL は、次のように HTML 文書中に link タグの ref 属性に "canonical" が指定されているものの、href 属性の値として記載されます。

<link href='正規化されたURL' rel='canonical'/>


そこで、正規化されたURL(link タグの ref 属性に "canonical" が指定されているものの、href 属性の値)を取得する JavaScript を作成してみました。


正規化されたURL(link タグの ref 属性に "canonical" が指定されているものの、href 属性の値)を取得する JavaScript

JavaScript コード


<script type="text/javascript">
<!--
    /*
    link タグの ref = canonical に指定された、href を取得します

    戻り値:
    link タグの ref = canonical に指定された、href
    見つからなかった場合、null
    */
    function getCanonicalUrl() {

        var links = document.getElementsByTagName("link");
        for (var i = 0; i < links.length; i++) {
            if (links[i].rel) {
                if (links[i].rel.toLowerCase() == "canonical") {
                    return links[i].href;
                }
            }
        }

        return null;
    }
//-->
</script>


解説

上記の getCanonicalUrl 関数を実行すると、正規化されたURL(link タグの ref 属性に "canonical" が指定されているものの、href 属性の値)を取得することができます。

html 文書内に、ref 属性に "canonical" が指定されている link タグが無い場合には、null を返します。


詳細解説

<script type="text/javascript">
<!--
HTML 文書内に JavaScript コードを埋め込みます。


    function getCanonicalUrl() {
getCanonicalUrl という名前の関数を定義しています。


        var links = document.getElementsByTagName("link");
HTML 文書内の link タグを全て、配列として取得します。


        for (var i = 0; i < links.length; i++) {
HTML 文書内の link タグをすべて検査します。


            if (links[i].rel) {
link タグに、rel 属性があることを確認します。


                if (links[i].rel.toLowerCase() == "canonical") {
link タグの ref 属性の値が canonical である要素を探します。

なお、ref 属性の値は、大文字・小文字を区別しないため(*1)、toLowerCase() によって、いったん ref 属性の値をすべて小文字にした後(CANONICAL -> canonical)、"canonical" と一致するかどうかを比較しています。

*1:
Links in HTML documents
rel = link-types [CI]
http://www.w3.org/TR/html401/struct/links.html#adef-rel

Basic HTML data types


                    return links[i].href;
link タグの ref 属性に "canonical" が指定されているものの、href 属性の値を返却して、この関数の実行を終了します。


                }
            }
        }

        return null;
ref 属性に "canonical" が指定されている link タグ が見つからなかった場合には、null を返却して、この関数の実行を終了します。


    }
getCanonicalUrl という名前の関数の定義はここまでです。


//-->
</script>
HTML 文書内への JavaScript コードを埋め込みはここで終了です。


サンプルコード

正規化された URL を取得して、画面上に表示するサンプルプログラムを以下に掲載します。

正規化された URL を取得して、画面上に表示するサンプルプログラム:
<b>正規化された URL:</b><br />
<div id="canonical-url-view">
</div>
<script type="text/javascript">
<!--
    /*
    link タグの ref = canonical に指定された、href を取得します

    戻り値:
    link タグの ref = canonical に指定された、href
    見つからなかった場合、null
    */
    function getCanonicalUrl() {

        var links = document.getElementsByTagName("link");
        for (var i = 0; i < links.length; i++) {
            if (links[i].rel) {
                if (links[i].rel.toLowerCase() == "canonical") {
                    return links[i].href;
                }
            }
        }

        return null;
    }

    (function () {
        
        var canonical_url = getCanonicalUrl();

        var obj_output = document.getElementById("canonical-url-view");
        obj_output.appendChild(document.createTextNode(canonical_url ? canonical_url : "正規化された URL は見つかりませんでした。"));

    })();
//-->
</script>


実行結果

実際にこの関数を使用して、このブログページの正規化された URL を取得した結果を示します。

正規化された URL:



正常に実行できていれば、以下の URL が表示されています。
http://upa-pc.blogspot.com/2015/03/javascript-canonical-url-get.html


まとめ

このように、Webページの URL をブラウザ側で動的に取得しようとした場合、正規化されたURL(link タグの ref 属性に "canonical" が指定されているものの、href 属性の値)を取得すると便利です。

なお、Web ページによっては、正規化された URL が記載されていないこともあります。
その場合には、代替手段として locationオブジェクトから取得するなどの方法を行う必要があります。


関連記事

JavaScript:location.hrefの注意点 - URLのドメイン前にベーシック認証が埋め込める、そして脆弱性 - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/02/javascript-location-href-url-basic-trouble.html

JavaScript:ハッシュ(#)を含まない現在のページのURLを取得する - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/02/javascript-url-hash-delete-location.html

JavaScript:URLのハッシュ(#)以降を削除する - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2014/05/javascripturl.html






関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...