JavaScript
jQuery
JSON
SEO
インデックス

拝啓 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": "ページ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様。

めでたしめでたし。