AngularJs站点使用prerender.io进行SEO优化支持

AngularJs seo prerender nodejs linux

2018-01-10 18:13:51 535 0

小站基本blog功能完成了好几天，一直在压榨时间，抽空完善优化。

这果然是是自己的东西才会用心，就像如果是开在其他的开放平台上的blog，大抵就不会管了吧，什么都有，也就什么都不需要管了。

多少不符合自己这种爱瞎折腾的性格吧，哈哈.

一.SEO

说道SEO，其实以前也没太关注，也就接触过webmagic java爬虫，做了几个小的爬取网页数据的项目，大概的原理是了解一点点的。无非就是后台程序不停的访问页面，获取并分析提取页面信息，然后从页面中再分析下一步的相关链接，继续爬去分析罢了。

这几天在地铁上突然就想起这个搜索引擎爬取的问题了，本站基本都是用的angularjs+bootstrap搞起的，前端基本是js数据，没有直接返回jsp数据渲染页面。

然后就觉得有问题了，都是ajax获取数据.js渲染/爬虫过来的时候，啥都爬不到，都是几个{{xxx}}之类的东西，这样怎么能被搜索引擎抓取过去呢。

百度了下，发现这果然是有些问题的呢。

1.1prerender

大概分析了下网上的一些文章，结合本网站的情况，花了一中午时间给本站加上了seo支持。基本上使用后台prerender.io框架。前台直接在java代码里面增加 seo filter过滤拦截seo请求。

具体 prerender的相关说明见github.

https://github.com/prerender

~~碍于服务器性能限制，本站只用了tomcat发布，所有没用nginx/apache等其他的拦截配置~~，

已添加nginx转发配置.

其实原理是一样的，获取到搜索引擎的将请求后转发给prerender后台，等渲染完成后将完整的页面返回给搜索引擎爬虫。

只是nginx/apache等自代了拦截转发配置功能等，而我用的tomcat就只好自己来了，其实我还是比较喜欢自己来的... -_-!

1.2安装 prerender.nodejs.

已本blog环境ubuntu16.04为例。

安装npm/

sudo apt-get install npm

安装node.js

 curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
 
 sudo apt-get install nodejs

复制 prerender

git clone https://github.com/prerender/prerender.git

在prerender目录安装

npm install

然后就可以启用prerender了

 node server.js

1.3启动问题

这一步略坑。

因为一直是用的root用户操作。prerender启动会调用chrome来加载页面，但是chrome不支持root启动。

这里会出现这样的问题

root@zj-aliyun:/usr/local/prerender# node server.js 
2018-01-10T05:03:52.676Z Starting Prerender
2018-01-10T05:03:52.678Z Starting Chrome
2018-01-10T05:03:52.683Z Prerender server accepting requests on port 3000
2018-01-10T05:03:52.813Z Chrome connection closed... restarting Chrome
2018-01-10T05:03:52.813Z Chrome died immediately after restart... stopping Prerender

直接换个其他普通用户启动就好了。

1.4 使用

启动完成后

可以直接访问，我修改了prerender端口位13333,所以这样访问

http://256kb.cn:13333/http://256kb.cn

就会使用prerender加载直接 url的网页。这个呈现出来的页面也就是最终搜索引擎爬虫获取到的数据了。

然后让web后台或者nginx或者apache来转发链接就好了。

比如发现是爬虫，我就转发链接

http://256kb.cn:13333/http:页面链接/xxx/

1.5 javafilter配置

下面是具体的网站配置，也就是github上说的Middleware配置，

JAVA版本的filter配置

当然我自己下下来做了些修改，增加了一点爬虫爬取的记录，我自己当然要知道网站什么时候被爬虫访问了嘛～～～，

就这样，搞定！

这是加上prerender之前现在baidu缓存的数据，先记下来看看，看多久能换过来。

1.6优化结果

1.11更新

马上就更新了。效果还可以的说。

二、请求原始地址、原始请求头user-agent等

181228.

目前站点架构NGINX+Prerender+tomcat配置.请求链接多次转发，

后台记录访问记录/爬虫记录等信息时，需要记录真实的原始请求IP及请求头等信息.

这里补充一下。

Nginx 真实IP配置.

通过nginx提供的 $http_headername 直接获取对应原始请求头中的 headername 信息，

headername 均使用小写，并且分割符为下划线.

 location / {

    proxy_pass_request_headers on;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header Host $http_host;
       proxy_set_header User-Agent $http_user_agent;
       proxy_set_header Pre-User-Agent  $http_pre_user_agent;
      proxy_set_header X-Forwarded-For  $remote_addr;
      proxy_set_header Referer $http_referer;
...
}

prerender的配置有两处。

本节说明的情况为：自己使用JAVA版本的filter配置来处理

prerender filter 转发配置

后台检测到为爬虫或者需要使用prerender.io来转化过滤的情况时，手动记录相关header及ip信息。

在proxyPrerenderedPageResponse 中，及准备开始发送prerender后台请求前，

增加如下：

	proxyRequest.addHeader("X-Forwarded-For", stasticService.getIpAddr(request));
		proxyRequest.addHeader("Pre-User-Agent",  request.getHeader("User-Agent"));

ip检查，检查的字段为nginx中配置的真实IP字段.

/**
	 * 解析代理获取ip
	 * 
	 * @param request
	 * @return
	 * @author zj
	 * @date 2018年9月8日
	 */
	public String getIpAddr(HttpServletRequest request) {

		String ipAddress = request.getHeader("X-Forwarded-For");
		if (ipAddress == null || ipAddress.length() == 0 || "unknown".equalsIgnoreCase(ipAddress)) {
			ipAddress = request.getHeader("X-Real-IP");
		}

		if (ipAddress == null || ipAddress.length() == 0 || "unknown".equalsIgnoreCase(ipAddress)) {
			// prerender ip
			ipAddress = request.getParameter("X-Forwarded-For");
		}

		if (ipAddress == null || ipAddress.length() == 0 || "unknown".equalsIgnoreCase(ipAddress)) {
			ipAddress = request.getRemoteAddr();
		}
		// 对于通过多个代理的情况，第一个IP为客户端真实IP,多个IP按照','分割
		if (ipAddress != null && ipAddress.length() > 15) { // "***.***.***.***".length() = 15
			if (ipAddress.indexOf(",") > 0) {
				ipAddress = ipAddress.substring(0, ipAddress.indexOf(","));
			}
		}
		return ipAddress;
	}

prerender.io 配置

这样后台nodejs 的prerender.io就能收到带上真实请求地址及header信息的请求。

需要修改prerender中.sendPrerenderHeader.js或者自定义插件。

在 tabCreated 事件中增加传入请求中的真实数据。

使用 req.prerender.tab.Network.setExtraHTTPHeaders 方法传递真实请求头。

	util.log('log-header:', req.header('Pre-User-Agent'));
		req.prerender.tab.Network.setExtraHTTPHeaders({
			headers: {
				'X-Prerender': '1',
				//java端带过来的原始请求地址及agent
				'X-Forwarded-For':req.header('X-Forwarded-For'),
				'Pre-User-Agent':req.header('Pre-User-Agent')
			}
		});

这样，最后在后台就可以通过 Pre-User-Agent，X-Forwarder-For获取真实的请求代理头信息及真实的请求IP。