How to make your blog posts show up perfectly on Facebook

By in Running a Website with 3 Comments

Have you ever wondered, “How do I get Facebook to use a different photo when someone shares my website?”

Or, “How can I make Facebook show something other than the first line of my blog post?”

Maybe, “Where on earth does Facebook get the pictures it shows next to my posts?!”

Or simply, “How do I get Facebook to show what I want?”

You’re not the only one! Most bloggers, web designers, and marketing folks are asking the same questions… and for good reason: it’s not obvious, and there’s not much in the way of clear instruction.

If you have your own WordPress site or blog, I have good news for you: with a small investment of time now, you can get everything exactly how you want it for the foreseeable future.

Build the foundation

With that out of the way, your first task is simple: install the WordPress SEO by Yoast plugin.

Once it’s installed and activated, it’s time to set sensible defaults.

facebook-format-seo-socialGo to “SEO” > “Social”.

Check the box that says “Add OpenGraph meta data”. If you have a Facebook page, you can also use the “Add Facebook Admin” button but it’s not necessary.

Another optional setting (but one that many people will appreciate) are the Homepage and Default settings.

The Homepage settings change what shows up when people share (you guessed it!) your homepage… which is a pretty common page to share, particularly if they’re typing it in.

The Default settings control what image is used if a given post or page doesn’t have any images. For a personal (or personality-driven) site, this is the perfect place to use a photo. (Note that you’ll need to upload it through the “Media” area and then copy its URL to this box.)

And that’s the entirety of the setup! Of course, the WordPress SEO by Yoast plugin does a lot of other things, too, but this is all you need to get started with your Facebook improvements.

Prepare your post

Now that you have the general settings in place, it’s time to get your post ready.

The image

I’m starting with the image because it’s probably the single most frustrating element when it comes to sharing on Facebook. Here’s what you need to know:

  • WordPress SEO by Yoast will offer Facebook every image within your post. Facebook won’t make all of those available. Specifically, any image that’s smaller than 200×200 pixels won’t be included.
  • Every image over 200×200 pixels will be put in a stack for the person posting on Facebook to choose from.
  • The image with the largest dimensions (in pixels) is the one that will be the default. It doesn’t matter if it’s first, last, or in the middle of your post.

The title

If you scroll down past the window where you’re typing your post, you’ll see a new section called (not surprisingly) “WordPress SEO by Yoast”.

There are a couple of tabs that are relevant: the first one is the “General” tab, and it’s the one that’s open by default.

The setting you’re looking for is “SEO Title.” This setting is optional, and you only need it if you want to use something other than the regular title.

Why would you want to do that? Well, if the title of your post or page is something that makes a lot of sense within the context of your site, but wouldn’t be obvious without that context, you can change the title that shows up on Facebook, Google, and other sites.

The description

The “General” tab also has a “Meta Description” field. You can use that to set the description that shows up in Facebook and Google (and a bunch of other sites) if you want to do them all in one fell swoop.

On the other hand, if you only want to set the description for Facebook sharing, you can move over to the “Social” tab, and set it there. (There’s also another option to set the “Google+ Description,” which is similarly useful if your readers use Google+.

Think of these options as an extended version of a text ad: the goal is to convince people to click on the link, whether they’re looking at Facebook or Google.

Test!

This happens all the time: a blogger adds a new (bigger) image, or updates their “Meta Description,” but when they post the link on Facebook, they see the same old thing as before.

Well, you’re not crazy: Facebook is ignoring your changes. But there’s a good reason.

Most blog posts and pages don’t change once they’re posted, so typically, there’s no value to Facebook in grabbing a fresh copy every time. Instead, they sensibly keep a copy unless they’re told to update it.

So you have to tell them to update it. Fortunately, this is both easy and useful, because it also gives you a chance to double-check that everything is as it should be.

All you have to do is go to Facebook’s Debugger tool, put the URL of the post or page into the box, and click the “Debug” button. That’s all you need to do if you just want Facebook to get a fresh copy—but I recommend looking over the results so you can see why they’re showing what they’re showing.

Your turn

Let me know if this works for you, and if you have any questions or run into any trouble. I’ll continue to update this information to clarify anything that’s muddy. :)

Share This
About The Author
Sarah Lewis

Sarah Lewis is the lead WordPress developer at WP Moxie. She's obsessed with making the world a better place through magic code, and she's also a mom, wife, book nerd, and devourer of delicious desserts.

3 Comments

  1. leif erikssen says:

    Hi
    Is there a way to do the same thing for blogger? Thank you in advance.

  2. Helen says:

    Perfectly perfect Sarah, thank you. I’m off to do exactly what you recommend!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>