CODEWITHSUNDEEP
phpwordpressyoast
Rich DeBourke
Rich DeBourke

Reputation: 3423

How can I add a second Open Graph image to a site using Yoast?

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

Upvotes: 0

Views: 3200

Answers (2)

Rich DeBourke
Rich DeBourke

Reputation: 3423

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 Yoast\WP\SEO\Presenters\Abstract_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 Yoast\WP\SEO\Presenters\Open_Graph\Image_Presenter ) {
            $_presenters[] = new Second_OG_Image_Presenter();
        }
    }
    return $_presenters;
}

add_filter( 'wpseo_frontend_presenters', 'add_second_og_image' );`

Upvotes: 0

gjzim
gjzim

Reputation: 633

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.

Upvotes: 1

Related Questions