Google(他は知らん)ではJavaScript等のMVVM等で作られているページであっても正常に処理されてクロールされるっていうのが言ってるらしいですが、Google App Engine上に適当なangular.jsを使ったアプリケーションを展開してやってみた

っていう感じでクロールされてもそのangular.jsでの表示結果が正常にクロール結果としてインデックスされていない。でGoogle Webmaster Tool(のFetch as Googleでレンダリング結果)で見ると

image

っていうようにGooglebotでは認識はしているんだけどいざインデックスに登録されるとなると普通にソースがインデックスされちゃってるっていうオチになってる。なんでかまでは分からないんですが

んまぁこういうのの対策として良く知られているのが

  • HTML側に<meta name="fragment" content="!" />をつける
  • このHTMLを出力する際に_escaped_fragment_クエリーが付与されているかを調べる(JavaでいうとgetParameter("_escaped_fragment_")ではダメ)
  • _escaped_fragment_が付与されているような場合においては、インデックスされて欲しいデータをしてレンダリングしたデータを出力するようにする

っていうようにGooglebotで処理される際のデータをサーバーサイドで適切にレンダリングされた結果のデータを出力するようにすれば良い。っていう事でそういうようにすると

っていうようにインデックスされて表示されるようになる

まぁ実際どう対策としてるのかとかはググればいっぱい情報出てくると思いますし、資料も色々たくさんあると思うので色々読んでどういう手法を利用するかとか辺りを検討するべきなのかなと(んまぁ、React.jsとかはサーバーサイドレンダリングしたりする事も出来るっちゃ出来るのでっていう話はある)