Question

我有一个单页angularjs网络应用程序。我正在尝试使其可以被搜索引擎抓取。为了达到这个目的，我正在使用prerender.io，一个带有phantomjs浏览器的nodejs webserver来呈现ajax页面。

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

这在很大程度上起作用。我可以卷曲我的应用并获得正确的回复：curl -o test.html domain.com/?_escaped_fragment=/path

请求被重定向到prerender.io代理，代理使用以下网址发出单个请求：domain.com/#!/path

所有其他请求（js，img，css和xhr）正常通过nginx。在等待以下JS变量设置为true后，Phantomjs在呈现代理请求时没有问题：window.prerenderReady = false;

这一切都很棒...... Google可以抓取我的网站！输入 Facebook 。

我正在设置一些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代理在返回响应之前正确等待它们更新。

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

Facebook声称规范网址和og：网址不同，但是当我点击“查看我们的刮刀看到您的网址的确切内容”时，他们就是理想的
当我点击“查看我们的刮刀对您的网址的确切内容”时，规范和og：网址已替换为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这样的东西。如果 useragent = Facebook 或参数包含 _escaped_fragment _ /static网址>然后直接转到代理，然后将用户重定向到＃！/ asset 。

我已经厌倦了所有我能想到的修改nginx配置来使用它然而它已经打败了我。当我拦截那些/static网址并重写代理随机图像时，通过代理和phantomjs崩溃请求css和js资产。

有人可以帮我修改this nginx配置，以便我可以将网络抓取工具请求转发给代理，允许Facebook从我的网站上抓取正确的og标记并在用户时指定正确的链接返回网址在Facebook上分享我的内容？

Answer 1

你有没有想到这个？ Facebook在＃上做得不好！网址。这个StackOverflow答案可以很好地解释它：How to handle facebook sharing/like with hashbang urls?

如果用户位于您网站的页面上（http://domain.com/#!/asset）并在您的网站上执行共享操作，则应该共享规范网址http://domain.com/asset。

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

如果Facebook访问规范网址（http://domain.com/asset），则将其重定向到Prerender.io服务器。

或者......只需从＃切换！到html5 pushstate，你不必做任何＃！重定向到Facebook。这样代理变得更加简单，因此您始终只需代理从Facebook到Prerender.io服务器的任何请求

单页angularjs网站的Nginx配置与Facebook Open Graph的prerender.io一起使用

1 个答案: