prerender_带有Prerender.io的AngularJS SEO

最新推荐文章于 2024-10-12 09:43:38 发布

culiu9261

最新推荐文章于 2024-10-12 09:43:38 发布

阅读量252

点赞数

文章标签：搜索引擎 java python vue javascript ViewUI

原文链接：https://scotch.io/tutorials/angularjs-seo-with-prerender-io

版权

本文介绍了如何解决AngularJS应用的SEO问题，通过使用Prerender.io服务，使得Google等搜索引擎能够抓取和索引AJAX内容。文章详细讲解了Prerender.io的工作原理、设置过程和注意事项，帮助开发者创建对搜索引擎友好的AngularJS应用。

摘要由CSDN通过智能技术生成

prerender

AngularJS is an excellent framework for building websites and apps. Built in routing, data-binding and directives among other features enable AngularJS to completely handle the front-end of any type of application.

AngularJS是用于构建网站和应用程序的出色框架。内置的路由，数据绑定和指令以及其他功能使AngularJS能够完全处理任何类型的应用程序的前端。

The one pitfall to using AngularJS (for now) is Search Engine Optimization (SEO). In this tutorial, we will go over how to make your AngularJS website or application crawlable by Google.

（目前）使用AngularJS的一个陷阱是搜索引擎优化（SEO）。在本教程中，我们将介绍如何使AngularJS网站或应用程序可被Google抓取。

问题 (The Problem)

Search engines crawlers (or bots) were originally designed to crawl HTML content of web pages. As the web evolved, so did the technologies powering websites and JavaScript became the de facto language of the web. AJAX allowed for asynchronous operations on the web. AngularJS fully embraces the asynchronous model and this is what creates problems for Google’s crawlers.

搜索引擎搜寻器（或漫游器）最初旨在搜寻网页HTML内容。随着网络的发展，支持网站的技术也随之发展，JavaScript成为了网络的事实上的语言。 AJAX允许在网络上进行异步操作。 AngularJS完全采用了异步模型，这就是给Google的抓取工具带来麻烦的原因。

[

][1]

