html5 - 搜索引擎如何处理AngularJS应用程序？(How do search engines deal with AngularJS applications?)

Question

I see two issues with AngularJS application regarding search engines and SEO: (我看到了有关搜索引擎和SEO的AngularJS应用程序两个问题：)

1) What happens with custom tags? (1）自定义标签会怎样？) Do search engines ignore the whole content within those tags? (搜索引擎会忽略这些标签中的全部内容吗？) ie suppose I have (即假设我有)

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

would <h1> be indexed despite being inside custom tags? (<h1>是否位于自定义标签中仍会被索引？)

2) Is there a way to avoid search engines of indexing {{}} binds literally? (2）有没有一种方法可以避免搜索引擎将{{}}编入索引的字面绑定？) ie (即)

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

I know I could do something like (我知道我可以做类似的事情)

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

but what if I want to actually let the crawler "see" the title? (但是，如果我想让搜寻器“看到”标题怎么办？) Is server-side rendering the only solution? (服务器端渲染是唯一的解决方案吗？)

  ask by luisfarzati translate from so

Answer 1

Use PushState and Precomposition (使用PushState和预合成)

The current (2015) way to do this is using the JavaScript pushState method. (当前（2015年）的实现方法是使用JavaScript pushState方法。)

PushState changes the URL in the top browser bar without reloading the page. (PushState更改顶部浏览器栏中的URL，而无需重新加载页面。) Say you have a page containing tabs. (假设您有一个包含标签的页面。) The tabs hide and show content, and the content is inserted dynamically, either using AJAX or by simply setting display:none and display:block to hide and show the correct tab content. (选项卡隐藏和显示内容，并且可以使用AJAX或通过简单地设置display：none和display：block来隐藏和显示正确的选项卡内容，从而动态插入内容。)

When the tabs are clicked, use pushState to update the url in the address bar. (单击选项卡后，使用pushState更新地址栏中的URL。) When the page is rendered, use the value in the address bar to determine which tab to show. (呈现页面后，使用地址栏中的值确定要显示的选项卡。) Angular routing will do this for you automatically. (角路由将自动为您执行此操作。)

Precomposition (预合成)

There are two ways to hit a PushState Single Page App (SPA) (有两种方法可以打入PushState单页应用程序（SPA）)

1. Via PushState, where the user clicks a PushState link and the content is AJAXed in. (通过PushState，用户单击PushState链接，然后将内容AJAXed到其中。)
2. By hitting the URL directly. (通过直接点击URL。)

The initial hit on the site will involve hitting the URL directly. (网站上的最初匹配将涉及直接匹配URL。) Subsequent hits will simply AJAX in content as the PushState updates the URL. (当PushState更新URL时，随后的命中内容将只是AJAX。)

Crawlers harvest links from a page then add them to a queue for later processing. (抓取工具从页面中收集链接，然后将其添加到队列中以供以后处理。) This means that for a crawler, every hit on the server is a direct hit, they don't navigate via Pushstate. (这意味着对于爬虫而言，服务器上的每个命中都是直接命中，它们不会通过Pushstate进行导航。)

Precomposition bundles the initial payload into the first response from the server, possibly as a JSON object. (预组合将初始有效负载捆绑到服务器的第一个响应中，可能作为JSON对象。) This allows the Search Engine to render the page without executing the AJAX call. (这使搜索引擎无需执行AJAX调用即可呈现页面。)

There is some evidence to suggest that Google might not execute AJAX requests. (有证据表明Google可能不会执行AJAX请求。) More on this here: (在此更多信息：)

https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo (https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precomposed-a-spa-may-become-the-holy-grail-to-seo)

Search Engines can read and execute JavaScript (搜索引擎可以读取和执行JavaScript)

Google has been able to parse JavaScript for some time now, it's why they originally developed Chrome, to act as a full featured headless browser for the Google spider. (Google能够解析JavaScript已有一段时间了，这就是他们最初开发Chrome的原因，以充当Google蜘蛛的全功能无头浏览器。) If a link has a valid href attribute, the new URL can be indexed. (如果链接具有有效的href属性，则可以为新URL编制索引。) There's nothing more to do. (没什么可做的了。)

If clicking a link in addition triggers a pushState call, the site can be navigated by the user via PushState. (如果另外单击链接触发了pushState调用，则用户可以通过PushState导航该站点。)

Search Engine Support for PushState URLs (搜索引擎对PushState URL的支持)

PushState is currently supported by Google and Bing. (Google和Bing当前支持PushState。)

Google (谷歌)

Here's Matt Cutts responding to Paul Irish's question about PushState for SEO: (这是马特·卡茨（Matt Cutts）回应保罗·爱尔兰（Paul Irish）有关PushO for SEO的问题：)

http://youtu.be/yiAF9VdvRPw (http://youtu.be/yiAF9VdvRPw)

