I recently fixed the issue of giving Facebook a correct posts image size for post thumbnails through Open Graph in WordPress, so it doesn’t choose another one from the content. This was done using the well known plugin WordPress SEO by Yoast. Unfortunately, there are no options to custimize this directly in WordPress SEO. But thanks to filters, it is easy to customize the created Open Graphs with a few lines of code. In this article, I am going to show some useful examples.

Notice: I tested this on WordPress 3.6.1 with WordPress SEO 1.4.18.

Developers might want to have a look into WordPress SEO plugins file frontend/class-opengraph.php line 248 to find 2 functions that control which and how Open Graph tags for images are being created.

WordPress SEO FB options

WordPress SEO’s Open Graph options – take it, or leave it.

Open Graph image hierarchy in WordPress SEO

WordPress SEO by Yoast is our preferred SEO solution for WordPress. The plugin also adds the Open Graph data for Facebook. Unfortunately, there is no fine tuning for this data and you are either ok with everything it does or you aren’t. Let me explain how WordPress SEO creates Open Graph tags for images and how you can influence the images listed and the image size with only a few lines of code.

WordPress SEO includes the open graph tags for images in the following order:

For front page:

  1. front page image you specify in the WordPress SEO options.

For single posts and pages

  1. featured image
  2. images within the content

If no image was found so far, the default image specified on WordPress SEO options is used.

Extending WordPress SEO Open Graph for images

The developers of WordPress SEO used some filters when creating the Open Graph tags for images allowing other developers to customize it for their needs. I am not going into filters in WordPress here, but just want to give a useful example on what you can do with the filters currently available in WordPress SEO.

Different size for Facebook images

Before coding these solutions myself, I did some research on how others solved this. I didn’t find these information anywhere, but many open questions on how one might choose a different size for the posts featured image from the one used on the page. There are two reasons Facebook chooses another than the featured image of a post to teaser it in the time line. First, the size is smaller than 600px width and second, the ratio is another than 1.91:1. So to fix wrong images in Facebooks timelines you might first want to create this specific image size using add_image_size().

To create an image size that “fits” into Facebooks standard copy the following code into your themes functions.php.

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'facebook', 600, 315 );
}

Two things you should keep in mind when using add_image_size().

  1. Adding ‘true’ or ‘false’ as a fourth attribute would crop the image into the correct size. If let empty or set to false, the image would be resized down so it fits to at least one of the metrics.
  2. The new image size is not created automatically for older images. You need to regenerate them using a plugin like Regenerate Thumbnails.

The default image size used by Yoast’s SEO plugin is ‘large’. In a standard WordPress installation, a ‘large’ image is generated with a maximum width of 1024 pixels. The filter we can use to set another image size in WordPress SEO is wpseo_opengraph_image_size. Just put the following lines into the functions.php of your current theme to link the Open Graph to our ‘facebook’ size we created above.

add_filter('wpseo_opengraph_image_size', 'mysite_opengraph_image_size');
function mysite_opengraph_image_size($val) {
return 'facebook';
}

This filter only works for the featured image in WordPress. The images taken from the content are not changeable, because here, the image size specified when including the image into the content field is used.

Disable Open Graph for images from the content

I have plenty of examples for bad images from within the content, that automatically appeared as a post image on Facebook. The filter wpseo_pre_analysis_post_content lets you disable this with a simple trick. The filter is used on the posts content that is later searched for images. We simple empty the content returned, so no image can be found.

Add the following code to your functions.php.

add_filter('wpseo_pre_analysis_post_content', 'mysite_opengraph_content');
function mysite_opengraph_content($val) {
return '';
}

UPDATE: There is a drawback to this function. Since the filter is also used when preparing the content for the SEO analysis of a post, it won’t be able to do that when returning empty. JoseV pointed out a solution to at least preserve some of the functionalities by only stripping the image tags from the content. This is the line I would use here.

return preg_replace("/<img[^>]+>/i", "", $val);

Even if your featured images appear fine on Facebook you should consider using this filter. On pages without cache the content is filtered with every page load, what might be considered a performance sin.

Exclude specific images from Open Graph tags

The last filter wpseo_opengraph_image is used on each of the images in form of their url. You might use this to exclude specific images. In this example I only allow the images that have exactly my ‘facebook’ width of 600 pixels. I destinct this by checking for the string ‘-600x’ within the images source url.

