AngularJS使用Prerender.io处理SEO的问题

2014-6-25 11:52| 发布者: joejoe0332| 查看: 12642| 评论: 1|原作者: 中奖啦, 乔康007, 地狱星星|来自: oschina

摘要: AngularJS是一个用来构建网站和app的很棒的框架。内建的路由，数据绑定以及指令(directive)以及其他功能使得AngularJS可以很好的处理应用的各种前端功能。

　　它是如何工作的

当一个搜索引擎的爬虫访问你的应用程序并且看到<meta name="fragment" content="!">时，它会在你的URL中添加一个?_escaped_fragment_=tag。
你的服务器将会拦截这个请求，并把它发送给一个用来处理这个特殊的爬虫请求的中间件。在这篇文章中，我们选用Prerender.io，因此，下一步是针对Prerender.io的。
Prerender.io 将会检查请求的页面是否有一个现存的快照（或者缓存的页面），如果有，它会将这个页面响应给爬虫，如果没有的话，他会调用PhantomJS来渲染这个完整页面，并将它响应给爬虫。
未缓存的页面需要每次调用PhantomJS，这会花较长的时间来渲染页面，导致更长的响应时间，因此最好经常缓存页面。
还有其他的方法来实现！

　　替代方案:

使用Prerender.io的源码来配置你自己的Prerender服务。
使用一个不同的服务，如 BromBone, Seo.js 或 SEO4AJAX
创建你自己针对搜索引擎的渲染和快照的服务

关于 Prerender.io

Prerender.io 是一个兼容多种不同平台（包括Node，PHP和Ruby）的一个服务。该服务是完全开源的，但是如果你不想搭建一个你自己的SEO服务器的话，你可以使用他们提供的解决方案。Prerender的人们认为，SEO是一件正确的事，并不是一个特权，他们已经做了一些了不起的工作来扩展他们的解决方案，添加了很多自定义的功能和插件。

配置Node 的 package.json

我们将会构建一个简单的Node/AngularJS程序，改程序有多个页面以及动态的内容。我们将使用Node.js结合Express模块作为我们的后端服务器。使用下面的package.json文件来指定该篇教程中所用到的依赖。完成这些之后，你可以注册一个免费的prerender.io的账号并得到一个token。

// package.json

{
  "name": "Angular-SEO-Prerender",
  "description": "...",
  "version": "0.0.1",
  "private": "true",
  "dependencies": {
    "express": "latest",
    "prerender-node": "latest"
  }
}

现在，我们的package.json文件已经准备好了，接下来让我们使用npm install 来安装Node的依赖。

设置Node的server.js

这里的设置是非常标准。在我们的server.js文件中，我们将需要预渲染服务，并使用预渲染令牌连接它

01// server.js
02var express = require('express');
03 
04var app = module.exports = express();
05 
06app.configure(function(){
07  // Here we require the prerender middleware that will handle requests from Search Engine crawlers
08  // We set the token only if we're using the Prerender.io service
09  app.use(require('prerender-node').set('prerenderToken', 'YOUR-TOKEN-HERE'));
10  app.use(express.static("public"));
11  app.use(app.router);
12});
13 
14// This will ensure that all routing is handed over to AngularJS
15app.get('*', function(req, res){
16        res.sendfile('./public/index.html');
17});
18 
19app.listen(8081);
20console.log("Go Prerender Go!");

主页index.html

主页也是非常标准的。写你的代码像平时那样。大的变化是简单的在页面的<head>中添加<meta name="fragment" content="!">。这个meta标签将告诉搜索引擎的爬虫，这个网站有动态的JavaScript内容需要爬取。

另外，如果你的网页没有正确的缓存或者遗漏了内容，你可以添加如下的脚本片段window.prerenderReady = false;，它将告诉预渲染服务在获取快照之前等待直到你的整个页面被渲染。一旦你确认你的内容完全加载了，你需要设置window.prerenderReady = true。有很大的可能性你不需要包含这个代码片段，但是这是一个选项在你需要它的时候

view sourceprint?

01<!-- index.html -->
02 
03<!doctype html>
04<!-- We will create a mainController and bind it to HTML which will give us access to the entire DOM -->
05<html ng-app="prerender-tutorial" ng-controller="mainController">
06<head>
07         
08    <meta name="fragment" content="!">
09    <!-- We define the SEO variables we want to dynamically update -->
10    <title>Scotch Tutorial | {{ seo.pageTitle }}</title>
11    <meta name="description" content="{{ seo.metaDescription }}">
12 
13    <!-- CSS-->
14    <link rel="stylesheet" type="text/css" href="/assets/bootstrap.min.css">
15    <style>
16        body { margin-top:60px; }
17    </style>
18 
19    <!-- JS -->
20    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
21    <script src="http://code.angularjs.org/1.2.10/angular-route.min.js"></script>
22    <script src="/app.js"></script>
23</head>
24<body>
25<div class="container">
26 
27    <!-- NAVIGATION BAR -->
28    <div class="bs-example bs-navbar-top-example">
29        <nav class="navbar navbar-default navbar-fixed-top">
30            <div class="navbar-header">
31                <a class="navbar-brand" href="/">Angular SEO Prerender Tutorial</a>
32            </div>
33 
34            <ul class="nav navbar-nav">
35                <li><a href="/">Home</a></li>
36                <li><a href="/about">About</a></li>
37                <li><a href="/features">Features</a></li>
38            </ul>
39        </nav>
40    </div>
41 
42    <h1 class="text-center">Welcome to the Angular SEO Prerender Tutorial</h1>
43    <!-- where we will inject our template data -->
44    <div ng-view></div>
45 
46</div>
47</body>
48</html>