Skip to content

Dear Internet Explorer user: Your browser is no longer supported

Please switch to a modern browser such as Microsoft Edge, Mozilla Firefox or Google Chrome to view this website's content.

Combining Open Graph meta tags with valid HTML5

Maintain a valid HTML5 website whilst using Facebook’s Open Graph meta tags on your static page or WordPress blog.

The Open Graph protocol may offer web developers certain opportunities in terms of better integrating their website with Facebook. In essence, the Open Graph protocol enables any web page to become a rich object in a social graph. To achieve this, four meta tags are required per web page at a minimum:

In essence, Facebook wants to read meta tags in the following format in order to properly display that site within its social media platform. The following example includes an fb:admins number, which you can use to associate your content with your Facebook identity and extract valuable metrics about your content. Use FindMyFacebookID to determine your ID number for the purposes of inserting it into your Open Graph meta tags.

<meta content="10750324012392" name="fb:admins" />
<meta property="og:title" content="Title of my page" />
<meta property="og:url" content="http://www.mysite.com/whatever.php" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.mysite.com/path/to/images.jpg" />

This tutorial will describe how these four meta tags can be included semi-automatically on static PHP pages and automatically within WordPress whilst still producing pages that validate against HTML5 standards. This technique avoids the need to change the doctype to RDFa and the other problems that come with that doctype.

Open Graph on Static Web Pages

The trick to getting this to function (and to validate) is to use some basic PHP to serve the content exclusively to Facebook. For most website visitors the code will be invisible, but you can verify that Facebook can read it (and that it’s properly coded) by using Facebook’s Open Graph Debugger.

We’ll use the following PHP code to serve the Open Graph meta tags exclusively to Facebook:

<?php if (stristr($_SERVER["HTTP_USER_AGENT"],'facebook') !== false) { ?>
  /* Your Facebook-readable content here */
<?php } ?>

Inside these tags, we can add our Open Graph protocol meta tags as follows:

<?php if (stristr($_SERVER["HTTP_USER_AGENT"],'facebook') !== false) { ?>
  <meta content="10750324012392" name="fb:admins" />
  <meta property="og:title" content="Title of my page" /> /* will need to hand-code */
  <meta property="og:url" content="<?php $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];echo $url;?>" />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="http://www.mysite.com/path/to/images.jpg" /> /* will need to hand-code */
<?php } ?>

Unfortunately static pages require some manual input. Whilst it’s possible to get PHP to extract the page’s URL, the title of the page and a selected image URL will need to be entered manually for each page that you create. (The image URL should point to an image that you want to represent your web page in Facebook). Don’t forget to change the fb:admins number to represent your own!

Open Graph on WordPress

It’s possible to modify your WordPress theme to serve Open Graph meta tags to Facebook with absolutely no manual entry. We simply use crafted WordPress PHP tags in your theme’s header.php to pull the page’s information, including a Featured Image.

Here’s the code to add to your <head> in your theme’s header.php:

<?php if (stristr($_SERVER["HTTP_USER_AGENT"],'facebook') !== false) { ?>
  <meta content="10750324012392" name="fb:admins" />
  <meta property="og:title" content="<?php wp_title(''); ?><?php if(wp_title(' ', false)) { echo ' | '; } ?><?php bloginfo('name'); ?>" />
  <meta property="og:url" content="<?php $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];echo $url;?>" />
  <?php remove_filter('the_excerpt', 'wpautop'); ?><?php if ( is_singular() ) { ?><meta property="og:description" content="<?php the_excerpt(); ?>" /><? } else { ?><meta property="og:description" content="Your generic website description" /><? } ?>
  <meta property="og:image" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) );?>" />
  <meta property="og:type" content="website" />
<?php } ?>

Again, make sure the fb:admins number is changed.

This code utilises the same concept as before – only Facebook will be able to see it. This code will add a title, URL, Featured Image and excerpt to your meta tags automatically. The only customisation you will need to make is to change the generic website description under og:description. This is a ‘fall back’ should there be no excerpt on the specific page being accessed.

Further Customisation

Facebook offers a vast list of additional Open Graph tags that can be used. The code above can be expanded to include the tags that you believe will add value to your website.

   

Comments

4 responses to “Combining Open Graph meta tags with valid HTML5”

On 8 August 2014, Forrest Ward wrote: Hyperlink chain icon

Thanks for this insight! I am going to try to use this approach with Ajax to dynamically set the META tags for Facebook’s OG on a page item level basis, instead of but including the whole page as the page is also dynamically created for each user.

I’ll let you know if I succeed.

Reply

On 10 August 2014, Adam Dimech wrote: Hyperlink chain icon

Thanks Forrest. Do let us know if you are successful.

Reply

On 14 July 2017, Rafael wrote: Hyperlink chain icon

I discovered that twitter don’t need that we place it’s own meta tags. Twitter can read perfectly OG tags, so I think is a good idea to add Twitter agent to the conditional PHP structure.

;)

Reply

On 22 July 2017, josh reid wrote: Hyperlink chain icon

Hi Adam I have pasted your Open graph on wp code and everything works find apart from the image. I am always getting the invalid url error on face book debugger. I have tried other code and get the same thing. the image i am wanting to see on the posts is an embedded image from you tube that has been been embedded from the user(form). if i paste the image url in manually it works, but i wanted it to do it as the contant and title is done automatically. thanks for your time

Reply

Have Your Say

The following HTML is permitted:
<a href="" title=""> <b> <blockquote cite=""> <code> <em> <i> <q cite=""> <strike> <strong>

Comments will be published subject to the Editorial Policy.