拝啓 Google様、JavaScriptとJSONで動的に変化するページをインデックスしてください #JavaScript

今回のお悩み

「Google様に、Webページ「A.html」をインデックスしてもらいたい」

そう、Webサイトを作るすべての人たちの願いだよね。

ーー

さて、今回インデックスしてもらいたいWebページ「A.html」はURLパラメータに応じて内容が変化するページである。
JavaScriptにより、URLパラメータに対応するデータを「data.json」から取得、レンダリングするというものだ（URLパラメータは「A.html?id=XX」と記述し、今回はid=1〜3まで存在するという設定）。

インデックスにはパラメータ別で登録したい。
つまり、id=1〜3の3ページ分を別々に登録する。

また、ページのタイトルやディスクリプションについても、パラメータごとに設定したものを検索結果に表示させたい。

最近のクローラーはJavaScriptでの処理も認識するとのことだが、果たして結果はー。

A.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta name="description" content="仮のディスクリプション"/>
        <title>仮のタイトル</title>
        <script src="jquery.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <div id="main"></div>
    </body>
</html>

↑jQueryを使うので要読込。

data.json

[
    {
        "id": 1,
        "title": "ページ１",
        "description": "これはページ１のディスクリプションです",
        "contents": "これはページ１の本文です"
    },
    {
        "id": 2,
        "title": "ページ２",
        "description": "これはページ２のディスクリプションです",
        "contents": "これはページ２の本文です"
    },
    {
        "id": 3,
        "title": "ページ３",
        "description": "これはページ３のディスクリプションです",
        "contents": "これはページ３の本文です"
    }
]

script.js

$(window).on("load", function() {
    //URLパラメータ(id)の値を取得
    var id = myGetQuery("id");
    //data.jsonのidとURLパラメータのidとを突合
    $.getJSON("data.json", function(data) {
        for (var i in data) {
            if (data[i].id === id) {
                //Title変更
                document.title = data[i].title;
                //Description変更
                $("meta[name='description']").attr("content", data[i].description);
                //本文追加
                $("#main").append("<p>" + data[i].contents + "</p>");
            }
        }
    )}
)}
//URLパラメータの抽出
function myGetQuery(myKeyWord) {
    myKeyWord = "&" + myKeyWord + "=";
    myValue = null;
    myStr = location.search;
    myLen = myStr.length;
    myStr = "&" + myStr.substring(1, myLen) + "&";
    myOfst = myStr.indexOf(myKeyWord);
    if (myOfst != -1) {
        myStart = myOfst + myKeyWord.length;
        myEnd = myStr.indexOf("&", myStart);
        myValue = myStr.substring(myStart, myEnd);
        myValue = decodeURIComponent(myValue);
    }
    return myValue;
}

↑一応言っておくが、何か特別クローラー対策をしているわけではない。

解決方法

サイトマップを用意する

サイトマップについては下記を参照
サイトマップについて - Search Console ヘルプ

※下記はXML形式で記述したもの
locタグに記述するURLにはURLパラメータを含める。
つまり、今回用意するサイトマップには3ページ分を記述する。

sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<url>
    <loc>https://www.sample/A.html?id=1</loc>
    <priority>1.0</priority>
</url>
<url>
    <loc>https://www.sample/A.html?id=2</loc>
    <priority>0.8</priority>
</url>
<url>
    <loc>https://www.sample/A.html?id=3</loc>
    <priority>0.5</priority>
</url>
</urlset>
</xml>

↑priorityは適当。

サイトマップを送信する

サイトマップが用意できたら、Google Search ConsoleでGoogle様に送信する（~~せっかちなヤツだと思われたくなければ、~~クローラーの巡回を待っても構わない）。

どうかインデックスされますように。

結果

無事、ページタイトル、ディスクリプションともにインデックスされ、検索結果に表示されるようになった。

斯くして、願いは叶えられた。
ありがとう、Google様。

めでたしめでたし。