SEO 友好的国际化 Polymer.dart

Question

我在 Polymer 元素中显示国际化字符串，如下所示：

<div>
  <span class="content">{{myContent}}</span>
</div>

...并具有以下飞镖代码：

@observable String myContent;

//...

void onUpdateLocale(_locale) {
  myContent = getMyContent();
}

//...

getMyContent() => Intl.message('All my content ...', name:'myContent',
    desc: 'This is my content',
    args: [],
    examples: {'None' : 0});

但是；当 Google 抓取应用程序时，它只提取“{{myContent}}”而不是它的插值，即实际的国际化内容。有没有办法解决这个问题并制作一个对 SEO 友好的国际化 Polymer.dart 应用程序？

Answer 1

不是很清楚。尽管最近 Google 宣布他们正在评估 Javascript 来索引页面，但我还没有看到任何关于这与服务器呈现页面方法的比较的深入评估。

然后是 Bing 等非 Google 搜索引擎的问题。

目前的 Polymer 并没有真正进行服务器端渲染，据我所知，团队没有计划在不久的将来提供。

如果您的项目/业务依赖于 SEO，我不会冒险使用聚合物。

您有两种选择来解决这个问题：

1. 每当爬虫请求页面时，使用 phantom.js 在服务器端呈现页面。

2. 使用第三方服务，如 ajaxsnapshots。

3. 忘记聚合物并使用 react.js 组件框架。 React 有一种方法可以在服务器端渲染虚拟 DOM。如果您使用的是 node.js 框架，这将无缝地工作。 JVM 框架以及带有 Javascript 引擎的 Java 6+ 应该可以实现（在 Java 8 中大大改进。谷歌“nashhorn”）。

Answer 2

Google 有一个规范，可让您在所有必要的 Javascript（或 Dart）运行到搜索引擎后提供页面 HTML 的快照：https://developers.google.com/webmasters/ajax-crawling/

基本思想是在服务器端呈现页面，然后遵循一组 URL 约定，让您以一种不会与伪装混淆的方式为搜索引擎提供预生成的 HTML。

Google、Bing、Yandex 和一些社交机器人支持此规范。

您可以自己实现此规范或使用为您执行此规范的服务（我为其中之一工作：https://ajaxsnapshots.com）该解决方案通常在 Web 服务器级别插入，因此您无需进行任何更改到您的应用。

Answer 3

所以，除了我刚刚查看的有关数据绑定的文档之外，我对 Polymer 了解不多。它似乎与 Google 的 AngularJS 非常相似，因为它以声明性方式使用 JavaScript 将数据呈现到 HTML 文档中。在这种情况下，浏览器仍然基本上将对 {{something}} 的底层调用视为原始字符串。然后，JS 库将这些数据更改为屏幕上的文本。

既然如此，您可能会考虑像 Angular 开发人员那样处理 SEO。这是有关该主题的权威资源：http://www.yearofmoo.com/2012/11/angularjs-and-seo.html