59

Is there any way to get facebook's crappy Open Graph meta tags to validate if my doctype is <!DOCTYPE html> (HTML5)?

Other than facebook's Open Graph meta tags, my document validates perfectly.

I really don't want to use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> as that creates a whole new set of problems.

Here is an example of one of the validation errors in question...

Error Line 11, Column 47: Attribute property not allowed on element meta at this point.

<meta property="og:type" content="website" />

Any help would be appreciated... I have been searching off and on for days to no avail.

Justin
  • 26,443
  • 16
  • 111
  • 128
Scott Greenfield
  • 2,788
  • 2
  • 22
  • 21
  • 4
    The obvious answer is: no, it is invalid HTML5 and as such it cannot possibly validate. Why do you worry about that validator warning? The point of a validator is merely to indicate what *might* be an issue in your code - in this case it clearly isn't one. – Wladimir Palant Jun 28 '11 at 07:39
  • 6
    Well, one reason is that there are theories that validation errors will hurt search engine ranking. Anyway, why would I *not* want a site to validate? – Scott Greenfield Jun 28 '11 at 22:50
  • Because it is sometimes impossible with reasonable approaches? – Wladimir Palant Jun 29 '11 at 08:27
  • 6
    As of the 04/10/2012 I am surprised that the validator will not complain about og-meta information anymore when using the HTML5 conformance checker. – m90 Apr 10 '12 at 07:10
  • Facedesk. And again. And then some. – Roman Starkov Mar 20 '13 at 14:25
  • 2
    RDFa (and Lite), an extension to HTML5, marks the "property" attr as valid and conforming now. see http://www.w3.org/TR/rdfa-primer/ . The Validator, evidently, has been updated to recognize it. – WraithKenny Aug 08 '13 at 17:26
  • 1
    @WraithKenny you are right. I'm using RDFa and it validates very well. – Jonadabe Apr 10 '14 at 09:16
  • @ScottGreenfield perhaps we can change the accepted answer since much has changed since? – WraithKenny May 15 '14 at 17:02
  • Bump. This has been 3 years, please update the accepted answer. People still find this question all the time. – WraithKenny Jun 09 '15 at 15:51

12 Answers12

14

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" />
Blaise
  • 13,139
  • 9
  • 69
  • 97
  • Nice! I actually tried this at the time of the post, and it didn't then, but it does now. – Scott Greenfield Jan 20 '12 at 21:00
  • 11
    This doesn't actually validate. – Chuck Le Butt Feb 07 '12 at 18:09
  • 1
    It validates with OP's doctype (` `). Not with HTML5, which doesn't allow unregistered meta names. – Blaise Feb 10 '12 at 17:03
  • 1
    Yeah, I guess this doesn't validate for HTML5. However, I'd rather use meta name than meta property which is only supported in one obscure doctype (that I know of). To be honest, I stopped caring about finding a "perfect" solution to this since there really isn't one. – Scott Greenfield Feb 13 '12 at 21:16
  • Doesn't seem to work with `fb:app_id`; that one seems to require `property`. – Roman Starkov Jun 26 '12 at 12:03
  • This answer is incorrect for HTML5. The meta `name` attribute must be one of the accepted values. All OG:resource tags have been declined from the accepted values list. The property tag will pass validation by default, but you will get an error "missing name attribute" This is actually a problem with the validator as the RDFa extension does not require both name and property attributes. – runspired Jul 05 '13 at 16:43
  • 1
    Using `name` instead of `property` does not work will all OpenGraph consumers. Namely Internet Explorer’s Reading Mode. – Daniel Sep 16 '14 at 22:50
  • 1
    You can validate in HTML5 by setting a prefix in the HTML tag. See my answer below. http://stackoverflow.com/a/25575860/922522 – Justin Dec 29 '14 at 21:09
13

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.

Justin
  • 26,443
  • 16
  • 111
  • 128
11

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.

justbeez
  • 1,367
  • 7
  • 12
5

Many of the answers here have become outdated. Please don't snoop for headers or write via JavaScript (since the processors might not evaluate the JS).

