Prerender.ioでSEOを改善する

フォーブスが最近発表した2024年のウェブサイト統計トップリストで、現在インターネット上に存在するウェブサイトは約10億9000万（！）であることがわかった。億を超えるウェブサイトの中で、ユーザー（そして潜在顧客）はどうやってあなたのウェブサイトを見つけるのでしょうか？ほとんどの場合、検索エンジンからスタートするでしょう。しかし、検索エンジンがユーザーをあなたのサイトに導くためには、SEOの宿題をこなす必要があります。

SEOは、あなたのウェブサイトが検索エンジンで上位に表示されるようにします。正しく実装されたSEOは、サイトへのトラフィックを促進します。しかし、ReactやVue.jsのような最新のJavaScriptフレームワークで構築されたサイトは、クライアントサイドのレンダリングに大きく依存しており、検索エンジンはこのようなタイプのサイトを正しくインデックスするのに苦労することがよくあります。そのため、検索結果での視認性が低いままになってしまうのです。

そこでプリレンダリングです。プリレンダリングは、検索エンジンが簡単にクロールしてインデックスできるように、ウェブページの静的なHTMLバージョンを生成することです。このテクニックは、あなたのサイトのSEOの成功に劇的な影響を与えます。

この記事では、Prerender.ioのプリレンダリングサービスが、これらのフレームワークを使用する際にSEOの障害を克服するのに役立つ方法を見ていきます。また、ウェブサーバーまたはアプリケーションレベルでプリレンダリングを実装するための正しい方向性を示します。

さあ、飛び込もう。

JavaScriptフレームワークにおけるSEOの課題

ReactやVue.jsのようなフレームワークを使うと、なぜSEOが課題になるのでしょうか？従来の検索エンジンのボットは、静的なHTMLを読むように設計されている。他のものはJavaScriptの一部を処理し、部分的にページをレンダリングするかもしれないが、彼らには限界がある。あなたのサイトがクライアント側のレンダリングに重きを置いている場合、検索エンジンはページを最後までクロールしてレンダリングしない可能性が高いので、インデックスするための完全な実際のコンテンツを見ることができません。

一例として、Googleはクライアントサイド・レンダリング・サイトの構築者に次のようなガイダンスを提供している：

動的レンダリングは回避策であり、検索エンジンにおけるJavaScriptで生成されたコンテンツの問題に対する長期的な解決策ではありません。代わりに、サーバーサイドレンダリング、静的レンダリング、またはハイドレーションをソリューションとして使用することをお勧めします。

SEOへの影響は？当然ながら、インデックスの一部または遅延は、ウェブサイトの検索順位に影響を与えます。その結果、検索結果に表示されるのが遅れ、オーガニック・トラフィックの機会を逃すことになります。インデックスが不完全であったり遅れたりすると、検索エンジンはあなたのサイトを再度クロールする必要があり、さらに遅れが生じます。

上記のグーグルのヒントをもう一度見てみると、「静的レンダリング」を使うことを推奨している。

Prerender.ioがこの問題を解決する方法

プリレンダリングは基本的に、最新のJavaScriptフレームワークのダイナミックな機能と、検索エンジンのボットが扱える静的なHTMLコンテンツの必要性とのギャップを埋めるものです。Prerender.ioでどのように機能するか見てみましょう。

Prerender.ioは、ヘッドレスブラウザであなたのページのJavaScriptを実行し、完全なコンテンツをレンダリングします。そして、このレンダリングされたコンテンツを静的HTMLとして保存します。検索エンジンのボットがあなたのサイトをクロールし、特定のページをリクエストすると、Prerender.ioはJavaScriptを多用したページの代わりにプリレンダリングされたHTMLを提供します。こうすることで、検索エンジンは複雑なJavaScriptを処理することなく、迅速かつ簡単にインデックス用のページの完全なコンテンツにアクセスすることができます。

この方法を使うメリットは何ですか？

