动态网站SEO解决方案总结首先说几个概念：SPA：单页应用，很多基于Vue框架开发的项目都是单页应用。SSR：serversiderendering，服务端渲染。SEO：搜索引擎优化是指通过网站的站内优化、修复和站外优化，提高网站的关键词排名和公司产品的曝光率。Prerender：预渲染，Prerender.io是一个基于Node.js的程序，可以让你的JavaScript网站支持搜索引擎、社交媒体，它兼容所有的JavaScript框架和库。它使用PhantomJS呈现JavaScript网页，然后将它们呈现为HTML。另外，我们可以实现一个预渲染服务层来缓存访问过的页面，这将大大提高性能。（省事）Nuxt：是一个基于Vue.js的通用应用框架。它预设了使用Vue.js开发服务端渲染应用程序所需的各种配置，并可以为基于Vue.js的应用程序生成相应的静态文件。网站的功能。Next:benchmark是React的通用应用框架，预置了React.js开发服务端渲染应用所需的各种配置。技术选择结合现有项目框架选择、时间成本、学习成本进行适当的评估。从自身能力出发，如果涉及到服务端处理过多，可以考虑运维层进行处理。使用了Prerender业务应用场景，业务线比较复杂。当建设周期较短时，建议自己部署PrerenderIo，使用自己的服务器缓存爬虫页面。三种技术方案的优缺点比较Next=>React文档大部分是英文的。配置项简单易用，易于部署。比较适合大型官网项目。当用户交互复杂时，使用Next进行项目开发。Nuxt=>Vue基本就是Next的翻版，语法也是Next语法。比较大的坑是大部分稳定的项目都是1.4.2版本，现有的2.X版本基本和老版本完全不兼容。渲染效率比较低，业务复杂时编译速度很慢。跨度大的非常慢的版本适用于低兼容性。PhantomJS的原理是将搜索引擎的爬虫请求通过Nginx配置转发到一个节点服务器，然后通过PhantomJS解析完整的HTML。可以作为一套通用的服务，所有SPA页面基本不需要二次重构。缺点是受网络波动限制比较大，适用于复杂项目的短期采集和处理，需要网络层的权限，需要和运维沟通。整体上还是结合当前的需求场景和自身情况进行选型，能够在短时间内高效完成需求。相关收录文章：NuxtNextPrerender+vuejsSEO最佳实践百度爬虫+谷歌收录亲测成功spider.js文件用于phantomjs解析网站。"usestrict";//单个资源的等待时间，避免资源加载完成后需要加载其他资源varresourceWait=500;varresourceWaitTimer;//最大等待时间varmaxWait=5000;varmaxWaitTimer;//资源countvarresourceCount=0;//PhantomJS网页模块varpage=require('webpage').create();//NodeJS系统模块varsystem=require('system');//从CLI获取第二个参数作为目标URLvarurl=system.args[1];//设置PhantomJS窗口的大小page.viewportSize={width:1280,height:1014};//获取图像varcapture=function(errCode){//通过stdoutconsole.log(page.content)从外部获取页面内容；//清除定时器clearTimeout(maxWaitTimer);//任务完成，正常退出phantom.exit(errCode);};//资源请求和计数page.onResourceRequested=function(req){resourceCount++;clearTimeout(resourceWaitTimer);};//资源加载完成page.onResourceReceived=function(res){//chunk方式的HTTP响应包会多次触发resourceReceived事件，需要判断资源是否结束如果(res.stage!=='结束'){返回;}resourceCount--;if(resourceCount===0){//当页面中的所有资源都加载完毕后，拦截当前渲染的html//因为onResourceReceived是在资源加载完成后立即执行的也就是调用了，我们需要给JS运行解析任务的时间//这里默认预留500毫秒resourceWaitTimer=setTimeout(capture,resourceWait);}};//资源加载超时page.onResourceTimeout=function(req){resourceCount--;};//资源加载失败page.onResourceError=function(err){resourceCount--;};//打开页面page.open(url,function(status){if(status!=='success'){phantom.exit(1);}else{//当更改页面的初始html成功返回时，启动定时器//当最大值到达时间（默认为5秒），拦截此时呈现的htmlmaxWaitTimer=setTimeout(function(){capture(2);},maxWait);}});用于测试=>phantomjsspider.js'https://www.baidu.com/'命令服务响应搜索引擎爬虫请求，我们需要服务这个命令并通过节点启动一个简单的web服务varexpress=require('express');varapp=express();//引入NodeJS的子进程模块varchild_process=require('child_process');app.get('/',function(req,res){//完整URLvarurl=req.protocol+'://'+req.hostname+req.originalUrl;console.log(req,req.hostname)//预渲染页面字符串容器varcontent='';//启动一个phantomjs子进程varphantom=child_process.spawn('phantomjs',['spider.js',url]);//设置标准输出字符编码phantom.stdout.setEncoding('utf8');//监听phantomjs的stdout，拼接phantom。stdout.on('data',function(data){content+=data.toString();});//监听子进程退出事件phantom.on('exit',function(code){switch(code){case1:console.log('Loadingfailed');res.send('Loadingfailed');break;case2:console.log('加载超时：'+url);res.send(content);break;default:res.send(content);break;}});});app.listen(3002)运行nodeserver.js，此时我们已经有了一个预渲染的webservice，接下来的工作就是将搜索引擎爬虫的请求转发到这个webservice，最后将渲染结果返回给爬虫。为了防止node进程挂掉，可以使用nohup启动，nohupnodeserver.js&。通过Nginx配置，我们可以轻松解决这个问题。#定义一个Nginx上游为spider_serverupstreamspider_server{serverlocalhost:3000;}#指定一个范围，默认/表示所有请求位置/{proxy_set_headerHost$host:$proxy_port;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;#当UA包含Baiduspider时，可以同时添加其他header信息转发流量Nginx会将流量以反向代理的形式传递给spider_serverif($http_user_agent~*"Baiduspider"){}}参考链接：https://www.mxgw.info/t/phant...http://imweb.io/topic/560b402...https://icewing.cc/linux-inst...https://www.jianshu.com/p/2bb...
