Facebook开放图谱元标签和有效的HTML

Question

根据Facebook的要求，为了使用他们的“喜欢”按钮和开放图谱元标记，您需要将类似以下内容的代码放入您的HTML页面中。

可能是重复：
属性属性的HTML验证错误

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>

他们在干什么？这不是有效的HTML，属性'property'从来都不是meta标签的属性，为什么Facebook会使用它而不是<meta name="og:title" content="The Rock" />？

我不愿意在我的网站上尝试使用有效的'name'代替'property'，因为如果我尝试并且在我的网站上不起作用，那么在我测试时点击“喜欢”的任何人都会失败。那么...有人知道如果我使用'name'代替'property'，这仍然有效吗？

- 3urdoch

---

为什么要在实际环境中进行测试？如果这是一个重要的更改，那么值得设置暂存区以进行适当的测试。 - Ross

Answer 1

不要忘记要在html标签中声明一些模式，尤其是通过xmlns:og="http://opengraphprotocol.org/schema/"添加Open Graph的模式。OG基于RDFa，它将附加属性添加到meta标记中。

完成后，请确保添加您的fb:like - <fb:like href="http://developers.facebook.com/" width="450" height="80"/> - 该示例非常简单。不要忘记添加xmlns:fb="http://www.facebook.com/2008/fbml"，否则你会很难过。

这个回答解决了关于meta标记验证的问题，按照这个回答所述的做法可以让您通过任何w3c验证器。

- NG.

---

是的，我都明白了，而且一切都正常工作！但是添加模式并不会改变“property”不是<meta>属性的事实。 - 3urdoch

它不是标准属性，所以额外拉取的模式会告诉浏览器属性的含义，并且由于使用了模式而得到验证。 - NG.

这些模式（schemas）附加在命名空间“fb”和“og”中，因此它们只会影响这些命名空间中的标签，而不是全局命名空间中的标签。因此，唯一可能是这样的情况是如果标签是<fb:meta property ...或<og:meta property... - 3urdoch

不需要任何黑客技巧，答案在这里：https://dev59.com/amw15IYBdhLWcg3wntAQ#25575860 - Justin