Question

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

http://staging.lovented.com

我配置了Html5Mode，包括Hashbang网址

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

通过这样做，两个网址都有效

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

动态设置元标记，google通过在网址末尾附加转义片段来抓取网站的方式，系统将拍摄快照。您可以单击以下链接查看页面来源。一切都在那里。

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

但是facebook抓取器的工作方式，它会寻找＃！在网址中并将其替换为转义片段，以便fb共享我会分享此网址http://staging.lovented.com/#!/contest/extension_test_contest

但是如果我在Facebook调试器中运行此网址，它似乎并没有刮掉网站。

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

所以，Google抓取工具肯定会有用，但我不确定为什么Fb不会刮掉我的页面。有什么建议吗？

Answer 1

这是因为Facebook在抓取时没有使用<meta name="fragment" content="!">，所以如果网址中没有#!，则facebook会将其作为常规页面获取而不添加_escaped_fragment_查询参数... < / p>

对于其他社交网络也是如此（至少当我为我的应用程序做SEO时）......

要处理此问题，您可以添加基于用户代理的检测。有很好的例子可以从prerender.io：

完成

Apache：https://gist.github.com/thoop/8072354

Nginx：https://gist.github.com/thoop/8165802

Facebook Scraper和Angular App与HTML5Mode Hashbang网址

1 个答案: