HTML5 and RDFa support_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-25 14:36 出处：网络

I\'m about to introduce the Open Graph protocol to an existing HTML5 Web application and I\'d like to include the necessary RDFa data without introducing any unnecessary crud.

I'm about to introduce the Open Graph protocol to an existing HTML5 Web application and I'd like to include the necessary RDFa data without introducing any unnecessary crud.

I've looked at the HTML+RDFa 1.1 draft and comparing it with Facebook's Open Graph protocol documentation, I just need to set the lang attribut开发者_如何学Pythone on the html element and it's HTML5 ready:

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

Initially, I grew confused about RDFa support in HTML5 with so many sources claiming it cannot be done in a valid manner, until I finally landed on the draft. I'm no expert on the matters at hand, so I'd appreciate if someone could take a look at this and also comment about the support the draft enjoys in today's browsers.

The W3C validator moans about every

<meta property="whatever" content...

demanding that the property shall be

<meta name="whatever ...

instead, right? If facebook is, what you mostly care about, I am happy to tell, it tolerates the latter form, so just go for it:

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

When testing with FB: Beware, that FB caches page parsings (globally, facebook-side, hard reload won't help) so make sure to add a 'unique' (but pointless) path-info or GET Parameter to the url everytime you change something to test facebook-posting of it:

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

Both HTML5 and HTML+RDFa 1.1 are still in development, it implies that everything we say her now might be subject to change. There are two sides of your questions:

Is it valid?
Will it create interoperability issues?

For the validity, you might check at regular pace the implementation status of specifications in the W3C validator. It has an experimental HTML5 validator built into it.

Namespaces in HTML5 are still pretty much in debate. They create issues leading to a different DOM from what is really intended, which leads to my second question: interoperability issues. You can test how the markup is handled with a Live Dom Viewer or use something like Opera Dragonfly to explore the DOM representation of the document in the browser.

If you want to explore the topic of HTML5 DOM and RDFa a bit more, you might want to read Jenni's blog post.

Your markup so far is not really an issue, but if you involve javascript, you will have to be careful about namespaces and values with columns.

This 2009 Draft seems to be trying to build a schema which validates for both.

http://dev.w3.org/html5/rdfa/rdfa-module.html

This is the corect way to doit in 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" />

etc... hope it helps

Now a days, The HTML5 validator and Facebook both support HTML+RDFa 1.1, so you can just use property instead of name now. You also don't have to mess with xmlns declarations in html5. The og prefix is defined in the (RDFa) spec, so you don't have to define it. You could explicitly say prefix="og: http://ogp.me/ns#" on the html or head tag though.