AngularJS 在 ExpressJS 下使用 HTML5 url 模式的 SEO

SEO for AngularJS with HTML5 url mode under ExpressJS

到目前为止,我一直在使用 prerender.io 使我的 angularjs 网站 seo 友好。当涉及到 urls 和 hashbangs (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 因为我认为我们不再需要它了。

抱歉我的组织不善 post 和问题。让我试着把下面的问题弄清楚。

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

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

非常感谢您的宝贵时间。

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

ES6时代来了!!!


最后,我解决了我的问题,为了将来参考和其他遇到我遇到的示例问题的人,让我留下我发现的内容。

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

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

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