Tell Facebook Which Image to Use For Your Blog’s Homepage

 

How to tell Facebook Which Image To Use For Your Blog's Homepage

Facebook has a habit of calling any old image, or your latest blog post image to be the image for the homepage of your blog. What I wanted to figure out is how to set a specific image for the homepage, so Facebook would use only that image when someone (or yourself) puts a link to your blog homepage on Facebook. But, how do we do this?

How to Tell Facebook Which Image to Use for your Blog’s Homepage

I searched for quite some time looking for the perfect plugin or solution to make Facebook call the proper image for my blog’s homepage, and only the homepage. Some answers end up changing the image for every page and post on your site to a selected image, but not this answer! This will only force Facebook to call a specific image for your homepage and leave your pages and posts alone.

I looked and experimented with Facebook open graph protocol (app IDs and all that junk), I experimented with this plugin and that plugin. I thought about editing my theme files, inserting all sorts of wacky code that people suggested (but I didn’t!). As it turned out, the answer is rather simple.

If you use All In One SEO (like I do) it’s simple! I’m sure there’s other places to stick the code, perhaps Yoast also has a similar section. Perhaps you’d rather put the code in the header file of your site. However, AOI SEO is what I use, so that’s how I’m going to go about this.

Here it is…

Force Facebook: Show Specific Homepage Image

Like many of you, I use All in One SEO Pack for WordPress. There’s a spot where you can insert a little snippet of code right into All in One SEO that will make Facebook draw a specific image for the homepage of your WordPress site (doh)!

1. Upload your logo to be used on Facebook. This image should be approximately 1452px x 756px. It can be smaller, but no smaller than 484px x 252px. Add the image to your site by clicking “Media…Add New” etc.. Click “edit” image to find the URL for the image. Here’s my image.

2. Grab the code below and paste your logo URL inside the quotes where it says YOUR IMAGE URL.

<meta property=”og:image” content=”YOUR IMAGE URL” />

3. Click on the All in One SEO button on the left side of your WordPress dashboard.

4. In the General Settings of the All in One SEO plugin, scroll down until you see “Advanced Settings” and insert your code into the “Additional Front Page Headers” area.

5. Click “Update Options”.

6. After clicking update options you will need to clear your WordPress Cache (I use WP Super Cache). Clear what ever cache program you’re using.

7. Clear Facebook Cache (see instructions below)

How to Clear the Facebook Cached Data

To clear the Facebook cache you need first clear your WordPress cache and then go to https://developers.facebook.com/tools/debug and insert your homepage URL, click “Debug” and then click “Fetch new scrape information”. Doing so will clear your homepage cache. You may have to clear other page caches if you used an Open Graph plugin before and were having multiple images drawn, or you can simply let the Facebook cache expire.

Now, when you want to link to your homepage or share your homepage on Facebook, the featured image you specified in that little bit of code will be the image that Facebook displays. This solution will not affect the rest of your blog pages and posts!

Help your blogging friends by sharing this post with them!

5 thoughts on “Tell Facebook Which Image to Use For Your Blog’s Homepage”

  1. Hi Andrew, Thanks for stopping over at my blog and leaving a comment. That's how I got here. BTW, Is there any other way to get this done without the use of All in One SEO Pack? I don't think I have that plugin
    1. Hey Enstine! Thanks for stopping by. I believe you can execute the code anywhere before the closing head tag on your homepage. I saw you are using Genesis. The Genesis Simple Hooks plugin designates an area for header scripts. Also, your theme may have it built in. In your dashboard, try going to Genesis ► Theme Settings and look for Header and Footer scripts. Inserting the code in the Header Scripts should force Facebook to call the designated homepage image that you selected and inserted into the code.
  2. I have learned alot - basically just enough to discover that there are things I don't know. This is very clear! I'm still trying to find a good cache program for my blog! And I know nothing about og.....
    1. Yup! I suggest such a large image because Facebook changed their image size again and it's just easier to spoon feed them a big image than to try to guess what they'll require next ;) .. You could probably use a smaller image as long as it meets Facebook's new image pixel requirements...

Leave a Reply

Your email address will not be published. Required fields are marked *