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 attribute 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.
Related
Okay, I can not figure this out for the life of me. I created a new site, and wanted to add the open graph meta tags like on my old site (which is working fine). When I added these to my new site and tested them in facebook debugger, it says that they are not present. I get this back when I test it:
Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Also, it is not finding the image even though it is there as well. Here is the code from my site as follows:
<meta property="fb:admins" content="100002683693547" />
<meta property="og:title" content="JDerry Art" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.jderry.com/2015" />
<meta property="og:image" content="http://www.jderry.com/2015/images/link.jpg" />
<meta property="og:description" content="Art and Illustration by J. Derry" />
<meta property="og:site_name" content="JDerry Art" />
my new site URL is: http://www.jderry.com/2015/
I have tried all suggestions for similar issues on here and other forums, as well as tried moving the order of the tags to no avail...
Any and all help will be greatly appreciated as this is starting to drive me nuts as there appears to be no definite answer and all suggested solutions yield the same problem. Thanks in advance.
P.S. My old site was xhtml and my new site is HTML5, not sure if that has any influence on this issue?
When you are using Open Graph Object Debugger . make sure you check the time last scraped and make sure its up to date with the changes on your website.
you can click on fetch new scrape information , to get the new data. and right now your open graph tags are working fine .
These are the raw tags that we found
Meta Tag <meta property="fb:admins" content="100002683693547" />
Meta Tag <meta property="og:title" content="JDerry Art" />
Meta Tag <meta property="og:type" content="website" />
Meta Tag <meta property="og:url" content="http://www.jderry.com/2015" />
Meta Tag <meta property="og:image" content="http://www.jderry.com/2015/images/link.jpg" />
Meta Tag <meta property="og:description" content="Art and Illustration by J. Derry" />
Meta Tag <meta property="og:site_name" content="JDerry Art" />
I was having the same problem, and what was causing it for me was that the content of og:url was just mywebsite.com, and not http://www.mywebsite.com.
The problem for me was that I had ipv6 enabled for my site and I didn't had a proper configuration in my web server settings.
HEY GUYS HERE'S MY ANSWER, i HOPE IT WORKS FOR YOU AS WELL: I try'ed every sugestion I can get my hands on, and what worked for me was this:
go to: https://developers.facebook.com/tools/debug/og/object/
Once you are there, paste the URL from the web page you wish to share in the box, and hit the button "retrieve information from the new extraction"
After you do this, it will appear some information, WHAT YOU ARE GOING TO NEED from this information, is the "og:update_time" element, on the right side of this element you will have a number, you are going to need to add this element along with this number to your meta information, someting like this:
meta property="og:updated_time" content="1496821331"
every number for every page is UNIQUE, but I find that if you put the same number in more than one web page it still works, but you may wanna put the specific number for each web page you are going to need (NOTE: in my experience,
you DONT need to have the image in the same directory as the meta is, actually, I use an image from google images and work out just fine!)
this is an example of the og:updated_time
I hope this can help you guys.
How I fixed this issue:
Turns out that the facebook scraper was timing out before it could get the content. You can check if this is happening to you with this tool. It will give a red error message if it is indeed timing out.
I'm making a wordpress site so I fixed this with the "Super Cache" plugin, which caches the content so that the facebook scraper can load it fast enough to not timeout. You still have to scrape multiple times (up to 4) with the sharing debugger for all the content to come through and work because the image loading is asynchronous.
I have an H.264-encoded mp4 file that I'm trying to get embedded into a Facebook post when the page that's serving it is Liked or Shared.
My understanding is that I simply need to have the right Open Graph <meta> tags in place on the URL that's being liked/shared. However, I've tried several different sets of <meta> tags and the video is still not embedding when I paste the URL into my Status Update and Post it. It does embed the image from the og:image property, but clicking on the image just passes the user off to og:url.
When I use the the Facebook Debugger tool, here's what it displays for Raw Open Graph Document Information:
Meta Tag: <meta property="fb:app_id" content="000000000000000" />
Meta Tag: <meta property="og:url" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag: <meta property="og:title" content="Example Page" />
Meta Tag: <meta property="og:description" content="Example Description" />
Meta Tag: <meta property="og:site_name" content="Example" />
Meta Tag: <meta property="og:image" content="http://content.example.com/images/example.png" />
Meta Tag: <meta property="og:type" content="video.other" />
Meta Tag: <meta property="og:video:width" content="400" />
Meta Tag: <meta property="og:video:height" content="300" />
Meta Tag: <meta property="og:video" content="http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d" />
Meta Tag: <meta property="og:video:type" content="application/x-shockwave-flash" />
Meta Tag: <meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0" />
Meta Tag: <meta property="og:video:type" content="video/mp4" />
Meta Tag: <meta property="og:video" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag: <meta property="og:video:type" content="text/html" />
The values above have been replaced with dummy values, but they're all valid links.
Facebook seems to parse this out correctly, since it shows under Type of Share -> Video:
status: Video embedding on Facebook enabled
1: application/x-shockwave-flash
2: text/html
When I go directly to the flash player url (http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d), the video plays correctly (embedded in the flash player).
Things I've tried/considered:
Skipping the flash player
Originally I didn't even have a flash player in the og:video list and was trying to just use the mp4 file first. Facebook didn't pick it up and treated the like/share as a plain link share.
Whitelisting
At one point apps/domains had to be whitelisted before embedded video was allowed. This is no longer necessary. I haven't whitelisted my domain.
HTTPS
Some sources say that the flash player being used needs to be hosted over HTTPS. My research indicates this should only apply if the user is browsing Facebook over HTTPS, which I haven't been when testing.
I'm currently running some tests with an HTTPS-served flash player to see if anything changes.
Older tags
For the heck of it, I tried adding older Facebook <meta> and <link> tags (e.g. title, video_src) to see if it would pick them up. It did not.
Cache refresh
I passed a ?fbrefresh=1 along with the URL in the Facebook Debugger to make sure the cached version of the URL got cleared. That did result in the newest meta information getting pulled in, but still no embed.
iPad
Since I've got the video/mp4 fallback in my og:video tags, I looked at my Facebook news feed in the iPad app. Excitingly, the thumbnail image had a little play button overlayed on it. However, touching the play button resulted in a redirect to the share URL instead of playing the video inline. Safari on the iPad had the same behavior (but with no play button overlay).
Document namespaces
I added the appropriate Open Graph / Facebook namespaces to my markup:
<html xmlns:og="http://ogp.me.ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#">
But it didn't seem to have an effect. I don't think they're required.
Is there something that I'm missing here? I feel like a lot of resources I've found so far could be outdated since Facebook has changed their API several times, so it's possible that I've missed a newer requirement.
How can I get the video to embed and play back within the Facebook timeline?
Having a look at YouTube's og: meta tags, the only differences I can spot are:
YouTube's og:url and og:video are served from the same domain and subdomain (www.youtube.com). Mine are served from the same domain, but different subdomains (media: content.example.com, player: static.example.com). Does the subdomain have to be the sam across all of the og: meta information?
YouTube's share URL isn't a straight .swf per se, but it is flash content:
rob#uvm:~$ curl "http://www.youtube.com/v/oHg5SJYRHA0?version=3&autohide=1" > yt
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 4242 100 4242 0 0 43522 0 --:--:-- --:--:-- --:--:-- 55815
rob#uvm:~$ file yt
yt: Macromedia Flash data (compressed), version 10
Just realized that one of my URLs is actually on a different domain. I have a feeling that's the culprit. I'm moving some stuff around now to try it out. I've updated my meta tag data above. Feel a bit sheepish for not making this observation up front.
Here's what ended up working for me.
<!-- These two aren't necessary for embedding. -->
<meta property="og:site_name" content="Example">
<meta property="fb:app_id" content="000000000000000">
<!-- These are mostly needed. A few are probably still optional, but they're all good to have. -->
<meta property="og:type" content="movie">
<meta property="og:title" content="Example Page">
<meta property="og:description" content="Example Description">
<meta property="og:url" content="http://www.testdomain.com/path/to/shared/page">
<meta property="og:image" content="http://content.example.com/images/example.png">
<meta property="og:video" content="http://static.example.com/player.swf?file=http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0&autoplay=true">
<meta property="og:video:type" content="application/x-shockwave-flash">
<!-- Not necessary, but might (can't find up-to-date docs) be used for iOS fallback. -->
<meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0">
<meta property="og:video:type" content="video/mp4">
Some observations and useful information:
Flash player
I switched to using JWPlayer since its query parameter flashvars configuration was slightly simpler than FlowPlayer's. I think I could have gotten FlowPlayer to work with a bit more effort. JWPlayer also has a nice instructional page for Facebook embedding. (Note: many Flash players require a purchased license for commercial use - make sure you get one if necessary.)
Open Graph <meta> tags
Using movie worked for for og:type. I was originally using video and video.other. Those probably work as well, but using movie definitely worked for me.
The following og: properties were not necessary for embedding: fb:app_id, og:video:width, og:video:height.
Note the URLEncoded file query parameter. Needing to do this should be fairly obvious, but keep in mind to encode the parameter values separately. The ampersand (&) before autoplay=true was XMLEncoded before getting added to the page markup. The ampersand was correctly decoded when viewing it in the Facebook Debugger's "Object Properties" section.
Hosting the content and shared url on separate subdomains didn't matter. The only domain concerns that might cause problems are within the flash player itself, and can be avoided with a correctly-configured crossdomain.xml on the content server.
Facebook Debugger Tool observations
The Debugger Tool's "Type of Share" section was slightly misleading:
This is what it showed when I had both application/x-shockwave-flash and video/mp4 types. I would have expected it to have two items in this list, but it just had the second. Despite that, the flash player still embedded.
I was initially wondering if Facebook was getting caught up with the URLEncoded parameters when I saw that it was showing everything represented as unicode:
However, looks like that's not a problem. Don't let it confuse you.
HTTPS
The code above doesn't embed with https Facebook browsing. Additionally, the og:video:secure_url meta property didn't work (maybe due to this). What I ended up doing was serving both the flash player and its source mp4 file parameter over https. The resulting meta tag looked something like:
<meta property="og:video" content="https://static.example.com/player.swf?file=https%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4&autostart=true" />
The og:video was the only one that needed to be over https; og:image, og:url, etc. were okay still being served over http.
Hopefully this'll help others avoid the dead ends and red herrings that I ran into while debugging and learning about all of this.
FYI video/mp4 is currently valid here in 2014.
See the meta provided on this page (ctrl-f mp4):
Seems like facebook only accept application/x-shockwave-flash or video/mp4 not text/html.
MIME type of the video. Either application/x-shockwave-flash or video/mp4.
https://developers.facebook.com/docs/sharing/webmasters
I installed the official facebook wordpress plugin, it helps to automatically add the following lines of code to my page:
<meta property="http://ogp.me/ns#locale" content="en_US" />
<meta property="http://ogp.me/ns#site_name" content="XXX" />
<meta property="http://ogp.me/ns#type" content="article" />
<meta property="http://ogp.me/ns#title" content="Contact" />
<meta property="http://ogp.me/ns#url" content="http://XXX.com" />
<meta property="http://ogp.me/ns/fb#app_id" content="XXX" />
Now I want to add a LIKE BOX to my page,
http://developers.facebook.com/docs/reference/plugins/like-box/
When I choose 'XFBML' code, it showed:
"Add an XML namespace to the tag of your document. This is necessary for XFBML to work in earlier versions of Internet Explorer."
<html xmlns:fb="http://ogp.me/ns/fb#">
My question is that do I still need to add this one line of code considering I already got the "meta property" added above? If I add this, would it conflict with "meta property"??
Also which versions of IE need that line of code?
Thanks!!
<html xmlns:fb="http://ogp.me/ns/fb#">
My question is that do I still need to add this one line of code considering I already got the "meta property" added above?
You would still need that, because it has nothing to do with Open Graph meta elements (which just provide some info about the document for “outside” parties like Facebook’s scraper), but with how the browser treats “unknown” tags in your document (and <fb:like-box> is such an unknown tag, because it does not exist in HTML).
If I add this, would it conflict with "meta property"??
No, there is no potential for any sort of “conflict” here.
Also which versions of IE need that line of code?
I don’t know exactly, but I’d guess at least 6 & 7.
If for some reason (CMS, whatever) you can not add this to the HTML element – then you can just use the HTML5 version of the plugin code instead – that uses just a normal DIV element, and that is not “unknown” to any browser. (Your document’s doctype does not have to be the HTML5 one for this to work.)
I installed some meta tags in my wordpress blog (header file), example:
<meta property="fb:app_id" content="340807095947367" />
<meta property="og:site_name" content="My Website" />
<meta property="og:description" content="Description HERE" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.mywebsite.com/img/tinypic.png" />
And this are working fine with all wordpress posts and pages but it fails with home (main page). Seems that Facebook can't find these meta tags in my home, but they are in source code.
I really don't know what is causing this error, so i can't fix it.
With the facebook open graph debugger the home URL seams to return 503 bad response most of the times, but occationlly 200 OK. If you want a handy way to "emulate" the Facebook fetch bot yourself and fiddle around check out Facebook isn't crawling my site
The warning about "Inferred Property" is because your home URL does not explicitly provide og:url and og:title tags. Add something like this to the home URL document:
<meta property="og:title" content="Porto de Mós Online - O Portal do seu Concelho" />
<meta property="og:url" content="http://www.portodemosonline.com/" />
Also the home URL seams to have some kind of broken BOM header (0x09 0xef 0xbb 0xbf) before the doctype that might confuse. 0x09 is tab so i would suspect that some PHP file is outputting this somehow, maybe a junk tab outside the <?php ?> tags.
To the point above, I wanted to add a little specificity. At the top of the tags in the header.php file, (wordpress) my template file ALSO had ?>. I removed the "!DOCTYPE" and all is indeed well.
I would hat for someone to use a plugin who doesn't need to and can still get all the benefits of the XFBML/HTML5 attributes this code can offer.
Thanks for staying with it and posting this. I know it's not a discussion, but there's a little detail in there. ;)
I would suggest that rather than adding custom open graph parameters, try to use this plugin:
http://wordpress.org/extend/plugins/wp-facebook-open-graph-protocol/
This plugin is well and works fine. I am using this for my blog.
Problems like this are the reason I wrote a plugin to handle it -- Complete Open Graph. I've tried other plugins past, and found them to make some strange assumptions about content I want to use for Open Graph, or just be waaaaaay too much code bloat for what I want to use it for. I think mine is the perfect balance of works-out-of-the-box, and yet flexible enough for developers to filter as they need. You should check it out!
https://wordpress.org/plugins/complete-open-graph/
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.
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.
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.
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!
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...
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.
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>
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.
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.
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.