Facebook Scraper和使用HTML5Mode Hashbang URL的Angular应用程序

Question

我在我的Angular应用程序中添加了SEO支持

http://staging.lovented.com

我配置了包括 Hashbang urls 的 Html5Mode

 $locationProvider.html5Mode(true).hashPrefix('!');

通过这样做，两个URL都是有效的。

http://staging.lovented.com/contest/extension_test_contest

http://staging.lovented.com/#!/contest/extension_test_contest

然后我设置了元标记，如下：

<meta name="description" content="{{description}}">

 <!--Facebook Meta Tags-->
<meta property="og:title" content="{{title}}" />
<meta property="og:url" content="{{siteUrl}}#!{{contentUrl}}" />
<meta property="og:description" content="{{description}}" />
<meta property="og:image" content="{{serviceUrl}}{{imageUrl}}" />

如果我访问这个页面http://staging.lovented.com/contest/extension_test_contest

元标签会动态设置，谷歌的爬虫会在url末尾添加转义片段并拍摄快照。您可以点击下面的链接查看页面源代码，所有内容都在那里。

http://staging.lovented.com/contest/extension_test_contest?_escaped_fragement_=

但是 Facebook 爬虫的工作方式是查找 URL 中的 #! 并将其替换为转义片段，因此对于 Facebook 分享，我会分享这个 URL http://staging.lovented.com/#!/contest/extension_test_contest。

但是，如果我在 Facebook 调试器中运行此 URL，则似乎无法抓取该站点。

https://developers.facebook.com/tools/debug/og/object/

所以，Google爬虫肯定会工作，但我不确定为什么Facebook不能抓取我的页面。有什么建议吗？

- Ammar Khan

Answer 1

由于Facebook在抓取时没有使用<meta name="fragment" content="!">，因此如果URL中没有#!，Facebook将会作为常规页面进行抓取，而不会添加_escaped_fragment_查询参数...其他社交网络也是如此（至少在我为应用程序进行SEO时是这样的）...

为了解决这个问题，您可以根据用户代理添加检测。从prerender.io中有很好的示例，演示如何完成：

Apache: https://gist.github.com/thoop/8072354 Nginx: https://gist.github.com/thoop/8165802

- Bogdan Savluk

---

我成功地配置了我的服务器来处理这些内容。因此，如果我从页面中删除所提到的“meta”，并且只是打开Html5Mode而不使用hashbang，Facebook应该可以抓取我的页面。我是对的吗？ - Ammar Khan

是的，Facebook会正确地抓取它...但不要删除这个标签 - Facebook会忽略它，但对于搜索引擎（Google、Yandex、Bing）正常工作是必需的。 - Bogdan Savluk

是的，它可以与_escaped_fragment_一起使用（我的URL中有一个错别字，抱歉）...关于使用用户代理检测Facebook，请再次检查您的配置...相同的规则对我来说工作正常（在nginx上）-例如，在此网站上：http://cultprostir.com.ua/uk/post/predmetniy-prostir-radosti - Bogdan Savluk

嗯，我会再检查一下我的配置，很快回复你。 - Ammar Khan

这确实是一个服务器端的问题。Prerender.io真是救命稻草。无论如何，感谢你的帮助。 - Ammar Khan