ExpressJS下具有HTML5 url模式的AngularJS SEO

Question

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

目前，我正在让我的网站进入 html5mode，它在 url 上不包含 hashbangs，并且看起来更漂亮。但是，即使我去了html5 url，prerender.io也不能正常工作。

另外，我想出了一篇谷歌文章，声称他们的新技术允许引擎自动渲染 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 代码编译成稳定的代码，以便您的代码可以按照您的预期编写，并且可以与任何 3rd 方工具或 pacakges 一起使用。

这是 ES6 的时代！！！

---

最后，我解决了我的问题，以供将来参考以及其他在我遇到的示例问题上苦苦挣扎的人，让我留下我发现的东西。

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

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

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