• SEOの向上：Prerender.ioは検索エンジンに完全にレンダリングされたHTMLを提供できるため、コンテンツは正しく迅速にインデックスされます。これにより、検索順位が向上し、サイトの可視性が高まります。
• ページロードの高速化：Prerender.ioを使用して検索エンジンボットに静的HTMLを提供すると、サーバーの負荷が軽減されます。無数の検索エンジンのクローラーが常に動作しているため、リクエストをPrerender.ioにオフロードすることで、ページのロード時間を改善し、実際のユーザーのユーザーエクスペリエンスを向上させることができます。
• ユーザー体験の向上：ページの読み込みが速くなり、インデックスがより正確になることで、ユーザーがあなたのサイトを素早く見つけ、より快適なブラウジングを楽しめる可能性が高まります。 

ここまで、何を、どのように、そしてなぜ、について見てきた。さて、次は肝心なところだ。

WebアプリケーションにPrender.ioを実装する

Prerender.ioをウェブアプリケーションに統合するには、ウェブサーバーレベルで統合するか、アプリケーションコードレベルで統合するかの2つの方法があります。それぞれについてもう少し詳しく考えてみましょう。

アプローチ1：ウェブサーバーで

LinodeにNode.js アプリケーションをデプロイしている場合、Node.js ワンクリック・マーケットプレイス・アプリを使用していることでしょう。新しいLinodeを作成した後、このアプリはNginx 、Node.js 、NPM、PM2をスピンアップするのに役立ちます。

Prerender.io をNginx で使用するには、 Nginx の統合ガイドに従ってください。まず、システムのnginx.conf ファイルのバックアップ・コピーを作成する。ngx_http_map_moduleモジュールを使用して、他の変数の値に基づいていくつかの変数を作成します。

nginx.confファイルを編集して、Prender.ioの設定ファイル例Nginx のセクションを挿入します。まず、httpセクションに以下のマップブロックを追加する。

map $http_user_agent $prerender_ua {         default       0;         "~*Prerender" 0;         "~*googlebot"                               1;         "~*yahoo!\ slurp"                           1;         "~*bingbot"                                 1;         "~*yandex"                                  1;         "~*baiduspider"                             1;         "~*facebookexternalhit"                     1;         "~*twitterbot"                              1;         "~*rogerbot"                                1;         "~*linkedinbot"                             1;         "~*embedly"                                 1;         "~*quora\ link\ preview"                    1;         "~*showyoubot"                              1;         "~*outbrain"                                1;         "~*pinterest\/0\."                          1;         "~*developers.google.com\/\+\/web\/snippet" 1;         "~*slackbot"                                1;         "~*vkshare"                                 1;         "~*w3c_validator"                           1;         "~*redditbot"                               1;         "~*applebot"                                1;         "~*whatsapp"                                1;         "~*flipboard"                               1;         "~*tumblr"                                  1;         "~*bitlybot"                                1;         "~*skypeuripreview"                         1;         "~*nuzzel"                                  1;         "~*discordbot"                              1;         "~*google\ page\ speed"                     1;         "~*qwantify"                                1;         "~*pinterestbot"                            1;         "~*bitrix\ link\ preview"                   1;         "~*xing-contenttabreceiver"                 1;         "~*chrome-lighthouse"                       1;         "~*telegrambot"                             1;         "~*google-inspectiontool"                   1;         "~*petalbot"                                1;     }     map $args $prerender_args {         default $prerender_ua;         "~(^|&)_escaped_fragment_=" 1;     }     map $http_x_prerender $x_prerender {         default $prerender_args;         "1"     0;     }     map $uri $prerender {         default $x_prerender;         "~*\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|woff2|svg|eot)" 0;     }

最初の map ブロックは、HTTPリクエストのユーザーエージェントを調べます。ユーザーエージェントが検索エンジンのボットリストに含まれている場合、Prerender.ioへのリダイレクトを準備するために、他のさまざまな変数や設定が設定されます。

そして、メインの location ブロックに以下を追加し、URLの先頭に prerenderio/ をパスした：