Here is Google announcing full JavaScript support for the spider: (以下是Google宣布对蜘蛛的完整JavaScript支持：)

http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html (http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html)

The upshot is that Google supports PushState and will index PushState URLs. (结果是Google支持PushState并将索引PushState URL。)

See also Google webmaster tools' fetch as Googlebot. (另请参阅以Googlebot身份获取Google网站站长工具。) You will see your JavaScript (including Angular) is executed. (您将看到您的JavaScript（包括Angular）已执行。)

Bing (ing)

Here is Bing's announcement of support for pretty PushState URLs dated March 2013: (以下是Bing宣布支持日期为2013年3月的漂亮PushState URL：)

http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/ (http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/)

Don't use HashBangs #! (不要使用HashBangs＃！)

Hashbang urls were an ugly stopgap requiring the developer to provide a pre-rendered version of the site at a special location. (Hashbang网址是一个丑陋的权宜之计，要求开发人员在特定位置提供网站的预渲染版本。) They still work, but you don't need to use them. (它们仍然有效，但是您不需要使用它们。)

Hashbang URLs look like this: (Hashbang URL如下所示：)

domain.com/#!path/to/resource

This would be paired with a metatag like this: (它将与这样的元标记配对：)

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

Google will not index them in this form, but will instead pull a static version of the site from the _escaped_fragments_ URL and index that. (Google不会以这种形式将它们编入索引，而是会从_escaped_fragments_ URL中提取网站的静态版本并对其进行索引。)

Pushstate URLs look like any ordinary URL: (Pushstate URL看起来像任何普通URL：)

domain.com/path/to/resource

The difference is that Angular handles them for you by intercepting the change to document.location dealing with it in JavaScript. (区别在于Angular通过拦截JavaScript中对document.location的更改来为您处理这些更改。)

If you want to use PushState URLs (and you probably do) take out all the old hash style URLs and metatags and simply enable HTML5 mode in your config block. (如果您想使用PushState URL（并且您可能会这样做），请删除所有旧的哈希样式URL和元标记，然后在配置块中启用HTML5模式。)

Testing your site (测试您的网站)

Google Webmaster tools now contains a tool which will allow you to fetch a URL as google, and render JavaScript as Google renders it. (Google网站管理员工具现在包含一个工具，该工具可让您以google形式获取网址，并以Google呈现的方式呈现JavaScript。)

https://www.google.com/webmasters/tools/googlebot-fetch (https://www.google.com/webmasters/tools/googlebot-fetch)

Generating PushState URLs in Angular (在Angular中生成PushState URL)

To generate real URLs in Angular, rather than # prefixed ones, set HTML5 mode on your $locationProvider object. (要在Angular中生成真实的URL，而不是前缀的＃，请在$ locationProvider对象上设置HTML5模式。)

$locationProvider.html5Mode(true);

Server Side (服务器端)

Since you are using real URLs, you will need to ensure the same template (plus some precomposed content) gets shipped by your server for all valid URLs. (由于您使用的是真实网址，因此您需要确保服务器为所有有效的网址提供了相同的模板（加上一些预先组合的内容）。) How you do this will vary depending on your server architecture. (如何执行此操作将取决于服务器体系结构。)

Sitemap (网站地图)

Your app may use unusual forms of navigation, for example hover or scroll. (您的应用可能会使用异常的导航形式，例如，悬停或滚动。) To ensure Google is able to drive your app, I would probably suggest creating a sitemap, a simple list of all the urls your app responds to. (为了确保Google能够驱动您的应用，我可能建议您创建一个站点地图，这是您的应用所响应的所有网址的简单列表。) You can place this at the default location (/sitemap or /sitemap.xml), or tell Google about it using webmaster tools. (您可以将其放置在默认位置（/ sitemap或/sitemap.xml），也可以使用网站站长工具将其告知Google。)

It's a good idea to have a sitemap anyway. (无论如何，拥有一个站点地图是一个好主意。)

Browser support (浏览器支持)

Pushstate works in IE10. (Pushstate可在IE10中使用。) In older browsers, Angular will automatically fall back to hash style URLs (在较旧的浏览器中，Angular将自动回退到哈希样式的URL)

A demo page (演示页面)

The following content is rendered using a pushstate URL with precomposition: (以下内容是使用带有预先组成的pushstate URL呈现的：)

http://html5.gingerhost.com/london (http://html5.gingerhost.com/london)

As can be verified, at this link , the content is indexed and is appearing in Google. (可以验证的是，在此链接上 ，内容已被索引并显示在Google中。)

Serving 404 and 301 Header status codes (提供404和301标头状态代码)

Because the search engine will always hit your server for every request, you can serve header status codes from your server and expect Google to see them. (由于搜索引擎将始终为每个请求命中服务器，因此您可以从服务器提供标头状态代码，并期望Google看到它们。)