angularjs的SEO问题解决方案

我的前端用到angularjs,服务器用到nginx。

大体流程:

nginx服务器检测到爬虫访问,跳转到专门的url,此url是angularjs已经渲染过后的页面。非常的简单。


1.首先是angularjs的渲染问题

angular添加一个模块‘seo’,引入文件 angular-seo.js文件(附件中有)。

<script src="@routes.Assets.at("js/app/angular-seo.js")"></script>

angular.module('app', ['ng', 'seo']);


然后你可以在每个controller中,觉得页面差不多已经创建好之后调用  $scope.htmlReady()(就是数据请求完成之后,随便你放哪里)。


然后用phantomjs进行页面的渲染,安装完成之后(自己百度怎么安装,很简单),用下面代码进行调用。

phantomjs --disk-cache=no /path/xxxxxx...../angular-seo-server.js 9001 http://localhost:8080

这个就是开启9001端口,调用angular-seo-server.js文件(附件中有)获得8080端口渲染的页面,渲染完成标志就是上面的$scope.htmlReady()。

那localhost:9001这个url地址就是爬虫应该访问的地址。


2.让nginx知道爬虫进行访问

在实际页面head中加入下面代码

<meta name="fragment" content="!" >
爬虫看到这段代码之后,它会知道这个页面有动态的javascript需要爬取 它会在你的url中添加?_escaped_fragment_=/,这个标志就是让nginx知道是爬虫进行访问了

nginx中进行下面配置

if ($args ~ _escaped_fragment_) {
        #这里面写你们的处理代码
        rewrite ^ /bot/ ;        

}

还有angularjs的路径时 xxx/#/xxxx这种形式,爬虫是没办法识别 /#/之后的内容的,所以我们需要改成 xxxxx/!#/xxxxxx这种形式,很简答,添加下面代码即可

angular.config(['$routeProvider','$locationProvider',
    function ($routeProvider, $locationProvider,$httpProvider) {       
        $routeProvider.when('/index', {
            templateUrl: '',
            controller: ''
        });
      <span style="color:#ff0000;">  $locationProvider.hashPrefix('!');</span>
    }]);

3.跳转url,地址我们已经有了,即为localhost:9001,nginx配置如下(与前面的if语句代码呼应)

location /bot/ {
proxy_pass http://localhost:9001/;
proxy_http_version 1.1;
proxy_set_header Host $host:80;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forworded-For $proxy_add_x_forwarded_for;
proxy_set_header Via "nginx";
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

注意:proxy_pass中的url地址一定要以“/"结尾,就是这个东西,我调试了大半天才搞出来,因为没有“\”则方位地址会变成   xxxx/bot/?_escaped_fragment_=/xxxxx,这样是不对的,应该是xxxx/?_escaped_fragment_=/xxxxx。


这样就大功告成了。以后只要在适当的地方添加$scope.htmlReady()即可。


4.测试可以使用curl 

例如本地测试 curl  localhost:9001,最终测试  curl     host/?_escaped_fragment_=/ ,这会返回页面内容,查看一下是否渲染完成即可。


附件地址



©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页