As I worked my way through optimizing the SEO for my Dead Lesbians, I hit a recommendation that I found difficult to handle. It was presented simply. Add an open graph image to the page.

The problem was the page was a category page (a custom taxonomy).

Easy: Yoast’s OG Image

The easiest solution if you’re using Yoast SEO is just to make a custom image and upload it. Go to the taxonomy page, edit it, go to the Yoast section, click on the sharing icon, and you’ll see what needs to be added.

If you want to automatically handle the open graph image with Yoast SEO, it’s filterable.

function halfelf_wpseo_opengraph_image( $image ) { 
	return $image; 
}; 
add_filter( 'wpseo_opengraph_image', 'halfelf_wpseo_opengraph_image', 10, 1 );

This means if you have a specific image for a category if the image doesn’t have a post thumbnail, you could do something like this:

function halfelf_wpseo_opengraph_image( $image ) { 
	global $post;

	if ( !has_post_thumbnail() ) {
		if( in_category( 'foo', $post->ID ) ) {
			$image = get_stylesheet_directory_uri().'/images/cat_foo.png';
		} elseif( in_category( 'bar', $post->ID ) ) {
			$image = get_stylesheet_directory_uri().'/images/cat_bar.png';
		}
	}
	return $image;
}

That’s really bad code, by the way. There are smarter ways than hard coding, especially since you can do some pretty nice stuff with primary categories in Yoast SEO. I would probably have it grab the primary category for the post, force the image, check to make sure the image exists, and have a fallback (just in case someone else added a new category).

The problem is that the filter doesn’t work on categories and taxonomies because they don’t have the filter set. Posts and pages are fine. Not categories.

Easy: Adding via wp_head

Adding in an open graph image via the wp_head action is similarly possible.

add_action('wp_head', 'halfelf_opengraph_image', 5);
function halfelf_opengraph_image( ) {
	echo '<meta property="og:image" content="http://example.com/og_image.png"/>';
}

This is extendable and you can customize it to be as simple as my example or as complex as pulling a specific image per category or featured image, depending on your theme.

Not Easy: Reality

Besides the fact that I can’t use Yoast’s filter for categories, I had a bigger problem. The way I designed my theme, most of my taxonomies had a custom image picked. The images are all SVGs. And you know what doesn’t work on OG images? Yeah, SVGs. Good news was that I had a copy of all the images as a PNG as well, so I was able to use the second method to create default images using the PNG.

More bad news? I didn’t actually know how to grab the taxonomy ID. While WordPress has a handy function is_tax(), I couldn’t use a global like $post to grab a $tax->ID. Thankfully I could use get_queried_object_id() to set my term ID like this:

add_action('wp_head', 'lez_opengraph_image', 5);
function lez_opengraph_image( ) {

	// If it's not a taxonomy, die.
	if ( !is_tax() ) {
		return;
	}

	$term_id = get_queried_object_id();
	$icon = get_term_meta( $term_id, 'lez_termsmeta_icon', true );
	$iconpath = get_stylesheet_directory().'/images/png/'.$icon.'.png';
	if ( empty($icon) || !file_exists( $iconpath ) ) {
		$icon = 'square';
	}

	echo '<meta property="og:image" content="'.get_stylesheet_directory_uri().'/images/png/'.$icon.'.png" />';

}

Obviously I know where I’m storing the images. You’ll want to change that for yourself. I went with a fallback image of “square” in case there wasn’t one available, just because I hate having nothing show. Also here I only wanted the custom taxonomies to have this image, not the regular categories and tags.

Reader Interactions

%d bloggers like this: