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

2015年3月2日月曜日

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

ラベル: HTML, JavaScript, URL, Web, ソースコード, 解説

イントロダクション

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 を返します。

詳細解説

Links in HTML documents

rel = link-types [CI]
http://www.w3.org/TR/html401/struct/links.html#adef-rel

Basic HTML data types

CI
http://www.w3.org/TR/html401/types.html#case-insensitive

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

関連する記事を、"ラベル"から探すことができます！

ラベル: HTML, JavaScript, URL, Web, ソースコード, 解説

この情報を、他の人にも伝える

シェアすることで、他の人がこの情報を見つけやすくなります！

このページのタイトルとURLのペアを取得:

ページとURLのペアを生成中...

投稿者 Dr.ウーパ
時刻: 2015-03-02T22:33:00+09:00

コメントを投稿　（ここをクリックしてコメント投稿フォームを表示）

コメント投稿機能について

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

2015年3月2日月曜日