Googleのbotは、JavaScriptで記述したページを認識することができます。
参考 Deprecating our AJAX crawling scheme
最近のgoogleは、Progressive Web App
に力を入れていますが、Progressive Web App
というのはまさにHTML+Javascript
で作ったサイトです。
ただし、JavaScript
で作成したwebサイトをgoogleに認識してもらう場合には少し注意が必要です。まず、googleのbotがボタンを押したりフォームに入力をしてくれるわけではないので、urlを使ってアクセスしてきて、それで表示されるページしか認識されません。
したがって、現状だとGoogleのbotからは1ページしかないWebサイトに見えてしまいます。それで、各質問ごとにurlを設定した方がいいでしょう。urlの設定には、例えば上に書いた参考のブログにもあるHistory API pushState()
が使えます。pushStateを使えば、ページ遷移をしないでもアドレスバーのurlを書き換えることができ、ブラウザーの履歴機能を使うことができるようになります。
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
すでにinnerHTMLを使ってクイズを表示しているのであれば、その場所にhistory.pushStateを追加だけなのでそれほど大きな修正にはならないでしょう。そうしてしまえば、PHPのようなサーバーサイドレンダリングを使ってhtml全体を書き換えるよりも画面表示の更新がずっと速くできます。それこそ、googleがProgressive Web App
を押している理由の一つです。
やり方を簡単に説明すると、質問と回答を、HTMLに書いておく、jsファイルに書く、独立したjsonする、のいずれの方法でもできます。例えば、jsファイルに書くのであれば、次のような連想配列を作っておきます。
var qa = {
'q1':{
'q': '質問1',
'a': '回答1',
},
'q2':{
'q': '質問2',
'a': '回答2',
},
.......
}
初期画面(例えばa.html
)だと、for (quesion in qa)
で連想配列を順番に取得できるので、質問だけを並べればいいでしょう。
また、個別の質問を表示するページのurlをa.html?q=q1
というようなクエリー形式にするのであれば、次のようにしてクエリーを取得できるので、urlにクエリーがある場合は該当の質問と回答を表示するようにすればいいです。
var url = window.location.pathname;
var query = url.split('?')[1];
参考になる資料: Googleの「はじめてのプログレッシブ ウェブアプリ」
また、Vue.js
がこういう考え方でWebサイトを作成するフレームワークなので、Vue.js
を勉強するもいいと思います。