はじめに
SPA（Single Page Application）は、1つのページで複数のコンテンツを表示するWebアプリケーションの開発手法の一つです。SPAの利点として、ユーザー体験の向上やページの読み込み時間の短縮が挙げられます。しかし、SPAはJavaScriptを利用して動的にコンテンツを生成するため、SEO（Search Engine Optimization）の観点からは課題があります。
本記事では、SPAにおけるSEO対策の方法として、ダイナミックレンダリング、サーバーサイドレンダリング、プリレンダリングの3つを紹介し、各手法の特徴やメリット・デメリット、実装方法などを解説します。
以下はSPAについて書いた記事です。是非一度読んでいただけるとうれしいです。
SPAにおけるSEO対策
ダイナミックレンダリング（Dynamic Rendering）
ダイナミックレンダリングとは
ダイナミックレンダリングとは、SPAにおいてクローラーがアクセスした際に、クライアント側のJavaScriptによって動的に生成されたコンテンツをHTMLに変換して表示する手法です。SPAの問題点である、クローラーがJavaScriptを解釈できないためにクロールできないという課題を解決することができます。
ダイナミックレンダリングの実現方法には、Googleが提供するDynamic Renderingの利用があります。Dynamic Renderingでは、User-Agentがクローラーであるかどうかによって、クローラーの場合にはサーバー側で生成されたHTMLを返し、それ以外の場合にはクライアント側のJavaScriptで動的に生成されたコンテンツを表示します。また、Dynamic Renderingを実現するためには、サーバーサイドでのレンダリングの実装や、URLのパターン設定などが必要となります。
少し分かりづらいのでもう少し簡単に説明すると、クローラーがJavaScriptを解釈できないために適切にインデックスされないので、それをちゃんとインデックスされるようにする仕組みをダイナミックレンダリングと言います。
アクセスしてきたのが人が使用しているブラウザか検索エンジンのロボットかを確認し、ブラウザなら通常のページを表示するためのJavaScriptを返し、ロボットならサーバー側で生成されたHTMLを返します。
ダイナミックレンダリングのメリットとデメリット
- 実装が比較的簡単で、既存のSPAに適用しやすい。
- クローラーに正しく表示されるため、検索エンジンからのアクセスが期待できます。
- ダイナミックレンダリングを実現するためには、サーバーサイドでのレンダリングを実装する必要があり、サーバーサイドのコストが増大する可能性があります。
- 通常のSPAと比較すると、ページ遷移時にサーバーとの通信が必要となるため、表示速度が低下する可能性があります。
ダイナミックレンダリングの実装方法
ダイナミックレンダリングを実現するためには、以下の手順が必要です。
- User-Agentがクローラーであるかどうかを判定する
クローラーがアクセスした場合には、サーバーサイドでHTMLを生成するようにします。
- サーバーサイドでのレンダリング
クローラーがアクセスした場合には、サーバーサイドでHTMLを生成するようにします。サーバーサイドでのレンダリングには、Node.jsを利用する方法や、PHPなどの言語を利用する方法などがあります。
- HTMLの提供
クローラーがアクセスした場合には、サーバーサイドで生成されたHTMLを返します。それ以外の場合には、クライアント側で動的に生成されたコンテンツを表示します。
- URLのパターン設定
クローラーがアクセスした場合には、サーバーサイドで生成されたHTMLを返すため、URLのパターン設定が必要となります。また、Dynamic Renderingを利用する場合には、URLパラメータの設定や、リダイレクトの設定なども必要となります。
以上の手順を踏むことで、ダイナミックレンダリングを実現することができます。
サーバーサイドレンダリング（SSR）
SSRとは
サーバーサイドレンダリング（Server-Side Rendering, SSR）とは、サーバー側でアプリケーションのHTMLを生成する方法です。一方、従来のSPAでは、クライアント側でJavaScriptが実行され、動的にコンテンツが生成されるため、HTMLが最初から生成されていません。そのため、初回表示時にJavaScriptファイルをダウンロードする必要があり、表示速度が遅くなる問題があります。
SSRを採用することで、初回表示時にサーバー側でHTMLを生成するため、JavaScriptのダウンロードや実行時間の問題が解決され、表示速度が高速化されます。また、検索エンジンに対しても、正しくコンテンツが表示されるため、SEO対策にも効果的です。
ただし、SSRには以下のような課題もあります。
- サーバーの負荷が増大する可能性がある。
- コードの実行順序に関する問題がある。
- キャッシュの管理が必要になる。
SSRを採用する際には、これらの課題にも十分に対応する必要があります。
SSRのメリットとデメリット
- 初回表示時の高速な表示が可能。
- クライアント側でJavaScriptを実行する必要がないため、SEO対策がしやすい。
- サーバー側でHTMLを生成するため、セキュリティ対策がしやすい。
- サーバーの負荷が増大する可能性がある。
- クライアント側でJavaScriptを実行する必要がないため、ブラウザの動作によってはJavaScriptが正しく動作しない場合がある。
- コードの実行順序に関する問題がある。
- キャッシュの管理が必要になる。
SSRの実装方法
SSRを実現するためには、サーバーサイドのフレームワークやライブラリを利用する必要があります。以下に代表的なライブラリと実装方法を示します。
１．React + Next.js ReactとNext.jsを利用したSSRの実装方法
1-1. Next.jsのインストール まず、Next.jsをインストールします。
npm install next react react-dom
1-2. ページの作成 Next.jsでは、pagesディレクトリに配置されたファイルがページとして扱われます。例えば、以下のようなファイルを作成することで、/aboutというURLでアクセスできるページを作成できます。
// pages/about.js
export default function About() {
return <div>About us</div>
}
1-3. サーバーの起動 Next.jsでは、nextコマンドを利用してサーバーを起動します。
npx next dev
２．Vue.js + Nuxt.js Vue.jsとNuxt.jsを利用したSSRの実装方法
2-1. Nuxt.jsのインストール まず、Nuxt.jsをインストールします。
npm install nuxt
2-2. ページの作成 Nuxt.jsでは、pagesディレクトリに配置されたファイルがページとして扱われます。例えば、以下のようなファイルを作成することで、/aboutというURLでアクセスできるページを作成できます。
<!-- pages/about.vue --> <template> <div>About us</div> </template>
2-3. サーバーの起動 Nuxt.jsでは、以下のようにnuxtコマンドを利用してサーバーを起動します。
npx nuxt
以上のように、ReactとNext.js、Vue.jsとNuxt.jsを利用することで、簡単にSSRを実現することができます。
プリレンダリング（Prerendering）
プリレンダリングとは
プリレンダリングとは、Webページをブラウザで表示される前に、あらかじめHTMLファイルとして生成することを指します。具体的には、SPAにおいて、特定のページについて、その内容を事前にHTMLに変換して、サーバーに保存しておくことで、クライアントがそのページをリクエストした時には、そのHTMLファイルを返すことができます。このため、クライアント側のJavaScriptの処理が必要なく、HTMLファイルが即座に表示されるため、レスポンスの高速化やSEO対策につながります。プリレンダリングは、ダイナミックレンダリングやサーバーサイドレンダリングと同様に、SPAにおけるSEO対策の1つの手段として有用です。
プリレンダリングのメリットとデメリット
- クライアント側のJavaScriptの処理が必要なく、HTMLファイルが即座に表示されるため、レスポンスが高速化します。
- クローラーによってWebページが正しくインデックスされ、SEO対策が向上します。
- SPAでページ遷移時に生じる遅延やチラつきが軽減され、ユーザー体験が向上します。
- サーバーにおいてHTMLファイルを生成するため、サーバーの負荷が増加する可能性があります。
- ページ数が多いWebサイトでは、全てのページに対してプリレンダリングを行うことが難しい場合があります。
- ユーザーが動的なコンテンツを見る必要がある場合、JavaScriptを使用して生成する必要があります。
プリレンダリングの実装方法
プリレンダリングには、いくつかの実装方法があります。以下に代表的な方法をいくつか紹介します。
- プリレンダリングサービスの利用
プリレンダリングを簡単に実現する方法として、プリレンダリングサービスを利用する方法があります。これは、サービスに対して特定のページのURLを渡すことで、自動的にHTMLファイルを生成して返してくれるものです。代表的なサービスとしては、Prerender.ioやRendertronなどがあります。
- プリレンダリング用のミドルウェアの利用
Node.jsを利用して開発する場合、ExpressやKoaなどのWebフレームワークに対して、プリレンダリング用のミドルウェアを組み込むことができます。代表的なミドルウェアとしては、prerender-spa-pluginやreact-snapなどがあります。
- 静的サイトジェネレーターの利用
静的サイトジェネレーターを利用して、Webページを静的ファイルとして生成することで、プリレンダリングを実現することができます。代表的な静的サイトジェネレーターとしては、GatsbyやNext.jsなどがあります。
以上の方法に加えて、Webサイトの要件や技術的なスタックに応じて、独自の実装方法を考えることも可能です。
まとめ
SPAにおけるSEO対策方法として、ダイナミックレンダリング、サーバーサイドレンダリング（SSR）、プリレンダリングの3つの手法を紹介しました。
それぞれの手法には、以下のような特徴があります。
- ダイナミックレンダリング：JavaScriptの実行によってコンテンツを生成し、クライアント側でページを構築する。初期ロードが遅くなることがあるが、SPAの開発に向いている。
- サーバーサイドレンダリング：サーバー側でコンテンツをレンダリングし、HTMLを生成してクライアントに返す。SEO対策に適しているが、サーバーの負荷が高くなることがある。
- プリレンダリング：事前にHTMLを生成し、クライアントに返す。初期ロードが速くなるが、動的なコンテンツがある場合には更新が必要になる。
最適な手法の選択は、Webサイトの要件や技術的なスタックに応じて異なります。SEO対策を強化するためには、サーバーサイドレンダリングが最適である場合が多いですが、開発効率を重視する場合にはダイナミックレンダリングやプリレンダリングを選択することもあります。
