Valid HTML meta tags for Facebook link thumbnails
How to use Facebook’s Open Graph meta tags in your website and still write valid XHTML 1.0 markup.
If you want a specific image to display in Facebook when a link to your website is posted to someone’s wall, you can leave it to chance. If an appropriate image is found by Facebook, that will become the thumbnail. If not, your link will have no thumbnail.
The problem with this simple approach is that Facebook will look for anything to use as a thumbnail, and that might be a graphic button or an advertisement on your page, rather than your key image.
You can tell Facebook which image (or images) to select as thumbnails by inserting some custom meta tags of the following format:
<meta property="og:image" content="http://www.mywebsite.com/my-image.jpg" />The problem is that this code isn’t valid XHTML 1.0 Strict or Transitional, and therefore won’t validate. If this is a problem for you, there are two solutions:
Solution 1: Change the doctype
I discovered this non-validation issue whilst employing WP-Thumbie and Facebook and Digg Thumbnail Generator on my blog. Facebook utilises the Open Graph Protocol, which means that for the above meta tags to validate, the doctype needs to be changed to include RDFa compliance, as shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">Be warned! This can cause many more problems than it solves. When I applied the above doctype to my WordPress blog, the above meta tags validated but my formatting was spoilt. It would have taken a lot more work to fix everything, so this option really isn’t recommended.
Solution 2: Change your meta tags
A far better option is to change your meta tags so that they validate as XHTML and will still work in Facebook.
In my case, the meta tags were generated by the Facebook and Digg Thumbnail Generator plugin. To achieve validation, one can simply change this code in facebook-and-digg-thumbnail-generator.php:
foreach($meta_imgs as $img){
echo '<meta propery="og:image" content="'.$img.'" />'."\r\n";
}
into this code:
foreach($meta_imgs as $img){
echo '<meta name="og:image" content="'.$img.'" />'."\r\n";
}
As you will notice, this changes the meta tags into this valid code:
<meta name="og:image" content="http://www.mywebsite.com/my-image.jpg" />Strictly speaking, this revised code doesn’t comply with the Open Graph protocol. However, if one uses Facebook’s URL Linter to check the code, it will be marked as invalid but still work.
Personally speaking, I’d rather my site comprise of valid XHTML and still generate appropriate thumbnails in Facebook than meet the Open Graph standards and fail validation.
If this approach is taken, then it’s possible to substitute Facebook’s recommended code with code that validates, yet still passes Facebook’s URL Linter, as follows:
<meta name="og:title" content="Your website name"/>
<meta name="og:type" content="Your website type"/>
<meta name="og:url" content="http://www.mywebsite.com/mysite/site.php/"/>
<meta name="og:image" content="http://www.mywebsite.com/my-image.jpg"/>
<meta name="og:site_name" content="MySite"/>
<meta name="fb:admins" content="USER_ID"/>
<meta name="og:description" content="Your site description"/>
Comments
4 responses to “Valid HTML meta tags for Facebook link thumbnails”
doesn’t validate in html5
Doesnt seem to work if you provide more than one image!?
(which offers the user to select an image on fb)
Great piece of code .. I’ll try it asap