使用headless解决SEO问题，原理是在服务器使用浏览器渲染好页面后返回给有益的蜘蛛爬虫，代码也没有服务端客户端的区别。渲染过程可能会比较消耗服务器资源，建议单独使用一台服务器搭建，我没有做压力测试，如果有人做了也希望分享我一下。

1、安装依赖

# 安装 puppeteer
cnpm install puppeteer# puppeteer依赖，如果已安装谷歌浏览器可略过
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64
yum install xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc
yum update nss -y

2、server.js

const http = require('http');
const puppeteer = require('puppeteer');let conf = {// 是否使用https访问APIuseHttps: false,// 是否检测IP，防止伪造UAcheckIp: false,// 可以访问的蜘蛛IP地址allowIpList: [],launchOption: {args: ['--no-sandbox', '--disable-setuid-sandbox']}
};/*** 获取IP地址** @param req* @returns {*|string}*/
function getIp (req) {return req.headers['x-real-ip'] ||req.headers['x-forwarded-for'] ||req.connection.remoteAddress ||req.socket.remoteAddress ||req.connection.socket.remoteAddress || '';
}/*** 检测ip是否合法** @param ip* @returns {boolean}*/
function checkIP(ip) {//也可以使用别的规则校验return conf.checkIp ? conf.allowIpList.includes(ip) : true;
}// 载入浏览器
puppeteer.launch(conf.launchOption).then(async browser => {const server = http.createServer();server.on('request', function(request, response){let url = (conf.useHttps ? 'https://' : 'http://') + request.headers.host + request.url;let ip = getIp(request);// 检测ip地址if (checkIP(ip)) {browser.newPage().then(async page => {// 访问urlawait page.goto(url);let content= await page.content();// 关闭页面，返回数据await page.close();response.end(content);})} else {response.statusCode = 404;response.end("404 NOT Found");}})server.on('close', function(){browser.close();})server.listen(3000, '127.0.0.1', function () {console.log('puppeteer server listening on port 3000!');});
});

这里我选择先打开浏览器再启动服务；还有一种方式时先启动服务，接受到请求再打开浏览器处理请求，但我觉得这样每个请求都要打开关闭一次浏览器，有点浪费资源。不知道我这个想法是否正确，欢迎指正。

3、nginx配置

location / {# 蜘蛛爬虫处理proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;if ($http_user_agent ~* "spider|bot") {proxy_pass http://127.0.0.1:3000;}try_files $uri $uri/ @router;
}
location @router {rewrite ^(.*)$ /index.html last;
}

4、hosts配置

配置host，从内网访问API

127.0.0.1  api.domain.com

5、其他

puppeteer 并不是最优解决方案，甚至是很差的解决方案。需要最新的 vue 3 的服务端渲染方案，可以看我的另一篇博文 Vue 3 + Vite + SSR

使用谷歌headless（puppeteer）解决SEO问题相关推荐

超详细！！vue、vue-cli脚手架项目使用prerender-spa-plugin，解决SEO并为其添加title，keyWords，descript
vue.vue-cli脚手架项目使用prerender-spa-plugin,解决SEO并为其添加title,keyWords,descript 注意注意注意:本文章所有例举内容,页面均为纯静态页 ...
谷歌中巨大的 SEO 骗局！排名靠前的 HTML 编辑器也不可信
整理 | 郑丽媛出品 | CSDN(ID:CSDNnews) 互联网的飞速发展使人们逐渐养成了有需求直接上网找的习惯.那作为商家,要如何在一众竞争对手中脱颖而出,让人们迅速看到自己的产品或服务呢?答 ...
前端后端分离，怎么解决SEO优化的问题呢？
前端后端分离,怎么解决SEO优化的问题呢? 参考文章: (1)前端后端分离,怎么解决SEO优化的问题呢? (2)https://www.cnblogs.com/zhansu/p/7119569.htm ...
Vue解决SEO的方案
Vue解决SEO的方案 1.最基本的条件多页面 ===> 蜘蛛爬取页面含有蜘蛛抓取的内容 title.描述.关键词 2.解决方案1:预渲染 vue插件:prerender-spa-plugi ...
安装谷歌插件-过程解决
安装谷歌插件-过程&解决下载谷歌浏览器问题:下载了"加料"的谷歌:打开新窗口默认为百度,且不可修改,删除,重下 a. win+r - control -卸载程序: b. ...
前后端分离的过程利用prerender解决seo问题的误区
网站进行前后端分离之后,需要解决seo的问题.本来使用的是prerender服务,具体的流程如https://blog.csdn.net/lolgigeo/article/details/102897 ...
谷歌翻译失效解决方法
谷歌翻译失效解决方法首先使用指令查找ip nslookup google.cn 得到一个ip 修改hosts文件(将ip切换成自己查到的最新ip) #hosts文件位置:C:\Windows\Sys ...
百度正用谷歌AlphaGo，解决一个比围棋更难的问题 | 300块GPU在燃烧
晓查发自凹非寺量子位报道 | 公众号 QbitAI 9102年,人类依然不断回想起围棋技艺被AlphaGo所碾压的恐怖. 却也有不以为然的声音:只会下棋的AI,再厉害也还是个运动员啊! 百度 ...
win10软件拒绝访问删不掉_谷歌工程师正在解决Windows 10防病毒软件导致谷歌浏览器不稳定问题...
前文我们提到微软工程师帮助谷歌浏览器改进深色模式,这篇文章则是谷歌工程师们与微软合作改进防病毒体验.我们知道谷歌浏览器本身已经内置谷歌的安全浏览服务,当谷歌检测到用户访问或下载的链接存在恶意时会拦截. ...

使用谷歌headless（puppeteer）解决SEO问题