Victor's Blog about PHP, Zend Framework & Cake PHP

This blog is about PHP in general. It tackles various topics related to the language itself especially at the OOP level, discusses various topics related to Zend Framework and shares my experience with Cake PHP. I believe that mastering technology is heavily based on one's ability to discuss its details and share knowledge with others. Technology is a wide wild world after all!

How-To Write Valid Facebook Meta Tags in XHTML

Printable Version

victor | 10 November, 2012 08:08

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.
 
Related Articles:

Comments

Add comment
 
Accessible and Valid XHTML 1.0 Strict and CSS