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!

Jetpack will also add an Image meta tag to your home page if you use a Site Logo, or a Site Icon. If you don’t use any of these 2 options, you might want to add your own custom image meta tag there. To do so, add one of the following code snippets 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' );

Alternatively, you can change the default image used any time Jetpack can not determine an image to use:

function custom_jetpack_default_image() {
	return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_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!

  • Recent Comments

    Jeremy on Improved Stats and Distraction…
    Jeremy on Improved Stats and Distraction…
    Germain on Improved Stats and Distraction…
    fohrmann2017 on Improved Stats and Distraction…
    Stalyn on Improved Stats and Distraction…
  • Archives

  • Enter your email address to follow this blog and receive notifications of new posts by email.

  • Relied on by millions of WordPress professionals worldwide.

    Install Free   See Pricing

    Created by Automattic: bringing the power of WordPress.com to every WordPress site.

    %d bloggers like this: