具有HTML5Mode Hashbang网址的Facebook Scraper和Angular App [英] Facebook Scraper and Angular App with HTML5Mode Hashbang urls
问题描述
我在Angular应用中添加了seo支持
I added seo support in my Angular app
我配置了包括Hashbang网址的Html5Mode
I configured Html5Mode including Hashbang urls
$locationProvider.html5Mode(true).hashPrefix('!');
这样做，两个网址都有效
By doing this both urls are valid
http://staging.lovented.com/contest/extension_test_contest
http://staging.lovented.com/#!/contest/extension_test_contest
然后我设置元标记，例如
Then I setup the meta tags like
<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抓取网站的方式和系统将获取快照.您可以单击下面的链接，查看页面的来源.一切都在那里.
the meta tags set dynamically, the way google crawl the site by appending escaped fragment at the end of url and system will take the snapshot. You can click on the below link and see the source of the page. Everything is there.
> http://staging.lovented.com/contest/extension_test_contest?_escaped_fragement_=
但是Facebook搜寻器的工作方式为#！在网址中并将其替换为转义的片段，以便进行fb共享，我将共享此网址 http://staging.lovented.com/#!/contest/extension_test_contest
But the way facebook crawler would work, it looks for #! in the url and replace it with escaped fragment so for fb share I would share this url http://staging.lovented.com/#!/contest/extension_test_contest
但是，如果我在Facebook Debugger中运行此URL，似乎不会刮擦该网站.
But If I run this url in Facebook Debugger, it not seems to scrape the site.
https://developers.facebook.com/tools/debug/og/对象/
因此，Google搜寻器肯定可以工作，但是我不确定为什么Fb不会抓取我的页面.有什么建议吗?
So, Google crawler would definitely work but I am not sure why Fb not scrape my page. Any suggestion please?
推荐答案
这是因为Facebook在抓取时未使用<meta name="fragment" content="!">，因此，如果url中没有#!-Facebook会将其作为常规页面获取而不会添加_escaped_fragment_查询参数...
It is because facebook is not using <meta name="fragment" content="!"> when scraping, so if there is no #! in url - facebook will fetch it as a regular page without adding _escaped_fragment_ query parameter…
其他社交网络也是如此(至少是在我为应用程序进行SEO时)…
The same is true for other social networks(at least it was, when I was doing SEO for my application)…
要解决此问题，您可以添加基于用户代理的检测. 有很好的例子可以从prerender.io做到这一点:
To handle this issue you can add detecting based on user agent. There is good examples how this can be done from prerender.io:
Apache: https://gist.github.com/thoop/8072354
Nginx: https://gist.github.com/thoop/8165802
这篇关于具有HTML5Mode Hashbang网址的Facebook Scraper和Angular App的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
