动态网站 SEO处理方案汇总
先撸撸几个观点：
- SPA：单页面运用，基于vue框架开辟的项目许多都属于单页面运用。
- SSR ：server side rendering, 效劳端衬着。
- SEO：搜索引擎优化，指经由过程对网站举行站内优化、修复和站外优化，从而进步网站的网站关键词排名以及公司产物的曝光度。
- Prerender：预衬着，Prerender.io是基于Node.js的顺序，它能够让你的JavaScript网站支撑搜索引擎，交际媒体，而且它兼容一切的JavaScript框架和库。它采纳PhantomJS衬着JavaScript的网页然后呈现为HTML。另外，我们能够完成的prerender效劳层来缓存访问过的页面，这将大大进步机能。（省事儿）
- Nuxt：是一个基于 Vue.js 的通用运用框架，预设了应用Vue.js开辟效劳端衬着的运用所须要的种种设置，能够为基于 Vue.js 的运用供应天生对应的静态站点的功用。
- Next:对标的是 React的通用运用框架，预设了React.js 开辟效劳端衬着的运用所须要的种种设置。
手艺选型
- 连系现有项目框架选用，时候本钱，进修本钱举行适宜的评价
- 从本身才能动身 假如触及太多的效劳端处置惩罚的东西 能够斟酌运维层举行处置惩罚采纳prerender
- 营业运用场景，营业线比较庞杂工期较短的时候 发起本身举行PrerenderIo 的布置，运用本身的效劳器举行对爬虫页面举行缓存。
三个手艺选型好坏对照
- Next => React 文档大部分是英文的 设置项简朴易上手，布置轻易，大型的官网项目比较合适，用户交互庞杂的时候采纳Next 举行项目开辟。
Nuxt => Vue 基础是Next的翻版，语法也是Next语法，大坑的处所是在 大多数稳固的项目是1.4.2的版本 现有2.X的版本 基础完全不兼容老版本。
- 衬着效力比较低，营业庞杂的时候 编译速率非常慢。非常慢
- 版本跨度大的合适兼容性低。
PhantomJS 道理就是经由过程Nginx设置，将搜索引擎的爬虫要求转发到一个node server，再经由过程PhantomJS来剖析完全的HTML。
- 能够做为一整套通用效劳，一切的SPA页面基础不须要二次重构。
- 瑕玷是受收集波动限制性比较强，
- 合适庞杂项目短时候举行收录处置惩罚
- 须要收集层的权限 须要和运维举行沟通。
团体照样连系当前需求的场景 和本身的前提来举行挑选,短时候高效完成需求。
相干收录文章：
一个PhantomJS使命剧本
起首，我们须要一个叫spider.js的文件，用于phantomjs 剖析网站。
"use strict";
// 单个资本等待时候，防备资本加载后还须要加载其他资本
var resourceWait = 500;
var resourceWaitTimer;
// 最大等待时候
var maxWait = 5000;
var maxWaitTimer;
// 资本计数
var resourceCount = 0;
// PhantomJS WebPage模块
var page = require('webpage').create();
// NodeJS 体系模块
var system = require('system');
// 从CLI中猎取第二个参数为目的URL
var url = system.args[1];
// 设置PhantomJS视窗大小
page.viewportSize = {
width: 1280,
height: 1014
};
// 猎取镜像
var capture = function(errCode){
// 外部经由过程stdout猎取页面内容
console.log(page.content);
// 消灭计时器
clearTimeout(maxWaitTimer);
// 使命完成，一般退出
phantom.exit(errCode);
};
// 资本要求并计数
page.onResourceRequested = function(req){
resourceCount++;
clearTimeout(resourceWaitTimer);
};
// 资本加载终了
page.onResourceReceived = function (res) {
// chunk情势的HTTP回包，会屡次触发resourceReceived事宜，须要推断资本是不是已end
if (res.stage !== 'end'){
return;
}
resourceCount--;
if (resourceCount === 0){
// 当页面中悉数资本都加载终了后，截取当前衬着出来的html
// 因为onResourceReceived在资本加载终了就立即被调用了，我们须要给一些时候让JS跑剖析使命
// 这里默许预留500毫秒
resourceWaitTimer = setTimeout(capture, resourceWait);
}
};
// 资本加载超时
page.onResourceTimeout = function(req){
resouceCount--;
};
// 资本加载失利
page.onResourceError = function(err){
resourceCount--;
};
// 翻开页面
page.open(url, function (status) {
if (status !== 'success') {
phantom.exit(1);
} else {
// 当改页面的初始html返回胜利后，开启定时器
// 当抵达最大时候（默许5秒）的时候，截取那一时候衬着出来的html
maxWaitTimer = setTimeout(function(){
capture(2);
}, maxWait);
}
});举行测试=> phantomjs spider.js 'https://www.baidu.com/'
敕令效劳化
相应搜索引擎爬虫的要求，我们须要将此敕令效劳化，经由过程node起个简朴的web效劳
var express = require('express');
var app = express();
// 引入NodeJS的子历程模块
var child_process = require('child_process');
app.get('/', function(req, res){
// 完全URL
var url = req.protocol + '://'+ req.hostname + req.originalUrl;
console.log(req,req.hostname)
// 预衬着后的页面字符串容器
var content = '';
// 开启一个phantomjs子历程
var phantom = child_process.spawn('phantomjs', ['spider.js', url]);
// 设置stdout字符编码
phantom.stdout.setEncoding('utf8');
// 监听phantomjs的stdout，并拼接起来
phantom.stdout.on('data', function(data){
content += data.toString();
});
// 监听子历程退出事宜
phantom.on('exit', function(code){
switch (code){
case 1:
console.log('加载失利');
res.send('加载失利');
break;
case 2:
console.log('加载超时: '+ url);
res.send(content);
break;
default:
res.send(content);
break;
}
});
});
app.listen(3002)运转node server.js，此时我们已有了一个预衬着的web效劳啦，接下来的事情就是将搜索引擎爬虫的要求转发到这个web效劳，最终将衬着效果返回给爬虫。
为了防备node历程挂掉，能够运用nohup来启动，nohup node server.js &。
经由过程Nginx设置，我们能够轻松的处理这个题目。
# 定义一个Nginx的upstream为spider_server
upstream spider_server {
server localhost:3000;
}
# 指定一个局限，默许 / 示意悉数要求
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;
# 当UA内里含有Baiduspider的时候，同时能够加其他的头信息举行转发 流量Nginx以反向代办的情势，将流量传递给spider_server
if ($http_user_agent ~* "Baiduspider") {
proxy_pass http://spider_server;
}
}参考链接：
https://www.mxgw.info/t/phant…
http://imweb.io/topic/560b402…
