我有一个单页 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 时,我遇到了一些问题。
- Facebook 声称规范 URL 和 og:url 不同,但是当我单击“查看我们的抓取工具为您的 URL 看到的确切内容”时,它们是相同的
- 当我单击“查看我们的抓取工具为您的 URL 看到的确切内容”时,canonical 和 og:url 已替换为
domain.com/?fb_locale=en_GB#!/asset
- 代理收到 3 个请求。资产的第一个似乎遵循规范和 og:url
- 当用户单击喜欢此页面 iFrame 时,返回到我的网站的链接看起来像
domain.com/?_escaped_fragment_=/asset
第 4 个问题是破坏交易的问题。如果用户喜欢我帖子上的某个页面,它将进入他们的 Facebook 活动流。如果该用户然后在他们的流中单击返回到我的站点的链接,它将引导他们通过代理并通过 phantomjs 呈现页面!
我猜我不应该通过 Facebook 与 hash-bang 分享链接。我想我应该分享一个链接并将规范 / og:url 设置为domain.com/static/asset
. 应该更新 nginx 配置以捕获/static
url,如果useragent = Facebook或参数包含_escaped_fragment_然后直接到代理,否则将用户重定向到#!/asset。
我已经厌倦了所有我能想到的让修改后的 nginx 配置来处理它,但它打败了我。当我拦截这些/static
url 并随机重写到代理图像时,通过代理请求 css 和 js 资产,并且 phantomjs 崩溃。
有人可以帮我修改这个nginx 配置,以便我可以将网络爬虫请求转发到代理,允许 facebook 从我的网站上刮下正确的 og 标签,并在用户在 Facebook 上分享我的内容时指定正确的链接返回 url?