昔はAjaxでのページ読み込みはGoogleクローラーに認識されないから、ページがインデックスされないよって言われてましたが、もうJavaScriptのAjax読み込みでもSEO対策ができるようになってるらしいです。
Ajaxは作り手もユーザーにも便利なことが多いのでどんどん使えるようになったら嬉しいですね～。
というわけで色々調べたことをメモしていきます。

前提

  • html+JavaScript/jQueryで非同期読み込みのページを作りたい。
  • 非同期読み込みのページもGoogleクロールしてもらってインデックスさせたい。

参考サイト

わかりやすく記事にしてくださってる方がおりましたので先にご紹介します。
javascriptを使ったSEO対策まとめ

こちらはGoogle公式の情報です。これを元に色々検討します。
検索エンジンとの相性を考慮した無限スクロールのベストプラクティス

Ajaxファイル読み込みさせたいし、インデックスさせたい

Ajaxページ切り替えは使いたいなーと思うことが多いです。

  • タブ切り替えのデザインの時
  • 「もっと見る」みたいなボタンをクリックすると次のコンテンツが追加される
  • スクロールで次々とコンテンツが読み込まれる（無限スクロール）

こういうとき。
この場合の制作ポイントをメモしておきます。

読み込み元のコンテンツを整える

最終的に作りたいのはページ遷移なしでAjaxでコンテンツを読み込んでいくものなんですが、読み込み元のコンテンツもそのページだけで成り立つようにしておく方がよいみたいです。

  • 固有のURLをもたせる
  • JavaScript が無効でもアクセス可能にする（固有のURLをもたせる）
  • コンテンツの量を1ページあたりの適量に分割する
  • コンテンツを分割し、それぞれのページ間で重複が発生しないようにする
  • 分割ページに直接アクセスしても正しい内容とメタ情報を持たせる

上の内容を考慮した例、動的サイトの場合。

http://example.com/all-list /* ユーザーがアクセスするコンテンツ */

http://example.com/all-list?page=2 /* 読み込みコンテンツ１ */
http://example.com/all-list?page=3 /* 読み込みコンテンツ２ */
http://example.com/all-list?page=4 /* 読み込みコンテンツ３ */

こんな感じに分割して、URLを与え、読み込み元コンテンツは適量なコンテンツ量に抑えます。
直接ユーザーが「読み込みコンテンツ」にアクセスした場合にも一生懸命スクロールしなくて良いようなコンテンツ量くらい・・・らしいです。
メタ情報も、動的に変化させるURLとマッチするように設定します。

静的ページの場合はどうなるんだろう。
「JavaScript が無効でもアクセス可能」っていうところがあるのが引っ掛かります。

http://example.com/all-list.html /* ユーザーがアクセスするコンテンツ */

http://example.com/all-list-page2.html /* 読み込みコンテンツ１ */
http://example.com/all-list-page3.html /* 読み込みコンテンツ２ */
http://example.com/all-list-page4.html /* 読み込みコンテンツ３ */

htmlファイルはこうかなぁ。
全ページ普通に存在するページとして作って、
それぞれのページの必要な部分をAjaxでコンテンツ読み込みする、って感じでしょうか。
この作りにした場合、インデックス的にはそれぞれのページのメタを整えておけばよいので、Ajaxで別の要素を読み込みさせた時にURLを変えたりメタ情報を変える必要はないと思われます。

普通に静的ページとしてのSEO対策をするだけでいいですね。

メタ情報：rel=”canonical”、rel=”next”、rel=”prev” を動的に記述する

上述の通り、動的サイトの場合の処理になりますが、URLを変化させると同時にメタ情報もURLごとにちゃんと変わるように設定します。
静的サイトはhtmlのメタに記述していくだけです。

Google公式の情報があるのでこれを参考に。
コンテンツをページ指定する

先ほど分割したコンテンツたちのメタ情報を整えます。
タイトルとかOGPも一緒に動的に変わるように修正。

Ajax読み込みの時にHistoryAPIでURLを書き換える

Ajaxでコンテンツを書き換えると同時に、HistoryAPIでURLも書き換える必要があります。

インデックスには関係なさそうですが、静的サイトもやっておくとブラウザバックできるのでやった方が良いのかな。
ブラウザバックに対応した場合、Ajaxで取得した状態じゃなくて普通に存在するページに飛ぶってことになる・・・？たぶん。実装できてないのでいまのところ予想です^^;
作る機会があれば検証してみます。

/* pushState
 * ブラウザバックに対応
 */
history.pushState(state, title, url)

/* replaceState
 * ブラウザバックに対応しない
 */
history.replaceState(state, title, url)

Fetch as Googleで確認する

クローラーにページがどう表示されているかは以下でみれます。
確認するのに使えそうです。

Fetch as Google
ウェブサイト用 Fetch as Google を使用する

おわり