使用 Prerender.io 改进搜索引擎优化

在《福布斯》最近发布的2024 年顶级网站统计列表中，我们了解到目前互联网上大约有 10.9 亿个网站（！）。在超过 10 亿个网站中，用户（和潜在客户）将如何找到您的网站？最有可能的是，他们会从搜索引擎开始。然而，要让搜索引擎引导用户找到您的网站，您需要做好搜索引擎优化的功课。

搜索引擎优化可确保您的网站在搜索引擎上排名靠前。正确实施搜索引擎优化可为网站带来流量。然而，基于 React 或 Vue.js 等现代 JavaScript 框架构建的网站在很大程度上依赖于客户端渲染，而搜索引擎通常很难正确索引这些类型的网站。因此，您的网站在搜索结果中的可见度很低。

这就需要预渲染。预渲染是指生成静态 HTML 版本的网页，便于搜索引擎抓取和索引。这种技术可以极大地影响网站搜索引擎优化的成功。

在这篇文章中，我们将介绍Prerender.io提供的预呈现服务如何帮助您在使用这些框架时克服搜索引擎优化障碍。我们还将为您指明在网络服务器或应用程序级别实施预呈现的正确方向。

让我们跳进去。

JavaScript 框架对搜索引擎优化的挑战

为什么在使用 React 或 Vue.js 等框架时，搜索引擎优化是一项挑战？传统的搜索引擎机器人是为阅读静态 HTML 而设计的。其他框架可能会处理部分 JavaScript 并部分呈现页面，但它们也有自己的局限性。当您的网站大量使用客户端渲染时，搜索引擎很可能不会全程抓取和渲染页面，因此无法看到完整的实际内容以供索引。

例如，谷歌为客户端渲染网站的构建者提供了以下指导：

动态呈现只是一种变通方法，并不是解决搜索引擎中 JavaScript 生成内容问题的长期方案。相反，我们建议您使用服务器端呈现、静态呈现或水合作为解决方案。

对搜索引擎优化有什么影响？部分或延迟索引自然会影响网站的搜索排名。因此，您的网站可能会延迟出现在搜索结果中，从而错失获得有机流量的机会。索引不完整或延迟可能意味着搜索引擎需要对您的网站进行第二次抓取，这将导致进一步的延迟。

再看看上面 Google 的提示，我们会发现建议使用 "静态渲染"--在某种程度上，这就是预渲染的作用。

Prerender.io 如何解决这一问题

预呈现本质上是在现代 JavaScript 框架的动态功能与搜索引擎机器人可以处理的静态 HTML 内容需求之间架起了一座桥梁。让我们看看 Prerender.io 是如何工作的。

Prerender.io 在无头浏览器中执行页面上的 JavaScript，渲染完整的内容。然后，它将渲染的内容保存为静态 HTML。当搜索引擎机器人抓取您的网站并请求某个页面时，您可以让 Prerender.io 提供预渲染的 HTML，而不是 JavaScript 繁多的页面。这样，搜索引擎就能快速、轻松地访问页面的全部内容，以便编制索引，而无需处理复杂的 JavaScript。

采用这种方法有哪些好处？

• 改进搜索引擎优化：由于 Prerender.io 可以向搜索引擎提供完全渲染的 HTML，您的内容将被正确、及时地索引。这将提高您的搜索排名并增加网站的可见度。
• 加快页面加载速度：当您使用 Prerender.io 为搜索引擎机器人提供静态 HTML 服务时，您就减少了服务器的负载。由于无数搜索引擎的爬虫在不断运行，将它们的请求卸载到 Prerender.io 可以缩短页面加载时间，改善实际用户的用户体验。
• 更好的用户体验：更快的页面加载和更准确的索引将增加用户快速找到网站的机会，并享受更积极的浏览体验。 

我们已经了解了 "是什么"、"怎么做"和 "为什么"。现在，让我们来看看螺母和螺栓。

在网络应用程序中实施 Prerender.io

要将 Prerender.io 集成到你的网络应用程序中，有两种最直接的方法，即在网络服务器级别或应用程序代码级别上集成。下面让我们分别详细介绍这两种方法。

方法 1：在网络服务器上

如果您要在 Linode 上部署Node.js 应用程序，您可能会使用Node.js 一键式市场应用程序来帮助您快速启动和运行。创建新的 Linode 后，该应用程序将帮助您启动Nginx 、Node.js 、NPM 和 PM2。

要在Nginx 中使用 Prerender.io，可以遵循 Nginx 的集成指南。首先，你要创建一份系统nginx.conf 文件的备份。你将使用ngx_http_map_module模块，根据其他变量的值创建一些变量。

您将编辑nginx.conf 文件，插入来自 Prerender.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 与你的实际Pprerender.io账户令牌。如果 Prerender.io 在过去已经渲染过该页面，它可能会提供一个缓存版本（取决于你的 设置缓存 在您的 Prerender.io 账户中）。

来自 Prerender.io 的Nginx 集成指南相当全面。如果你碰巧使用的是Apache 而不是Nginx ，那么你可以参考 Apache 网络服务器的集成指南。

集成 Prerender.io 的四个基本步骤

一般来说，无论采用哪种方法，将 Prerender.io 集成到应用程序中都涉及以下步骤：

1. 检测爬虫.检查请求中的用户代理标头在上面的Nginx 示例中，我们只需查看 $http_user_agent 变量。
2. 重定向至 prerender.io。将机器人请求转发到 Prerender.io 进行渲染。
3. 修改请求路径。确保您的请求路径格式对 Prerender.io 来说是正确的，因为它需要完整的 URL 作为路径。
4. 管理缓存。在利用Prerender.io提供缓存静态HTML页面（以提高速度），同时引导Prerender.io重新缓存网站上的更新内容（以保持新鲜度）之间找到平衡。请参阅Prerender.io提供的缓存指南。

方法 2：在应用程序代码中 (Node.js Express)

如果您的应用程序前端使用 JavaScript 框架（如 React、Vue.js 或 Angular），那么您可以为前端配置应用程序服务器，以执行上述四个基本步骤。

如果您碰巧使用 Express 为前端提供服务，那么您可以利用 Prerender.io 提供的预建中间件，它将为您完成所有这些工作。更多详情，请参阅 Prerender.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 框架和客户端渲染时，预渲染页面可帮助您解决搜索引擎优化难题。Prerender.io 可以提前渲染页面，然后将静态 HTML 发送给搜索引擎爬虫。这样，您就可以确保您的内容完全可以被搜索引擎机器人访问，从而获得准确的索引和更好的搜索结果排名。通过解决这个搜索引擎优化问题，您的网站将提高可见度并增加有机流量。

当您将这些预渲染技术与Akamai易于管理的云计算解决方案相结合时，您就能在短时间内建立并运行经过搜索引擎优化的网站。如需了解更多关于如何在部署应用时充分利用Akamai云计算服务的技巧和指南，请查看我们丰富的文档库。