I want to add a second open graph image (a square one) to my WordPress site for use by WhatsApp. WhatsApp selects the last image and crops it to a 1 by 1.3 portrait aspect ratio and then displays it at 80 by 104 pixels, which doesn’t work well with the first open graph image, which is sized for a 1.91 to 1 landscape aspect ratio for Facebook (and LinkedIn).
Through the Yoast SEO plugin, I’ve added a 1200 by 630 image for use by sites like Facebook and LinkedIn (and the image shows up with a complete set of og meta tags). The image is also used in link previews for messaging apps. I’ve added the image using the Facebook tab under Social – Yoast SEO.
I’ve not been able to find any function to define a second open graph image using Yoast.
I did try adding some code from a tutorial that’s a couple of years old to functions.php, but all it did was replace the existing og data with the link to the one image:
add_action( 'wpseo_opengraph', 'change_yoast_seo_og_meta' );
/**
* Function to add hooks and filter out the Yoast SEO Open Graph Meta Tags
*/
function change_yoast_seo_og_meta() {
add_action( 'wpseo_add_opengraph_images', 'add_images' );
}
function add_images( $object ) {
$image = 'http://url_to_our_image.png';
$object->add_image( $image );
}
I don’t think Yoast directly supports a second image, but is there a way using functions.php to add a second image (with the op:image, og:image:secure_url, og:image:height, og:image:width, and og:image:alt meta fields)? I wouldn’t need the image data to be done programmatically, as I would use the same image for every page, so the information could be hard coded into functions.php.
Thanks
2
Answers
As Juan Solano pointed out in his comment, Yoast has depreciated the previous filters for adding things (like a second OG image) and revised their architecture to use an Abstract_Indexable_Presenter class in version 14.
I've revised gjzim's code for adding a second OG image based on how Polylang changed their code to work with Yoast's update:
Yes, it’s possible.
By default, Yoast overwrites the default image with the one you add using the
wpseo_add_opengraph_images
hook. So, you can just get the default image fromWPSEO_Options
class and add it first and then add your secondary image.Thanks.