使用Koa和Puppeteer为Vue项目做SEO优化

Vue这样的单页面应用对于搜索引擎的爬虫极不友好，单页应用的数据都需要在浏览器通过 AJAX请求获取数据后再动态渲染出来。而搜索引擎的爬虫不会执行JS文件，这就导致了爬虫爬取的只有一个空页面。同时也无法通过页面中的超链接去抓取更多的页面。

解决办法

1. 服务端渲染（SSR）

   • 优点：页面加载速度快，爬虫可以抓取到完整的页面SEO优化好。
   • 缺点：很多浏览器特有的钩子函数无法使用，更高的服务端负载。如果项目已经开发完毕，迁移难度不亚于重新开发。

   如果是新项目并且比较需要SEO优化的话，推荐使用SSR服务端渲染

2. 静态化（Nuxt.js）

   官方地址

   • 优点：编译时打包成纯静态文件、加载速度极快、SEO优化好、不涉及服务端负载
   • 缺点：无法使用Vue的动态路由

3. 旁路模式，针对爬虫进行处理

   • 优点：基于Nginx转发和无头浏览器渲染，任何单页面应用都适用、无需改动代码
   • 缺点：需要一台服务器单独跑Nodejs

旁路模式

网上关于优化SEO使用旁路模式的基本都是基于 Phantomjs 的，我安装 Phantomjs 后一直无法启动再加上官方已经放弃维护了。就直接使用了Google开发的Puppeteer来做无头浏览器渲染页面。然后Nodejs的后端框架使用了Koa，一个轻量级的Nodejs后端框架（需求不大，只需要能获取请求的uri然后把渲染好的页面返回给爬虫就行了）。

安装Puppeteer

谷歌在文档里面已经写的很清楚了，还给了示例。直接抄代码就行。

# 包管理用的 pnpm Google-Chrome浏览器使用的是自己安装的 只需要按照 puppeteer-core即可
pnpm install puppeteer-core

const puppeteer = require('puppeteer-core');
const { executablePath, } = require('puppeteer-core');

(async () => {
  const browser = await puppeteer.launch({
    // Google-Chrome的安装路径
    executablePath: '/opt/google/chrome/google-chrome',
    // 无头模式 不显示页面 服务器没有GUI
    args: ['--headless', '--disable-gpu']
  });
  // 打开浏览器
  const page = await browser.newPage();
  await page.setViewport({
    width: 1920,
    height: 1080
  })
  // 打开指定页面
  await page.goto('https://blog.zeroxn.com', {
   	// 页面中所有网络请求都完成后才结束方法
    waitUntil: 'networkidle0'
  });
  // 获取网页的主体内容(HTML)
  let content = await page.content();
  console.log(content);
  // 关闭浏览器
  await browser.close();
})();

整合Koa

# 先安装
pnpm install koa

const Koa = require('koa');
const app = new Koa();
const puppeteer = require('puppeteer-core');
const { executablePath, } = require('puppeteer-core');
// 博客地址
const baseUrl = 'https://blog.zeroxn.com';

// 将 Puppeteer渲染页面封装为一个方法 传入请求的uri 返回渲染完成后的页面HTML
async function getPageContent(url){
    const finalUrl = baseUrl + url;
    const browser = await puppeteer.launch({
        executablePath: '/opt/google/chrome/google-chrome',
        args: ['--headless', '--disable-gpu']
    });
    const page = await browser.newPage();
    await page.setViewport({
    width: 1920,
    height: 1080
    })
    await page.goto(finalUrl, {
    waitUntil: 'networkidle0'
    });
    let content = await page.content();
    await browser.close();
    return content;
}
// 使用 koa 框架
app.use(async ctx => {
  // 获取uri
  let url = ctx.url;

  let content = await getPageContent(url);
  // 把渲染后的HTML响应回去
  ctx.body = content;
});
// 监听3001端口
app.listen(3001);

# 启动
node xxxx.js

---

浏览器直接请求验证一下

Nginx转发爬虫请求

通过请求头的 user-agent来判断是不是爬虫请求，如果是就转发到 koa监听的地址，不是则不做处理。

location / {
            root   /usr/share/nginx/html/dist;
            # 判断是否是爬虫请求 是则转发到koa的监听地址
            if ($http_user_agent ~* "Sogou Pic Spider|Baiduspider|Baiduspider-render|YisouSpider|Sogou web spider|Bytespider|360Spider|Googlebot|YodaoBot") {
                proxy_pass http://localhost:3001;
            }
            try_files $uri $uri/ /index.html;

---

做SEO优化之后，谷歌爬虫已经能够抓取到网页的信息了