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.

Update:

Yoast SEO plugin changed a lot after I wrote this tutorial and parts of it are not working properly anymore. I.e., I just found out that using the wpseo_pre_analysis_post_content  filter as suggested here breaks the SEO score now.

Update 2:

Yoast just announced that the wpseo_pre_analysis_post_content filter is going to be removed on November 2nd, 2015 entirely.

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 );
}Code language: JavaScript (javascript)

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';
}Code language: PHP (php)

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 '';
}Code language: PHP (php)

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);Code language: PHP (php)

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;
}Code language: PHP (php)

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.

The Author

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

        Thanks Thomas for the reply.

        Looking further at the attached meta data it appears that there IS a size for Facebook and one side of each image is 315 so It’s properly rendered and created the image. The problem is that it isn’t sending ‘that’ image to Facebook.

        I submitted this question to wpquestions.com if you want to take a look at further details and the code.

        http://www.wpquestions.com/question/showChronoLoggedIn/id/9245

        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!

    1. Thomas Maier Article Author

      Hi, might be the wrong image size ratio you are using or that you offer multiple images.

  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 🙂

  16. Jesse Reckley

    Hi Thomas… So after a few hours of trying to figure out why Facebook doesn’t like my site I have found that they do not show CDN content. WOW. So now I need to change my CDN URL to my WEBSITE URL to get Facebook to show anything on. So I need to change my og:image from my cloud file url to my domain URL. Of course I need to keep the CDN running for a lot of reasons.

    I see there is an option to make an alternative URL in YOAST but that still does not change the meta tag.

    Any thoughts?

    1. Thomas Maier Article Author

      Hi Jesse, does the alternative URL in the plugin do nothing? Did you check the place in the plugin where the filters I described are defined? I am not sure if something changed here, but it is the first place I would look for a solution.

      1. Jesse Reckley

        The alternative url does put in some code but it does not change the go:image like you would think.

        I’m giving this a shot… we will see if it works

        function wpseo_cdn_filter( $uri ) {

        return str_replace( ‘http://example.com’, ‘http://cdn.example.com’, $uri );

        }

        add_filter( ‘wpseo_opengraph_image’, ‘wpseo_cdn_filter’ );

    1. Thomas Maier Article Author

      Hi Scott, I am sorry to read this. The SEO plugin changed a lot since I wrote the article, so the information might be outdated.

    2. Jesse Reckley

      Facebook doesn’t throw any errors when it scrapes the site… what the problem? Image shows up.

      1. Scott

        Thanks for the response fellas,

        Are you seeing the shiny gears in FB or the “Uh Oh” photo? When I share it FB picks up the image of the shiny gears . If you take a peek at my source you’ll see this.. . For some crazy reason FB will not grab the “Uh Oh” photo designated in og:image.

        Is there another way to skin the cat?

      1. sangkavr

        Sorry, actually I wasn’t so clear. I’d like to know if there is a way to exclude all the images contained in a specific div class.

  17. Robert Goodis

    I’m a little stuck on excluding images from Facebook auto-posts. I have Jetpack and Yoast SEO installed. Content on my site was publicizing to Facebook with images perfectly – pulling the image from a post or, if no image was in the post, the post author’s profile photo. I then added a widget to the footer of my website to promote our new GuideStar status. Since adding that widget, Facebook now puts the GuideStar badge on all of our posts instead of pulling the content or author images.

    From what I’ve read, this shouldn’t even be happening since the GuideStar image is in a widget in the footer. That said, I can’t figure out how to exclude it. Ideally, I want to keep the GuideStar badge on the footer, but have the whole footer area excluded from SEO/Facebook image checks. My goal is to have it work like it was before the GuideStar widget — prioritize the featured image, then content image, then author profile photo, and exclude the footer widgets altogether.

    I was hoping your “Exclude specific images from Open Graph tags” would be the solution, but I’m actually not sure how to integrate that code as a solution for my problem. Have you run into this sort of issue before? Can you recommend any solution?

    1. Thomas Maier Article Author

      Hi Robert, unfortunately, it is too long ago that I wrote about this solution and never had a problem since. So I am not able to provide help out of the box.