webp causing issues in og:image

Hello @oferlaor

Thanks for reaching out about LinkedIn sharing. I ran the sample URL you shared through the LinkedIn post inspector, and I do not see any errors relating to the image. See screenshot.

Please provide us with screenshots that highlight the issue you are experiencing. You can use any image-sharing service like https://pasteboard.co/, https://snag.gy/, https://imgur.com/, https://snipboard.io/, or even upload the screenshot to your own website. Once you upload it to an image-sharing service, please share the link to the image here.

the issue is that is the wrong thumbnail image…

the image it took was a random one from the top of the page… I’ve actually changed the code so it doesn’t appear directly as an img tag anymore, which means there’s no image there.

the root cause is that linkedin doesn’t support webp yet ??

Hey @oferlaor,

Thank you for your reply.

That is indeed still the case, not all of the platforms that read Open Graph will accept or show/preview .webp files, unfortunately.

I wrote some basic code that might be useful as a solution for this (in the other thread on this forum), basically auto convert to jpg with cache blocker.

Hello @oferlaor,

Could you please share the basic code that you mentioned as a solution to solve .webp images on LinkedIn?

Thank You!

• This reply was modified 1 year, 7 months ago by Charbel Nemnom.

add_filter('wpseo_opengraph_image', 'fix_image', 10, 2);
function fix_image($image, $present) {

	if( is_single()) {
		$thumb= get_the_post_thumbnail_url(get_the_ID(), 'mobile');
		$thumbext= substr($thumb, -4);
		switch ($thumbext) {
			case '.png':
			case '.jpg':
				break;
			case 'webp':
				preg_match('/^((?:http|https)(?::\/\/)(?:.*?))((\/(?:.*?\/)*)((.*)(\..*)))$/i', $thumb,$match);
				$src= getcwd() . $match[2];
				$dir= '/thumb/';
				$ext= ".jpg";
				$thumb= $match[1] . $dir . $match[5] . $ext;
				$tgt= getcwd() . $dir . $match[5] . $ext;
				if (!file_exists($tgt)) {
					$im = imagecreatefromwebp($src);
					imagejpeg($im,$tgt, 100);
					imagedestroy($im);
				}
				break;
		}
		return $thumb . $prevent_webp_convert;
	}

	return $image;
}

$prevent_webp_convert= "?nopolish=1";

I use this in cloudflare’s polish with a page rule that prevents it from converting the image to webp

Thank you @oferlaor, much appreciated!

Does this filter applies only to Yoast SEO plugin, what about Rank Math plugin?

Yes, I use Cloudflare as well.

Many Thanks!

it’s a half baked patch for yoast only. It’s not a great solution, IMO.

The right solution should be internal to Yoast.

//og:image yoast 
add_filter('wpseo_opengraph_image', 'fix_image', 10, 2);
function fix_image($image, $present) {
	$prevent_cloudflare_polish_webp_conversion="?nopolish=1";
/*
	if( is_single()) {
		$thumb= get_the_post_thumbnail_url(get_the_ID(), 'mobile');
		$thumbext= substr($thumb, -4);
		switch ($thumbext) {
			case '.jpg':
			case '.gif':
				break;
			default:
				preg_match('/^((?:http|https)(?::\/\/)(?:.*?))((\/(?:.*?\/)*)((.*)(\..*)))$/i', $thumb,$match);				
				$src= getcwd() . $match[2];
				$ext= ".jpg";
				$tgt= $src . $ext;
				$thumb.= $ext;
				
				if (!file_exists($tgt)) {
					if ($thumbext=='webp')
						$im = imagecreatefromwebp($src);
					if ($thumbext=='.png')
						$im = imagecreatefrompng($src);
					imagejpeg($im,$tgt, 100);
					imagedestroy($im);
				}
				break;
		}
		return $thumb . $prevent_cloudflare_polish_webp_conversion;
	}
*/
	return $image . $prevent_cloudflare_polish_webp_conversion;
}

Hello @oferlaor,

What is the last updated code that you shared above do, please?

Thank You!

So, when a post (single) is requested to produce an og:image, the filter tests if the featured post image is jpg. If it is, it just adds a tag so that “polish” feature in cloudflare doesn’t turn it automatically to webp (needs a page rule, I don’t think there is a built in query param to turn it off).
If it’s not jpg, it creates a cacheable jpg file from the mobile featured image and delivers it with the cloudflare polish bypassing flag.

Uncomment the second part – it’s something that ideally should be part of Yoast to make it bullet proof.

• This reply was modified 1 year, 7 months ago by oferlaor.