Optimising the Facebook Open Graph Protocol

A small note from Joost first: I’m working on a project with Alex Moss from Pleer. He knows an awful lot about the Facebook Open Graph protocol, in fact he did a couple of pretty good plugins for Facebook comments and buttons etc. I asked him to do a guest post about Open Graph here, which you’ll find below. It fits nicely with my previous post about social buttons, and you should probably know that all of this is integrated and/or will be integrated into my WordPress SEO plugin, you just have to enable Facebook Open Graph on the Indexation page.

Facebook Open Graph ProtocolWhen someone likes or shares a URL on Facebook, data is used to create the title, description, image and other attributes to form structured information about that page via the Facebook Open Graph protocol. This article will show you how to optimise this data.

Facebook & Open Graph’s XML Nameservers

Within the opening <html> tag, the Facebook and Open Graph nameservers need to be included to tell your browser and other parsers that it can expect tags other than HTML:

xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"

an example end result might look something like this:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

Adding some Necessary Facebook Open Graph Tags

Now that we have the XML nameservers in place we can now add a few Facebook Open Graph data entities to the site’s header.

<meta property="og:title" content="<?php the_title(); ?/>"/>
<meta property="og:description" content="<?php
  if ( function_exists('wpseo_get_value') ) {
    echo wpseo_get_value('metadesc');
  } else {
    echo $post-/>post_excerpt;
  }
?>"/>
<meta property="og:url" content="<?php the_permalink(); ?/>"/>
<meta property="og:image" content="<?php echo get_fbimage(); ?/>"/>
<meta property="og:type" content="<?php
  if (is_single() || is_page()) { echo "article"; } else { echo "website";}
?/>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?/>"/>

A note about og:description – I have used the Meta Description from Yoast’s WordPress SEO plugin to generate og:description. If the plugin is not installed then the post’s excerpt will be used instead. On another note, og:descriptioncan allow up to 300 characters. If you’re advanced enough you could replace the META description with a custom field and use that to generate a totally unique description just for Facebook!

Generating the best Image Thumbnail

In the example above, I have used the function get_fbimage();to generate the image thumbnail. Here’s that function:

function get_fbimage() {
  $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '', '' );
  if ( has_post_thumbnail($post->ID) ) {
    $fbimage = $src[0];
  } else {
    global $post, $posts;
    $fbimage = '';
    $output = preg_match_all('/<img .+src=['"]([^'"]+)['"].*/>/i',
    $post->post_content, $matches);
    $fbimage = $matches [1] [0];
  }
  if(empty($fbimage)) {
    $fbimage = "http://mydomain.com/default-image.jpg";
  }
  return $fbimage;
}

This code does 3 things:

  1. Looks for a featured image
  2. If there isn’t a featured image, it looks for the first image within the_content
  3. If there isn’t a featured image or any image within the_contentthen use a default image

og:type – categorising your page type

og:type can describe the type of content the page has. This can encompass many things such as a website, blog, article, product, TV show and many more. Below is a simple example of treating each page and post as an article, and everything else within the site as a website:

<meta property="og:type" content="<?php
  if (is_single() || is_page()) { echo "article"; } else { echo "website";}
?/>"/>

There are several types of page that can be found here. One way you could make og:type more advanced using custom fields. Let’s say I have just written a post about a book I have just read, we can use book within the og:type. I can now insert a custom field named og-type and insert the value book. Once I’ve done this I can now edit the example above to create something more advanced:

<meta property="og:type" content="<?php
$ogtype = get_post_meta($post-/>ID, 'og-type', true);
if ($ogtype != '') {
echo $ogtype;
}  elseif (is_single() || is_page()) {
echo "article";
} else {
echo "website";
  }
?>"/>

The code above looks for the value of the custom field named og-type. If there isn’t a value then it to default values as shown in the basic example.

Some other Facebook Open Graph Tags

The Open Graph tags above are the required tags needed. Below are additional tags you can use to provide even more in-depth detail about that page or site.

Page ID

You can connect your WordPress site to Facebook via Facebook Insights. Once connected, you can view analytics for all sorts of Facebook features. Insert this code to connect your site to Facebook Insights:

<meta property="fb:page_id" content="1234567890" />

App ID

When you add any Facebook App, such as Facebook Comments, to your site you need to link the site to your Facebook Platform application:

<meta property="fb:app_id" content="1234567890" />

Admins

With some Facebook Platform applications, such as Facebook Comments, you don’t need this tag as the admins are managed within the App itself. However, there are certain Facebook Platform applications that will need more management. This tag can be used sitewide or per page so is more useful on larger sites with multiple administrators and moderators. Simply create a comma separated list of admins by profile ID:

<meta property="fb:admins" content="1234,2345,3456" />

You can find your Profile ID by hovering over your Facebook profile picture and taking note of the value after set=pa., for example, mine is ?set=pa.223100916

Contact Info

You can embed your email adress, phone & fax numbers like so:

