Javascript 一页网站 |谷歌、OG 和元数据答案

【问题标题】：Javascript One-page websites | Google, OG & MetadataJavascript 一页网站 |谷歌、OG 和元数据
【发布时间】：2016-02-22 17:05:03
【问题描述】：

我们正在构建一个网站，考虑到最新的一页推荐。上个月谷歌宣布了他们实现网页的新方法： http://googlewebmastercentral.blogspot.nl/2015/10/deprecating-our-ajax-crawling-scheme.html

这种新的爬取方式（其实是理解 Javascript 渲染）正式弃用了旧的“Hashbang”技术（#!）：https://developers.google.com/webmasters/ajax-crawling/docs/learn-more

我们选择了以下设置：

当我们以 Google bot 的形式（在网站管理员工具中）获取页面时，我们会获得一个预览，其中网站看起来与最终用户的外观相同。这很好，因为它证明了 Google 的新准则并且似乎是可行的方法。

问题在于元数据。当我们抓取页面时，“原始”HTML 当然不会呈现。 Facebook 的 OG linter 也无法处理 Javascript，因此从 Javascript 中编辑元数据似乎是一个糟糕的选择。

从 PHP 设置元数据似乎是开销，因为它创建了数据所在的第二个位置..

我发现的解决方案（如 prerender.io）都依赖于旧的 Google 方式 (#!)。如您所见，我们需要一些符合 Google 的“新方式”的输入/SEO 建议，包括对元数据（SEO 和 OG）的支持。

提前致谢！

【问题讨论】：

我投票结束这个问题，因为它是关于 SEO 的
它是关于使用正确的技术来构建一个可靠的单页系统（其中渲染元数据确实是更好的 SEO 的一部分）。也许我没有得到 stackoverflow 的指导方针，但我只能想象在 Google 的指导方针改变后，很多人对这个话题感兴趣。 @约翰康德
现在我们将在服务器上呈现元数据。对于未来的项目，我们正在研究“同构 JavaScript”的原则：nerds.airbnb.com/isomorphic-javascript-future-web-apps

【解决方案1】：

Facebook（Twitter、LinkdedIn、Google+??）机器人无法渲染 JavaScript。所以你必须在原始 html 代码中设置你的 OG 标签，即在后端。

这是目前的现状。

【讨论】：

感谢您的回复！这似乎是我们必须处理的事情，但是双重代码呢？如果元数据是唯一呈现在服务器上的东西，而其他一切都在客户端上，你将如何实现这一点。双重代码似乎是一种不好的做法..
一种可能的解决方案是将渲染页面提供给 Facebook、Twitter、机器人链接。您可以使用预渲染或自定义工具渲染您的页面。