angularjs - ExpressJS 下使用 HTML5 url 模式的 AngularJS SEO

Question

到目前为止，我一直在使用 prerender.io 使我的 angularjs 网站 seo 友好。当涉及到带有 hashbangs 的 url 时，我工作得很好 (website.com/#!)。

目前，我正在让我的网站转到 html5 模式，它不包含 url 上的 hashbangs，而且看起来更漂亮。然而，即使我访问了 html5 url，prerender.io 也无法正常工作。

此外，我想到了一篇 Google 文章，声称他们的新技术允许引擎自动呈现 Javascript 框架网站 (https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html)。但是，当我在 Google Search Console 中使用“Fetch as Google”工具时。它呈现非常糟糕，我的标题和元描述吐出 angularjs 语法({{seo.tile}} 或 {{seo.desc}})，这些语法没有呈现。

我完全迷失了我应该从哪里开始并解决我遇到的问题。我试图摆脱 prerender.io，因为我认为我们不再需要它了。

对于我组织不当的帖子和问题深表歉意。让我尝试澄清并解决以下问题。

1) 我们还需要教 Google 机器人有关 angularjs 的知识吗？

2) AngularJS+ExpressJS SEO 最稳定和最佳实践是什么？我不想为此尝试不稳定且容易崩溃的方法。

非常感谢您的宝贵时间。

Answer 1

编辑在写这篇文章的时候，我还不知道使用 babel 这样的 javascript 编译器。我会在这里说，确保使用 webpack 或 gulp 将你的 ES6 代码编译成稳定的代码，这样你的代码就可以按照你期望的方式编写，并且可以与任何第 3 方工具或包一起工作。

这是 ES6 的时代!!!

---

最后，我解决了我的问题，为了将来引用和其他正在努力解决我所遇到的示例问题的人，让我留下我发现的内容。

首先，我非常困惑的原因是即使我用 phantomjs 拍摄 html 快照，我仍然看到像 {{seo.title}} 和 .非常尴尬的原因是我正在使用 ES6 syntax在我的 angularjs 模块中。由于 phantomjs 没有完全采用 ES6 语法，它无法解释 angularjs 模块，只是用未编译的 angularjs 吐出 html ...由此，我得出了一个意想不到的结论，即现在不是在生产环境中实现 ES6 的好时机。

其次，我不会指望谷歌自信地宣布他们的机器人可以处理带有动态 javascript 框架(如 angularjs)的网站。即使 phantomjs 有效，'Fetch as Google' 工具也不会给我一个好的结果。有时(实际上经常)它只会产生空的 html 文件。自尚Ajax crawling支持作为“后备”，但更稳定的方法，我会指望它而不是指望他们非常不稳定的智能机器人。

总而言之，不要过早采用它，尤其是如果您要利用它做生意的话!!对于 angularJS SEO，(1) 遵循 Ajax 调用指南，即使被认为已弃用，(2) 不要将 ES6 语法用于严肃的编程内容。