skip to Main Content

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


  1. Chosen as BEST ANSWER

    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:

    // Add a second OG image (a square one for WhatsApp)
    use YoastWPSEOPresentersAbstract_Indexable_Presenter;
    
    class Second_OG_Image_Presenter extends Abstract_Indexable_Presenter {
        public function present() {
            $images = $this->get();
    
            if ( empty( $images ) ) {
                return '';
            }
    
            $return = '';
            $return .= '<meta property="og:image" content="' . esc_url( $images['url'] ) . '" />';
            $return .= PHP_EOL . "t" . '<meta property="og:image:width" content="' . $images['width'] . '"/>';
            $return .= PHP_EOL . "t" . '<meta property="og:image:height" content="' . $images['height'] . '"/>';
    
            return $return;
        }
    
        public function get() {
            $images = ['width' => 400,
                       'height' => 400,
                       'url' => esc_url('https://example.com/wp-content/uploads/2019/08/Open-Graph-Sq.png')
                      ];
    
            return $images;
        }
    }
    
    
    function add_second_og_image( $presenters ) {
        $_presenters = array();
    
        foreach ( $presenters as $presenter ) {
            $_presenters[] = $presenter;
            if ( $presenter instanceof YoastWPSEOPresentersOpen_GraphImage_Presenter ) {
                $_presenters[] = new Second_OG_Image_Presenter();
            }
        }
        return $_presenters;
    }
    
    add_filter( 'wpseo_frontend_presenters', 'add_second_og_image' );`
    

  2. 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 from WPSEO_Options class and add it first and then add your secondary image.

    add_action( 'wpseo_add_opengraph_images', 'add_images' );
    
    function add_images( $object ) {  
      $default_image_url = WPSEO_Options::get('og_default_image', '');  
    
      if( $default_image_url !== '' ) {
        $default_image = array( 'url' => $default_image_url, 'height' => 100, 'width' => 200 );
        $object->add_image( $default_image );
      }
    
      $secondary_image = array( 'url' => 'https://exampledomain.com/images/secondary-image.jpg', 'height' => 100, 'width' => 200 );
      $object->add_image( $secondary_image );
    }
    

    Thanks.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search