iku8log

Webエンジニア、SEO、Web解析等々しております。タダのメモ。

SPAがGoogle検索エンジンにインデックスされない問題

現在SPAでサイトを構築しているのですが、うまく検索エンジンにインデックスされません。

対象とか環境とか

  • AjaxつかってSPAを作ってるひと
  • 僕のAngularJSでSPAを構築(ホントはAngular2がしたい。でもホントはreactがしたい)
  • SPAとかAjaxとか非同期とか、なんかかっこいいから使いたい

SPAがインデックスされない

もちろん各ページには一意のURLが必要ですが。それにしてもインデックスされない。 一意のURLにする方法はハッシュバング(シャープとビックリマーク → #!)を使う方法があります。

http://xxx.com/#!/post/1

みたいになる。 このハッシュバングについては、無理やり感があるようです(しゃーなし作った仕様 by Google

ハッシュバングを使えば、インデックスされるようですが、今回実験した結果まだインデックスされていない。 トップページはインデクスされるのですが、その他ページがインデックスされません。もちろん一意なURLです。

というか、 Fetch as Googleで各ページを登録したのですが、何故かURLが「/」になってしまいます。検索エンジンに出てくるtitleはトップページ、titleの下に出てくるものは登録したページの内容です。で、その検索結果のリンクを踏むとトップページに遷移。 出来てるのか、出来てないのか謎(出来てないんでしょう)

みんなどうしてるのか?

いろいろ探していると以下の記事を発見。

https://productforums.google.com/forum/#!msg/webmasters/bvw4M3WBlKY/i7Cd65HgBwAJ

f:id:iku8:20170612230357p:plain

僕と同じようなことを嘆いている。 ハッシュバングでサイトを見れるけど、検索エンジンボットが見に来てくれてない?的な。

そんな嘆きに対して

Did you set up your server to handle requests for URLs that contain escaped_fragment ?

お?escaped_fragment 何だこれは、と、調べてみると

HTMLスナップショットを作る仕組みらしい

そもそもHTMLスナップショットが何か分からないので、ググると。 JSでレンダリングした後のHTMLを提供するやつっぽい。

つまりこの仕組では、検索エンジンがSPAをうまくクロール出来ないので、JS実行後の結果(ユーザに見える画面)のHTMLを渡すらしい。 なかなか面倒なことをしている。

で、これにつても少し調べた感じ、HTMLスナップショットは現在使う必要なしとのこと。

Googleの中の人によると

ブラウザで見えるものはGooglebotにも見える クローラーレンダリング能力が向上 HTMLスナップショットはいらん!

とのこと。 ホントかよ!

本当なら、検索エンジンにインデックスされないのは何故?Fetch as Googleでインデックスページしか登録出来ないのは何故?

僕の作ったSPAに何か問題があるのでしょう。 「しゃーなしHTMLスナップショットを作るか」というのはダルいし、終わりかけているものを使うのは無駄な気がするので

history APIの「pushState」を使うことにする。

qiita.com

まとめ