2010-11-14 108 views
9

我即將向現有的HTML5 Web應用程序介紹Open Graph協議,並希望在不引入任何不必要的垃圾的情況下包含必要的RDFa數據。支持HTML5和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"/> 
    ... 

起初,我從小困惑RDFa的支持在HTML5中有很多消息來源聲稱它不能以有效的方式完成,直到我終於登上了草稿。我不擅長處理手頭的問題,所以如果有人能夠看一下這個並且對今天的瀏覽器所支持的草稿支持發表評論,我會很感激。

+0

RDFa是一個與HTML5完全不同的規範,因此HTML5中的支持將不存在。但並不是說你無法實現它,因爲它是XML,HTML5可以處理以RDF形式發送的XML。 – Rob 2010-11-14 14:07:33

+0

這就是Web讓我感到困惑的地方。我將從HTML + RDFa 1.1草案中提取字幕:「支持HTML4和HTML5中的RDFa」。請看看它! – 2010-11-14 14:19:40

+0

@Rob:不是HTML + RDFa規範,kRON鏈接到HTML5和RDFa的單獨規範?描述如何在HTML5中使用RDFa?從閱讀HTML + RDFa規範開始,它的目標是定義如何在HTML中使用RDFa,即使您沒有將HTML作爲XML提供服務,雖然他們不確定這是否會起作用,因爲它取決於HTML5 spec決定了名稱空間屬性。 – 2010-11-14 16:57:33

回答

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緩存頁面parsings(全球範圍內,臉書側,硬重新加載不會幫助),所以確保每次你改變一些東西來測試Facebook發佈時,確保爲URL添加一個「唯一」(但毫無意義)的路徑信息或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

非常酷!我沒有看到FB接受'name'的地方。 – 2011-04-04 16:42:50

+2

喜歡這個。似乎只有很少的帖子指出這個竅門。 – 2011-04-27 04:04:32

+0

當前版本的W3C驗證器抱怨name屬性的值是無效的。所以這個解決方案似乎讓W3C和FB都感到不安。畢竟,我應該使用「財產」。 – Qtax 2011-08-19 18:54:12

6

HTML5和HTML + RDFa 1.1仍在開發中,這意味着我們現在說的所有內容都可能會發生變化。有兩方面的問題:

  • 它有效嗎?
  • 它會產生互操作性問題嗎?

爲了有效性,您可以定期檢查W3C validator中規範的實施狀態。它內置了一個實驗性的HTML5驗證器。

HTML5中的名稱空間仍然存在爭議。他們創造了導致與真正意圖不同的DOM的問題,這導致了我的第二個問題:互操作性問題。您可以測試如何使用Live Dom Viewer處理標記,或者使用類似Opera Dragonfly的東西來瀏覽瀏覽器中文檔的DOM表示。

如果您想更多地探討HTML5 DOM和RDFa的主題,您可能需要閱讀Jenni的blog post

到目前爲止,您的標記並不是一個真正的問題,但如果涉及JavaScript,則必須小心使用列的名稱空間和值。

1

這是對HTML5的DOIT方式corect:

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

等等 希望它有助於

+2

你能提供一個來源嗎? – joar 2012-08-01 02:22:09

+0

@ joar Proof在最新的[RDFa 1.1入門](http://www.w3.org/TR/rdfa-primer/#using-the-content-attribute)中。另請查看最新的[Validator for HTML5](http://validator.w3.org/nu/),並確保爲RDFa 1.1選擇預設 – snahl 2013-08-04 00:13:49

1

現在是一個天,HTML5的驗證和Facebook都支持HTML + RDFa 1.1,所以你現在可以使用屬性而不是名字。您也不必在html5中混淆xmlns聲明。 og前綴在(RDFa)規範中定義,因此您不必定義它。儘管你可以在html或head標籤上明確地說prefix="og: http://ogp.me/ns#"