How to Use Open Graph Tags for More Traffic

Given how drastically Facebook reach has declined in the last year, who doesn’t want to regain some of their Facebook investment? Open Graph tags make it easy. You can even get 50-250% more traffic from Facebook!

But before we dive into exactly how to implement open graph tags, take a look at what they’ve done for some businesses:

  • Tumblr increased its traffic from Facebook 250% after it implemented open graph tags
  • Neil Patel increased his Facebook traffic by 174%
  • ebook service Kobo got a 50% increase

 

What are open graph tags?

Basically, open graph tags are like meta tags for social media. Facebook created them back in 2010. They are part of the data markup structure you can see in Facebook graph search, but you can use them far beyond the basic graph search function.

There is one significant difference between open graph tags and traditional meta tags: Keywords. Open graph tags are for people, not bots, so you don’t have to spend as much time squeezing keywords in as you would for search engine meta tags.

While you don’t need to optimize your open graph tags for keywords, consider this: Social media content is getting picked up by the search engines more and more, so it pays to optimize even your social media posts for search. Just do it lightly… very lightly.

technology

What do Open Graph tags do?

They let you control how your posts appear on Facebook and other social media platforms. You can control how images or videos appear, create custom post titles and descriptions, specify a location or a language, and even link to Facebook apps like comments. And that’s only a short list.

Generally, those double and triple improvements in Facebook traffic come from getting images right – getting the correct image to show, and getting it to show at a size that makes a difference. One recent success story from Marmara, a travel company, came about by defining the feature “image” of a post to be a video instead of an image.

But open graph offers enough refinements that images aren’t the only part of the story.

Here’s a post about an event before it had open graph tags:

mitx-share-fb

 

Here’s that same post after open graph tags:

mitx-event

The code that makes it happen

Let’s take a look at just a bit of what the open graph code looks like. If code makes you panic, don’t worry – I’ve got a short list of plugins later on to ensure you only have to look at this code once.

Here are the basic open graph tags, and their formatting for a movie:

<meta property=”og:title” content=”The Matrix” />

<meta property=”og:type” content=”video.movie” />

<meta property=”og:image” content=”http://content6.flixster.com/movie/11/16/80/11168096_800.jpg” />

<meta property=”og:image:width” content=”800″ />

<meta property=”og:image:height” content=”1200″ />

<meta property=”og:url” content=”http://www.rottentomatoes.com/m/matrix/” />

<meta property=”og:description” content=”Critics Consensus: An ingenious combination of Hong Kong action, ground-breaking Hollywood FX, and an imaginative vision.” />

 

Here are some more advanced tags:

<meta property=”video:release_date” content=”1999-03-31″ />

<meta property=”video:duration” content=”136″ />

<meta property=”video:director” content=”http://www.rottentomatoes.com/celebrity/andy_wachowski/” />

<meta property=”video:actor” content=”http://www.rottentomatoes.com/celebrity/keanu_reeves/” />

 

If you want to see everything you can do with open graph tags, visit the Open Graph Protocol website, or check out Facebook’s open graph tags documentation.

 

5 free open graph plugins

If your site is on WordPress, you can skip all the coding and use one of these five  free plugins:

1) WordPress SEO by Yoast 

This do-it-all SEO plugin has a lot going for it far beyond just open graph tags, but it’s also great for adding the open graph tags needed to make your social media posts pop. See a discussion of how to optimize open graph tags in WordPress SEO here.

2) WP Facebook Open Graph protocol.

This widely used open graph plugin got Neil Patel’s blessing as the go-to choice for an open graph plugin. It works with Facebook, Google Plus, and Linkedin.

3) webZunder Open Graph Plugin. This new plugin might be worth a try – it focuses more on Google+ than any other open graph tool, but there’s a big drawback – they recommend disabling any other plugin that uses Google Authorship, Twitter cards or Open Graph tags.

4) WP Open Graph.

This plugin hasn’t been updated in a year, so proceed with caution, but several people have gotten this to work when no other plugin would. It’s a bit simpler than some of the other plugins here, which can be very helpful if other open graph plugins have been creating conflicts with your other pre-existing plugins.

5) Open Graph Metabox 

Need an even more stripped-down open graph plugin? This is about as simple as they come. It gives you an interface to type in your open graph content, and then just formats that content into open graph tags in your pages.

Once you’ve defined your tags, use the Facebook debugger to make sure everything looks good.

writing

Not just for Facebook

As you have probably guessed from the plugin descriptions, Open Graph tags aren’t just for Facebook anymore. Most of the major social media platforms have adopted them, or will use open graph tags as a fallback if the social platform can’t find the preferred tag format.

Open Graph tags for Twitter cards

Twitter cards do require some tweaks to use existing open graph tags, but you’ll save time if you’ve already got open graph tags set up. Also, if Twitter can’t find the tags it prefers, it will use Open Graph tags, so you might be able to skip a full Twitter card implementation if your open graph tags are set just right.

Twitter’s documentation for open graph tags is here: https://dev.twitter.com/docs/cards/getting-started#open-graph 

The Twitter card validation tool is here: https://dev.twitter.com/docs/cards/validation/validator

Open Graph tags for Pinterest

If you’re using Pinterest’s rich pins, you’re also at an advantage. You can easily adjust Open Graph tags or Schema.org markup to match the oEmbed endpoints that are Pinterest’s preferred format.

Get all the details about exactly how to integrate open graph tags into your rich pins. Scroll about 40% down the page to see the open graph instructions and code examples.

Test your pages in the Rich Pins validator here:

http://developers.pinterest.com/rich_pins/validator/

Open Graph tags for Google+

Google prefers Schema.org microdata markup, but it does support the open graph title, image, and description tags. See this Google developer page for guidance on how to format open graph tags for Google+. Then use Google’s Structured Data Testing Tool to make sure everything looks right.

So that’s the basics on how to get started with open graph tags. Have you used them yet? Did you see anything like a 50-250% increase in Facebook traffic to your site?

  • http://chriskloss.de/ Chris Kloss

    Thanks for referring our WordPress plugin “webzunder”. Thats true – we currently recommend to disable other plugins, which add open graph meta tags. Otherwise you might have nonexpected results, when there are duplicated OG tags with different content for the same page.

    Our plugin is focused on simplicity. It can run alone, but also as an extension to our webservice, called webZunder. Its an easy to use social media dashboard for small and medium businesses. Currently available in German, but we will launch in english soon. If you are interested, feel free to apply as beta tester. Register via our website or contact us via twitter or email to contact@webzunder.com.

  • http://www.about.me/hilarypullen Haptree

    Thanks really useful info :)

  • Michal Leszczynski

    Thanks for your comment Haptree :)! Glad you liked it.

  • Michal Leszczynski

    Thanks Chris for your comment. Great to hear that you are further developing the plugin. Should you have made further improvements let us know and we will update the post :).