How to do Facebook Open Graph friendly meta tags with client-side template engines like AngularJS, Mustache, Handlebars

依然范特西╮ 提交于 2019-12-28 15:58:22

问题


According to my testing, Facebook's crawlers do not render client-side templates like a browser.

I want to avoid a webserver and building HTML files for Open Graph objects at all costs. I want to generate the meta tags on the fly via the URL, but it seems Facebook cannot do this.

Can someone from Facebook please confirm? I asked the head of Open Graph at #mobiledevcon and she said that Facebook can render stuff like {{value}}

My meta tags are as follows, and they render fine in every browser. But the Facebook Open Graph Debugger only sees the raw text, not the interpolated content.

<meta property="{{meta.property}}" content="{{meta.content}}">

回答1:


When you think about it it should be clear, why this does not work.

The Facebook crawler downloads the HTML as it is served by the server. The Facebook crawler will not execute any JavaScript, like all the crawler will not execute the JavaScript. This is due to security restrictions and for speed reason (they do not have the time execute JavaScript on their servers.)

There is no way around this. If you want the crawler to index you page, you need to give them directly what you want them to read.

Tip: You could use something like phantom.js to render your pages on the server side and serve this to the crawlers.




回答2:


The solution is basically to use some kind of server-side user-agent detection to pick up whenever a social media crawler arrives.




回答3:


Use the ?_escaped_fragment_ method along with a prerender service. Facebook will respect the same crawlable Ajax specification as Google. Please see https://developers.google.com/webmasters/ajax-crawling/docs/specification



来源:https://stackoverflow.com/questions/16481731/how-to-do-facebook-open-graph-friendly-meta-tags-with-client-side-template-engin

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!