一、主要思路：如果发现是爬虫，则返回渲染后的html代码。

二、实现：

1、解决如何获取angular js渲染后的html代码。

目前主要解决方案为：基于来实现。

缺点： prerender 目前提供存储渲染后hmtl代码服务，但有限制，比如大小以及更新频率。

自己实现时经过测试未成功过，prerneder 主要基于去执行 js，但没有获取到ajax请求返回并且完成渲染后页面。

因为我是后端程序，这其实很常见的需求，做selenium测试即需要获取js执行完成后页面。于是用 selenium实现是一种思路。具体查看后还没有贡献现成代码。只能自己动手。

上源码：

测试地址：

代码说明：提交angular js页面地址，返回渲染完成后的页面（所有ajax请求完成并且渲染完成）。页面先会缓存到redis（key为页面url）。当然，测试地址只对www.ostay.cn的页面（我们的服务）进行缓存，如果需要我们提供服务，请联系我，更改一下代码，建议自己下载源码编译。

2、如何和现有项目集成

如果前后端是集成在一起的，思路就简章一些，做一个filter即可，判断是爬虫就返回渲染页面。

前后端分离后，前端只部署html，这里给出实践中的nginx配置，其它配置可以参考。

server {    listen 80;    server_name www.ostay.cn;    root /data/html/app;    index  index.html index.htm;    set $seo 0;    if ($http_user_agent ~* "baiduspider|360Spider|HaoSouSpider|Googlebot|YoudaoBot|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|Bingbot|BingPreview|Sogou web spider|Sogou inst spider|YisouSpider") {        set $seo 1;    }    if ($args ~ "_escaped_fragment_") {        set $seo 1;    }    if ($uri ~ "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff)") {        set $seo 0;    }    location / {        #add_header seo $seo; for test        if ($seo = 1) {            # rewrite .* http://localhost:9999;            proxy_pass http://seo.arvix.cn;        }   }}

注意:html页面最好加上： <meta name="fragment" content="!">

3、效果测试

http://seo.arvix.cn 测试页面渲染

测试nginx html页面是否返回渲染后的页面,通过添加参数 _escaped_fragment_ 来实现：？_escaped_fragment_=即可。

https://www.google.com/search?q=site%3Awww.ostay.cn&oq=site%3Awww.ostay.cn&gs_l=serp.12...0.0.4.1952.0.0.0.0.0.0.0.0..0.0....0...1c..64.serp..0.0.0.u-nnG6XS9Co 目前google抓取的页面为渲染后页面。百度暂时还没有快照生成。链接需要翻墙。

三、结束语

目前互联网推广用户成本太高，seo概念已经弱化很多，但回归本源，我们还是应该做好seo，从技术角度努力获取用户。

注意：暂时没有对angular2进行测试，未来会做相关支持。

转载于:https://my.oschina.net/asdtiang/blog/752722

你可能感兴趣的文章

Mac电脑Tomcat下载及安装(详细)MAC在Eclipse里配置tomcat