Optimizing your site for Facebook sharing

You’ve probably shared a link on Facebook and seen the magic of how it grabs the site title, image, and description automatically. Did you know you can control what Facebook decides to use for that information?
Here’s an example from one of my recent blog posts showing the blog post title, the first few lines of text from the post, and an image.

Open Graph Example

Facebook uses what it calls the Open Graph (OG) to help determine what information should be used when sharing a link to Facebook. By using OG tags in your HTML, you can tell Facebook specifically what information you want displayed when someone shares a link to your website.

Here are a few examples of the kind of information you can specify with OG tags, taken from the Open Graph Best Practices page on Facebook:

  • og:title – The title of your article, excluding any branding.
  • og:site_name – The name of your website. Not the URL, but the name. (i.e. “IMDb” not “imdb.com”.)
  • og:url – This URL serves as the unique identifier for your post. It should match your canonical URL used for SEO, and it should not include any session variables, user identifying parameters, or counters. If you use this improperly, likes and shares will not be aggregated for this URL and will be spread across all of the variations of the URL.
  • og:description – A detailed description of the piece of content, usually between 2 and 4 sentences. This tag is technically optional, but can improve the rate at which links are read and shared.
  • og:image – This is an image associated with your media. Facebook suggests that you use an image of at least 1200×630 pixels.

Here’s what these tags look like in practice:

Good Example

<meta property="og:title" content="Workday Sets Price Range for I.P.O."/>

Notice that this doesn’t have any branding and it doesn’t mention the domain at all. It simply contains the title of the page/post.

Bad Example

<meta property="og:title" content="MyFavNews.com – Business Section- Workday Sets Price Range for I.P.O."/>

This is a bad example because it contains branding and the domain information. When optimizing OG tags for a blog post, the og:title tag should only have the title of the page/post and nothing else.

Again, go check out the Best Practices for these and more examples of proper use of OG tags. You can also look at Facebook’s documentation for Using Objects within Open Graph for a few more details on the different types of content you can include.

Debug Tool

Just like Google has the tool to help you debug your microdata, Facebook has a tool to help debug your Open Graph tags. It’ll show you what your shared post will look like:

Facebook Open Graph Debug Tool

For those of you on WordPress, there are several plugins out there that will help you specify things like og:title, og:image, and other tag information for your pages and posts. One of the most popular plugins that helps you manage these tags is one you probably already have installed.

WordPress SEO by Yoast

WordPress SEO by Yoast

This popular plugin is most commonly used for SEO purposes like making sure your title tags are consistent and correct, letting you specify meta descriptions for each post, etc. It also helps you manage Facebook Open Graph tags. On your dashboard, go take a look at the Social settings section under SEO, where you’ll see a checkbox to include Open Graph meta data, an option to link your Facebook account (either personal or business), and options for the OG tags you want included on the front page.

SEO Settings

When you’re working on a post, you’ll notice a few extra fields below the text editor where you can enter a description and the image you’d like used:

Open Graph Post Settings

If you leave the description field empty, as I’ve done in this example, it’ll just pull the default meta description for the post. If you haven’t specified a general meta description, Facebook will use the first few lines of the post itself.

Once you’ve configured everything, you’ll see the results in the source code of the page you’re looking at. These will show up as meta tags in the head tag of your site, so you won’t need to scroll very far in the source to see it:

Open Graph HTML Example

In this example, the SEO plugin is even including things like tags and categories.

If you’re on WordPress and don’t have WordPress SEO by Yoast installed, go get it right now and turn it on. I’ll write a future blog post that goes into more detail on what exactly the plugin does for SEO, but it’ll at least be helpful for using Facebook Open Graph tags.

If you’re not on WordPress, try searching for an extension/plugin/gem for whatever platform/framework you’re using. And if you need to insert all this manually, be sure to check out the Best Practices.

Leave a Reply

Close Menu