add_filter('wpseo_opengraph_image', 'mysite_opengraph_single_image_filter');
function mysite_opengraph_single_image_filter($val) {
if ( preg_match('/-600x/', $val) ) return $val;
}

A more advanced use of this filter could be to use another image size for images from the content. This needs more string manipulation and is very specific to your use case, so I skip an example here.

Please note, that even though you don’t create an Open Graph for an image Facebook might still choose it from your website. I am not totally sure how much the Open Graphs really impact on the choice of the “right” image on Facebook. The best way is definitely to provide a big enough featured image for each post.

Adding this to WordPress SEO

Analysing only the given problem and the few lines of WordPress SEO made me realize, how easy Yoast’s plugin might be updated to have some of the features I mentioned above. I was lucky to meet a member of the plugins team on WordCamp Europe 2013 and it might happen that we are adding this together in a future release. Until than, you might want to try some of the code snippets from above.

Learn more about ad optimization

Subscribe now and never miss a post on AdSense, ad optimization and website monetarization. It’s free and without spam


The Author

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *

Comments

  1. Mark

    wow, great tutorial ! I have been using Yoast SEO plugin for a while, never used this feature before. I am gone to give it a try. thanks

  2. Skip

    Thomas, this is brilliant. I know the plugin has been updated but my site is image heavy and my featured image was rarely the first choice for Facebook. Now after a quick test, the only available image is the featured image. I have wanted this all along.

    Now I just need to find a way to set featured images for tags and categories (which I think I info on file for) and I’ll be a happy chappy.

    Thank you for sharing this snippet.

    1. Thomas Maier Article Author

      Hi Skip, I am glad I was able to help you! Thanks for your feedback.
      There is no open graph image tag created for any kind of overview page like tags, categories or archives. I am not sure how Facebook would react on that either. Anyway, this (untested) code might give you a head start:

      add_action( 'wpseo_opengraph', 'my_archive_image', 30 );
      $archive_og_image = '[path to archive og image]';
      function my_archive_image() {
      if( is_archive ) $wpseo_og->image_output($archive_og_image);
      }

      With some more conditions you can fine tune which image to show per tag or category.

      1. Skip

        Hi Thomas, only a month late but thank you very much for that head start. I’m just starting to look at this now in more detail. I think taxonomy archive pages are too often ignored but potentially the most valuable pages if developed and customised a little.

  3. Jennifer Eklund

    This was a *lifesaver* – my shared URL image links have been a cropped hot mess for a while now and after searching and searching this answered my questions and fixed my problem. THANK YOU!!!!!

  4. Travis

    Exactly what I really needed to fix the pesky Yoast SEO og:image tags… Thanks so much. I actually tried like 20 other plugins and they all were terrible, and all I needed was this post!

    1. Thomas Maier Article Author

      yeah, sometimes it is easier than one might think. You might also want to share this post to help others find it.
      Thomas

  5. Pawel

    Hello,

    Really nice post, altho I’ve got a bit different problem. For non-front pages og:image is displaying correctly, picking only one image, which is nice.

    But after setting front page image url in WP SEO by Yoast, it didn’t change anything when linking home page on facebook, instead it grabs all images across the front page, and noone of them is the image specified in the plugin admin area.

    I could hardcode the og:image after wp_head() section and it somehow displays it great for main page, but it forces that image on every other page (while for post page thumbnails works just fine).

    Any ideas how i could overcome that problem?

    Thanks in advance.

    1. Thomas Maier Article Author

      Hi Pawel,
      I had a similar problem recently and after checking the right image size again and again the cause was just Facebooks cache. I waited maybe half a day and everything was fine.
      If you still need manual code, you might want to try something similar to what I suggested to Skip above. Instead of is_archive() you should use is_front_page() or is_home(), depending on what you display on your home page.
      Good luck
      Thomas

  6. Doug

    Wow, what timing on this article. I’m digging into this problem now and I can’t seem to get the fix working.

    I’ve copied both snippets at the end of my functions.php code and no change. When I ran the image regen I didn’t see the new image size being picked up. Any ideas?

    1. Thomas Maier Article Author

      Hi Doug, its odd, that the new images weren’t generated after including the add_image_size() code. Did you have a look into the wp-content/uploads/ folder? You might also try enabling WP_DEBUG for error output (on a test environment or if no one is watching ;) ). Its hard to diagnose more without knowing your setup.
      Thomas

        1. Thomas Maier Article Author

          Great to hear the images are being created. As I see from your code, you don’t return the “facebook” image size, but an empty string. And your short url is used in the og:image tag.

  7. Noahs Dad

    Thanks for the great post. I’m trying to get Facebook to just use the featured image as the image that gets shared. As of not it seems like it’s just picking a random image. On this example it should be using the picture with words on it (the featured image) http://noahsdad.com/help-your-child-stand-on-their-own/ but it’s picking another one.

    And one this one: http://noahsdad.com/story it should be using the image of our family, but it’s not. Any ideas on what’s going on and how to fix it?

    Thanks so much!

  8. Saleena

    Really nice post, altho I’ve got a bit different problem. For non-front pages og:image is displaying correctly, picking only one image, which is nice.

  9. jack

    Really nice post. I am using this plugin many time . but I don’t know the details about it. i will certainly be following your posts.

  10. RTC

    I used your code snippet above to disable the content images, which worked *perfect* on a site that didn’t use featured images, as they wanted their logo to be used every time as the shared image…but another site *does* use feature images, but they, too, would like to use their branded logo every time without their being a multiple choice. Defining the og:image within the header’s meta info worked so-so, but not perfect.

    So, have you got a nifty script to disable the use of content images *and* featured images, and force the use of the default og:image?

    1. Thomas Maier Article Author

      Sounds like something useful, but I don’t have a ready script for that – sorry.

  11. Karan Singh

    when i install this plugin then it is asking for “You’ve just installed WordPress SEO by Yoast. Please helps us improve it by allowing us to gather anonymous usage stats so we know which configurations, plugins and themes to test with” Allow Tracking or not, what should i do,
    Allow tracking or not.

    1. Thomas Maier Article Author

      Not really the topic here, but a short answer: I see no problem activating the tracking for my own projects, but don’t do it on clients projects without their permission.

  12. Sina

    Hi Thomas,

    Thanks for your great article. I’ve a problem and not sure how to solve this. (Tried many stuff already)

    I use “Facebook” wordpress plugin to add comments into posts and it does automatically add og tags into header. I also use WordPress SEO by Yoast and enabled Social Settings -> Facebook.

    The problem is even though I feed Facebook with three large images for each post, it does automatically picks the smaller pic as default.

    Check this out:
    Facebook Debugger Tools for my website

    When you try to post it somewhere in Facebook, you will see the smaller image as default one.

    Could you please help me solve this?

    Thanks in advance.

  13. JEFF

    Hi Thomas,
    Great explanation. I thought it was going to be the answer a the problem I’ve been racking my brain over.

    I have a feature image displaying, but it won’t display in full form (for lack of better word).

    Here is what I mean: http://cl.ly/image/0h2f401t3O3l

    Other sites get the image to display on top. I used the lint tool and clicked on the image it’s “supposed” to display and it’s 620×325 or 1:191. You have any idea why this might be happening? (side note I am using Video SEO and Thesis 2.0)

    Cheers,
    JP

    1. Thomas Maier Article Author

      Hi Jeff,
      unfortunately, just from the screenshot I don’t have a clue. You might check the og:image tags in the html header. Is there just one with the sufficient size? If so, this might be a facebook issue.
      Thomas

  14. Carol

    Hi Thomas – can you help me please. I don’t know what I am doing but certainly need to get my image sorted. When I click the facebook like or share button I get no image at all! I have tried to no avail to follow your instructions but I really don’t have a clue where to go and what to do? At the moment I use really simple Facebook like and share plugin in a footer widget – the count is creeping up slowly but the image is definitely not there. I am using Third Style WordPress. I’d really appreciate your help.

    1. Thomas Maier Article Author

      Hi Carol, unfortunately I don’t have a solution right away. There are just too many factors involved. You might want to contact me for an estimate using the contact form.

    1. Thomas Maier Article Author

      I am not sure how the best practice was when writing this article, but thanks for the update!

  15. Matt

    Hi there – I enabled Add open graph meta data for WP SEO/Facebook, and now when I share my link on Facebook, I get a 404 error… WHAT THE?? Any help would be great :)

    1. Thomas Maier Article Author

      Hi Matt, I am sorry to hear that, but I am not the developer of the WordPress SEO plugin and can’t help with individual problems unless I get hired :)