Picture of Brian Love wearing black against a dark wall in Portland, OR.

Brian Love

Open Graph Meta Tags

Does your web site implement the Open Graph protocol? If your answer is “huh?” or “I don ‘t think so…”, then you should keep reading.

Open Graph

You’re brand, whether it is a product, service or application, needs to tell a story. And, the open graph protocol is about enabling your users to tell your story. To implement the open graph protocol on your web site, it’s very simple — just add at least 4 new meta tags to the <head> of your HTML documents:

These are very straightforward. Including these meta tags in your document lets you control the title, link and image that is shown when a user shares your web site on their social account. Rather than letting Facebook or Twitter guess, you get to decide what is shown. To specify the description of your content, just include the og:description meta tag. Here is an example for the website type:

<meta property="og:type" content="website" />
<meta
  property="og:url"
  content="http://brianflove.com/2013/10/23/os-x-mavericks-and-apache/"
/>
<meta property="og:title" content="OS X Mavericks and Apache" />
<meta property="og:image" content="http://www.brianflove.com" />
<meta
  property="og:image"
  content="http://uploads.brianflove.com/wp-content/uploads/2013/10/OS-X-Mavericks-logo.png"
/>
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
<meta property="og:image:type" content="image/jpeg" />

By default, I specify the URL as the current URL for the web page, and pull in the title and description to match the page’s title and description. I also specify an image to be included when the user shares the content. Let’s look at including images now.

Images

When specifying your image be sure that it is large enough (more than 200 x 200 pixels) and that you also specify the MIME type of the image. Further, if you are delivering the image using SSL (over HTTPS), you should also specify the og:image:secure_url property. You can also optionally specify the image’s height and width.

<meta
  property="og:image"
  content="http://www.example.com/images/open-graph/logo.png"
/>
<meta
  property="og:image:secure_url"
  content="https://secure.example.com/images/open-graph/logo.png"
/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1000" />
<meta property="og:image:height" content="600" />

Note, you can include as many image tags as you see fit. T he user will often get to choose which image to include when sharing your content on their social network, based on the images that you provide. So, pick the best images that represent your site or brand, and let the user decide which image to use.

Video and Audio

You can also include meta tags to describe any audio or video that is included on your website. This is just as easy and simple as including the images above. The video tags are identical to the image tags, just substitute “image” for “video”:

WordPress Plugin

If you use WordPress for your blog or web site it’s really simple to get up and running with the open graph protocol. Just install the Facebook plugin for WordPress. They are included by default.