<meta property="og:email" content="<?php bloginfo('admin_email'); ?/>"/>
<meta property="og:phone_number" content="+44 123 456 7890"/>
<meta property="og:fax_number" content="+1-415-123-4567"/>

Note that I have set og:emailto the WordPress admin email. You may want to change this if the admin email is not one for public knowledge.

Location

As we know, local search is on the increase. Open Graph have added location based tags which can be used for things such as Facebook Places:

<meta property="og:latitude" content="37.416343"/>
<meta property="og:longitude" content="-122.153013"/>
<meta property="og:street-address" content="1601 S California Ave"/>
<meta property="og:locality" content="Palo Alto"/>
<meta property="og:region" content="CA"/>
<meta property="og:postal-code" content="94304"/>
<meta property="og:country-name" content="USA"/>

Audio and Video

Adding audio and video can be very useful for Open Graph. A good example of how this is used is where you can click a video in Facebook and it will play it right there and then, instead of you having to visit the page directly to view it. Here’s an example of how this can be used:

Audio (only supports MP3):

<meta property="og:audio" content="http://example.com/amazing.mp3" />
<meta property="og:audio:title" content="Amazing Song" />
<meta property="og:audio:artist" content="Amazing Band" />
<meta property="og:audio:album" content="Amazing Album" />
<meta property="og:audio:type" content="application/mp3" />

Video (only supports SWF):

<meta property="og:video" content="http://example.com/awesome.swf" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />

That wasn’t so painful, was it?

You can check that your tags have been implemented correctly by using Facebook’s URL Linter. You can find more information about the Facebook Open Graph protocol at ogp.me as well as at facebook.com.

An aside from Joost: OpenGraph tags are now also used, in part, by Twitter to create their Twitter Cards. You should probably be aware of this when you implement.

Tags: , , ,


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

