この記事を読んだ後に理解できること

SPAがSEOに弱い理由
Next.jsのSSRがSEOに強い理由
Next.jsのSSGがSEOに強い理由

SPAのメリット・デメリットからみるSEOに弱い理由

メリット

リアルタイムな更新が可能
動作が快適でユーザが操作しやすい

SPAとはシングルページアプリケーションの略です。ページは遷移しないけど、中身が動的に変わるため、リアルタイムな更新が特徴の一つです。

あらかじめユーザ側にはデータの入っていないHTMLを渡しておき、データだけはjavascriptを使って渡して表示させています。

例えば、Twitterでいいねを押すとハートが赤くなりますよね。あれはjavasciptによって画面の一部を書き換えることで実現しています。

javascriptを使わない場合、ページが真っ白になってリロードされた後にハートが赤くなります。

ユーザ目線で見るとかなり使いづらいですよね。

以下にSPAの仕組みの図解を載せておきます。

デメリット

SEOに弱い

Googleはクローラーを使ってWebサイトを巡回しています。つまり皆さんと同じくWebサイトに訪問しているのです。

SPAはデータを後から取得する必要があり、若干時間がかかります。クローラーはせっかちだからデータの取得なんか待ってられません。

結果としてデータが取得されていないページを読み取ってしまうため、コンテンツが充実していないページと認識してしまいます。

コンテンツが充実していないページは検索結果上位に表示されることはないので、SPAはその仕組み上、SEOに弱いと言われています。

Next.jsのSSRがSEOに強い理由

SSRとはサーバーサイドレンダリングの略になります。

文字通りサーバー側でレンダリングを行います。

このレンダリング方法のメリットは、

リアルタイムなデータを表示できる
サーバ上でデータの取得を行うので、ユーザのデバイススペックによらず、レンダリングができる
あらかじめデータを取得した状態でHTMLが表示されるので、クローラーも読み取ることができる

が挙げられます。

CSRと違い、クローラーもWebページを正確に読み取ることができるため、SEOに強いと言われています。

デメリットとしては、

リクエストを受けてからHTMLの生成が始まるので、表示されるまでに若干時間がかかる

が挙げられます。

Next.jsのSSGがSEOに強い理由

SSGとはスタティックサイトジェネレーションの略です。

こちらはビルド時にデータを取得し、HTMLの生成を行い、Webサーバー上にキャッシュさせておきます。

ユーザからリクエストを受けた時にキャッシュから生成しておいたHTMLを返却します。

このレンダリング方法メリットは、

すでに生成済みのHTMLを返却するので、ページ表示速度が早い
クローラーの読み取りが可能なので、SEOに強い

が挙げられます。

デメリットとしては、

リアルタイムな更新ができない

が挙げられます。

なお、Next.js側が推しているのは、SSGになります。

サイトの表示速度のパフォーマンスはSSGの方が優れているからです。

Next.jsのSSR、SSGはなぜSEOに強いのか

目次