How to Specify the Facebook “og:image” Tag in WordPress
Posted onMaking sure the right image appears when you share your post on social media networks like Facebook is a pretty big deal. In a lot of cases, Facebook and some WordPress plug-ins like Jetpack will attempt to automatically “divine” the image to share even if you don’t explicitly specify which one. Jetpack for example has a process by which they isolate the most likely picture. But even with all this, things can go wrong. For some reason or the other, it’s possible that neither Facebook nor Jetpack will find a suitable image. Or even the wrong one if your post has more than one.
In this article, I explain how to explicitly specify which image you want associated with your post. Even if that image doesn’t exist in the post at all! To do this, we’re going to make use of a protocol known as “Open Graph” – or og for short. Basically I’m going to use a custom field and then make use of the “wp_head” action hook.
The URL of the image in question needs to be specified in the “head” section of the WordPress page in the following format:
<meta property="og:image" content="[source URL]" />
WordPress doesn’t give us any direct way to insert code into the head of a page even though there are a number of plug-ins that will do that for us. However in the interests of keeping our site lean, I’m going to achieve this with just a snippet of code instead of an add-on.
As an example, I’m using a post that has two images. By using the Facebook debugger, I’m able to see that it is currently picking up the wrong image:
To solve this same problem on your WordPress blog post, navigate to the post editor where you’ve written your article and scroll down till you see the section called “Add New Custom Field”. Click “Enter new” and in the resulting textbox on the left, enter “og_image”. On the right-hand side, type in the URL of the image you want to associate with the blog post.
Next click “Add Custom Field” and save the post. So now we have a custom variable called “og_image” that stores the value of the image URL and is linked to the post. By itself this doesn’t do anything. What we need to do now is open up our functions.php file – or wherever you store custom PHP code – and enter the following at the end of the file before the closing “?>” PHP tags:
function insert_og_image() {
if(get_post_meta(get_the_ID(), 'og_image', true) && is_single()) {
$output = '<meta property="og:image" content="'. get_post_meta(get_the_ID(), 'og_image', true) .'" />';
}
echo $output;
}
add_action('wp_head','insert_og_image');
What this does is make use of the “wp_head” action hook to execute our own custom function called “insert_og_image”. In this, I first check to see whether or not the “og_image” custom field is defined at all and whether or not we are dealing with a single page. If both of these conditions are true, I simply store the desired string with the meta-tag as defined earlier into a variable called $output. Note how I extract the value of the custom variable using the “get_post_meta” function. Then I simply output the variable via “echo”. One other thing – if you find that the Jetpack plug-in is also outputting an “og:image” and messing up the default picture shown on social networks, simply disable that aspect of Jetpack by entering the following line in your functions.php:
add_filter( 'jetpack_enable_open_graph', '__return_false', 99 );
If everything has gone well, my post should now render with the custom image URL marked as the “og:image” . We can test this out by fetching new scrape information from the Facebook debugger. You can see below that our experiment is a success:
Facebook is now showing a different image – the one we want – instead of the original. Using custom fields to specify the Open Graph parameters is a very elegant and hassle free way of taking the guesswork out of critical post parameters.
Hi Bhagwad,
Thank you so much for providing this information! :)
I have roamed the web quite extensively to find more on how to insert a chosen image for the og:image tag. Your page is the first to address this in a way, I could understand.
Because I encountered some problems when sharing images from WordPress to Facebook (through Open Graph), I searched high and low to solve this.
So thank you very much for your help!
Edwin
Fantastic information. Thank you for sharing this post, as it gave me exactly what I needed to correct the issue. The steps were simple and took no time to implement. Within a FB post composition, I had previously been able to switch the default page banner image to the post’s featured image. Suddenly it stopped and I had a vague idea of the need to address something according to the FB debugger. You provided a fix not only to the issue FB had, your correction also defaults FB to now use my featured image. I love it!
After hours of trying different things, I found this article and bingo it all worked straight away – thank you!!!
This is a great addition and easy to add. However, after either a WP update or maybe a PHP update I now get a PHP warning because of this script:
Notice Undefined variable: output 1 functions.php:103
The line in question is the one that says: echo $output;
Any idea how to adjust the script to get rid of this error? The function does still work, but I’m not sure having a warning/error happening every time the page loads because of this is a good thing.