SEOにおけるSPAの制限を克服する

Vue.jsのようなSingle Page Application (SPA)は、高速なユーザー体験を提供します。

画面遷移はスムーズで、状態管理も円滑に行えます。

しかし、SPAにはオーガニック検索トラフィックにおける大きな問題があります。

検索エンジンのボットは、多くの場合、空のHTML root divしか見ることができません。つまり、何も見えないのです。

Googleは最終的にJavaScriptを読み取りますが、それには時間がかかります。他の検索エンジンでは、より困難な状況になります。

私たちはVue 3を使用してGlobal Full-Stack Developer (GFD)を構築しました。SEOが必要でしたが、すべてをNuxtのようなServer-Side Rendered (SSR)フレームワークに移行したくはありませんでした。

私たちはこれを、ビルド時のプリレンダリングによって解決しました。

プリレンダリングは、ビルドプロセス中に各ルートの静的HTMLファイルを作成します。

ボットが /about や /services ページにアクセスした際、空のシェルではなく、完全なHTMLドキュメントが表示されます。

私たちのVite環境では、vite-plugin-prerenderを使用しました。

実装方法は以下の通りです。

  1. プラグインを開発用依存関係としてインストールします：

npm install vite-plugin-prerender -D

  1. vite.config.js ファイルでプラグインを設定します。

  2. インデックス作成が必要な特定のルートをリストアップします。

この方法により、SPAのスピードと静的サイトのSEOメリットを両立させることができます。

出典: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd