How To Make Sure Your WordPress Site Looks Good on Facebook

How To Make Sure Your WordPress Site Looks Good on FacebookHere’s an interesting factoid for you. Approximately once every 13 seconds* another blogger posts on an internet forum or group a variation on the following question: “Why does Facebook always show the wrong image when I post a link to…

Spread the love

how to make your WordPress site look good on Facebook

Here’s an interesting factoid for you. Approximately once every 13 seconds* another blogger posts on an internet forum or group a variation on the following question: “Why does Facebook always show the wrong image when I post a link to my blog ?!!”

This post is a guide to what’s going on and how to make it right.

I preface it with this caveat:

Facebook is a mean ole bully and often changes the way that it operates suddenly and without warning. What works today could become obsolete tomorrow. Today, this is what works.

Get To Know The Open Graph Protocol

The Open Graph Protocol is a particular set of meta data – that is, information about your site, that goes into the code of your site. Both Facebook and Google Plus look for this meta data in order to learn about your website.

When it’s all present and correct your site looks lovely in Facebook.
When it’s not there, they make stuff up based on whatever they can grab.

It looks something like this when working correctly:

Check To See If Open Graph Is Implemented On Your Site

If your site is not displaying the correct information when posted to Facebook, that’s a big clue that either you haven’t implemented Open Graph, or something is amiss with the implementation.

There are two ways to check.

1) Use the Facebook URL debugger

The Facebook URL debugger is far more simple than it might sound.

You simply enter a URL in there and it will tell you what information Facebook can see about your site. The debugger lets you see any error messages that Facebook generates as well as the info they are picking up. If it’s not detecting what you thought it should, you then need to check implementation on your site. It might also alert you to information that is missing, or images that are too small.

After you make any changes to your site and you want to test them,  make sure to run the site through the debugger before checking it on Facebook again. Facebook caches information on your site, so you need to refresh their cache by using this tool, otherwise you may not see the latest version of the info you have implemented and will want to unnecessarily throw your computer off the balcony.

Here’s how it looks when you enter a url in the debugger:

Facebook URL Debugger

2) View the page source of your site and look for og: tags

Open Graph tags in page source

If these aren’t present in your page Facebook will just pick up any info it can find, which, when it comes to images, is not usually the one you intended.

How To Implement Open Graph

There are many WordPress plugins you can use that will add the correct code to your site. Be aware that not only do you need this implemented on a post-by-post  and page-by-page basis, but also for the homepage of your site – this is especially important if you have blog posts on your homepage. The open graph info is needed whenever a link to your site is posted on Facebook, so if someone posts a link to your homepage, you need to set some “evergreen” information that pertains to your site/company as a whole. Most plugins also let you set a “default” image, which you could set as your logo, so that in the event your post has no image, or Facebook cannot find it, it will fallback to your logo rather than something random.

Plugins That Implement Open Graph

1) WordPress SEO by Yoast :: Recommended Solution

If you use Yoast’s WordPress SEO plugin, you can enable Open Graph in the social section. Once enabled it makes any images in your post available for use as the thumbnail on Facebook (each image gets its own “og:image” tag) and it will by default use the SEO title and SEO description for the title and description in FB. You can specify a different description for use on Facebook by clicking in the Social tab on each post. Although it offers a field for a Google Plus description, that doesn’t actually seem to work. Google Plus has stopped showing a description altogether lately.

Image Handling:

If you have a featured image and images inside the post, they will each have an “og:image” tag so when you post to Facebook you will have a choice of those images.

WordPress SEO by Yoast also includes the more recently added “article:publisher” property which allows a “like” button for your page to show up along with your story in the news feed. This last feature is really the one that sets it apart from the other plugins I mention below and makes it the most thorough solution. If you need help setting up the WordPress SEO plugin, check out my guide here.

2) All in One SEO pack

The most recent version of this plugin added a new feature called Social Meta which has some really cool controls for handling images and other social info. It still doesn’t include the “article: publisher” tag but if you’re not bothered about that, it’s a good choice if you’re not using Yoast’s plugin.

You have to go into the Feature Manager tab and activate the Social Meta module. It gives you a pretty thorough set of options to specify your Open Graph information including a really cool way to set up a default for image handling. You can choose, for example, whether the default should be the featured image, the first image in the post, a custom field etc. This setting can be over-ridden on any individual post making this implementation probably the most flexible of all the plugins here.

All In One SEO Pack Social Meta Image Options

You’ll notice on that screenshot it gives you a way to turn off Jetpack’s social tags so that you can use the two plugins without any conflict.

As with the Yoast plugin, you’ll now find a Social tab on the individual post as well. So you can either choose to use the same SEO title and description or you can specify different info for Facebook.

3) Social SEO Booster

The free version of Social SEO Booster includes enough features to get your site looking good on Facebook. It also includes a way to set up Google Authorship info amongst other things. There is also a paid version with a lot more built in, but for Facebook, the free version works well.

Similar to Yoast and AIOSEO it gives you a panel on every post where you can specify the image, title and description that you want to use on Facebook.

4) Jetpack

Jetpack isn’t my favorite solution for this because it doesn’t really give you much control. But for those users that already have Jetpack installed and connected, and don’t need a granular level of control over this stuff, Jetpack is a fine “set it and forget it” type solution.

If you have Jetpack installed, it will add open graph tags automatically UNLESS you also have Yoast installed in which case Yoast takes precedence.

WordPress SEO by Yoast and Jetpack handle images for Facebook differently. While Yoast gives all images in a post their own tag, which allows the user to choose which one to use when posting on Facebook, Jetpack only picks up the featured image, unless there is no featured image, then it will use any and all images from inside the post.

What Size Should Your Facebook Thumbnail Image Be?

This is something that Facebook changes pretty often. They used to be mostly square images or close to it, but now they are featuring much larger images in the news feed when you post a link, so currently images that are more horizontally oriented will look the best.

According to Facebook’s developer documentation about the open graph properties:

“We suggest that you give us an image of at least 600×315 pixels. However, bigger is better, so if you have a 1200×630 or larger image that you can use, please give it to us. Also, we recommend that you keep images as close to a 1.91:1 aspect ratio as possible to avoid cropping. (Note: image sizes must be no more than 5MB in size.) “

However keep an eye on the above link for the most current information.

Hopefully this helps you make sense of the confusing world of Facebook!

* Totally made up stat, but sounds about right to me 🙂

Weekly WordPress Tips To Your Inbox

+ Get 50% Off The Beginner’s Guide To SEO Ebook!

Lucy Beer - WebTrainingWheels WordPress TrainingI provide WordPress training to businesses and individuals. Whether you are just getting started or want to take your skills to the next level, I’ll give you the customized training you need.

Facebook Comments

More Stuff

Network Latency – Comparing the Impact on Your WordPress Site A lot of articles around the web tend to primarily focus on front-end WordPress optimizations and quick ways to speed up your site. Server optimizatio...
Quickly Trim Eyebrows in Photoshop Excerpt from Photoshop for Lightroom Users This retouch requires you to pick up one part of your image to cover up another part of it, and, of course,...
Beginner’s Guide To SEO Ebook Coming Soon Search engine optimization can seem eternally confusing. It’s one of the things that clients want to know about the most, but are also a little intim...
Client Onboarding: A Primer for Working on Hassle-Free Projects All WordPress developers want their projects to run stress-free. While you can’t guarantee that throughout the entire project, you can manage things m...
Spread the love

Posted by News Monkey