Rank Math SEO Hooks Tutorial – Modifying Open Graph Image

The WordPress plugin repository contains many SEO WordPress plugins.

One SEO plugin that’s receiving more attention recently is the Rank Math SEO plugin.

It offers many features in just the free version, such as the ability to have external links open in new tabs or version control functionality for Rank Math plugin rollbacks or beta plugin testing.

I’m not going to go into the specifics of any of its features, however.

Instead, I’m going to provide instructions on how to modify the open graphic image similar to the post I previously made with Yoast SEO when wanting to share posts on social media.

Fortunately, instead of having to manually search for filters and hooks via grep in the plugin directories, Rank Math provides documentation about the available filters and action hooks that we can hook into.

We’re going to examine those hooks and look for an appropriate filter for modifying the output of the open graph image.

We searched through the documentation, and found the rank_math/opengraph/{$network}/image filter.

We’re going to work off the example code that they provide on that documentation page for the rank_math/opengraph/{$network}/image filter:

/**
 * Allows developers to change the OpenGraph image within theme.
 *
 * The dynamic part of the hook name. $network, is the network slug. Can be facebook or twitter.
 *
 * @param string $attachment_url The image we are about to add.
 */
add_filter( "rank_math/opengraph/{$network}/image", function( $attachment_url ) {
	return $attachment_url;
});

The attachment URL is NOT the URL with the file extension visible i.e. example.com/image.jpg, but rather the URL of the attachment post i.e example.com/image that WordPress creates.

Let’s look at a simple example to illustrate how this works:

$network_slugs = array( 'twitter', 'facebook' );

foreach($network_slugs as $network_slug)
{
	add_filter( "rank_math/opengraph/$network_slug/image", function( $attachment_url ) {
		return wp_get_attachment_url( 1231 );
	});
}

We store the network slugs in an array for looping purposes.

We use a foreach loop to run identical code for the Twitter and Facebook network slugs.

Then the attachment URL is returned using the post ID as the argument.

It’s possible to use the rank_math/opengraph/{$network}/image filter to complete more complex actions than what we discuss here, such as displaying an alternate image based on a GET parameter:

$network_slugs = array( 'twitter', 'facebook' );

foreach($network_slugs as $network_slug)
{
	add_filter( "rank_math/opengraph/$network_slug/image", function( $attachment_url ) {
		$attachment_url = isset( $_GET['image'] ) ? wp_get_attachment_url( $_GET['image'] ) : $attachment_url;
		return $attachment_url;
	});
}

You can add the above code to your theme’s functions.php file, use a plugin such as Code Snippets, or as the Rank Math documentation suggests or insert any additional hooked code into a rank-math.php file that you create in your theme’s directory.