Welcome to GeebArt - The Front-End of Technology and Interactive Experiences

Facebook Open Graph in Header

By: Geeb
On: April 29, 2011

I’ve started to notice some consistent errors in some of my WordPress backed sites in regards to posting links onto Facebook. The magical keyword that solved all of my problems was Facebook Open Graph. This is a Facebook specific protocol that allows the social network to understand the meta data of your site. Without it, you may not have a featured image or a description appear. Open Graph allows Facebook to connect with your site in many different ways. This includes like buttons, profile streams, and linked content. Understanding and implementing this protocol is essential for survival in the blogoshpere.

open graph protocol logo Facebook Open Graph in Header

Facebook Open Graph in the Header

In the head of your header.php document place the following code,

  • <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml” xmlns:og=”http://opengraphprotocol.org/schema/”
  • <?php language_attributes(); ?>>

  • < ?php if (have_posts()):while(have_posts()):the_post();endwhile;endif;?>

  • <!– Facebook Opengraph –>
  • <meta property=”fb:app_id” content=”your_app_id” />
  • <meta property=”fb:admins” content=”your_admin_id” />
  • <meta property=”og:url” content=”<?php the_permalink() ?>”/>

  • < ?php if (is_single()) { ?>    </meta>
  • <meta property=”og:title” content=”<?php single_post_title(”); ?>” />    </meta>
  • <meta property=”og:description” content=”<?php echo strip_tags(get_the_excerpt($post->ID)); ?>” />
  • <meta property=”og:type” content=”article” />    </meta>
  • <meta property=”og:image” content=”<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>” />

  • < ?php } else { ?>    </meta>
  • <meta property=”og:site_name” content=”<?php bloginfo(‘name’); ?>” />    </meta>
  • <meta property=”og:description” content=”<?php bloginfo(‘description’); ?>” />
  • <meta property=”og:type” content=”website” />    </meta>
  • <meta property=”og:image” content=”<?php bloginfo(‘template_url’) ?>/path/to-your/logo.jpg” />< ?php } ?></meta></html>

This code will allow Open Graph protocol, and establish linked meta data. This will grab a post title, its featured image, and the excerpt attached to this post. To save on server loads, you can type the blog name and descriptions in with simple HTML.

So, instead of,

<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />

You could put in,

<meta property="og:site_name" content="Geebart" />

Placing more than one “og:image” is also a good idea. If the post does not have a featured image, a default/backup is always good practice. I simply uploaded an image in the media library and copy/pasted its permalink/url.

Find out more info about Facebook Open Graph on the Open Graph website, and this reference.

Auto generating excerpts are generally a terrible idea as far as SEO goes, but I do use an Advanced Excerpt Plugin to cover some extra bases. This will help with the meta content summaries for Facebook Open Graph.