Get a $10 discount on Yoast SEO Premium now!

Optimizing 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.

Optimize for synonyms and related keywords and prevent broken pages on your site with Yoast SEO Premium! »

Yoast SEO: the #1 WordPress SEO plugin Info

When 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=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; xmlns:fb=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;

an example end result might look something like this:

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.


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-&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;ID), '', '' );
  if ( has_post_thumbnail($post-&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;ID) ) {
    $fbimage = $src[0];
  } else {
    global $post, $posts;
    $fbimage = '';
    $output = preg_match_all('/&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;img src=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;['&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;]([^'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;]+)['&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;].*/&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; alt=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; /&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;/i',
    $post-&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;post_content, $matches);
    $fbimage = $matches [1] [0];
  if(empty($fbimage)) {
    $fbimage = &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;;
  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:


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:

ID, 'og-type', true);
if ($ogtype != '') {
echo $ogtype;
}  elseif (is_single() || is_page()) {
echo &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;article&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;;
} else {
echo &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;website&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;;

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:

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:


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:

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:


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.


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:

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):

Video (only supports SWF):

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 as well as at

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.

25 Responses to Optimizing the Facebook Open Graph Protocol

  1. Craig Cacchioli
    Craig Cacchioli  • 7 years ago

    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?

  2. Vincent
    Vincent  • 7 years ago

    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 Moss

      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 :)

  3. sushil
    sushil  • 7 years ago

    nice optimisation.I really liked it.

  4. Marcello Silvestri
    Marcello Silvestri  • 7 years ago

    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 Johnson
      Mike Johnson  • 7 years ago

      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.

  5. Mark Davis
    Mark Davis  • 7 years ago

    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 Moss

      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 Johnson
        Mike Johnson  • 7 years ago

        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?

  6. Mike Johnson
    Mike Johnson  • 7 years ago

    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.


  7. Jos van Essen
    Jos van Essen  • 7 years ago

    You can also check your ID by going to and this works as well for all the pages like to get a nice json with the amount of shares and some other properties (when available) from Facebook.

  8. Mike Johnson
    Mike Johnson  • 7 years ago

    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.


  9. Niall Flynn
    Niall Flynn  • 7 years ago

    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. Marlon
    Marlon  • 7 years ago

    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.


  11. Jason
    Jason  • 7 years ago

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

  12. Jamàlorg
    Jamàlorg  • 7 years ago

    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 and 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.

  13. scot
    scot  • 7 years ago

    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?

  14. John Garrett
    John Garrett  • 7 years ago

    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.

  15. Charles
    Charles  • 7 years ago

    Having compared the HTML for my site I don’t have the following in the opening tag:

    but I do have:

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

    • Alex Moss

      they both serve the same purpose :)

  16. Haroun Kola
    Haroun Kola  • 7 years ago

    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 Valk
      Joost de Valk  • 7 years ago

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

      • Dave Demuth
        Dave Demuth  • 7 years ago

        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 :)

  17. Joe Regenstein
    Joe Regenstein  • 7 years ago

    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 Valk
      Joost de Valk  • 7 years ago

      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 :)

Check out our must read articles about Social Media