Jetpack

How to add a custom Open Graph image tag to your home page

When you share a post on Facebook, or when Jetpack Publicize publishes a post to your Facebook page, Facebook crawls the page and looks for Open Graph meta tags to build a complete post preview (with an image, title, description, …).

Jetpack automatically creates these meta tags for you, so you don’t have to worry about it!

However, Jetpack doesn’t create any image meta tag for your home page.
If you want to add your own custom image meta tag there, you can add this code to your theme’s functions.php file, or to a functionality plugin:

function fb_home_image( $tags ) {
	if ( is_home() || is_front_page() ) {
		// Remove the default blank image added by Jetpack
		unset( $tags['og:image'] );

		$fb_home_img = 'YOUR_IMAGE_URL';
		$tags['og:image'] = esc_url( $fb_home_img );
	}
	return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'fb_home_image' );

It’s worth noting that the fallback image has to be larger than 200 x 200px, as per Facebook requirements. If your image is smaller, Facebook will ignore it.

This entry was posted in Code snippets, Tips & Tricks and tagged , . Bookmark the permalink.

One Response to How to add a custom Open Graph image tag to your home page

  1. Richard A. says:

    Very nice, yet so simple!

Follow

Get every new post delivered to your Inbox.

Join 63,943 other followers