25 Responses

  1. Joe RegensteinBy Joe Regenstein on 27 June, 2011

    Using the URL Linter it says some tags are used multiple times. It turns out some other plugins insert some of these tags as well as the WordPress SEO. Neither the WordPress SEO or other plugins allow an option to uncheck what info the plugin should submit.

    Does it matter if the same tag is submitted twice? If so, is there a way to manually remove one of the submissions or a plugin update to check/uncheck what the plugin does?

    Duplicate tags You used “type” multiple times, but it should only appear once
    Duplicate tags You used “description” multiple times, but it should only appear once
    Duplicate tags You used “site_name” multiple times, but it should only appear once

    • Joost de ValkBy Joost de Valk on 27 June, 2011

      Hey Joe,

      if you have another plugin submitting that data as well, either disable that plugin or disable Facebook Open Graph in my WP SEO plugin :)

  2. Haroun KolaBy Haroun Kola on 27 June, 2011

    Thanks for this article, I was looking for this very info, as I had seen this info browsing around the WordPress SEO plugin. Does the plugin currently allow you to set a default image for my posts yet, or does it fall in the latter category of the current features?

    • Joost de ValkBy Joost de Valk on 27 June, 2011

      It’s not in there (yet) I’m currently considering how to best implement that.

      • Dave DemuthBy Dave Demuth on 12 July, 2011

        Where does the plugin currently look first for the opengraph image? and then what’s the fallback location?

        Also, in regards to best implementing a default image, what if you allowed a user to set it in the current settings where you set the admin id’s? They could set it by selecting from gallery (obviously upload would occur first). And then follow Alex’s method for images on each post/page.

        I’m sure you’re wizard brain is already on this though :)

  3. CharlesBy Charles on 27 June, 2011

    Having compared the HTML for my site I don’t have the following in the opening tag:
    xmlns:og=”http://ogp.me/ns#”

    but I do have:
    xmlns:og=”http://opengraphprotocol.org/schema/”

    Are these one and the same / serve the same purpose or not?

    • Alex MossBy Alex Moss on 27 June, 2011

      they both serve the same purpose :)

  4. John GarrettBy John Garrett on 28 June, 2011

    Thanks Joost and Alex. I had just been searching through the WordPress plugins directory for some kind of “ultimate” Facebook plugin, but it turns out I already had a heart the whole time…wait…

    Anyway, I’ll look forward to future versions of WordPress SEO and in the meantime I’ll start playing around with some of the code supplied here. The video stuff looks especially cool.

  5. scotBy scot on 28 June, 2011

    I’m currently using The Open Graph Custom Fields plugin. Would you recommend using your plugin and these codes above to satisfy the need to connect with FB?

  6. JamàlorgBy Jamàlorg on 28 June, 2011

    I’ve two things to add to this post:

    1. You can use is_singular() function instead of is_single() || is_page(), the former can detect custom post types.

    2. Autogenerated excerpts have their problem when used inside the <head></head> tags. There may be one or more un-escaped quotes and other illegal characters which may cause few problems.

    By the way, what’s the difference between http://ogp.me/ and http://opengraphprotocol.org/schema/? Are they exchangeable? I’ve seen few websites linking to the latter url as their OG profile.

    Good write up anyway and thanks for the useful tutorial.

  7. JasonBy Jason on 28 June, 2011

    Fantastic. I also have a series that goes into the same subject, especially for Thesis theme users: Facebook Social Plugins.

  8. MarlonBy Marlon on 28 June, 2011

    Excelent article! Thanks for sharing.

    Somebody can tell me how put the nameservers in html tag without using WordPress Seo plugin? I thought through action hook in functions.php, but I do not found wich hook.

    Best!

  9. Niall FlynnBy Niall Flynn on 29 June, 2011

    All works fine, I ended up hard coding a specific image into the class-opengraph.php was just a more stable solution all round.

    Great plugin, cheers :)

  10. Mike JohnsonBy Mike Johnson on 29 June, 2011

    My WPFacePages plugin does all of this right now and it has settings which allow you to manage your Tag Information. My plugin was originally built for just building Custom Fan Pages in WordPress, but now we have taken it a step further and completely integrated it into Facebook. Now, with our integrated Like and Send buttons, not to mention Facebook Comments, you can make each one of your Posts and Pages in WordPress a Facebook Page with just a click. Your Posts or Pages will actually create an Independent Facebook Page using our Plugin. Then you can use our AutoPost to Facebook feature which allows you to Post your Blog Content to any Fan Page Wall, Notes, or Events on your Facebook Account. This is an essential part of the Facebook Marketing mix that no one tells you about too. You can’t classify your Blog Posts as Blog, Article, or Website in the Open Graph Object “type” tags. If you do, none of the content you post to Your Fan Page (Wall, Notes, or Events) will get Posted on the Walls of users who have Liked your content. You must use the other Object Types, like Product, Sports, Electronics, etc.

    All these things are what make using Open Graph Tags an essential part of your WordPress Blog setup along with the WordPress SEO Plugin.

    Mike

  11. Jos van EssenBy Jos van Essen on 30 June, 2011

    You can also check your ID by going to http://graph.facebook.com/username and this works as well for all the pages like http://graph.facebook.com/http://yoast.com/facebook-open-graph-protocol/ to get a nice json with the amount of shares and some other properties (when available) from Facebook.

  12. Mike JohnsonBy Mike Johnson on 30 June, 2011

    Yes, this works the same with every Post or Page in WordPress that (or any website) that is using it. By simply sharing the content on Facebook or Liking the Post or Page, your Post/Page then has a Page created for it on Facebook automatically where you can target those who have Liked your content and Post to their Walls simply via that single page where they interacted with your content. This can be a crucial and important mechanism in targeting users based on content and not just based on your website alone as we all know you can have multiple variations in content and focus on a single site.

    Mike

  13. Mark DavisBy Mark Davis on 2 July, 2011

    Excellent info. However, the key thing that people seem to overlook is that by using these social plugin, you gain the ability to post to the newsfeed of anyone who ‘likes’ your page. That is a tremendous benefit few people seem to be using.

    • Alex MossBy Alex Moss on 4 July, 2011

      Although I need to test it myself, someone recently told me that if someone likes a WordPress category, every future post published will appear in that person’s news feed.

      • Mike JohnsonBy Mike Johnson on 4 July, 2011

        Not true. If your Open Graph Object Type is set to Blog, Website, or Article your content will not be posted. Plus, you have to post to Facebook for this to Work. Simply posting to your Blog will not get the content to Facebook regardless of the Tags you use. That is why I use an Auto Post to Facebook feature in my plugin. Plus, if you don’t have enough Facebook EdgeRank, your content will be at the bottom of, or not even on the User’s who have Liked your contnent’s pages at all. Everything is made to look simple until you look at the fine print. If it was easy, everyone would be doing it, right?

  14. Marcello SilvestriBy Marcello Silvestri on 3 July, 2011

    I don’t understand one thing. How can PHP code be added to the header? When I go testing the results with the URL linter, I get an error saying , for example, is not a valid argument to use in og:title

    • Mike JohnsonBy Mike Johnson on 4 July, 2011

      This is working fine for me having my plugin add the Meta Tags to my header instead of running PHP in it. I think my way is simpler to be honest and it is the same way the guys at WPMUDEV do it as well.

  15. sushilBy sushil on 4 July, 2011

    nice optimisation.I really liked it.

  16. VincentBy Vincent on 12 July, 2011

    So now we also have google+ can we assume they will also use these Open Graph Tags, and if so should you maybe not add stuff in code named ‘fb..’ whatever?

    • Alex MossBy Alex Moss on 12 July, 2011

      At the moment data is not being pulled into Google+ using Open Graph data but instead is using the META title and description coupled with it’s own image thumbnail. Unfortunately, for now, none of this can be edited specifically for Google+. Once there is an option to do so you can count on me to write another post like this :)

  17. Craig CacchioliBy Craig Cacchioli on 14 July, 2011

    Hi,
    Can somebody please post details of a working example? Right now I am at a loss as to what the fuss is all about.

    Separately, will OpenGraph Meta improve my PR or SERP position?