如何使用 AngularJS、Mustache、Handlebars 等客户端模板引擎对 Facebook Open Graph 友好元标记 [英] How to do Facebook Open Graph friendly meta tags with client-side template engines like AngularJS, Mustache, Handlebars

问题描述

根据我的测试，Facebook 的爬虫不会像浏览器一样呈现客户端模板.

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

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

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.

Facebook 的人可以确认一下吗?我问过#mobiledevcon 的 Open Graph 负责人，她说 Facebook 可以渲染像 {{value}}

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}}

我的元标记如下，它们在每个浏览器中都能很好地呈现.但是 Facebook Open Graph Debugger 只能看到原始文本，而不是插入的内容.

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}}">

推荐答案

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

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

Facebook 爬网程序下载服务器提供的 HTML.Facebook 爬虫不会执行任何 JavaScript，就像所有爬虫都不会执行 JavaScript.这是由于安全限制和速度原因(他们没有时间在他们的服务器上执行 JavaScript.)

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.

提示:您可以使用诸如 phantom.js 之类的东西在服务器端呈现您的页面并提供此服务到爬虫.

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

这篇关于如何使用 AngularJS、Mustache、Handlebars 等客户端模板引擎对 Facebook Open Graph 友好元标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！