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

## 今回のお悩み
**「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 ヘルプ]
(https://support.google.com/webmasters/answer/156184?hl=ja&ref_topic=4581190&vid=0-635775621399890274-1681235753)

※下記は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](https://search.google.com/search-console/welcome)でGoogle様に送信する（~~せっかちなヤツだと思われたくなければ、~~クローラーの巡回を待っても構わない）。

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

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

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

めでたしめでたし。