if ($prerender = 1) {   rewrite (.*) /prerenderio last; }

最後に prerenderio/ をパスした：

location /prerenderio {   if ($prerender = 0) {     return 404;   }   proxy_set_header X-Prerender-Token YOUR_TOKEN;   proxy_set_header X-Prerender-Int-Type Nginx;   proxy_hide_header Cache-Control;   add_header Cache-Control "private,max-age=600,must-revalidate";   #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs   resolver 8.8.8.8 8.8.4.4;   set $prerender_host "service.prerender.io";   proxy_pass https://$prerender_host;   rewrite .* /$scheme://$host$request_uri? Break;}

この location ブロックは、Prerender.ioに意図した宛先ページをレンダリングし、静的HTMLを提供するように指示します。認証のために YOUR_TOKEN を、実際のPrerender.ioアカウントトークンと置き換えてください。Prerender.ioが過去にこのページをレンダリングしたことがある場合、キャッシュされたバージョンを提供することがあります。 キャッシュの設定 をご覧ください)。

Prerender.ioのNginx 統合ガイドは非常に包括的です。Nginx の代わりにApache を使用する場合は、 Apache ウェブサーバーの統合ガイドを参照してください。

Prerender.ioを統合するための4つの基本ステップ

一般的に言えば、どのようなアプローチにせよ、Prerender.ioをアプリケーションに統合するには、以下のステップが必要です：

1. クローラーの検出.リクエストのユーザーエージェントヘッダーを調べる。上記のNginx の例では、単に $http_user_agent 可変である。
2. prerender.io にリダイレクトします。レンダリングのためにボットリクエストをPrerender.ioに転送する。
3. リクエストパスを修正する。リクエストパスがPrerender.io用に正しくフォーマットされていることを確認してください。Prerender.ioは完全なURLをパスとして想定しています。
4. キャッシュの管理。Prerender.ioを活用してキャッシュされた静的HTMLページを提供しながら（スピードのため）、Prerender.ioにサイトの更新されたコンテンツを再キャッシュさせる（新鮮さのため）バランスを見つけます。Prerender.ioからのキャッシュに関するガイダンスを参照してください。

アプローチ2：アプリケーションコード（Node.js Express）内

フロントエンドにJavaScriptフレームワーク（React、Vue.js、Angularなど）を使用しているアプリケーションの場合、フロントエンド用のアプリケーションサーバーを設定して、上記の4つの基本ステップを実行することができます。

もしフロントエンドにExpressを使っているのであれば、Prender.ioが提供するビルド済みのミドルウェアを利用することができる。詳しくはPrender.ioのNode統合ガイドを参照してほしい。以下にその詳細を説明する：

Node.js パッケージをインストールする：

npm install prerender-node --save

以下のコードを、Expressサーバーアプリが定義されているメインのindex.jsファイルまたはapp.jsファイルに追加します：

app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN'));

ここでも認証のために YOUR_TOKEN を実際のPrerender.ioのアカウントトークンと置き換えてください。

その後、Expressサーバーを再起動します。

それだけだ！

結論　

プリレンダリングは、最新のJavaScriptフレームワークとクライアントサイドレンダリングを使用する際のSEOの課題を解決するのに役立ちます。Prerender.io はあなたのページを前もってレンダリングし、その静的 HTML を検索エンジンのクローラーに配信します。こうすることで、検索エンジンのボットがコンテンツに完全にアクセスできるようになり、正確なインデックスが作成され、検索結果の順位が向上します。このSEOの問題を解決することで、ウェブサイトの可視性が向上し、オーガニックなトラフィックが増加します。

これらのプリレンダリング技術とアカマイの管理しやすいクラウド・コンピューティング・ソリューションを組み合わせれば、SEO に最適化されたサイトをすぐに立ち上げることができます。アプリケーションの導入時にアカマイのクラウドコンピューティングサービスを最大限に活用するためのヒントやガイドについては、当社の豊富なドキュメントライブラリをご覧ください。