og:image url for attachment pages

Hello @barisbrnv

Thanks for reaching out about your image.

If I understand correctly, you chose not to redirect attachment URLs to the attachment itself in the Yoast SEO plugin. So, you expect that the og:image set will be the file URL and not the attachment page URL. I tested this, and the file URL uses a relative path that may not be suitable as the og:image.

If you’re convinced this is a bug, please submit a bug report at https://github.com/Yoast/wordpress-seo/issues. This is actively monitored, and the product team will check the viability

Frankly, I wasn’t sure if this is a bug. So, I wanted to ask here first.

But in the mean while I attempted to make it so that Yoast plugin would set the image file URL for the “og:image” value, with the following code (and similar codes that I thought should work). And this (and other codes I tested) did not work.

function change_og_image_for_attachments($image) {
	global $post;
	if ( is_attachment() ) {
		$image_id = get_post_thumbnail_id( $post->ID );
		if ( $image_id ) {		
			$og_image = wp_get_attachment_image_src($image_id, 'full', false)['url'];
			return $og_image;
		}
	} 
	return $image;
}
add_filter( 'wpseo_opengraph_image', 'change_og_image_for_attachments', 29 );

After doing some research through the github issue listings, I found out that there is an actual bug with the “wpseo_opengraph_image” filter, and it does not get triggered when you don’t have image set for FB share image manually.

However, even if I set an image manually, I could not change the “og:image” URL with the code I wrote. So I think my code is not good too. (maybe the issue is that WP attachment page do not use the image as a thumbnail.)

Anyway, maybe someone can offer a better way.
Even if you just share some links that can give me some ideas for a better modification, I would appreciate it very much.
(I will share my solution, if I can come up with one.)

Thanks.

• This reply was modified 2 years ago by barisbrnv.
• This reply was modified 2 years ago by barisbrnv.

An update for people who may find this,
I tried using the workaround that was mentioned here to trigger ‘wpseo_opengraph_image’;
https://github.com/Yoast/wordpress-seo/issues/1060

And I modified my function to correctly use ‘wp_get_attachment_image_src’;

function change_og_image_for_attachments($image) {
	if ( is_attachment() ) {
		
		global $post;
		$attachment_id = $post->ID;
		
		if ( $attachment_id ) {		
			$attachment_url = wp_get_attachment_image_src($attachment_id, 'full', false)['url'];
			return $attachment_url;
		}
	} 
	return $image;
}
add_filter( 'wpseo_opengraph_image', 'change_og_image_for_attachments' );

However, I still cannot affect the “og:image” value in any way.
(even the default image I added with the workaround worked.)

Another update and solution;
Through other similar messages on this forum, I have seen that the Yoast team is not able to offer much help in such custom use cases. So I made more research online.

Through GitHub messages, I found out that ‘wpseo_opengraph_image’ filter is actually deprecated. But this is not documented in the official dev docs yet.(https://developer.yoast.com/customization/apis/metadata-api)
(https://github.com/Yoast/wordpress-seo/issues/14698)

Anyway, I finally managed to do what I need, by using the new Presenter system.
The following code, which you can add to your theme’s functions.php, sets the og:image url and size values to those of the displayed images, in all attachment pages;

if(is_plugin_active('wordpress-seo/wp-seo.php')) {

/**
 * Add a custom presenter for yoast to modify og:image data on attachment pages.
 */
function custom_yoast_presenter($presenters) {
	global $post;
	$_presenters = array();
	foreach ( $presenters as $presenter ) {
        if ( $presenter instanceof Yoast\WP\SEO\Presenters\Open_Graph\Image_Presenter ) {
			if (is_attachment()) {
            	$_presenters[] = new Custom_AttachmentImagePresenter($post->ID);
			} else {
				$_presenters[] = $presenter;
			}
        } else {
			$_presenters[] = $presenter;
		}
    }
    return $_presenters;
}
add_filter( 'wpseo_frontend_presenters', 'custom_yoast_presenter' );

class Custom_AttachmentImagePresenter extends Yoast\WP\SEO\Presenters\Abstract_Indexable_Tag_Presenter {
	public function __construct(int $id) {
		$this->id = $id;
	}
	public function present() {
        $images = $this->get();
        if ( empty( $images ) ) {
            return '';
        }
        $data = '<meta property="og:image" content="'.esc_url($images['url']).'" />';
        $data .= \PHP_EOL."\t".'<meta property="og:image:width" content="'.$images['width'].'"/>';
        $data .= \PHP_EOL."\t".'<meta property="og:image:height" content="'.$images['height'].'"/>';
        return $data;
    }

	public function get() {
		$attachment = wp_get_attachment_image_src($this->id, 'full', false);
        $images = ['url' => $attachment[0],
                   'width' => $attachment[1],
                   'height' => $attachment[2]
                  ];
        return $images;
    }
}

}

I hope this helps others too.