Google SEOに適したJavaScript/プログレッシブウェブアプリの推奨構成【2016年3月現在 最新版】

[レベル: 上級]

JavaScriptとProgressive Web Apps(プログレッシブ ウェブ アプリ)のGoogle検索における2016年3月現在の扱われ方と推奨を、GoogleのJohn Mueller(ジョン・ミューラー)氏がGoogle+で共有しました。

JavaScriptをベースにしたサイトをGoogleフレンドリーに構成する際の参考になるので日本語に訳します。

なお、技術的な用語に関しては特に補足しません。
必要な人ならわかるはずです。
カタカナでも使われることがありそうな用語はカタカナ書きを付けています。
投稿の後に参照先をミューラー氏は提示していますが、説明文で直接リンクするようにこの記事では編集しています。

Google検索におけるJavaScript/Progressive Web Appsの推奨構成

Googlebotをクローキングしてはいけない。すべてのユーザーがコンテンツを利用できるように「feature detection(フィーチャー・ディテクション)」と「progressive enhancement(プログレッシブ・エンハンスメント)の技術を使う。「サポートしていないブラウザ」ページへリダイレクトすることは避ける。必要な場面では、polyfil(ポリフィル)やそのほかの安全なフォールバックを使うことを考慮する。Googlebotが現状でサポートしていない機能には、Service WorkerとFetch API、Promises、requestAnimationFrameが含まれる。

複数のURLからのコンテンツ配信が要求されるときは、rel=”canonical” を使う。

新規サイトではAjaxクロールのスキームを使わない。この仕組みを使っている古いサイトの移行を早いうちに検討する。移行の際には、「meta fragment」を削除することを忘れないようにする。完全にレンダリングしたコンテンツをescaped fragment(エスケープ フラグメント)のURLが返さないのであれば、meta fragment タグを使わない。(詳細はこちらを参照

URLに「#」を使うことを避ける(「#!」は別)。「#」が入ったURLをGooglebotはめったにインデックスしない。 パス・ファイル名・クエリパラメータが入った通常のURLを代わりに使用する。ナビゲーションにはHistory APIを使うことを検討する。

Googlebotがどのようにページを見るか検証するために、Search ConsoleのFetch as Googleで「取得してレンダリング」を利用する。このツールは、「#」や「#!」が入ったURLに対応していないので注意する。

必要なすべてのリソース(JavaScriptファイルやフレームワーク、サーバーレスポンス、サードパーティAPIなど)がrobots.txtでブロックされていなことを確実にしておく。Fetch as Googleの「取得してレンダリング」は、発見されたブロックされたリソースをリスト表示してくれる。制御できないリソースがもしrobots.txtでブロックされていたり(たとえば、サードパーティのAPI)一時的に利用できなかったりするなら、自サイトのクライアントサイドのコードが適切に失敗するようにしておく。

埋め込みリソースの数を制限する。特に、ページをレンダリングするのに要求されるJavaScriptファイルとサーバーレスポンスの数。要求されるURLの数が多いと、タイムアウトしたり、こうしたリソースが入手できないままレンダリングしたりする原因になる。

titleタグやdescriptionタグ、robots meta タグ、構造化データなどのmetaデータを提供するJavaScriptの使用をGoogleはサポートしている。AMPを使うときは、仕様の要件により、AMPページは静的でなければならない。

最後に、あなたのサイトのコンテンツにアクセスするGoogle以外の検索エンジンやウェブサービスはJavaScriptをまったくサポートしていなかったり、あるいは異なるサブセットをサポートしたりしているかもしれないことを覚えておかなければならない。しかし、関連したウェブページはJSやPWAの技術をつかって構築することができる。サイトの変更を伝えるために正しいlastmodの日付を記述したサイトマップを使うことも覚えておく。

以上です。

ミューラー氏も述べていますが、最新版であったとしても新たな仕組みが加わったりこれまでの仕様が変更されたりしたわけではありません。
とはいえ、GooglebotがJavaScriptやProgressive Web Appsをどのように扱っているのかの現状をきちんと把握するうえではありがたいまとめです。