新站，网站内页查看源代码没有内容，百度抓取诊断也没有内容(悬赏3元)

Bear.

单页面SEO一直是让人比较头疼的问题，为了解决这个问题在网上搜到了大概几种方式，最终受到启发得出一个比较优秀的方案。
先说说网上的办法，有的是为了兼容谷歌，用的是#！的方式来给搜索引擎抓取，还有提交Sitemap种种麻烦。
还有一种比较蛋疼的是在开发一个服务端渲染页面的应用，根据爬虫UA让nginx代理到后端渲染页面的服务器，这种似乎可以解决问题，然而比较蛋疼的你需要维护两套系统，给开发和维护都增加额外的工作非常这不建议。
下面是我个人认为最优的方案，简单来说，需要借助phantomJS，好像被这个问题困扰的码农似乎早就知道这个东西，不过我的用法与他们略有不同。当爬虫抓取页面，那我们就把他带到phantomjs渲染好的静态html，注意，这个渲染的方法是抓取原来SPA页面的代码并运行JS，生成一个与SPA一模一样的网站，并且url(要使用这种模式 html5 history api)保持与spa完全一致。是的就这么简单就解决了，代价是与需要腾出来一个服务器搭建一个nginx作为web服务器。
随着蜘蛛爬取的次数越来越多，随之产生的静态文件也越来多，不要怕，你只要硬盘足够大就可以了，弱这是你的网站文件已经达到已经的数量级，那时我想搜索引擎已经有了原生的解决方案，我想这不会等太久。当然纯的静态文件有一个弊端，就是网站改版之后会产生页面与SPA不一致的现象，从而可能被搜索降级，好在解决这个问题非常的简单，那就是每一个更新结点，我们写个任务定时更新所有的静态页面，就算你页面很多也没什么问题，跑个几个小时也就差不多了，毕竟网站的大规模改版并不是很频繁的事情。如果想要完全避免这个问题，也是有办法的，那就是从爬虫开始爬的时候使用phantomjs每一次都重新生成页面，也就解决了不一致的问题。然而虽然是解决了这个问题，又带来了另一个问题，从新生成页面是相对耗时的，访问速度下降，对seo多少产生了一点影响。所以还是推荐手动先生成的办法。
另外关于已经收录的网页，当用户从搜索引擎点过来的时候，如果是spa页面的话，ajax重新加载大量JS逻辑代码，并执行spa路由调取相应的页面，也是相对耗时的。此时我们可以通过入口的nginx转发到phantomjs的服务器去读那些已经生成好的html，那速度就快很多了。
到此这个问题就真的得到解决了。前端开发小伙伴就可以无痛愉快的开发写写单页面应用了。
<h2>流程图</h2>





流程图

<h4>入口机器Nginx</h4>
<pre><code>server {
listen 80;
server_name ;
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;
#web server
#当UA里面含有Baiduspider的时候，流量Nginx以反向代理的形式，将流量传递给spider_server
if ($http_user_agent ~* "Baidu") {
proxy_pass }

proxy_pass

}
}
</code></pre>
<h4>web nginx</h4>
<pre><code>server {
listen 8080;
server_name ;
location / {
root E:\web;
index try_files $uri $uri/ /
}
location /api {
proxy_pass

}
}
</code></pre>
<h4>SEO nginx</h4>
<pre><code>listen 82;
server_name ;
location / {
#先访问自己的静态页面如果有直接显示
root E:\seo;
index try_files $uri $uri/ $ @mongrel;
}
#如果没有文件就把url发给node
location @mongrel{
proxy_pass }
}

</code></pre>
<h3>node express</h3>
<pre><code>
// ExpressJS调用方式
var express = require('express');
var APP = express();
var fs = require('fs');
var path = require("path");
var mkdirsSync = function(dirname) {
//(dirname);
if ((dirname)) {
return true;
} else {
if (mkdirsSync((dirname))) {
(dirname);
return true;
}
}
};
// 引入NodeJS的子进程模块
var child_process = require('child_process');
('', function(req, res) {
// 完整web服务器URL
var url = + '://' + '' + //();
var filePath = "";
var fileName = "";
if ( == '/') {
fileName = 'index';
filePath = "e:/seo/";
} else {
var pathArray = ('/');
fileName = pathArray[ - 1];
filePath = "e:/seo/" + (fileName, "") + '/';
}
(filePath + "....");
// 预渲染后的页面字符串容器
var content = '';
// 开启一个phantomjs子进程
//应当先蒋策SEO服务器是否存在改文件如果有直接跳转
var phantom = child_('phantomjs', ['', url]);
// 设置stdout字符编码
('utf8');
// 监听phantomjs的stdout，并拼接起来
('data', function(data) {
content += ();
});
// 监听子进程退出事件
('exit', function(code) {
switch (code) {
case 1:
('加载失败');
('加载失败');
break;
case 2:
('加载超时: ' + url);
(content);
break;
default:
var w_data = content;
var w_data = new Buffer(w_data);
/**
* filename, 必选参数，文件名
* data, 写入的数据，可以字符或一个Buffer对象
* [options],flag,mode(权限),encoding
* callback 读取文件后的回调函数，参数默认第一个err,第二个data 数据
*/
mkdirsSync(filePath, 0777);
(filePath + fileName + '.html');
(filePath + fileName + '.html', w_data, { flag: 'w' }, function(err) {
if (err) {
(err);
} else {
('写入成功');
}
});
(content);
break;
}
});
});
(3000);
</code></pre>
<h3>phantomjs</h3>
<pre><code>/global phantom*/
"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 = [1];

// 设置PhantomJS视窗大小
= {
width: 1280,
height: 1014
};

// 获取镜像
var capture = function(errCode) {

// 外部通过stdout获取页面内容
();

// 清除计时器
clearTimeout(maxWaitTimer);

// 任务完成，正常退出
(errCode);

};

// 资源请求并计数
= function(req) {
resourceCount++;
clearTimeout(resourceWaitTimer);
};

// 资源加载完毕
= function(res) {

// chunk模式的HTTP回包，会多次触发resourceReceived事件，需要判断资源是否已经end
if ( !== 'end') {
return;
}

resourceCount--;

if (resourceCount === 0) {

// 当页面中全部资源都加载完毕后，截取当前渲染出来的html
// 由于onResourceReceived在资源加载完毕就立即被调用了，我们需要给一些时间让JS跑解析任务
// 这里默认预留500毫秒
resourceWaitTimer = setTimeout(capture, resourceWait);

}
};

// 资源加载超时
= function(req) {
resouceCount--;
};

// 资源加载失败
= function(err) {
resourceCount--;
};

// 打开页面
(url, function(status) {

if (status !== 'success') {

(1);

} else {

// 当改页面的初始html返回成功后，开启定时器
// 当到达最大时间（默认5秒）的时候，截取那一时刻渲染出来的html
maxWaitTimer = setTimeout(function() {

capture(2);

}, maxWait);

}

});
</code></pre>
本机测试本机测试通过可以使用postman等其他工具模拟爬虫 作者：北方蜘蛛 链接：> 來源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。