SocialShareFail

That thing where you promote your latest blog post on social media? That thing is harder than it sounds. There’s the planning, writing, scheduling and moderating. And before you can take those steps, you’ve got all that original, incredibly useful content to make.

So, it’s really frustrating when you try and share the link on Facebook and it looks dumb. Or broken. Or incomplete. Just wrong. Why is that? And why does it make you feel so helpless? Like Zuck himself declared your post unworthy. Why doesn’t it just work?

On the surface, it seems like there’s nothing you can do to fix whatever’s gone wrong. But there’s actually plenty to check. And Facebook supplies their own tool to help you troubleshoot. All is not lost. There are five core reasons your posts have issues on Facebook (and other social networks using Open Graph).

Incomplete or Incorrect Open Graph Tags

This is the big one. Facebook designed the Open Graph Protocol to give website designers and web-thing makers a single system for telling Facebook how to represent their thing when it gets shared. You know, what’s the title, what’s the image, what is it and what should people on Facebook see when they see you shared it?

Open Graph uses meta data tags added to the HTML on each page and post of your site. Meta data might not be shown on the page or be sensed by the visitor at all. But it’s there in the background, helping Facebook represent articles, images, songs, videos, slideshows and other content types in a consistent format when you see it in the News Feed.

If you’re not using Open Graph tags at all, Facebook just guesses what to show. Don’t make Facebook guess. Check with your web designer or webmaster to make sure you’re set up to add these tags without having to hand-code them into each and every page. If you’re on WordPress, use the WordPress SEO by Yoast plugin. I’ll be referring to this plugin throughout the discussion below.

There are five pieces of Open Graph meta date required: URL, title, description, site name and image. Missing any one of these is going to mess you up. Especially title, description and image. Let’s talk about image first. It’s the one most people complain about and the one most people get wrong.

Wrong Image Size

Or, as Facebook would say, “unoptimized images”. Some sites seem to be extra cool. When people share their posts, those sites get previews with large images. They’re optimized. Why do you just get the mini one? It’s in the size.

Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. source: Facebook – Sharing Best Practices for Websites

Of course, your post must include an image to start with. You’ve got an image with each post, right? It’s pretty standard now for social networks to pair your link with the first image the network’s system scrape off your page.

With WordPress SEO by Yoast, you can also manually tell Facebook which image file to use, even if it’s not in the main body of your post.

For best compatibility on Facebook (and Google+ too), use a first image that roughly fits a 2:1 ratio. Shoot for a big rectangle and you’re probably ok. But, if your image is smaller than 600 x 315 px you’ll just get that small thumbnail when the page is shared on Facebook.

I recommend finding the width of your website’s main content area. That’s the area where your blog post text is, not including the sidebar. On Roundpeg’s site, that’s 795 pixels. So, each post includes a cover image at the top that’s 795 pixels wide and 320 pixels tall. Since we’re over 600, we get the big preview picture.

Want to test your posts to preview how they’ll look when they’re shared on Facebook? Use the Debugger. Just enter the URL for the page or post you want to check. Facebook will crawl your content, show you a preview and point out any Open Graph tags you’re missing, like description and title.

No Description or Title

A great picture adds polish and professionalism to your posts when they’re shared on social media. But you can undercut that impact when other important meta data is missing. In addition to the image, Facebook shows a title and description for links. When you see shared links in News Feed with garbled or cut-off text, it’s because the author failed to include Open Graph tags and Facebook’s robots made their best guess at what to display.

Use a plugin like WordPress SEO to customize the title and description for each page and post. Title is easy, you can display something different on Facebook if you want, but you probably want to keep it the same. The description is a little harder to write. There’s a limit of about 160 characters. That’s two sentences, barely more than a Tweet.

I’ve embedded a shared link from NPR below. This is a good Facebook post. They’ve written a short teaser specifically for sharing the link on Facebook. Below the teaser, you can see what Facebook displays to represent the link. There’s a great big image, followed by a title and a description.

You Know What Else Makes This Great?

This article’s headline is really well written. It tells you exactly what to expect when you click: you’ll learn how wine is made in Georgia. And it’s a tad sensational. Secrets! But it’s still NPR. Wine! Clay pots!

Headlines and titles are one of the hardest things to write. But they’re one of the best things you can work on to improve your blog posts. Use the checklist below to check your post for the five main things your post needs to look good on Facebook. Then run it through Facebook’s Debugger to preview it.

Optimize Your Post for Facebook

  • Write a compelling blog post title.
  • Add Open Graph tags. Use WordPress SEO by Yoast if you’re on WordPress.
  • Specify an Open Graph title.
  • Specify an Open Graph description.
  • Use a great image in your post (make it wider than 600px and taller than 315px).

RP_SocialMedia_WhereShouldYouBe_Footer

Take the quiz now