Puppeteer解决SEO问题方法

引言

在前端开发中,我们经常会遇到SEO问题,即搜索引擎无法正确爬取并收录我们的网站,导致网站在搜索引擎中的排名较低。为了解决这个问题,我们可以使用Puppeteer来实现服务端渲染(SSR),将网站的HTML代码返回给搜索引擎爬虫。

什么是Puppeteer

Puppeteer是一个由Google Chrome团队开发的Node.js库,它提供了一个高级API,可以控制Chrome或Chromium浏览器的操作,实现类似于人类对浏览器的操作,比如打开网页、输入文字、点击按钮等等。使用Puppeteer可以方便地进行自动化测试、爬虫、网页截图等操作。

解决SEO问题

一般来说,搜索引擎爬虫会在浏览器中加载网页,然后将渲染后的HTML代码进行解析并进行收录。如果我们的网站是单页应用(SPA),只有在浏览器中执行JavaScript代码后才能渲染出页面,那么搜索引擎爬虫就无法正确地解析和收录我们的页面。这时候就需要使用服务端渲染(SSR)来解决这个问题。

使用Puppeteer可以模拟浏览器的行为,将我们的网站在浏览器中渲染出来,然后将渲染后的HTML代码返回给搜索引擎爬虫。这样搜索引擎就可以正确地解析和收录我们的页面,提高我们的网站在搜索引擎中的排名。

实现方式

在本文中,我们将使用Koa2作为后端框架,使用Nginx作为反向代理服务器,将请求区分为来自搜索引擎的请求和来自普通用户的请求。对于搜索引擎的请求,我们将其转发到Node服务,Node服务使用Puppeteer将网站渲染后返回HTML代码。对于普通用户的请求,我们直接将请求转发到目标网站即可。

安装依赖

首先,我们需要安装以下依赖:

npm install koa koa-router puppeteer

编写后端代码

我们先来编写后端代码,创建一个server.js文件,代码如下:

const Koa = require('koa');
const Router = require('koa-router');
const puppeteer = require('puppeteer');
const app = new Koa();
const router = new Router();
router.get('/ssr', async (ctx, next) => {
 const url = 'http://your-domain.com'; // 目标网站URL
 const browser = await puppeteer.launch(); // 启动Puppeteer浏览器
 const page = await browser.newPage(); // 创建一个新页面
 await page.goto(url, {waitUntil: 'networkidle2'}); // 跳转到目标网站并等待页面完全加载
 const html = await page.content(); // 获取页面HTML代码
 await browser.close(); // 关闭浏览器
 ctx.body = html; // 将HTML代码返回给前端
});
app.use(router.routes());
app.listen(4000, () => {
 console.log('Server is running at http://localhost:4000');
});

在上面的代码中,我们创建了一个Koa实例,并使用koa-router来处理路由。我们为/ssr路径创建了一个路由处理函数,该函数会使用Puppeteer来打开目标网站,并返回该网站的HTML代码。最后,我们将HTML代码作为响应体返回给前端。

测试后端代码

我们已经完成了后端代码的编写,现在可以启动后端服务并测试它是否能够成功返回目标网站的HTML代码了。

在终端中执行以下命令启动后端服务:

node server/index.js

访问http://localhost:4000/ssr,可以看到返回了目标网站的HTML代码。这证明后端代码已经可以正常工作了。

配置Nginx

现在我们需要将Nginx配置为区分搜索引擎和正常用户,并将请求转发到不同的服务。

区分搜索引擎和正常用户

我们可以使用Nginx的$http_user_agent变量来判断请求的来源。如果$http_user_agent中包含某些搜索引擎的关键字,那么该请求就是来自搜索引擎的。否则,就是正常用户的请求。

在Nginx的配置文件中添加以下代码:

http {
 map $http_user_agent $is_bot {
 default 0;
 ~*bot 1;
 ~*spider 1;
 ~*crawl 1;
 ~*Googlebot 1;
 }
 server {
 listen 80;
 server_name your-domain.com;
 location / {
 if ($is_bot) {
 proxy_pass http://127.0.0.1:4000;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }
 try_files $uri $uri/ /index.html;
 }
 }
}

上面的配置文件中,我们使用了Nginx的map模块,将$http_user_agent(即请求头中的User-Agent)与是否是搜索引擎的标志$is_bot进行了关联。

server块中,我们设置监听端口为80,server_name为你的域名(目前站点/前端项目)。

对于location /,我们先进行了判断,如果是搜索引擎,则转发到本地的4000端口上(即Node服务的端口),否则直接使用try_files指令进行静态资源的寻找。

需要注意的是,在转发请求时,我们使用了proxy_set_header指令,将一些请求头信息传递给后端服务器,方便后端处理。

总结

在本文中,我们介绍了如何使用Puppeteer解决前端SEO问题。我们使用了nginx作为反向代理服务器,利用其能力进行请求分流,并Puppeteer进行页面渲染,最终将渲染后的HTML返回给搜索引擎。这个方案可以解决前端框架在SEO方面的弱点,提升网站在搜索引擎中的排名。 在实际应用中,我们还需要考虑更多的问题,比如Puppeteer的性能、网站的访问量、反爬虫等等。

作者:XinD

%s 个评论

要回复文章请先登录注册