45266
javascriptで、innerHTMLを使ってクイズアプリを作ったのですが、innerHTMLで挿入されるテキストをグーグルのクローラーが認識しないと聞きます。  
それによってSEO上上位表示しなかったり、同じ型を使って、クイズの中身だけ変更して量産すると重複コンテンツと判断されて、全く評価がされない問題が起きてしまいます。

複数同じ型のクイズアプリを作っても重複コンテンツと思われずに、問などを認識させるためには、HTMLにも同じ内容を記載して、display:none;で消すか、回答はかけないのでせめて、問だけは、ズラッとHTMLに記載して、消さずにこんな問題がありますよと、表記させて、閲覧者にも意味があるように持っていくしかないかなと思ってますが、他にinnerHTMLで問などを入れていく現状でうまく認識させる方法はないでしょうか？

問だけは、ズラッとHTMLに記載する方法はすぐにできるのですがinnerHTMLに問いがあるので、これをひとつづつコピペしていくのが、数が多いためちょっと大変です。  
もっと妙案があれば教えてください。
CC BY-SA 4.0
2018-07-03T03:32:27.183
45254
2018-07-04T07:07:14.857
2018-07-03T07:54:01.570
19110
24247
question
javascript
innerHTMLで挿入されたテキストをクローラーが認識しない
> javascriptで、innerHTMLを使ってクイズアプリを作ったのですが、クイズアプリをグーグルのクローラーが認識しないと聞きます。

直接確認されたのでしょうか？ Googleはサイト管理者向けに[Search
Console](https://www.google.com/webmasters/tools/home?hl=ja)というツールを提供し、サイトがGoogleによってどのように解釈されたかの情報を提供しています。  
また、[検索エンジン最適化（SEO）スターター
ガイド](https://support.google.com/webmasters/answer/7451184?hl=ja)や[ウェブマスター向けガイドライン（品質に関するガイドライン）](https://support.google.com/webmasters/answer/35769)も提供していますので、これらを踏まえてサイトを設計することをお勧めします。

例えば

> サイトの重要なコンテンツをデフォルトで表示します。Google はタブや展開するセクションなどのナビゲーション要素内に含まれる非表示の HTML
> コンテンツをクロールできますが、こうしたコンテンツはユーザーがアクセスしにくいものとみなされ、また、最も重要な情報はページの表示時にデフォルトで閲覧可能となっているものと解釈されます。

と説明されています。クイズ１問１問にアクセス可能なURLが用意されないことには、キーワードとして解釈されません。（逆にキーワードとして解釈されたとして検索結果に表示されるようになったとして、閲覧者がアクセスしても当該クイズ問題が表示されない場合、閲覧者はGoogleの検索精度が低いと判断しますよね？）

* * *

> その問題がすぐに出るかわわかりませんが、進めていくうちに必ず出てきますが、それでもだめなのですか
>
> 別ページにクローラーだけ認識できるページを作って本体のページのないようとして認識してもらうことはできるのですか？

本意でないと思いたいですが、これらの発言だけを見ると訪問者やクローラーを騙すことが目的になっているように思えてなりません。もう一度、ウェブマスター向けガイドライン（品質に関するガイドライン）から引用します。

> ### 基本方針
>
>   * 検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。
>   * ユーザーをだますようなことをしない。
>   * 検索エンジンでの掲載位置を上げるための不正行為をしない。
>

サイトの目的を見失うべきではなく、閲覧者のためのサイト作りをしてください。
CC BY-SA 4.0
2018-07-03T07:48:42.900
45261
2018-07-04T01:32:58.853
2020-06-17T08:14:45.997
-1
4236
45254
answer
Googleのbotは、JavaScriptで記述したページを認識することができます。

参考 [Deprecating our AJAX crawling
scheme](https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-
crawling-scheme.html)

最近の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の「[はじめてのプログレッシブ
ウェブアプリ](https://developers.google.com/web/fundamentals/codelabs/your-first-
pwapp/?hl=ja)」  
また、`Vue.js`がこういう考え方でWebサイトを作成するフレームワークなので、`Vue.js`を勉強するもいいと思います。
CC BY-SA 4.0
2018-07-03T10:46:21.280
45266
2018-07-03T14:57:18.437
2018-07-03T14:57:18.437
15171
15171
45254
answer
説明しずらいので回答に書きます。  
具体的には、別ページとしてクロールされる様にjavascriptで作るページのURLは以下の様になります。

[http://hoge.jp/calendar/index.html?ym=201806&day=6](http://hoge.jp/calendar/index.html?ym=201806&day=6)  
[http://hoge.jp/calendar/index.html?ym=201807&day=11](http://hoge.jp/calendar/index.html?ym=201807&day=11)

SEOを意識している様なので知っていると思うのでが、これから初めてホームページを作りGoogleで検索できる様にする人の為に基本の基本を

・title、metaをページ毎に重複しない様に設定（スクリプトで設定してしても良い）

```

    例、
    
    <title>クイズページのタイトル</title>
    <meta name="keywords" content="クイズ,quiz">
    <meta name="description" content="クイズページの概要説明する文">
    
```

・hタグを適切に使う

```

     <h1>クイズページのタイトル</h1>
    　　<h2>見出し１</h2>
    　　<h2>見出し２</h2>
    
```

・全ページクロール（見てもらう為に）全ページにメニューリンクを作る。（あくまでも見に来てくれた人の為になる様によく見える所に設置する）

・見に来てくれた人に有益な情報をもたらす内容になる様に心がける。
CC BY-SA 4.0
2018-07-04T06:48:30.827
45303
2018-07-04T07:07:14.857
2018-07-04T07:07:14.857
22793
22793
45254
answer