2

我有一个单页 angularjs 网络应用程序。我正在尝试使其能够被搜索引擎抓取。为了实现这一点,我使用了 prerender.io,这是一个带有 phantomjs 浏览器的 nodejs 网络服务器来呈现 ajax 页面。

我的 nginx 配置基于以下要点:https ://gist.github.com/Stanback/6998085

这在大多数情况下都有效。我可以卷曲我的应用程序并获得正确的响应:curl -o test.html domain.com/?_escaped_fragment=/path

请求被重定向到 prerender.io 代理,并且代理使用以下 url 发出单个请求:domain.com/#!/path

所有其他请求(js、img、css 和 xhr)都照常通过 nginx。在等待以下 JS 变量设置为 true 后,Phantomjs 渲染代理请求没有问题:window.prerenderReady = false;

这一切都很棒...... Google 可以抓取我的网站!输入脸书

我正在设置一些 OG 元标记,以便我可以使用 Facebook like 按钮 (iFrame)。为每个页面设置以下元标记:

<link rel="canonical" href="http://domain.com/#!/asset">
<meta property="og:url" content="http://domain.com/#!/asset">
<meta property="og:type" content="website">
<meta property="og:image" content="http://domain.com/image.jpg">
<meta property="fb:app_id" content="xxx">
<meta property="og:description" content="foo">
<meta property="og:title" content="bar">
<meta property="og:site_name" content="domain.com">

这些元标记由 angularjs 为每个资产正确更新,并且 phantomyjs 代理在返回响应之前正确等待它们更新。

但是,当我http://domain.com/#!/asset使用 Facebook URL linter 测试 URL 时,我遇到了一些问题。

  1. Facebook 声称规范 URL 和 og:url 不同,但是当我单击“查看我们的抓取工具为您的 URL 看到的确切内容”时,它们是相同的
  2. 当我单击“查看我们的抓取工具为您的 URL 看到的确切内容”时,canonical 和 og:url 已替换为domain.com/?fb_locale=en_GB#!/asset
  3. 代理收到 3 个请求。资产的第一个似乎遵循规范和 og:url
  4. 当用户单击喜欢此页面 iFrame 时,返回到我的网站的链接看起来像domain.com/?_escaped_fragment_=/asset

第 4 个问题是破坏交易的问题。如果用户喜欢我帖子上的某个页面,它将进入他们的 Facebook 活动流。如果该用户然后在他们的流中单击返回到我的站点的链接,它将引导他们通过代理并通过 phantomjs 呈现页面!

我猜我不应该通过 Facebook 与 hash-bang 分享链接。我想我应该分享一个链接并将规范 / og:url 设置为domain.com/static/asset. 应该更新 nginx 配置以捕获/staticurl,如果useragent = Facebook参数包含_escaped_fragment_然后直接到代理,否则将用户重定向到#!/asset

我已经厌倦了所有我能想到的让修改后的 nginx 配置来处理它,但它打败了我。当我拦截这些/staticurl 并随机重写到代理图像时,通过代理请求 css 和 js 资产,并且 phantomjs 崩溃。

有人可以帮我修改这个nginx 配置,以便我可以将网络爬虫请求转发到代理,允许 facebook 从我的网站上刮下正确的 og 标签,并在用户在 Facebook 上分享我的内容时指定正确的链接返回 url?

4

1 回答 1

1

你想通了吗?Facebook 在#! 方面做得不是很好!网址。这个 StackOverflow 答案很好地解释了它:如何使用 hashbang url 处理 facebook 共享/喜欢?

当用户在您网站上的页面 ( http://domain.com/#!/asset) 上并在您的网站上执行共享操作时,它应该共享规范 url http://domain.com/asset

然后,如果用户访问http://domain.com/asset,您只需将他们重定向到http://domain.com/#!/asset.

如果 Facebook 访问规范 URL ( http://domain.com/asset),则将其重定向到您的 Prerender.io 服务器。

或者...只是从#切换!到 html5 pushstate,你不必做任何 #! 为 Facebook 重定向。这样代理就变得更简单了,所以你总是只需将来自 Facebook 的任何请求代理到你的 Prerender.io 服务器

于 2014-03-22T22:43:08.800 回答