[

If you are fully utilizing AngularJS, there is a strong possibility that you will only have one real HTML page that will be fed HTML partial views asynchronously. All the routing and application logic is done on the client side, so whether you’re changing pages, posting comments, or performing other CRUD operations, you are doing it all from one page.

如果您充分利用AngularJS，则极有可能只有一个真实HTML页面，该页面将被异步地馈入HTML部分视图。所有的路由和应用程序逻辑都是在客户端完成的，因此，无论您是要更改页面，发布注释还是执行其他CRUD操作，都需要从一页完成所有操作。

解决方案 (The Solution)

Rest assured, Google does have a way of indexing AJAX applications and your AngularJS app can be crawled, indexed and will appear in search results just like any other website. There are a few caveats and extra steps that you will need to perform, but these methods are fully supported by Google. To read more about Google’s guidelines for crawlable AJAX content visit Google's Webmaster AJAX Crawling Guidelines.

放心， Google确实有对AJAX应用程序建立索引的方式，并且您的AngularJS应用程序可以被抓取 ，建立索引，并且会像其他任何网站一样出现在搜索结果中。您需要执行一些警告和其他步骤，但是Google完全支持这些方法。要详细了解Google的可抓取AJAX内容指南，请访问Google的网站站长AJAX抓取指南。

我们将要建设的 (What We'll Be Building)

Our application will be able to be rendered by Google bot and all his friends (Bing bot). This way, we won't run into the problem shown in the picture above. We'll get nice search results as our users expect from us.

Google bot及其所有朋友（Bing bot）将能够渲染我们的应用程序。这样，我们就不会遇到上图所示的问题。正如用户所期望的那样，我们将获得不错的搜索结果。

[

][2]

[

这个怎么运作 (How It Works)

When a search engine crawler visits your app and sees the <meta name="fragment" content="!"> it will add an ?_escaped_fragment_= tag to your URL.

当搜索引擎搜寻器访问您的应用并看到<meta name="fragment" content="!"> ，它将在您的网址中添加?_escaped_fragment_=标记。
Your server will intercept this request and send it to the middleware that will handle the special crawler request. For this article, we have chosen Prerender.io so the next step is specific to Prerender.io.
您的服务器将拦截此请求，并将其发送到将处理特殊爬网程序请求的中间件。对于本文，我们选择了Prerender.io，因此下一步特定于Prerender.io。
Prerender.io will check to see if the requested page has an existing snapshot (or cached page), if it does, it will serve that page to the crawler, if it does not, Prerender will make a call to PhantomJS which will render the page in it’s entirety and show it to the crawler.
Prerender.io将检查请求的页面是否具有现有的快照（或缓存的页面），如果存在，它将将该页面提供给搜寻器，如果没有，Prerender将调用PhantomJS，后者将呈现该快照。页面上的内容完整并显示给搜寻器。
Non-cached pages that require the call to PhantomJS will take longer to render leading to a much longer response time, so it's a good idea to cache pages often.
需要调用PhantomJS的非缓存页面将花费更长的渲染时间，从而导致更长的响应时间，因此经常缓存页面是一个好主意。
There are additional ways to do this!
还有其他方法可以做到这一点！

Alternatives: 替代方案 ：

Set up your own Prerender service using Prerender.io open source code
使用Prerender.io开源代码设置自己的Prerender服务
Use a different existing service such as BromBone, Seo.js or SEO4AJAX
使用其他现有服务，例如BromBone ， Seo.js或SEO4AJAX
Create your own service for rendering and serving snapshots to search engines
创建自己的服务，以将快照渲染并提供给搜索引擎

关于Prerender.io (About Prerender.io)

Prerender.io is a service that is compatibile across a variety of different platforms including Node, PHP and Ruby. The service is fully open-source but they do offer a hosted solution if you do not want to go through the hassle of setting up your own server for SEO. The folks over at Prerender believe that SEO is a right, not a privilege and they have done some great work extending their solution, adding a lot of customizable features and plugins.

Prerender.io是一项跨Node.php，PHP和Ruby等各种平台兼容的服务。该服务是完全开源的，但是如果您不想为SEO设置自己的服务器的麻烦，他们会提供托管解决方案。 Prerender的人们认为SEO是正确的，而不是特权，他们在扩展解决方案方面做了很多出色的工作，添加了许多可自定义的功能和插件。

节点设置package.json (Node Setup package.json)

We will be building a simple Node/AngularJS application that has multiple pages with dynamic content flowing throughout. We will use Node.js as our backend server with Express. Check out the Node package.json file below to see all of our dependencies for this tutorial. Once you are ready, sign up for a free prerender.io account and get your token.

我们将构建一个简单的Node / AngularJS应用程序，该应用程序具有多个页面，并且动态内容始终贯穿其中。我们将使用Node.js作为Express的后端服务器。请查看下面的Node package.json文件，以了解本教程的所有依赖关系。准备就绪后，注册一个免费的prerender.io帐户并获取令牌。

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

Now that we have our package.json ready to go, let's install our Node dependencies using npm install.

现在我们已经准备好package.json了，让我们使用npm install来npm install Node依赖项。

节点设置server.js (Node Setup server.js)

The setup here is pretty standard. In our server.js file we will require the Prerender service and connect to it using our prerender token.

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

// server.js

var express = require('express');

var app = module.exports = express();

app.configure(function(){ 
  // Here we require the prerender middleware that will handle requests from Search Engine crawlers 
  // We set the token only if we're using the Prerender.io service 
  app.use(require('prerender-node').set('prerenderToken', 'YOUR-TOKEN-HERE')); 
  app.use(express.static("public")); app.use(app.router); 
});

// This will ensure that all routing is handed over to AngularJS 
app.get('*', function(req, res){ 
  res.sendfile('./public/index.html'); 
});

app.listen(8081); 
console.log("Go Prerender Go!");

主页index.html (Main Page index.html)

The main page is also pretty standard. Write your code like you normally would. The big change here will simply be adding <meta name="fragment" content="!"> to the <head> of your page. This meta tag will tell search engine crawlers that this is a website that has dynamic JavaScript content that needs to be crawled.

主页也很标准。像平常一样编写代码。这里最大的变化就是将<meta name="fragment" content="!">到页面的<head>中。此meta标签将告诉搜索引擎抓取工具，这是一个网站，其中包含需要抓取的动态JavaScript内容。

Additionally, if your page is not caching properly or it's missing content you can add the following script snippet: window.prerenderReady = false; which will tell the Prerender service to wait until your entire page is fully rendered before taking a snapshot. You will need to set window.prerenderReady = true once you're sure your content has completed loading. There is a high probability that you will not need to include this snippet, but the option is there if you need it.

此外，如果您的页面缓存不正确或缺少内容，则可以添加以下脚本片段： window.prerenderReady = false; 它将告诉Prerender服务等待直到整个页面完全呈现后再拍摄快照。确定您的内容已完成加载后，就需要设置window.prerenderReady = true 。您很有可能不需要包含此代码段，但是如果需要，可以使用该选项。

That’s it! Please see the code below for additional comments.

而已！请参阅下面的代码以获取其他注释。

<!-- index.html -->
<!doctype html> <!-- We will create a mainController and bind it to HTML which will give us access to the entire DOM --> 
<html ng-app="prerender-tutorial" ng-controller="mainController"> <head>

  <meta name="fragment" content="!">
  <!-- We define the SEO variables we want to dynamically update -->
  <title>Scotch Tutorial | {{ seo.pageTitle }}</title>
  <meta name="description" content="{{ seo.metaDescription }}">

  <!-- CSS-->
  <link rel="stylesheet" type="text/css" href="/assets/bootstrap.min.css">
  <style>
      body { margin-top:60px; }
  </style>

  <!-- JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
  <script src="http://code.angularjs.org/1.2.10/angular-route.min.js"></script>
  <script src="/app.js"></script>

</head> 
<body> 
<div class="container">

  <!-- NAVIGATION BAR -->
  <div class="bs-example bs-navbar-top-example">
      <nav class="navbar navbar-default navbar-fixed-top">
          <div class="navbar-header">
              <a class="navbar-brand" href="/">Angular SEO Prerender Tutorial</a>
          </div>

          <ul class="nav navbar-nav">
              <li><a href="/">Home</a></li>
              <li><a href="/about">About</a></li>
              <li><a href="/features">Features</a></li>
          </ul>
      </nav>
  </div>

  <h1 class="text-center">Welcome to the Angular SEO Prerender Tutorial</h1>
  <!-- where we will inject our template data -->
  <div ng-view></div>

</div> 
</body> 
</html>

Angular Setup app.js (Angular Setup app.js)

In our app.js, the page where we define our AngularJS code, we will need to add this code to our routes config: $locationProvider.hashPrefix('!');. This method will change the way your URL’s are written.

在定义AngularJS代码的页面app.js ，我们需要将此代码添加到路由配置中： $locationProvider.hashPrefix('!'); 。此方法将更改您的URL的编写方式。

If you are using html5Mode you won’t see any difference, otherwise your url’s will look like http://localhost:3000/#!/home compared to the standard http://localhost:3000/#/home.

如果您使用的是html5Mode，则不会有任何区别，否则与标准的http://localhost:3000/#/home相比，您的url看起来像http://localhost:3000/#!/home http://localhost:3000/#/home 。

This #! in your URL is very important, as it is what will alert crawlers that your app has AJAX content and that it should do it’s AJAX crawling magic.

这个#! 在您的网址中非常重要，因为它可以使爬虫程序警告您的应用程序具有AJAX内容，并且应该执行AJAX爬虫魔术。

// app.js

var app = angular.module('prerender-tutorial', ['ngRoute']) 

.config(function($routeProvider, $locationProvider){ 

  $routeProvider.when('/', { 
    templateUrl : 'views/homeView.html', 
    controller: 'homeController' 
  })

  $routeProvider.when('/about', {
      templateUrl : '/views/aboutView.html',
      controller: 'aboutController'
  })

  $routeProvider.when('/features', {
      templateUrl : '/views/featuresView.html',
      controller : 'featuresController'
  })

  $routeProvider.otherwise({
          redirectTo : '/'
  });

  $locationProvider.html5Mode(true);
  $locationProvider.hashPrefix('!');
});

function mainController($scope) { 
  // We will create an seo variable on the scope and decide which fields we want to populate 
  $scope.seo = { 
    pageTitle : '', pageDescription : '' 
  }; 
}

function homeController($scope) { 
  // For this tutorial, we will simply access the $scope.seo variable from the main controller and fill it with content. 
  // Additionally you can create a service to update the SEO variables - but that's for another tutorial. 
  $scope.$parent.seo = { 
    pageTitle : 'AngularJS SEO Tutorial', 
    pageDescripton: 'Welcome to our tutorial on getting your AngularJS websites and apps indexed by Google.' 
  }; 
}

function aboutController($scope) { 
  $scope.$parent.seo = { pageTitle : 'About', 
    pageDescripton: 'We are a content heavy website so we need to be indexed.' 
  }; 
}

function featuresController($scope) { 
  $scope.$parent.seo = { pageTitle : 'Features', pageDescripton: 'Check out some of our awesome features!' }; 
}

In the above code, you can see how we handle Angular routing and our different pageTitle and pageDescription for the pages. These will be rendered to crawlers for an SEO ready page!

在上面的代码中，您可以看到我们如何处理Angular路由以及页面的不同pageTitle和pageDescription 。这些内容将呈现给搜寻器以供SEO就绪页面使用！

那么会发生什么呢？ (So What Happens?)

When a crawler visits your page at http://localhost:3000/#!/home, the URL will be converted to http://localhost:3000/?escaped_fragment=/home, once the Prerender middleware sees this type of URL, it will make a call to the Prerender service. Alternatively, if you are using HTML5mode, when a crawler visits your page at http://localhost:3000/home, the URL will be converted to http://localhost:3000/home/?escaped_fragment=.

当搜寻器通过http://localhost:3000/#!/home访问您的页面时，URL将被转换为http://localhost:3000/?escaped_fragment=/home ，一旦Prerender中间件看到这种类型的URL，它将调用Prerender服务。另外，如果您使用的是HTML5模式，则当某个搜寻器通过http://localhost:3000/home访问您的页面时，该URL将被转换为http://localhost:3000/home/?escaped_fragment= 。

The Prerender service will check and see if it has a snapshot or already rendered page for that URL, if it does, it will send it to the crawler, if it does not, it will render a snapshot on the fly and send the rendered HTML to the crawler for correct indexing.

Prerender服务将检查并查看该URL是否具有快照或已经渲染的页面，如果有，它将发送给搜寻器，如果没有，它将即时渲染快照并发送渲染HTML。搜寻器正确索引。

确保工作正常 (Making Sure It Worked)

Prerender provides a dashboard for you to see the different pages that have been rendered and crawled by bots. This is a great tool to see how your SEO pages are working.

Prerender提供了一个仪表板，供您查看由漫游器渲染和爬网的不同页面。这是查看您的SEO页面如何工作的好工具。

注意事项 (Caveats)

I recently got a chance to chat with the creator of Prerender.io and asked him for some tips on getting your single page app indexed. This is what he had to say:

最近，我有机会与Prerender.io的创建者聊天，并询问了有关将您的单页应用编入索引的一些技巧。这是他不得不说的：

Serve the crawlers prerendered HTML, not JavaScript,
为抓取工具提供HTML，而不是JavaScript，
Don’t send soft 404’s
不要发送软404
If you’re sticking with #’s for your urls, make sure to set the hashPrefix(‘!’) so that the URL’s are rewritten as #!’s
如果您坚持使用＃作为URL，请确保设置hashPrefix（'！'），以便将URL重写为＃！
If you have a lot of pages and content, be sure to include a sitemap.xml and robots.txt
如果页面和内容很多，请确保包含sitemap.xml和robots.txt
Google crawls only a certain number of pages per day, which is dependent on your PageRank. Including a sitemap.xml will allow you to prioritize which pages get indexed.
Google每天仅抓取特定数量的页面，具体取决于您的PageRank。包含sitemap.xml将使您能够优先确定要为哪些页面建立索引。
When testing to see how your AngularJS pages render in Google Webmaster Tools, be sure to add the #! or ?_escaped_fragment_= in the right place as the manual tools do not behave exactly as the actual crawlers do.
在测试以查看您的AngularJS页面在Google网站站长工具中的呈现方式时，请务必添加#! 或?_escaped_fragment_=放在正确的位置，因为手动工具的行为与实际的爬网程序并不完全一样。

结论 (Conclusion)

Hopefully you won't let the SEO drawback of Angular applications hold you back from using the great tool. There are services out there like Prerender and ways to crawl AJAX content. Make sure to look at the Google Webmaster AJAX Crawling Guidelines and have fun building your SEO friendly Angular applications!

希望您不会让Angular应用程序的SEO缺陷阻止您使用出色的工具。有诸如Prerender之类的服务以及用于爬网AJAX内容的方法。确保查看Google网站站长AJAX爬行指南，并乐于构建适合SEO的Angular应用程序！