扶贫工作网站怎么做/网络推广中心-黄石网站建设

前言

大家都知道本项目是由vue写的，由于vue是单页面的，所以对于seo优化来讲并不是很友好，蜘蛛只能抓取首页，但是呢，虽然流量没有多少，但我们的seo还是要做一做的，毕竟有seo才能吸引到更多的用户访问。

说说几种方案吧

网上比较多的是使用Nuxt.js，但是用我已经开发好的项目来改，说实话，前端小白的我实在是改不动了。
Quasar不太了解，不过多介绍了。
Vite SSR，Vite 提供了内置的Vue 服务端渲染支持。也要改已有代码，不想改，不会改。

官方给的方案被我否定了，就是想找个不用修改已有代码的方法。经过不懈的百度努力，发现了一线生机Puppeteer，简单说说这个吧

Puppeteer

Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来通过开发工具协议控制 Chrome/Chromium。 Puppeteer 默认以无头模式运行，但可以配置为在完整 (“有头”) Chrome/Chromium 中运行。

Puppeteer的作用，我主要用到的是SSR：

生成页面的屏幕截图和 PDF。
抓取 SPA（单页应用）并生成预渲染内容（即 “SSR”（服务器端渲染））。
自动化表单提交、UI 测试、键盘输入等。
使用最新的 JavaScript 和浏览器功能创建自动化测试环境。
捕获站点的时间线痕迹以帮助诊断性能问题。
测试 Chrome 扩展程序。

SEO实现-使用Puppeteer进行SSR

搭建用到的工具

node
npm
puppeteer
express
html-minifier
google-chrome
nginx

1. 安装Node.js和npm

已经安装过node.js的机器忽略这部分即可，可以通过node -v查看

cd /opt

下载安装包

wget https://nodejs.org/dist/v17.9.0/node-v17.9.0-linux-x64.tar.gz

解压安装包

tar -xzvf node-v17.9.0-linux-x64.tar.gz

4.设置软连接，建立快捷命令

ln -s /opt/node-v17.9.0-linux-x64/bin/node /usr/local/bin/ln -s /opt/node-v17.9.0-linux-x64/bin/npm /usr/local/bin/

使用node -v查看是否安装成功

2. 安装 Puppeteer 及相关扩展工具

创建并进入项目目录，会生成node_modules

cd /homemkdir puppeteercd puppeteer

安装 puppeteer，express 与 html-minifier

npm install puppeteer --savenpm install expressnpm install html-minifier

安装依赖库

yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86

3. 创建服务器端运行脚本

创建渲染请求的页面脚本：spider.js

const puppeteer = require('./node_modules/puppeteer');//由于目录不一致，所以使用的是绝对路径const WSE_LIST = require('./puppeteer-pool.js'); //这里注意文件的路径和文件名const spider = async (url) => {let tmp = Math.floor(Math.random() * WSE_LIST.length);//随机获取浏览器let browserWSEndpoint = WSE_LIST[tmp];//连接const browser = await puppeteer.connect({browserWSEndpoint});//打开一个标签页var page = await browser.newPage();// Intercept network requests.await page.setRequestInterception(true);    page.on('request', req => {      // Ignore requests for resources that don't produce DOM      // (images, stylesheets, media).      const whitelist = ['document', 'script', 'xhr', 'fetch'];      if (!whitelist.includes(req.resourceType())) {        return req.abort();      }            // Pass through all other requests.      req.continue();    });//打开网页await page.goto(url, {timeout: 20000, //连接超时时间，单位mswaitUntil: 'networkidle0' //网络空闲说明已加载完毕});//获取渲染好的页面源码。不建议使用await page.content();获取页面，因为在我测试中发现，页面还没有完全加载。就获取到了。页面源码不完整。也就是动态路由没有加载。vue路由也配置了history模式let html = await page.evaluate(() => {return document.getElementsByTagName('html')[0].outerHTML;});await page.close();return html;}module.exports = spider;

创建优化puppeteer性能角本，默认不加载一些多余的功能，提高访问效率：puppeteer-pool.js

const puppeteer = require('./node_modules/puppeteer');const MAX_WSE = 2; //启动几个浏览器 let WSE_LIST = []; //存储browserWSEndpoint列表//负载均衡(async () => {for (var i = 0; i < MAX_WSE; i++) {const browser = await puppeteer.launch({            //无头模式headless: true,            //参数args: ['--disable-gpu','--disable-dev-shm-usage','--disable-setuid-sandbox','--no-first-run','--no-sandbox','--no-zygote','--single-process'],//一般不需要配置这条，除非启动一直报错找不到谷歌浏览器//executablePath:'chrome.exe在你本机上的路径，例如C:/Program Files/Google/chrome.exe'});let browserWSEndpoint = await browser.wsEndpoint();WSE_LIST.push(browserWSEndpoint);}})();module.exports = WSE_LIST

创建服务端启动脚本：service.js
需要和spider.js放在一个目录
https://www.shiyit.com需要替换成你自己的域名

const express = require('./node_modules/express');var app = express();var spider = require("./spider.js");var minify = require('html-minifier').minify;app.get('*', async (req, res) => {let url = "https://www.shiyit.com" + req.originalUrl;console.log('请求的完整URL：' + url);let content = await spider(url).catch((error) => {console.log(error);res.send('获取html内容失败');return;});// 通过minify库压缩代码    content=minify(content,{removeComments: true,collapseWhitespace: true,minifyJS:true, minifyCSS:true});res.send(content);});app.listen(3000, () => {console.log('服务已启动！');});

执行启动puppeteer命令

nohup node service.js &

启动成功后，可以通过tail -f nohup.out查看日志，出现服务已启动！则代表运行成功，不过极大几率会不成功，因为我就没有成功，出现了错误，贴上常见的几种错误以及解决方法。要注意，一定要出现服务已启动这几个字外，没有其他任何东西才算启动成功

/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file or directory

yum install atk -y

/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libatk-bridge-2.0.so.0: cannot open shared object file: No such file or directory

yum install at-spi2-atk

/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libxkbcommon.so.0: cannot open shared object file: No such file or directory

yum install libxkbcommon-x11-devel

/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libXcomposite.so.1: cannot open shared object file: No such file or directory

yum install libXcomposite

/home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libgtk-3.so.0: cannot open shared object file: No such file or directory

yum install gtk3

4. 配置Nginx

docker 或直接安装nginx
如果使用的是docker或直接安装的nginx，则在配置文件添加如下代码：

location / {    proxy_set_header  Host            $host:$proxy_port;    proxy_set_header  X-Real-IP       $remote_addr;    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;    if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {      proxy_pass  http://127.0.0.1:3000;    }     index  index.html index.htm;    try_files $uri $uri/ /index.html;}

宝塔部署的nginx
选择你的主页网站，点设置进入在选择伪静态，在里面添上如下代码：

location / {  proxy_set_header  Host            $host:$proxy_port;  proxy_set_header  X-Real-IP       $remote_addr;  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;  if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {    proxy_pass  http://127.0.0.1:3000;  }  index  index.html index.htm;  try_files $uri $uri/ /index.html;  if (!-e $request_filename) {    rewrite  ^(.*)$ /index.html?s=/$1  last;    break;  }}

测试

通过以上步骤后，我们就可以来测试一下了，使用apipost来测试

这里通过输入我们的文章详情页，可以看到没配置User-Agent前是显示的首页

配置User-Agent后，可以看到显示了其他的东西，至此seo就配置成功了

还要注意一点的就是service.js文件运行启动后，可能会出现3000端口被占用，所以需要更改里面的端口换成其他即可

前言