【ITニュース解説】If You Make This 1 SEO Mistake You Website Will Never Show on Google.

システムエンジニアを目指す皆さんは、ウェブサイトを開発する際、「動くこと」を第一に考えるだろう。しかし、ウェブサイトを開発する上で、実は「動くこと」と同じくらい、あるいはそれ以上に大切な要素がある。それが「検索エンジン最適化（SEO）」である。SEOは、ウェブサイトがGoogleなどの検索エンジンの結果ページで上位に表示されるようにする一連の技術と戦略を指す。このSEOにおいて、致命的な一つの間違いがある。この間違いを犯すと、どんなに素晴らしいウェブサイトを作っても、検索エンジンにまったく表示されず、誰にも見つけてもらえない事態に陥る可能性がある。

その致命的な間違いとは、ウェブサイトのコンテンツを、訪問者のブラウザ側でJavaScriptのみを使って動的に生成し、サーバーサイドでのレンダリングをまったく行わないことである。これは、特に現代のシングルページアプリケーション（SPA）などで顕著に見られる開発手法だが、このアプローチだけでは、検索エンジンのクローラーがウェブサイトの内容を正しく理解できないという問題を引き起こす。

検索エンジンの仕組みを簡単に説明しよう。Googleなどの検索エンジンは、「クローラー」と呼ばれるプログラムをインターネット上に巡回させている。このクローラーは、ウェブサイトを訪れてその内容を読み込み、データベースに登録する。この登録作業を「インデックス作成」と呼ぶ。インデックスされた情報をもとに、ユーザーが検索したキーワードに対して関連性の高いウェブサイトをランキングし、検索結果として表示するのだ。

ここで重要なのは、クローラーがウェブサイトの内容をどのように「読み込む」か、である。基本的に、クローラーはウェブサイトのHTMLコードを読み取ることでコンテンツを理解する。もし、ウェブサイトが最初にブラウザに送り返すHTMLファイルが、ほとんど空っぽで、そこにコンテンツを表示するためのJavaScriptコードだけが記述されていたらどうなるだろうか。クローラーは、そのJavaScriptコード自体は読み込めるものの、そのJavaScriptが実行されて初めて表示される「実際のコンテンツ」を即座に認識することが非常に難しくなる。

現代のウェブサイトの多くは、ユーザー体験向上のためにJavaScriptを多用している。例えば、ページ遷移なしにコンテンツを切り替えたり、インタラクティブな要素を追加したりと、その恩恵は大きい。しかし、このJavaScriptに過度に依存したサイト作りが、SEOの落とし穴となることがある。Googleは、以前から「JavaScriptを実行できる」と公言しており、実際に一部のJavaScriptは実行してコンテンツをインデックスできる。だが、これには時間とリソースの制約がある。すべてのJavaScriptを完全に実行し、その結果生成されるコンテンツを網羅的にインデックスすることは、検索エンジンにとって非常に負荷が高い作業なのだ。特に、ウェブサイトが初めてインターネットに公開され、クローラーが初めて訪れるような場合、GoogleBotがJavaScriptを実行してコンテンツを発見するまでにはかなりの時間がかかったり、最悪の場合、JavaScriptの実行が不完全なままインデックスされることで、重要なコンテンツが認識されないといった事態も起こりうる。

この「致命的な間違い」がなぜいけないかというと、もしクローラーがウェブサイトのコンテンツを読み取れなければ、検索エンジンはそのウェブサイトがどのような情報を提供しているのか理解できないため、どの検索キーワードにも関連付けられず、結果として検索結果にまったく表示されないからだ。せっかく時間と労力をかけて開発したウェブサイトも、誰にも見つけてもらえなければ、その存在価値は著しく低下してしまう。これは、ビジネス上もユーザー獲得の面でも、甚大な影響を及ぼす。

では、システムエンジニアとして、この問題をどのように回避すればよいだろうか。重要なのは、検索エンジンのクローラーがコンテンツを容易に読み取れるような構造にすることである。具体的な対策としては、以下の方法が考えられる。

一つ目は、「サーバーサイドレンダリング（SSR）」である。これは、ウェブサイトのコンテンツを、ユーザーのブラウザではなく、サーバー側で事前にHTMLとして生成してからブラウザに送る方法だ。これにより、ブラウザに届く最初のHTMLには既にコンテンツが含まれており、クローラーはJavaScriptの実行を待つことなく、すぐにウェブサイトの内容を読み取ることができる。ユーザー体験の面でも、コンテンツが表示されるまでの時間が短縮されるというメリットがある。

二つ目は、「プリレンダリング」である。これは、ウェブサイトのビルド時に、JavaScriptで生成されるはずのコンテンツを静的なHTMLファイルとしてあらかじめ生成しておく方法だ。SPAのような構造でも、重要なページは静的なHTMLとして準備しておくことで、クローラーが確実にコンテンツを読み込めるようにする。特に更新頻度の低いコンテンツや、初期表示が重要なページに有効な手法である。

三つ目は、「ダイナミックレンダリング」である。これは、ユーザーエージェント（アクセスしてきたのが人間かクローラーかなど）を判別し、人間にはJavaScriptで動的に生成されるコンテンツを提供し、クローラーにはサーバー側でレンダリングされた静的なHTMLコンテンツを提供する、という方法である。これにより、ユーザー体験を損なうことなく、クローラーにも最適化された情報を提供できる。ただし、実装が複雑になる可能性がある。

これらの技術は、ウェブサイトを開発する際に「どのようにコンテンツを表示するか」という設計段階で考慮すべき重要なポイントである。システムエンジニアは、単に機能を実現するだけでなく、そのウェブサイトが「誰かに見つけてもらえるか」「ビジネスに貢献できるか」といった視点も持ち合わせる必要がある。SEOは、技術的な知識だけでなく、ウェブサイトがインターネット上でどのように振る舞うべきかを理解する上で不可欠な要素なのだ。

ウェブサイトの設計初期段階から、検索エンジンによるインデックス作成の仕組みを理解し、クローラーがコンテンツを効率的に読み取れるような実装を選択することが、成功への鍵となる。JavaScriptの利点を生かしつつ、SEOの要件を満たすためには、SSRやプリレンダリングといった手法を適切に組み合わせる必要があるだろう。システムエンジニアにとって、これは単なる技術的な選択ではなく、ウェブサイトのリーチと影響力を決定づける戦略的な判断となる。これからシステムエンジニアとしてキャリアを築く皆さんは、コードを書く喜びとともに、そのコードが世の中でどのように機能し、どのように人々に届くのか、という視点も常に意識してほしい。