Social Media

Open Graph: How to Drive More Social Media Traffic to Your Website

6 years ago

Social media networks can be a major traffic driver to your website, so it’s in your best interest to optimise your presence on them, including - you guessed it - your Open Graph tags.

You’ve stuffed your bios full of keywords and you’re using all the right hashtags in your posts - but do you know what a post looks like when other people share a page from your website to their own profiles?

We can’t control what strangers are writing about our content, or force them to attach an eye-catching image to increase its click-through rate - so a post could, unbeknownst to us, end up looking in need of a little help:

Enter Open Graph.

What is Open Graph?

Open Graph is a protocol that enables any web page to become a rich object in a social graph.

Basically, you can tell social media networks like Facebook, Twitter, Pinterest, LinkedIn and Google+ what information to display whenever you or anyone else shares a link from your site.

Similar to how search engines visit your website and look for the data they need to display your website in search results, social networks do the same thing by looking for their own tags (this could be Open Graph, Schema.org or, just to be awkward, Twitter Cards) for the “social graph”.

The social graph itself is a way to define “things” in a digital space and can be made up of places like cinemas and shops, media like videos and movies, properties like websites and articles and people like TV presenters and movie stars.

Open Graph data passes these details to the social graph about what the object is, along with how it should be presented. For example, you might want to specify what image or video appears, the title and description that should be shown, and even the location or language.

Does Open Graph help boost your search engine rankings?

Open Graph tags were created specifically for social media networks, so search engines know to ignore them.

However, with social media content increasingly getting pulled into search results, your Open Graph meta tags shouldn’t be a million miles away from your SEO meta tags.

While there’s currently no direct SEO benefit to implementing Open Graph tags, there can be other indirect benefits.

If your content becomes more attractive in the social networks’ news feeds, it stands to reason that more people will see, click and share it*.

As a result, your content might convert a number of visitors into email leads, or new followers on social media, giving you more people to share future content with.

Increased sharing also makes it more likely that your content will reach new webmasters and attract backlinks on its own merit, boosting your rankings naturally.

*Keep in mind that no amount of optimising can make up for boring content - take a look at our guide to coming up with content ideas that stick here 😉

A link to my website is being shared either way, so why go to all this trouble?

When you share content from your site to a social media network, their crawler will scrape the HTML of the URL that is shared.

However, if there’s no Open Graph data there, the scraper has to guess which content is important and, sometimes, they can be pretty off:

As you can see in the post above, Facebook had to guess what was important and ended up with a title that is too long, a ‘default’ description and a badly cropped image.

Unsurprisingly, the post received no engagement, and it doesn’t catch the eye as users scroll through their feed.

Still not convinced? By making your information easier to find and ensuring social networks are presenting it properly, your website could enjoy a potentially significant increase in click-through rates when URLs are shared from your site.

When you consider that Tumblr increased its Facebook traffic by 250% after implementing Open Graph and that Neil Patel increased his by 174%, you can see it’s worth taking the time to optimise these tags.

Fine, I'll implement tags for social media. But what do they look like?

The four must-have properties for every page are:

og:title

Similar to your normal HTML title tag where you tell search engines the SEO title of your page, the og:title is the title of your object as it should appear within the social graph.

Your og:title should be clear without branding or mentioning the domain itself, with a maximum of 95 characters.

Example: <meta property="og:title" content="6 traits of a content idea that sticks"/>

og:type

This is essentially what your object is; an article, video, blog post, even a recipe - you can find a comprehensive list here. Depending on the type you specify, other properties may also be required.

Example: <meta property="og:type" content="website" />

og:image

This is where you specify an image URL so that an image will always be shown alongside content you share in the social graph.

This makes your posts stand out against status updates that only contain text in people’s crowded timelines.

Example: <meta property="og:image" content="https://aira.net/wp-content/uploads/2016/11/how-to-make-content-ideas-stick.jpg" />

Facebook recommends using images that are at least 1200 x 630 pixels up to a maximum of 8MB in size, and at the very least you should use images that are 600 x 315 pixels:

The absolute minimum size you’ll get away with is 200 x 200 pixels. If your image is smaller than 600 x 315 px, it will still display, just much smaller:

og:url

This is the URL of your post, page or object (only the domain shows in the social graph, so don’t worry when the full URL doesn’t appear).

This tag may seem irrelevant, but it’s important to complete because sometimes you might have more than one URL for the same content.

Use this tag for a clean URL that doesn’t contain any session IDs or parameters, to ensure that all shares get attributed to one URL rather than across multiple URLs.

Example: <meta property="og:url" content="https://aira.net/6-traits-content-idea-sticks/" />

