如何使用客户端模板引擎(如AngularJS,Mustache,Handlebars)进行Facebook Open Graph友好元标记

aru*_*com 7 facebook opengraph mustache handlebars.js angularjs

根据我的测试,Facebook的抓取工具不像浏览器那样呈现客户端模板.

我想不惜一切代价避免使用Web服务器并为Open Graph对象构建HTML文件.我想通过URL动态生成元标记,但似乎Facebook无法做到这一点.

有人可以通过Facebook确认吗?我在#mobiledevcon问Open Graph的负责人,她说Facebook可以渲染像{{value}}这样的东西

我的元标记如下,它们在每个浏览器中都可以正常显示.但Facebook Open Graph Debugger只能看到原始文本,而不是内插内容.

<meta property="{{meta.property}}" content="{{meta.content}}">
Run Code Online (Sandbox Code Playgroud)

The*_*ppo 12

当你想到它应该很清楚,为什么这不起作用.

Facebook抓取工具在服务器提供服务时下载HTML.Facebook抓取工具不会执行任何JavaScript,因为所有抓取工具都不会执行JavaScript.这是由于安全限制和速度原因(他们没有时间在他们的服务器上执行JavaScript.)

没有办法解决这个问题.如果您希望抓取工具为您的页面编制索引,则需要直接为他们提供您希望他们阅读的内容.

提示:您可以使用类似phantom.js的内容在服务器端呈现您的页面并将其提供给抓取工具.

  • 这个答案是现实的.我写了一篇关于相对无痛的工作的文章:http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app/,不需要phantom.js,只是某种服务器端语言(PHP,Ruby,等等). (5认同)