今回のお悩み
「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での処理も認識するとのことだが、果たして結果はー。
<!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を使うので要読込。
[
{
"id": 1,
"title": "ページ１",
"description": "これはページ１のディスクリプションです",
"contents": "これはページ１の本文です"
},
{
"id": 2,
"title": "ページ２",
"description": "これはページ２のディスクリプションです",
"contents": "これはページ２の本文です"
},
{
"id": 3,
"title": "ページ３",
"description": "これはページ３のディスクリプションです",
"contents": "これはページ３の本文です"
}
]
$(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ページ分を記述する。
<?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様。
めでたしめでたし。