我即将将Open Graph协议引入现有的HTML5 Web应用程序,我想在不引入任何不必要的问题的情况下包含必要的RDFa数据。
我查看了HTML+RDFa 1.1草稿并将其与Facebook's Open Graph protocol documentation进行了比较,我只需要在lang
元素上设置html
属性并准备好HTML5:
<html lang="en">
<head xmlns:og="http://opengraphprotocol.org/schema/">
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
...
最初,我对HTML5中的RDFa支持感到困惑,有很多消息来源声称无法以有效的方式完成,直到我最终登陆草案。我不是手头的问题专家,所以如果有人可以看看这个并且评论草案在今天的浏览器中所享有的支持,我会很感激。
答案 0 :(得分:16)
W3C验证器嘲笑每个
<meta property="whatever" content...
要求该财产
<meta name="whatever ...
相反,对吗?如果facebook是你最关心的东西,我很高兴地告诉它,它容忍后一种形式,所以就去吧:
<meta name="og:title" content="My nice picture"/>
<meta name="og:type" content="article"/>
<meta name="og:url" content="http://foobar123.com/test/simple.php"/>
使用FB进行测试时:小心,FB缓存页面解析(全局,facebook端,硬重载无效)所以请务必添加“唯一”(但无意义)路径-info或GET参数每当你改变一些东西来测试它的发布时间:
mysite.com/test.php/bogusParam1
mysite.com/test.php/bogusParam2
mysite.com/test.php/bogusParam3
...
mysite.com/test.php?foo=hello
mysite.com/test.php?foo=howdy
mysite.com/test.php?foo=aloha
答案 1 :(得分:6)
HTML5和HTML + RDFa 1.1仍处于开发阶段,这意味着我们现在所说的一切都可能会发生变化。您的问题有两个方面:
对于有效性,您可以定期检查W3C validator中规范的实施状态。它内置了一个实验性HTML5验证器。
HTML5中的命名空间仍然存在争议。他们创造了导致与实际意图不同的DOM的问题,这导致了我的第二个问题:互操作性问题。您可以使用Live Dom Viewer测试标记的处理方式,或使用类似Opera Dragonfly的内容来浏览浏览器中文档的DOM表示。
如果您想更多地探讨HTML5 DOM和RDFa的主题,您可能需要阅读Jenni的blog post。
到目前为止,您的标记确实不是问题,但如果您涉及javascript,则必须注意列的命名空间和值。
答案 2 :(得分:2)
本2009草案似乎正在尝试构建一个验证两者的模式。
答案 3 :(得分:1)
这是在html5中执行此操作的正确方法:
<meta property="http://ogp.me/ns#locale" content="en_US" />
<meta property="http://ogp.me/ns#site_name" content="xxxxxx" />
<meta property="http://ogp.me/ns#type" content="website" />
<meta property="http://ogp.me/ns#title" content="xxxxxxxxxxxx" />
<meta property="http://ogp.me/ns#description" content="xxxxxxxxxxxxxxxx" />
<meta property="http://ogp.me/ns/fb#app_id" content="xxxxxxxxxxxxxxxx" />
...等 希望它有所帮助
答案 4 :(得分:1)
现在有一天,HTML5验证器和Facebook都支持HTML + RDFa 1.1,因此您现在可以只使用属性而不是名称。你也不必乱用html5中的xmlns声明。 og前缀在(RDFa)规范中定义,因此您不必定义它。你可以在html或head标签上明确说出prefix="og: http://ogp.me/ns#"
。