javascript - 单页网站 ~ 关于索引和社交媒体共享的最佳实践和方法

Question

在我问我的问题之前，这里有一个元问题:我可以在这里发布这个问题吗？这是关于最佳实践的，但问题是相当具体的。而且我没有看到更好的 StackExchange 网站来询问这个问题。

我即将开始开发一种单页网站。它将包括文章等的 Collection View 以及所述文章的更详细 View 将在覆盖层中异步加载。所以它不是一个真正的异步单页站点，我不会使用 Angular 或排序，但为了简单起见，我将把它称为单页站点。

新出现的问题是该站点将严重依赖社交媒体共享，并且需要由搜索引擎抓取工具正确编入索引。

不用说，当我在异步加载的叠加层中阅读一篇有趣的文章时，我决定在社交网络上复制粘贴 URL(即 http://www.onepagesite.com)；东西不会工作。

我正在查看 url 的转义部分，以便可以链接到覆盖页面。在浏览到第 1 条覆盖时，会将客户端 url 重写为 http://www.onepagesite.com/#!article/1

但是，现在抓取成为一个问题，因为机器人(facebook、google 等)不执行 js，也不等待加载异步内容。

他们确实有一个独特的用户代理。因此，一种解决方案是嗅探用户代理并向机器人提供与人类客户端不同的 html 文件。

我能想到的另一个解决方案是使 URL 成为应用程序的实际状态，通过以下示例进行解释:

• 当用户浏览到一篇文章时，该文章将被异步加载并且 url 将被重写为 http://www.onepagesite.com/#!article/1
• 然后，当用户或机器人直接请求此 url(因为它已被共享或其他原因)时，后端将吐出在单个同步加载中生成该应用程序状态所需的所有 html ，以便机器人可以为页面编制索引并且用户将能够以异步方式继续浏览。

此解决方案要求后端的工厂/页面呈现部分以与客户端 javascript 重写 url 完全相同的方式工作。

现在，作为单页网站的绝对新手，这就是我认为可行的解决方案。

所以这是我的问题:

• 这是一个可行的解决方案吗？如果是的话，是否应该采取不同的方式来做一些事情，或者我错过了道路上的任何重大障碍？
• ...或者我完全看错了方向，有没有更明显和更简单的方法来处理这个项目？

我仍在布置我的项目的总体结构，所以我仍然相当灵活，因此问题

Answer 1

您正在寻找的是使 ajax 可抓取。还好，Google has figured this out for you .

简短的版本是你使用 hash-bang 片段，就像你所展示的那样 (#!article/1)，当爬虫程序爬行时会询问你(使用 之后的部分) code>#! 作为一个名为 __escaped_fragment 的查询参数)，你返回相关内容。链接中的详细信息。

他们给出的例子都有key=value风格的片断，例如:

http://example.com#!article=21

...机器人这样要求:

http://example.com?_escaped_fragment_=article=21

...然后您将文章的内容返回给机器人。