Blog

Thoughts, articles and tutorials about web and design.

Add Facebook Preview Image, Title and Description with the Open Graph Protocol

Have you ever shared a link on Facebook only to discover that the preview image you want isn’t available to choose from? If you’re a WordPress user, have you not wanted that featured image to be the preview image on Facebook. Or, do you just want to limit other people from sharing your links with the “wrong” image?

What you might not be aware of is that Facebook easily allows you to do this using their Open Graph tags that you can embed on your page. In this article I will explain how to include them and what each tag does.

[framed_box bgColor="#fcffc4"] Want to add this to your WordPress site? Jump right to our tutorial! [/framed_box]

What are Open Graph Tags?

Open Graph Tags are nothing special in terms of HTML. They are just a series of custom meta tags that Facebook itself reads when scanning a page. Here is what Facebook says in their developer documentation:

The tags allow you to specify structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today and in the future.

The main benefit of these tags is that you get to customize how Facebook reads the links that people like or share from your site. You get to control the title, description and featured image instead of leaving that up to the person sharing your content. This gives you consistent control over branding.

The Tags Your Must Include

Facebook has chosen to require you to use a minimum amount of tags if you are going to use them at all. Fortunately, they are all tags that you would want to use. In no particular order, the tags are: og:title, og: type, og:image and og:url. Facebook also asks (forcefully) that you include fb:app_id or fb:admins.

In addition, Facebook recommends that you also add og:site_name and og:description to the header.

Furthermore, to make sure the tags are easier understood, include the following in your <html> opening tag, following the type specification: xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"

This would make the head look like this:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
   <head>

What Do The Tags Do?

Now that we have gotten down the basics of what open meta tags are and what Facebook requires of you, let’s have a look at what each of these tags do specifically and what the markup is to add them. All of the tags are prefixed by og: (for open graph) and the word following is usually pretty self-explanatory.

og:title

Consider this as an equivalent of your HTML <h1> tag or whatever tag you are using for your page headline. This is used to grab the title of the link when sharing a link to Facebook. The benefit of specifying this in an open graph tag is that you can exclude your site name if you’d like, something which likely is in your page <title> tag.

<meta property="og:title" content="5 Time Saving Notebooks and Sketchbooks for Web Designers"/>

og:type

One of the less self-explanatory tags is the og:type tag. Basically, since Open Graph is a protocol used to interact with your Facebook profile and experience, types are a number of pre-defined, real-life objects that say something about the contents of the page. If you are posting a review of a book you would want to use “book” as the type as an example. Facebook offers a comprehensive list of support type objects on their developer page.

<meta property="og:type" content="article" />

og:image

The preview image that shows up when you share a link on Facebook can be fully customized. Not a lot of people are aware of this and even fewer take advantage of it. By default, if this tag isn’t specified, Facebook will load all of the images on the site and give the person sharing the link a choice. This means that ads can definitely be used to share your article, something far from ideal.

Instead make sure that you include this tag on your page and control how it appears. Square images work best, although any will suffice.

<meta property="og:image" content="http://www.xldstudios.com/wp-content/uploads/2011/11/p2-large-200x200.jpg"/>

og:url

There’s not much to say about this tag, other than the fact that it does what you think it would do. When specifying this in your header, it should indeed contain a link back to the article that you are sharing. It’s just another way of making sure Facebook gets the right metadata for your link.

<meta property="og:url" content="http://www.xldstudios.com/2011/11/02/5-time-saving-notebooks-and-sketchbooks-for-web-designers/"/>

fb:app_id/fb:admins

Facebook really likes to know which of their users or pages are connecting with Facebook to use the open meta tags. If you want to use all the power of a Facebook application as a base for your website sharing, you should go ahead and use the fb:app_id tag and enter the ID of the app that you create.

If you on the other hand just like to connect your website with Facebook’s sharing functions via your personal account, using the fb:admins tag and your own User ID (not your username or nice name, but the numerical ID) will be just enough.

<meta property="fb:admins" content="2618000377458"/>

og:site_name

Another tag that is rather self-explanatory is og:site_name. Just fill it with the normal name of your website as Facebook uses this as a base to write from where a user shared the content.

<meta property="og:site_name" content="XLD Studios"/>

og:description

Finally, just like any search engine needs a good description, so does your page that is destined to be shared on Facebook. By specifying a custom description, you can control what appears when a user shares the content on Facebook and can try to tailor it so that more users click on the link and read your article, or keep sharing it.

<meta property="og:description" content="Explore 5 different notebooks and sketchbooks perfect for the designer wishing to do sketches away from the computer."/>

WordPress Users: How Do You Do This?

If you are using WordPress you need to think in a slightly more dynamic way if you choose to add the tags by hand to your header.php, or through your functions.php, hooking into the WordPress wp_head(); function.

Later this week, I will be showing you how to set your theme up for the Open Graph tags in a good way, using proper WordPress coding principles and supporting all of the parameters discussed here today, including setting an image tag that will for blog entries be the same as your featured image and for your home page be a custom logo that you can set. Stay tuned for the article.

If you would rather use a plugin, basic support (the tags discussed in this article with the exception of the image tag) is included in the WordPress SEO plugin by Yoast. This is currently the plugin that we use on new websites that we build here at XLD Studios and favor it over competing solutions such as All in One SEO and SEO Ultimate.

Conclusion

Adding Open Graph Tags to your page header will help ensure that your content is shared in a more favorable way on Facebook. If you dig deeper into Facebook’s Open Graph protocol though, you will find all sorts of more advanced use for it, where sharing is just the tip of the ice berg.

Given how easy it is to gain control over how links from your site appears on Facebook, it is something you ought to consider just doing.

Don’t forget to use the Facebook developer site article on the Open Graph Protocol as a reference.