Howto: check your open graph tags for Facebook posts

Recently, Facebook has made a change for fan/brand pages and page managers can no longer change the images, headlines, and excerpts show when including a link in a post. Instead, they rely on open graph tags.

On one hand, it’s annoying because if you were linking to a page you didn’t control, sometimes you would find yourself needing to adjust the description or excerpt if there wasn’t one. On the other, I think you can see where this editing power could lead people to create and/or propagate, wait for it, “fake  news.”

For those people that manage College and University pages, this is especially frustrating. Most of the time we are sharing links, it is to pages that we control and linking somewhere in our school’s network of websites. Even then, we can’t be sure people have correctly tagged their pages.

This is important because having clear, interesting copy and images on your posts not only affects us when we share our own content, other people share our content too. We want to make sure our content looks great when shown to others as well!

For several years, Facebook has been using “open graph” tags, similar to the meta tags of old, as a guide to use when sharing a post. These OG tags include a post title, URL, description, image, and more. Here’s an example:

<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />;
<meta property="og:type" content="article" />;
<meta property="og:title" content="When Great Minds Don’t Think Alike" />;
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

You can set these open graph tags manually in your code. If you use WordPress, most of the SEO plugins including Yoast will set these tags for you and allow you to customize content for them.

One area where this gets tricky is with the featured image. Unless you specify a particular image in your code, the WordPress tools like Yoast use the default image you set in the plugin’s settings.

Facebook and Twitter want large images as your featured images, so make sure they’re at least 200px wide by 200px high. Facebook would love that to be higher. They say in their developer area:

Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images. Images can be up to 8MB in size.

Time to test your content

Once you’ve got all your open graph tags ready, it’s time to test. Don’t wait to check until you’re ready to post your story or tweet that, um, tweet.

Facebook has a handy debugging tools that will show you what it sees when it scrapes your page and shares it.

When you enter a URL into Facebook’s sharing debugger, you get this back. These are the results for a previous post on this blog about Snapchat.

Example of Facebook Sharing Debugger Output

As you can see, it has a good post title and the correct description. I’m not crazy about that image, though. It’s just grabbed one from the post to share, as I don’t have a default image setup for this blog.

I’m using Yoast SEO on this site, so I can easily change that image. Before I do that, I need to clear Facebook’s cache of my post. To do that, I need to paste my URL into the Batch Invalidator. This will basically retcon Facebook and make them grab a fresh version of my page. You can enter URL’s one by one here, or paste many (hence, the batch in the name.)

I created a custom graphic, added it to Yoast, invalidated my URL, and re-scraped. Now, Facebook shows me this:

Open Graph Example

Yes, that’s an ugly graphic, but I only spent 2 minutes on it. Now, Facebook sees the graphic I intended as opposed to a random image Yoast and/or Facebook selected or my default image.