[レベル: 上級]
React や Angular などの JavaScript フレームワークを利用したサイトでは、プリレンダリングしたページを配信することを勧める。
Google の John Mueller(ジョン・ミューラー)氏は、英語版のウェブマスター向けオフィスアワーでこのようにコメントしました。
プリレンダリングで高速表示
プリレンダリング (Prerendering) は、コンテンツの大部分を JavaScript で生成するページで利用されます(正しく言えば、JS に限りませんがここでは深入りしません)。
プリレンダリングでは、ブラウザに JavaScript を実行させてページをレンダリングさせるのではなく、サーバー側であらかじめレンダリングした“静的な”HTMLをブラウザに配信します。
※補足: この記事で言う「プリレンダリング」は「サーバー サイド レンダリング (Server Side Rendering)」のことを指します。
プリレンダリングしたページを返す最大のメリットは高速化です。
JavaScript をブラウザ側で実行したうえでレンダリングする必要がありません。
1つ2つの JavaScript であれば問題にはならないでしょうが、JavaScript フレームワークで構成するサイトであれば JavaScript の処理にかかる時間によるスピード低下を無視することはできないでしょう。
JavaScript フレームワークで幅広く使われているのは React と Angular です。
プリレンダリングは、React では Isomorphic JavaScript という仕様で、Angular では Angular Universal という仕様で実現できます。
こういった仕組みを使うと、(最初の)ページをプリレンダリングした状態で配信できます。
ブラウザでは JavaScript を実行せずに、普通の静的なページとまったく同じようにページをレンダリングするので本当に高速な表示をユーザーに提供できます。
ミューラー氏は、こういった観点から JavaScript フレームワークを採用したサイトでのプリレンダリングを推奨したのです。
プリレンダリングは検索エンジンにもやさしい
プリレンダリングにはもう1つメリットがあります。
それは、SEO へのマイナス因子をなくせることです。
今の Googlebot は JavaScript を実行できます。
しかし、100%完全に JavaScript を実行してそのページのコンテンツをレンダリングできる保証は(残念ながら)ありません。
プリレンダリングしておけばレンダリングが完了したあとのページ、つまりユーザーが実際に見ているページを Googlebot にも確実に見せることが可能です。
したがって、存在するはずのコンテンツを認識してもらえなかったというトラブルを防ぐことに役立ちます(極端な例を挙げれば、ブラウザではきちんと表示されるのに Googlebot に対しては真っ白なページになるというケースがありうる)。
プリレンダリングしたからといって、検索エンジンの評価が上がることはありません。
ですが、Googlebot がレンダリングし損ねることによって正しく評価してもらえなくなるというマイナスな事態を防ぐことができるのです。
高速化というユーザー体験の観点からも、確実な評価という SEO の観点からも、React や Angular などの JavaScript フレームワークを採用しているサイトではプリレンダリングを検討するとよさそうです。
僕は開発には疎いので、Isomorphic JavaScript や Angular Universal に関しては詳細に説明できません。
開発者の人にこの記事での情報を伝えてあげて、実装する価値があるかどうかを相談してみてください。