搜索引擎如何处理AngularJS应用程序?

我看到AngularJS应用程序关于搜索引擎和SEO的两个问题:

1)自定义标签会发生什么?搜索引擎会忽略这些标签中的全部内容吗?例如，假设我有

<custom>
  <h1>Hey, this title is important</h1>
</custom>

<h1>是否在自定义标记中被索引?

2)有没有办法避免搜索引擎索引{{}}绑定字面上?即。

<h2>{{title}}</h2>

我知道我可以做点什么

<h2 ng-bind="title"></h2>

但是如果我真的想让爬虫“看到”标题呢?服务器端渲染是唯一的解决方案吗?

当前回答

With Angular Universal, you can generate landing pages for the app that look like the complete app and then load your Angular app behind it. Angular Universal generates pure HTML means no-javascript pages in server-side and serve them to users without delaying. So you can deal with any crawler, bot and user (who already have low cpu and network speed).Then you can redirect them by links/buttons to your actual angular app that already loaded behind it. This solution is recommended by official site. -More info about SEO and Angular Universal-

2017-05-16 22:30:26

其他回答

让我们来明确AngularJS和SEO

谷歌、雅虎、必应和其他搜索引擎使用传统的爬行器以传统的方式爬行网络。他们运行机器人抓取网页上的HTML，在此过程中收集信息。他们保留有趣的单词，并寻找到其他页面的其他链接(这些链接，它们的数量和数量将与SEO发挥作用)。

那么为什么搜索引擎不处理javascript网站呢?

答案与搜索引擎机器人通过无头浏览器工作的事实有关，它们通常没有javascript渲染引擎来渲染页面的javascript。这适用于大多数页面，因为大多数静态页面并不关心JavaScript是否呈现其页面，因为它们的内容已经可用。

对此我们能做些什么呢?

幸运的是，大型站点的爬虫程序已经开始实现一种机制，允许我们使JavaScript站点可爬行，但这需要我们对站点进行更改。

如果我们将hashPrefix改为#!而不是简单的#，那么现代搜索引擎将更改请求使用_escaped_fragment_而不是#!(在HTML5模式下，即我们没有哈希前缀的链接，我们可以通过查看后端的User Agent头来实现相同的功能)。

也就是说，不是来自普通浏览器的请求，看起来像:

http://www.ng-newsletter.com/ !/注册页面

搜索引擎将使用以下方法搜索页面:

http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page

我们可以使用ngRoute的内置方法来设置Angular应用的哈希前缀:

angular.module('myApp', [])
.config(['$location', function($location) {
  $location.hashPrefix('!');
}]);

并且，如果我们使用html5Mode，我们需要使用meta标签来实现这个:

<meta name="fragment" content="!">

提醒，我们可以用$location服务设置html5Mode():

angular.module('myApp', [])
.config(['$location', 
function($location) {
  $location.html5Mode(true);
}]);

处理搜索引擎

我们有很多机会来决定如何以静态HTML的形式将内容实际交付给搜索引擎。我们可以自己托管后端，我们可以使用服务托管后端，我们可以使用代理来交付内容，等等。让我们来看看一些选择:

自托管

We can write a service to handle dealing with crawling our own site using a headless browser, like phantomjs or zombiejs, taking a snapshot of the page with rendered data and storing it as HTML. Whenever we see the query string ?_escaped_fragment_ in a search request, we can deliver the static HTML snapshot we took of the page instead of the pre-rendered page through only JS. This requires us to have a backend that delivers our pages with conditional logic in the middle. We can use something like prerender.io's backend as a starting point to run this ourselves. Of course, we still need to handle the proxying and the snippet handling, but it's a good start.

通过付费服务

将内容导入搜索引擎最简单、最快的方法是使用服务Brombone、seo.js、seo4ajax和prerender。IO是其中的一个很好的例子，它将为您提供上面的内容呈现。当我们不想处理运行服务器/代理时，这是一个很好的选择。而且，它通常非常快。

要了解更多关于Angular和SEO的信息，我们在http://www.ng-newsletter.com/posts/serious-angular-seo.html上写了一个关于它的广泛教程，我们在我们的书ng-book: The Complete book on AngularJS中更详细地介绍了它。请登录n-book.com查看。

2013-12-24 20:05:37

这种情况已经发生了巨大的变化。

http://searchengineland.com/bing-offers-recommendations-for-seo-friendly-ajax-suggests-html5-pushstate-152946

如果你使用: 美元locationProvider.html5Mode(真正的); 你准备好了。

不再有渲染页面。

2014-02-19 22:35:32

使用像PreRender这样的东西，它可以创建站点的静态页面，这样搜索引擎就可以索引它。

你可以在这里找到它适用于哪些平台:https://prerender.io/documentation/install-middleware#asp-net

2015-02-23 10:31:52

在这里可以找到一个好的实践:

http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag

2014-03-16 13:56:49