搜索引擎优化(seo)的基本工作模块(动态网站SEO解决方案汇总(先撸撸几个、Prerender.io))

　　搜索引擎优化(seo)的基本工作模块(动态网站SEO解决方案汇总(先撸撸几个、Prerender.io))

　　动态网站 SEO 解决方案总结

　　让我们从几个概念开始：

　　SPA：单页应用程序。很多基于vue框架开发的项目都属于单页应用。

　　SSR：服务端渲染，服务端渲染。

　　SEO：搜索引擎优化，是指通过网站的网站关键词的排名和公司产品的曝光率，通过网站的站内优化、修复和站外优化@网站。

　　Prerender：Prerendering，Prerender.io 是一个基于 Node.js 的程序，它允许您的 JavaScript网站 支持搜索引擎、社交媒体，并且它与所有 JavaScript 框架和库兼容。它使用 PhantomJS 呈现 JavaScript 网页，然后将它们呈现为 HTML。此外，我们可以实现一个预渲染服务层来缓存访问过的页面，这将大大提高性能。（省事）

　　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 配置转发到节点服务器，然后通过 PhantomJS 解析完整的 HTML。

　　可以作为一整套通用服务使用，所有SPA页面基本不需要二次重构。

　　缺点是相对受网络波动的限制。

　　适用于复杂项目的短期收录处理

　　需要网络层的权限才能与运维通信。

　　整体上结合当前的需求场景和自身条件进行选择，在短时间内高效完成需求。

　　相关收录文章：

　　

Nuxt

Next

Prerender + vuejs SEO最佳实践 百度爬虫 + 谷歌收录 亲测成功Prerender.io

前端渲染与 SEO 优化踩坑 小记

用PhantomJS来给AJAX站点做SEO优化

　　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 ''

　　订购服务

　　响应搜索引擎爬虫的请求，我们需要服务这个命令，通过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)

　　运行节点 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...

https://icewing.cc/linux-inst...

https://www.jianshu.com/p/2bb...

　　文章来源：segmentfault，作者：师宁丶。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：sean.li#ucloud.cn（邮箱中#请改为@）进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。

　　

　　背景 - 系统设置 - 扩展变量 - 移动广告 - 内容正文底部