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

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

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

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

　　使用AngularJS唯一的一个不爽的地方（到目前为之）是搜索引擎优化（SEO）。在这个教程中，我们将会介绍如何使你的AngularJS网站或app可以被Google抓取。

问题

　　搜索引擎爬虫(又叫机器人)最初是被设计用来抓取网页的HTML内容的。随着web以及网站技术的进化，JavaScript变成了web的主要语言。AJAX允许我们在web上做异步的操作。AngularJS充分使用了异步模型，这也给Google的爬虫带来了问题。

angularjs-seo-prerender-old

　　如果你是一个AngularJS的重度使用者，很可能你的程序只有一个真正的HTML页面，然后异步的向该页面中填充其他的视图。所有的路由和程序逻辑都在客户端完成，因此，不论你是修改页面，提交评论，或者是执行增删改查操作，你都在一个页面中完成这些工作。

解决方案

　　放心，Google确实有一种方法来为AJAX的程序创建索引，你的AngularJS 程序可以被抓取，索引，以及像其他网站那样出现在搜索结果中。有一些你需要注意的事项及其他的步骤，但是Google全面支持这种方法。想要了解更多关于Google抓取AJAX内容的指南请参看 Google’s Webmaster AJAX Crawling Guidelines.

我们要构建什么

我们的程序应该能够被Google的爬虫以及其他爬虫（Bing的爬虫）渲染出结果。如果用这种方式，我们不会遇到上面那张图所显示的问题。我们会得到用户期望从我们这里得到的得到比较好的搜索结果。

angular-seo-prerender-new

　　它是如何工作的

当一个搜索引擎的爬虫访问你的应用程序并且看到<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>

确保它可以正常工作

　　Prerender 为你提供了一个控制台用来哪些页面已经被渲染并且被爬虫抓取。这是一个很棒的工具用来查看你的SEO页面是怎么工作的。

angular-seo-prerender-cached

angular-seo-prerender-crawl-stats

　　注意事项

　　最近，我有机会和Prerender.io的创始人进行了交谈，并问了他一些关于如何对单页面的app进行索引的问题。以下是他说的一些内容：

相应给爬虫渲染后的HTML，而不是JavaScript
不要发送404
如果你使用#来连接你的URL，一定要设置hashPrefix('!')，以便URL被重写为'#!'。
如果你有很多页面和内容，一定要有一个sitemap.xml和robots.txt。
Google每天只抓取一些页面，这由你的PageRank决定。包含一个sitemap.xml文件允许你来决定哪一个页面需要被索引。
当你想在Google的站长工具中测试一下你的AngularJS页面是如何渲染的，一定要在右边的地方添加上#!或?_escaped_fragment_=，因为这个工具不会像爬虫那样对地址进行转换。