• Resolved oferlaor

    (@oferlaor)


    looks like linkedin and other platforms do not support webp for their og:image format. That means that if you have webp as your leading image, or have a CDN that auto converts to Webp, it will break linkedin sharing.

    I think they are not the only ones that have this issue.

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Support Maybellyne

    (@maybellyne)

    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.

    Thread Starter oferlaor

    (@oferlaor)

    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.

    Thread Starter oferlaor

    (@oferlaor)

    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!

    Thread Starter oferlaor

    (@oferlaor)

    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;
    }
    Thread Starter oferlaor

    (@oferlaor)

    $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!

    Thread Starter oferlaor

    (@oferlaor)

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

    The right solution should be internal to Yoast.

    Thread Starter oferlaor

    (@oferlaor)

    //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!

    Thread Starter oferlaor

    (@oferlaor)

    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, 1 month ago by oferlaor.
Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘webp causing issues in og:image’ is closed to new replies.