How-To Write Valid Facebook Meta Tags in XHTML

Saturday, 10th November 2012

It is a well-known fact that Facebook tags cause W3C Validator errors. This type of errors also cause browsers to delay (slightly) the display of pages while trying to fix such errors.

The trick below causes browsers to ignore this type of tags while, at the same time, allows Facebook to properly retrieve them when needed.

Normally, your meta tags will look like this:
<meta property='og:type' content='blog' />
<meta property='og:title' content='content' />
<meta property='og:url' content='http://www.your-url.com' />
<meta property='og:site_name' content='sitename' />
<meta property='fb:app_id' content='fb-app-id' />
 
The trick is to enclose these tags within a CDATA tag as follows:
<div xmlns:og="http://ogp.me/ns#" style="display:none;"> <![CDATA[ <!--OpenGraph section--> 
<meta property='og:type' content='blog' />
<meta property='og:title' content='content' />
<meta property='og:url' content='http://www.your-url.com' />
<meta property='og:site_name' content='sitename' />
<meta property='fb:app_id' content='fb-app-id' />
]]> </div>
This will work perfectly in all browsers since the DIV tag is actually hiding itself and asking the browser to treat the data as CDATA instead of tags.