Fix Open Graph Image Dimension Tags Missing in ISC

Problem

By default, ISC does not include og:image:width, og:image:height and
og:image:alt Open Graph tags

Reference: https://developers.facebook.com/docs/sharing/best-practices/#precaching

When content is shared for the first time, the Facebook crawler will scrape and cache the metadata from the URL shared. The crawler has to see an image at least once before it can be rendered. This means that the first person who shares a piece of content won’t see a rendered image.

Use og:image:width and og:image:height Open Graph tags Using these tags will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.

Solution

In /public_html/includes/classes/class.opengraph.php

Find

$tags = array(
	'og:type' => $type,
	'og:title' => $title,
	'og:description' => $description,
	'og:image' => $image,
	'og:url' => $url,
	'og:site_name' => GetConfig('StoreName')
);

Replace

$imgfile = parse_url(urldecode($image));
if(isset($imgfile['fragment'])){
	$localfile = $_SERVER['DOCUMENT_ROOT'].$imgfile['path'].'#'.$imgfile['fragment'];
}else{
	$localfile = $_SERVER['DOCUMENT_ROOT'].$imgfile['path'];
}
list($width, $height) = getimagesize("$localfile");

$tags = array(
	'og:type' => $type,
	'og:title' => $title,
	'og:description' => $description,
	'og:image' => $image,
	'og:image:width' => $width,
	'og:image:height' => $height,
	'og:image:alt' => $title,
	'og:url' => $url,
	'og:site_name' => GetConfig('StoreName')
);

Result

Check result using Facebook Sharing Debugger at https://developers.facebook.com/tools/debug/sharing/

<meta property="og:type" content="website" />
<meta property="og:title" content="modDIY Home Page - PC Modding, Case Mods, Custom Cables" />
<meta property="og:description" content="Best selection of PC mod supplies offers custom pc cable, case mods, computer cooling systems, computer case mod DIY parts, wire management kits, custom pc mods" />
<meta property="og:image" content="https://www.moddiy.com/images/logo-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="modDIY Home Page - PC Modding, Case Mods, Custom Cables" />
<meta property="og:url" content="https://www.moddiy.com" />
<meta property="og:site_name" content="modDIY.com" />

Leave a Reply

Your email address will not be published. Required fields are marked *