Open Graph validation for HTML5

For HTML5, add this to your html element like described on ogp.me and keep your og: prefixed properties:

<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
     <meta property="og:type" content="website" />
     ...

For XHTML (like OP's question), use the name attribute instead of property attribute. Facebook lint will throw a warning, but the meta value will still be recognized and parsed.

<meta name="og:title" content="Hello Facebook" />

Yes. To validate as HTML5, add the prefix attribute from the Open Graph docs:

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Valid HTML5!</title>
<meta charset="utf-8"/>
<meta property="og:title" content="">
</head>
<body></body>
</html>

Copy and paste the above to the w3 validator to check.

It is production ready – Apple uses this method on apple.com.

The short answer is no, not at this time. All other answers are workarounds, hacks, or just plain crazy. The only long-term solution is that Facebook needs to create an alternate syntax that is valid HTML5.

To those recommending targeting Facebook by the "facebookexternalhit" User Agent, you have to remember that other companies are following Facebook's lead with these tags. For example, Google+ will fall back to the OpenGraph tags if their preferred Schema.org markup isn't present. Since most sites aren’t using Schema.org attributes (especially if they’re spending the time to use OpenGraph correctly), you can easily miss out on enhancing your snippets on sites like Google+ by following this advice.

With the ubiquity of Facebook, it really isn't a good solution to target them directly--even if their choice of implementation is problematic for developers. When looking for solutions on a site like Stack Overflow, you always have to remember that there can be unforeseen consequences to these methods.

For our main sites, we've stuck with XHTML+RDFa for validation sake, and it's worked well enough. I'm hoping that as HTML5's usage grows, the Facebook team will start accepting a valid format for this metadata.

As for why we care about validation: We've found that validation, when possible, helps to alert us to errors in our pages by not teaching us to ignore them. Since we all use validation extensions in our browsers, we know instantly if there's a validation error (or warning) on a page, and can investigate whether it's possible to eliminate it (which 99+% of the time it is). This saves us time dealing with restrictive implementations of the specs, especially on fringe and mobile platforms nowadays. We've seen a huge reduction in odd bugs because we're aware of our pages being valid and know that what's going on in the browser doesn’t have to do with invalid markup that a particular UA might not interpret as expected.

These meta tags are only required when facebook scans the page for these tags.

    <? 
    if(eregi("facebookexternalhit", $_SERVER['HTTP_USER_AGENT'])){

      echo '<meta property="og:type" content=xxxxxxxxxxxxx';
      // continue with the other open graph tags
    }
   ?>

The said tags will only be present when facebook needs them - this method with PHP removes them completely for all other instances including W3C validation.

Open Graph validation for HTML5

Related

Recent Posts