Question

我们刚刚使用AngularJS更新了我们网站的部分内容 - 尤其是登录页面。当我查看Google中的搜索结果时，缓存页面及其自动显示的小片段是原始Angular标记。所以，很多{{model.username}}，{{model.errorMessage}}等

我没有将结果链接起来，因为它太尴尬了。

如何让Google将页面实际存储为原始HTML？

Answer 1

角度搜索引擎优化是一个非常大的问题/问题，具体取决于您的观点。我首先阅读http://www.ng-newsletter.com/posts/serious-angular-seo.html和http://www.yearofmoo.com/2012/11/angularjs-and-seo.html，以帮助您入门。

总结您的主要选择：

更改您的路由系统以使用hashbang（#!）。然后google和facebook等网站会在查询您的网页之前将hashbang转换为_escaped_fragment_。这为您的服务器提供了返回不同html的机会。
使用像http://prerender.io这样的服务，它会为您预渲染和缓存您网站的渲染版本，这些服务将提供给谷歌代替您的网站。

例如，与reddit和stumbleupon共享等问题仍然存在问题，因为它们很懒，并且不希望开发以迎合基于角度的网站。因此，在某些情况下，您必须具有创造性。

更新：我们在最近的项目中做的一件事是查看各种用户代理，以确定爬网系统是否要求页面信息。通过这种方式，我们可以随心所欲地提供服务。

Answer 2

如果您通过测试某些内容将您的尴尬转化为我们所有人的社区服务，那将是非常好的，因为您看到的情况很少有人承认或想要自我复制。：）

谷歌被认为相对（或非常，取决于你的要求）擅长忽略隐藏的内容。当人们过去通过使用设置为“display：none”或者具有微小/不可读/白色白色字体的块来关键字填充内容时，他们实现了这种方式。

你所看到的不仅仅是SEO的问题，所以我建议这样做，因为像prerender.io这样的东西很棒，但它们只能解决这一问题。那些只是浏览器速度慢的用户呢？好吧，事实证明，Angular有一个很好的解决方案，称为ngCloak。它隐藏了诸如模板内容字段（ngModel映射和绑定，表达式等）之类的内容，直到Angular准备好将它们填充为自己。

实现这一点非常容易;你只需要一小块CSS（在早期加载的文件中，或直接嵌入到你的HTML页面中）：

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

然后将ngCloak指令应用于受影响的项目，或应用于高级父项（如ng-view DIV）：

<div id="wrapper" ng-cloak>
    <!-- Page content here -->
</div>

这有点像no-js目标，但特别适用于AngularJS。

你仍然需要特定的东西给谷歌提供实际上好的材料，但至少在上面你可以过滤掉其他所有内容。

Raw AngularJs标记出现在Google搜索结果页面中

2 个答案: