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!