質問: javascriptで、innerHTMLを使ってクイズアプリを作ったのですが、innerHTMLで挿入されるテキストをグーグルのクローラーが認識しないと聞きます。 それによってSEO上上位表示しなかったり、同じ型を使って、クイズの中身だけ変更して量産すると重複コンテンツと判断されて、全く評価がされない問題が起きてしまいます。 複数同じ型のクイズアプリを作っても重複コンテンツと思われずに、問などを認識させるためには、HTMLにも同じ内容を記載して、display:none;で消すか、回答はかけないのでせめて、問だけは、ズラッとHTMLに記載して、消さずにこんな問題がありますよと、表記させて、閲覧者にも意味があるように持っていくしかないかなと思ってますが、他にinnerHTMLで問などを入れていく現状でうまく認識させる方法はないでしょうか? 問だけは、ズラッとHTMLに記載する方法はすぐにできるのですがinnerHTMLに問いがあるので、これをひとつづつコピペしていくのが、数が多いためちょっと大変です。 もっと妙案があれば教えてください。
回答: 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`を勉強するもいいと思います。