angularjs的SEO问题解决方案

来源：互联网发布：万达电商网络要走编辑：程序博客网时间：2024/05/21 18:35

我的前端用到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_=/ ，这会返回页面内容，查看一下是否渲染完成即可。

附件地址

0 0