Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

今回のお悩み

「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": "ページ1",
        "description": "これはページ1のディスクリプションです",
        "contents": "これはページ1の本文です"
    },
    {
        "id": 2,
        "title": "ページ2",
        "description": "これはページ2のディスクリプションです",
        "contents": "これはページ2の本文です"
    },
    {
        "id": 3,
        "title": "ページ3",
        "description": "これはページ3のディスクリプションです",
        "contents": "これはページ3の本文です"
    }
]
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様。

めでたしめでたし。

S_Kosaka
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした