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.

Microdata and Rich Snippets

If you’ve ever wondered how websites get extra data about their products into their search results, this post is for you. For you WordPress users out there, there’s a link to a plugin you can try down below. But I’d recommend reading through the basic explanation first so you know what’s going on.

By using microdata in your site, your search results may start showing rich snippets, or additional information about your site. You can use microdata to tag different types of content for your site. For example, if you’re doing recipes, your results might look like this:

recipe_rich_snippet

See the rating, number of reviews, preparation time, and even calorie content? That’s the “rich” part of the search result snippet.

If you’re selling (or reviewing) a product, like headphones, your rich snippet might look like this:

headphones_rich_snippet

This one shows the rating, the number of reviews, and the price range of the product.

What is microdata?

Simply put, microdata is extra HTML markup that tells search engines what kind of content you have on your site (products, recipes, music albums, reviews, etc). There’s a standard way of marking up your content with microdata, and it doesn’t impact the way your site looks. It’s just some extra behind-the-scenes information about your site’s content, which shows up in search results as rich snippets.

Let’s take a look at some examples. Here’s an example pulled from schema.org of a product listing without microdata:

example_1

Here’s that same product with microdata:

example_1_microdata

It may look a little intimidating, but don’t worry. Let’s break it down by digging into the maroon-colored terms in the example above.

  • itemscope is what defines the scope of the item you’re dealing with. In this case, all the information about the Dell monitor for sale is wrapped in a div with the itemscope attribute. It doesn’t need a value, and you’ll almost always use this in conjunction with itemtype.
  • itemtype is the type of item you’re dealing with (product, reviews, recipes, etc). There’s a list of all the possible item types on schema.org.
  • itemprop is where you define a property about the item. This example uses image, name, and ratingValue as item properties (among others). Again, the proper terms to use here can be found on schema.org for the specific itemtype you’re using.

That’s it. Now take a second to go through the example above and see if you can figure out what each instance of itemscope, itemtype, and itemprop does. By using these three attributes in your HTML, you’re telling search engines what kind of content you have, and specifically what information they should care about when surfacing your site in their search results.

How do I know what microdata markup to use on my site?

Google offers a really helpful Structured Data Markup Helper, which will take the URL of your site and the type of item you want to markup, and help walk you through the attributes and values you should be using.

markup_helper

This should be your first stop as you work on figuring out how to properly use microdata on your site.

How can I test to see if my microdata is working?

Once you’ve tagged your content, you can use Google’s Structured Data Testing Tool, which lets you put in the URL you’d like to test. It’ll show you how it’s interpreting your microdata markup and how the rich snippet will look.

NOTE: Keep in mind that it takes time for your microdata to show up as rich snippets in search results. If you’re having issues with the process, check out this Google article on common issues and questions.

Here’s an example of what Google’s testing tool will show you, from some of my own testing for my wife’s product, Stitch People:

stitch_people_rich_snippets

You’ll see that it’s showing product rating, number of votes/reviews, and the price range of the product on the site.

Here’s a sample of what some of my microdata markup looks like to generate that information from StitchPeople.com:

stitch_people_microdata

Is there a WordPress plugin that’ll handle microdata for me?

Absolutely. There are several plugins available to help you start using microdata on your site. Take a look specifically at All in One Schema.org Rich Snippets to get started. You can also do a search for ‘schema.org’ on wordpress.org to find other plugins that’ll do the same thing.

Where can I find more info on microdata?

If you want to get a little more technical, you can start diving through the documentation on schema.org. If you’re not using a WordPress plugin or other tool to help you, you’ll probably end up going through the documentation to find the values to use for itemtype and itemprop.

Google also has a great page on microdata that you can check out.

OpenWest Schedule

I’m headed to OpenWest later this week and am excited for what will be my first developer conference in several years. The main schedule is posted online and there are a lot of great sessions to choose from. Here’s my tentative schedule:

Thursday

  • 10:30am – Git Workflows that Work
  • 11:30am – Intermediate jQuery: getting to the next level
  • 2:00pm – Testing: Heaven or Hell
  • 3:00pm – NoSQL Introduction or Touring The Dark Side of the Internet
  • 4:00pm – Data Warehousing for Dummies

Friday

  • 10:30am – Big Data Introduction
  • 11:30am – Introduction to EmberJS
  • 2:00pm – NGINX 101
  • 3:00pm – Angular.js for the skeptics
  • 4:00pm – Defending Against Web App Attacks Using ModSecurity

Saturday

  • 9:00am – How to turn WordPress into a full-blown CMS
  • 10:00am – Responsive Image Solutions for a CMS (Part 1)
  • 11:00am – Responsive Image Solutions for a CMS (Part 2)
  • 1:00pm – JavaScript Smackdown!

You’ll also see me tweeting about the conference. Follow me (@spencerbean).