og:description

Also, don’t forget to add a description. This tag is optional, but it tells social media users more about your page or post to encourage a click.

Try to write something around two sentences long and make it really relevant to the content in the page or post.

Example: <meta property="og:description" content="Do you want tons of traffic and links? All you’ve got to do is “create great content” - but for content to be great, it needs to stick."/>

Other Open Graph tags

There are other advanced social media OG tags which may be relevant to your content, like your site name:

Example: <meta property="og:site_name" content="Aira Digital"/>

There’s also fb:admins, which pairs your website up with your Facebook fan page for even more data in Facebook Insights:

Example: <meta property="fb:admins" content="500013011"/>

You can even tell Open Graph whether the article has any translations, has an author or a publisher, and even specify information about things like videos, including release dates, duration, actors and the director.

So - what does all of that mumbo jumbo actually look like?

Here’s a great example of some Open Graph code from a post and how that translates to a Facebook post:

For more information, you can see everything you can do with Open Graph tags on the Open Graph Protocol website as well as Facebook’s Open Graph tag guidelines.

Twitter Cards

Twitter Cards basically do the same thing as Open Graph tags, except that only Twitter looks at them.

For standard articles and blog posts, Twitter gives you a choice of two types of card that you can implement on your website; Summary Cards and Summary Card with Large Image, as well as other types of Twitter Cards for other content types.

Summary Cards just give you a title, description, thumbnail, and Twitter account attribution:

While the Large Image card gives you a title, description, account attribution and - you guessed it - a large featured image instead of a thumbnail:

You can even delve into the performance of your Twitter Cards using Twitter Card analytics.

If Twitter can’t find any Twitter Card tags, it will use Open Graph tags, so you might be able to skip setting them up if your Open Graph tags are set correctly.

Here are the tags you need to know about for Twitter Cards:

twitter:card

The twitter:card meta tag is the same as og:type where you specify what the content is. You can choose from photo (for images), player (for videos), and summary (for everything else). Twitter defaults to summary if you don’t provide a definition.

Example: <meta name="twitter:card" content="summary">

twitter:url

Like with Facebook, providing this tag ensures that one URL gets all of the tweets and doesn’t split them across multiple URLs.

Example: <meta name="twitter:url" content="http://www.bluejeanswhiteteeblog.com/my-wedding/no-poo-bridal-hair/">

twitter:title

Similarly to your Open Graph title, this should be a compelling summary of your content that isn’t stuffed with keywords, made up of around 70 characters.

Example: <meta name="twitter:title" content="My no 'poo bridal hair">

twitter:description

Again, create a compelling sentence up to 200 characters that tempts people to click through to your website.

Example: <meta name="twitter:description" content="Can you go from troll to Cinderella when you don't use shampoo? Take a look 'ere at some of my shampoo-free wedding photos.">

twitter:image

It should come as no surprise that tweets with images stand out much better in people’s feeds. Make sure your images are less than 1 MB in file size and no smaller than 60px by 60px; Twitter will automatically resize images that are larger than 120px by 120px.

Example: <meta name="twitter:image" content="http://www.bluejeanswhiteteeblog.com/wp-content/uploads/2016/11/No-poo-bridal-hair.jpg">

Once you’ve marked up your first page or post, you need to paste the link into Twitter’s Card Validator to get initial approval for your site:

After that, you can use it whenever you like to check if your Twitter Card tags are displaying properly.

What about Pinterest Open Graph AKA Rich Pins?

Pinterest offers six types of Open Graph markup, known as Rich Pins, that allow you to get really specific about what the content being shared from your website is all about: Apps, Products, Recipes, Movies, Articles and Places. Read more about the types of Pins and their uses on Pinterest here.

Here’s an example of a Movie Pin, which includes data for the movie’s rating, age restriction, director and main actors:

Generally, Pinterest supports Open Graph and Schema.org for marking up your pages, but you can read more about other formats that the social network supports for each Pin type here.

So, you’ll need to prep your website with the appropriate meta tags, test it out by running one of your post URLs with meta tags on it through the Rich Pins Validator tool, fix any issues that get flagged, and then use the tool to apply for Rich Pins.

This all sounds very easy, but the initial set up for Pinterest Open Graph Rich Pins can be a little tricky (I may have cried a little), so if you’re not technically-minded definitely seek out a developer for some help.

Once you’re up and running, you can use the validator tool as a debugger whenever you need to.

How to implement Open Graph and Twitter Card tags

There are a few ways you can add Open Graph and Twitter Card tags to your website:

By adding meta tags to the <head> part of your website’s code.
By using a plugin through CMS systems like WordPress or Joomla.

