动态网站 SEO解决方案汇总

2,103 阅读5分钟

动态网站 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页面基本不需要二次重构。
    • 缺点是受网络波动制约性比较强,
    • 适合复杂项目短时间进行收录处理
    • 需要网络层的权限 需要和运维进行沟通。

整体还是结合当前需求的场景 和自身的条件来进行选择,短时间高效完成需求。

相关收录文章:

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

参考链接:

www.mxgw.info/t/phantomjs… imweb.io/topic/560b4… icewing.cc/linux-insta… www.jianshu.com/p/2bbbc2fcd…