How To Change The Open Graph Image Size In Yoast

Here's a quick article on how to change the size of your Open Graph image, or og:image, used by Yoast with just a little snippet of code.

I recently had a client ask for help in fixing this dilemma. Their website's open graph image was strangely at a resolution of 1172 x 256 and as you can expect when shared on Facebook it create a bad crop.

I didn't take much time to look into the "why" of the specific image size but instead told it use a certain, pre-defined, image size in WordPress, which is what the client wanted. In this specific example we chose it to be the Large size image.

This can be altered by placing the following filter into your functions.php. Just add it to the bottom:

function set_custom_facebook_image_size( $img_size ) {
    return 'large';
}
add_filter( 'wpseo_opengraph_image_size', 'set_custom_facebook_image_size' );

Change 'large' to any of the other native WordPress sizes.

I didn't test with any custom image sizes, but I assume it would work as well.

That will set your Facebook Open Graph image size.

How about the Twitter image size?

Then just swap the filter name from wpseo_opengraph_image_size to wpseo_twitter_image_size :

function set_custom_facebook_image_size( $img_size ) {
    return 'large';
}
add_filter( 'wpseo_twitter_image_size', 'set_custom_facebook_image_size' );

And remember you can go here and see what Facebook is retrieving as your Open Graph image sizes (as well as lots of other information). Hit the Scrape button to have Facebook fetch the information again. Often this is not enough and you will have to wait 24 hours for Facebook to clear it's overall cache before you see any changes. Of course, this is only for posts that you have previously shared on Facebook before.

Comment below with any questions. For now, here are 2 FREE Months over at Skillshare. Level up!