The W3C Recommendations (Extensions to HTML5) called RDFa 1.1 and RDFa Lite 1.1 (see http://www.w3.org/TR/rdfa-lite/ and http://www.w3.org/TR/rdfa-primer/ ) have made the "property" attribute valid and conforming. In the mean time (since the older answers here) the validator http://validator.w3.org/check recognizes the attribute as valid. In addition, the Open Graph Protocol documentation, http://ogp.me/ , has been updated to reflect RDFa 1.1 (it uses the "prefix" attribute).

The W3C work has been done with input from OpenGraph and schema.org among others to resolve the kind of issue raise by this question.

In short, make sure your OG tags conform to RDFa and you are golden.

WraithKenny
  • 1,001
  • 13
  • 15
5

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.

thejudge
  • 351
  • 3
  • 3
  • 25
    Facebook isn't the only consumer of Open Graph tags. – Matthew Apr 12 '12 at 23:14
  • 2
    yep, twitter card uses them too – Ravi Aug 31 '12 at 13:43
  • 1
    There's a problem with this option: it hides the problem instead of fixing it. Feels back in the days when some sites served different content based on whether they thought you were using IE3 or Netscape (see for example [javascript - Browser detection versus feature detection - Stack Overflow](http://stackoverflow.com/questions/1294586/browser-detection-versus-feature-detection)). This is fragile and closed. The world is already bigger than that, and the future even more. – Stéphane Gourichon Jun 04 '15 at 15:43
4

One recent solution is to register a prefix in the html or head tag:

<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">

or

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">

taken from here - sorry, page is in german...

Kjell
  • 832
  • 7
  • 11
4

More than a Year has passed and the best solution we've got is to wrap the meta tags in some sort of server-side verification.

In PHP I did:

<?php if (stristr($_SERVER["HTTP_USER_AGENT"],'facebook') !== false) { ?>
  <meta property="og:title" content="Title of the page" />
  <meta property="og:url" content="http://www.example.com/" />
  <meta property="og:type" content="website" />
  <meta property="fb:admins" content="123456789" />
  <meta property="og:image" content="http://www.example.com/images/thumb.jpg" />
<?php } ?>

It really works for Facebook. But I really don't like this idea!

Leonel
  • 825
  • 11
  • 19
2

Bad solution for the meta tags. If you wrap those in Javascript then the Facebook Linter won't find them. That's the same as not putting them in at all.

Wrapping like buttons and such in script works to help validate against XHTML 1.0 but not HTML5.

Kenneth Benjamin
  • 378
  • 2
  • 16
  • 1
    As far as FB and Google are happy, and you are not forced to validate by the customer, you should not bother validation ... – Omiod Sep 16 '11 at 15:47
  • @UVL and just carry on with this utmost mess? No, we _should_ validate, and we should try to [stop being so tolerant of barely parseable junk in our HTML](http://programmers.stackexchange.com/questions/152533/). – Roman Starkov Jun 26 '12 at 12:00
1

In JSP:

<%
  String ua=request.getHeader("user-agent").toLowerCase();
  if(ua.matches(".*facebookexternalhit.*")){
  }
%>
<meta property="og:image" content="images/facebook.jpg" />
...
<%
  }
%>

Or:

<c:set var="ua" value="${header['User-Agent']}" scope="page"/>
<c:if test="${ua.matches('.*facebookexternalhit.*')}">
  <meta property="og:image" content="images/facebook.jpg" />
  ...
</c:if>
cupto
  • 19
  • 1
0

Well, Visual Studio 2011 tells me that the "property" attribute is invalid. However, the W3C seems to be a little more lenient:

http://validator.w3.org/check?uri=http%3A%2F%2Fpacificfoods.com%2F

You'll notice that that I added Open Graph tags per Facebook's recommendation to that site, and it does not break the W3C validator, which I consider to be authoritative.

Consulting the official W3C HTML5 specification for the meta tag, it is clear that the use of the "property" attribute (in lieu of the "name", "http-equiv", "charset", or "itemprop" attributes) is not valid. However, their validator validates it (???). I have no explanation for this discrepancy.

Ethan Brown
  • 26,892
  • 4
  • 80
  • 92
-2

I would be inclined to say don't worry about validation, I don't believe having invalid mark up will hurt your search engine ranking. e.g. googles technical recommendations do not mention standards. http://www.google.com/support/webmasters/bin/answer.py?answer=35769#2 . Html5 allows you provide more information to search engines which they can then use, but I can't see them down ranking based on not validating.

However if you feel it helps you to validate you can use 

<script>document.write('<meta property="og:type" content="website" />')</script>

to have these tags present and have a html file that will pass validators.

David Waters
  • 11,979
  • 7
  • 41
  • 76
  • 3
    I considered that, but the whole point of the og meta tags is to allow facebook's sharing to have more details about the page. For example the image to attach to the share. Since facebook's crawler doesn't pick up anything rendered by JavaScript, it doesn't see the meta tags. – Scott Greenfield Aug 20 '11 at 17:44
  • 1
    Yep, in that case I would go back to accepting this one element on the page is not valid html5. – David Waters Aug 22 '11 at 17:18
-2

Although it will cut off non-Javascript users, I've used this

<script type="text/javascript">
//<![CDATA[
document.write('<fb:like href="" send="false" layout="button_count" width="100" show_faces="true" font=""></fb:like>')
//]]>
</script>

and it validated perfectly. It shows and works fine with Firefox, Opera, IE, Chrome, Safari on Windows, and with Firefox, Opera, Safari on Mac.

MrsCassandra
  • 1
  • I've used the same thing for like buttons, as well as tweet buttons, but the OpenGraph tags he is trying to use indeed aren't picked up by Facebook when inserted into a document.write, sadly! – Sherif Oct 24 '11 at 20:07