之前上线了一个使用vue做的单页面应用。google倒是可以爬取js运行的数据了,很快就收录了我的站点,但是百度还不行,很多天了百度依旧没有收录我的网站,只好针对该网站做做SEO处理。顺便给我的这个小站打个广告:https://www.pkgif.net (给GIF自由添加字幕生成表情包的小工具)
单页面应用主要有两种SEO的方式
这是比较常见的模式,比如vue和react等都提供了服务端渲染的方式,还能使用nuxt和next这样将服务端渲染集成得更简单的框架。或者将vue集成于express、koa、egg等nodejs的web框架进行服务端渲染也是可行的,也有现成的方案。
如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML,而是使用预渲染方式,在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点。
这是vue官方文档中的一段话。如果只是少量页面需要进行SEO优化且这些页面的数据不复杂不需要很高的实时性,是不大必要使用服务端渲染的。可以将这些页面在webpack打包的时候利用浏览器环境来执行js生成一个静态的html。
由于我的小站只有一个页面,且这个页面的内容都是死的,预渲染是我当下较好的解决方案。这里我选用了vue官方推荐的webpack插件——prerender-spa-plugin,该插件也可以进行react等其他应用的预渲染
$ npm i prerender-spa-plugin
该插件依赖puppeteer,这是一个调用chrome API的库。在安装的过程中,puppeteer会下载chromium(提供浏览器环境),这时候国内的网络会报错,因为你懂的。
提示告诉我们设置这个环境变量“PUPPETEER_SKIP_CHROMIUM_DOWNLOAD”以跳过下载,进行手动下载。另外一种解决办法是将chromium下载源设置为淘宝,具体做法是
npm config set PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org
这样我们就可以成功安装prerender-spa-plugin
在linux上,npm安装的时候可能会出现没有权限mkdir,使用sudo安装即可
注意:首先需要将vue-router设置为history模式,否则预渲染无效。
我们在生产构建的时候才需要该插件进行预渲染,所以需要在prod相关的配置里添加该插件
// webpack.prod.js
'use strict';
const webpack = require('webpack');
const helpers = require('./helpers');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');
module.exports = {
plugins: [
...
new PrerenderSPAPlugin({
staticDir: helpers.root('webapp'),
outputDir: helpers.root('webapp-prerender'),
routes: [ '/' ],
minify: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
decodeEntities: true,
keepClosingSlash: true,
sortAttributes: true,
},
}),
],
});
这是我的代码片段,helpers.root是工程根目录的路径,
构建之后,就会产生两个新的文件夹,一个是webapp,一个是webapp-prerender。
注意:在centos 7.x上,即使prerender-spa-plugin安装成功,在构建的时候也会报错,缺少一些文件,这时候需要手动安装一些依赖的文件
#依赖库
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 -y
#字体
yum install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y
location / {
index index.html;
expires max;
root ${staticDir};
try_files $uri $uri/ /index.html;
if ( $http_user_agent ~* (baidu|360|google|bing|sogou|soso|youdao|jike|yahoo|msn)){
root ${outputDir};
}
}
静态资源是托管在nginx上的,这里通过userAgent将搜索引擎判断,读取webapp-prerender文件夹下的,而普通用户使用还是在webapp下的SPA静态资源