How To Customize the Squirrly SEO Snippet Image

In this tutorial, we will focus to a specific functionality of Squirrly SEO – the customization of snippet images. Snippet images represent your content in search results and on social platforms, influencing user engagement.

By default, Squirrly SEO employs a sequential method for selecting these images. It first attempts to use the featured image of a post. In its absence, the plugin scans the post’s content for the first available image. If no image is found within the content, Squirrly SEO defaults to a predefined image set in the SEO Settings for Open Graph or Twitter Card.

However, there might be occasions where you require more control over this image selection process. This is particularly relevant if you wish to ensure certain images are consistently used for specific types of content. By integrating a custom filter hook into the ‘sq_post_images‘ filter provided by Squirrly SEO, we can inject our own logic to specify which images are selected.

// This function will check if a featured image exists for a post and, if so, set it as the snippet image. 
add_filter('sq_post_images', function ($images){

        //getting the post from Squirrly Frontend
	$post = SQ_Classes_ObjController::getClass('SQ_Models_Frontend')->getPost();

        //get the image only if there is a post
	if (!isset($post->ID) || (int)$post->ID == 0) {
		return $images;
	}

	$images = array();

        //check the attachment image / featured image
	if (wp_attachment_is_image($post->ID)) {
		$attachment = get_post($post->ID);
		$post->post_title = ( $attachment->post_title ?? '' );
		$post->post_excerpt = ( $attachment->post_excerpt ?? '' );
	} elseif (has_post_thumbnail($post->ID)) {
		$attachment = get_post(get_post_thumbnail_id($post->ID));
		$post->post_title = ( $attachment->post_title ?? '' );
		$post->post_excerpt = ( $attachment->post_excerpt ?? '' );
	}

	if (isset($attachment->ID)) {
		$url = wp_get_attachment_image_src($attachment->ID, 'full');

		if(isset($url[0])) {
			$images[] = array(  
				'src' => esc_url($url[0]),
				'title' => SQ_Classes_Helpers_Sanitize::clearTitle($post->post_title),
				'description' => SQ_Classes_Helpers_Sanitize::clearDescription($post->post_excerpt),
				'width' => $url[1],
				'height' => $url[2],
			);
		}
	}

	return $images;
});

Or use the ‘sq_open_graph‘ and ‘sq_twitter_card‘ hooks to load the image for Open Graph and Twitter card separately.

// This function will load the OG image in this order:
//Step 1: Get the Image set in Squirrly SEO Snippet for the open graph
//Step 2: Get the Image from the attachment
//Step 3: Get the Image from the content
add_filter('sq_open_graph', function ($og){

	//getting the post from Squirrly Frontend
	$post = SQ_Classes_ObjController::getClass('SQ_Models_Frontend')->getPost();

	//get the image only if there is a post
	if (!isset($post->ID) || (int)$post->ID == 0) {
		return $og;
	}

	//Step 1: Get the Image set in Squirrly SEO Snippet for the open graph
	if ($post->sq->og_media <> '') {
		$og['og:image'] = $post->sq->og_media;
		$og['og:image:width'] = '500';

		return $og;
	}

	//Step 2: Get the Image from the attachment
	if (wp_attachment_is_image($post->ID)) {
		$attachment = get_post($post->ID);
	} elseif (has_post_thumbnail($post->ID)) {
		$attachment = get_post(get_post_thumbnail_id($post->ID));
	}

	if (isset($attachment->ID)) {
		$url = wp_get_attachment_image_src($attachment->ID, 'full');

		if(isset($url[0])) {
			$og['og:image'] = esc_url($url[0]);
			$og['og:image:width'] = $url[1];
			$og['og:image:height'] = $url[2];
		}

		return $og;
	}

	//Step 3: Get the Image from the content
	if (isset($post->post_content)) {
		preg_match('/<img[^>]*src="([^"]*)"[^>]*>/i', $post->post_content, $match);

		if(isset($match[1])) {

			if (strpos($match[1], '//') === false && strpos($match[1],'data:image') === false) {
				$match[1] = get_bloginfo('url') . $match[1];
			}elseif (strpos($match[1], '//') === 0) {
				$match[1] = (SQ_SSL ? 'https:' : 'http:') . $match[1];
			}

			$og['og:image'] = esc_url($match[1]);
			$og['og:image:width'] = '500';
		}
	}


	return $og;

},11);

// This function will load the Twitter Card image in this order:
//Step 1: Get the Image set in Squirrly SEO Snippet for the twitter card
//Step 2: Get the Image from the attachment
//Step 3: Get the Image from the content
add_filter('sq_twitter_card', function ($tc){

	//getting the post from Squirrly Frontend
	$post = SQ_Classes_ObjController::getClass('SQ_Models_Frontend')->getPost();

	//get the image only if there is a post
	if (!isset($post->ID) || (int)$post->ID == 0) {
		return $tc;
	}

	//Step 1: Get the Image set in Squirrly SEO Snippet for the twitter card
	if ($post->sq->og_media <> '') {
		$tc['twitter:image'] = $post->sq->og_media;

		return $tc;
	}

	//Step 2: Get the Image from the attachment
	if (wp_attachment_is_image($post->ID)) {
		$attachment = get_post($post->ID);
	} elseif (has_post_thumbnail($post->ID)) {
		$attachment = get_post(get_post_thumbnail_id($post->ID));
	}

	if (isset($attachment->ID)) {
		$url = wp_get_attachment_image_src($attachment->ID, 'full');

		if(isset($url[0])) {
			$tc['twitter:image'] = esc_url($url[0]);
		}

		return $tc;
	}

	//Step 3: Get the Image from the content
	if (isset($post->post_content)) {
		preg_match('/<img[^>]*src="([^"]*)"[^>]*>/i', $post->post_content, $match);

		if(isset($match[1])) {

			if (strpos($match[1], '//') === false && strpos($match[1],'data:image') === false) {
				$match[1] = get_bloginfo('url') . $match[1];
			}elseif (strpos($match[1], '//') === 0) {
				$match[1] = (SQ_SSL ? 'https:' : 'http:') . $match[1];
			}

			$tc['twitter:image'] = esc_url($match[1]);
		}
	}


	return $tc;

},11);