Before you start implementing anything, you can check if there are any tags on your website already by searching for some tags like ‘og:type’ or ‘twitter:card’ in your source code, or by using the social networks’ debugging tools (we’ll take a look at those a bit later).

Adding social meta tags to the <head> of your website

To add Open Graph to your website, you need to add meta tags to the <head> part of your website’s code with the information you want social media sites to display.

If you only need Open Graph tags for a small number of pages, Mega Tags is a handy tool you can use to manually generate accurate social media meta tags for Twitter, Facebook, Pinterest, LinkedIn and more.

However, if you want to implement Open Graph tags at scale and are happy to use the same data that you've used for your page titles, meta descriptions etc., then you can place a bit of code in your functions.php file to pull in those attributes automatically across your site.

Here is an example of a WordPress function for Open Graph tags which I edited to generate the code below (I know I've missed off twitter:image, but hey, my Card validated using the og:image tag so considering this is on a practice site, I'm going to be lazy for now and leave it off):

Implement Open Graph the easy way

If you can’t access your site’s theme or want greater control over individual pages, you can always go ahead and install a plugin that makes everything that little bit easier.

There are many social media OG tag plugins, extensions and add-ons for WordPress, Joomla, Drupal, Magento, Zen Cart and osCommerce.

I used to like using NextGen Facebook Pro (NGFB) for my old WordPress site, which had a really user-friendly interface and gave you a huge amount of control over your tags. It's since been replaced by WPSSO Core, which uses your existing content to create meta tags and Schema markup for Open Graph, Google’s Knowledge Graph, Pinterest Rich Pins, Twitter Cards and more - which you can still edit if needed. It includes markup for images videos, eCommerce products, authors and publishers, aggregate ratings and reviews, recipes, events and more.

You then select the image you want to use. You can only select one image to cover every social media network, so to size and optimise your image across multiple sites I really like using Social Media Examiner’s guide for this.

The plugin then generates a preview of what your post will look like on Facebook:

Simple, right?

However, it's also worth noting that there are a number of plugins that automatically add Open Graph tags to your site, so you may not even need to go hunting for a plugin if your requirements are less complex.

For example, if you’ve activated the Sharing or Publicize module in Jetpack, the plugin will automatically add Open Graph meta tags to each one of your pages:

If you already use another plugin to handle Open Graph meta tags on your site, Jetpack even automatically deactivates their Open Graph meta tags for you to avoid creating duplicates.

However, if you’ve gone down the route of adding these tags to your theme and don't want to deactivate the Sharing or Publicize features, you can just add the following code to your theme’s functions.php file in order to deactivate Jetpack’s Open Graph meta tags:

add_filter( 'jetpack_enable_open_graph', '__return_false' );

Yoast can also be used to add Open Graph tags. The plugin allows you to toggle them on and off in SEO Settings > Social > Facebook 'Add Open Graph meta data' and Twitter 'Add Twitter card meta data':

You can also verify your website's confirmation with Pinterest and add your Google+ page in the Social section; although, with Google+ soon to be retired, you can go ahead and skip that step.

Debugging your Open Graph meta tags for social media

Before you share anything to social media, you should check your tags using the main social networks’ debugging tools and Open Graph validators that we’ve already looked at:

These debuggers let you preview your post and let you know about any errors and suggestions for your Open Graph tags.

Some plugins, like NGFB, let you do this from within your CMS platform:

It’s worth bearing in mind that Facebook only scrapes your web page once, so if you’ve had to make changes to old Open Graph data you’ll need to manually ask Facebook to scrape your content again, which you can do by using their debugger.

If you’re using Bitly link shortening, Facebook understands that this link forwards to your page, so you can and should use the Bitly version of the link when asking them to scrape your site.

A final note on pre-caching images

Facebook has to see an image at least once before it can be rendered, so the first person who shares a URL to Facebook won't see a rendered image.

You can avoid this by running your URL through Facebook’s debugger to pre-fetch the meta tags for the page, and you can also specify the image dimensions using og:image:width and og:image:height tags so that the crawler can render the image immediately.

Conclusion

Open Graph is its own beast, and these are just some of the basics you’ll need to get your head around to start optimising your website for social media.

Once you’ve got your tags in place, there are more advanced social media Open Graph tags you can play with, as well as new ways in which you can promote your business through social media.

No longer just a free platform to be passed off to the company intern, the social networks have become solid advertising options that deserve your attention, from Shop Sections and Check Out on Facebook to Pinterest allowing users to shop directly using Buyable Pins.

Download our credentials deck.

Pop it in my inbox.