How to maximize clicks to your content by using Open Graph Protocol meta tags

open graph what is it
from: oncrawl.com

You may have heard of meta tags before. These are used when handling your on-site SEO. However there is a new(er) type of meta tag that is becoming ever more prevalent in today’s world of e-marketing and traffic generation strategies, which go beyond mere SEO.

That new set of meta tags are collectively named, “Open Graph Protocol.” And if you’re an online publisher not using them, you need to be, soon.

We’ll explain why below.

But first things first, let’s learn what Open Graph Protocol meta tags are and the reason for their existence. Did the ‘web people’ in the world just want to make a businessperson’s life more difficult? Not quite. This development is actually for your benefit, and to help drive more, and better-targeted, traffic to your website.

What is Open Graph Protocol?

Open Graph Protocol is a way for sites to be able to share content that resides on an external URL in a more visual and compelling way.

The most common place you’ve probably already interacted with a page that uses Open Graph Protocol is when you share a link on Facebook. You know the preview that Facebook generates when you paste a link in your status bar? That preview is generated by ‘grabbing’ (so to speak) information from the external web page, and displaying it on Facebook so your friends will be more likely to click on it. Here is an example from my Facebook feed, where I re-shared an article from the TheStraight.com:

open-graph-protocol-facebook-share-example-news-story-with-image

It’s so much more eye-catching than a plain text link, right? The people at Facebook thought so too. So they developed Open Graph Protocol meta tags, to make link-sharing on the interwebs a better experience for everyone.

Before there were Open Graph Protocol meta tags, when a link was shared on the web, there wasn’t a lot of information the ‘receiving’ site could ‘grab’ to be able to show a user what they’d be clicking on.

Sites had meta tags, and that was great for search engine results pages (SERPs), which are all text-based, and quite limited in the information they need to display for search queries. In short they were:

  • Meta Title
  • Meta Description
  • Meta Keywords (which we don’t really use anymore for SEO efforts, but that’s a topic for another article)

And that’s it.

For example, the meta tags used to generate the preview on SERPs for the Open Graph Protocol official site are:

  

<title>The Open Graph protocol</title>

<meta name="description" content="The Open Graph protocol enables any web page to become a rich object in a social graph.">

The SERPs also show the URL, and the result of the output looks like this – a view you may be familiar with already:

serps-with-meta-tags-example

But the social web is different. It’s not about search, where users already know what they want. The social web is about people sharing content with other people that they find interesting.

So wouldn’t images be helpful to that end? Or language labels? Or videos? How do you tell a social network what sort of content is on the link being shared, if it’s not just words in text? How will people know if they want to click on it in the first place, when they see it in their social feed?

For that level of differentiation and specificity on the web, you need a new protocol for online content creators and publishers to use.

There are other protocols on the web for making these types of differentiations. For example Schema.org is one of them, and it has its own use-case scenarios. But for publishing cases where a link needs to be accompanied by a snippet of information (like a headline, image and intro text), the way to go is usually with Open Graph Protocol.

Open Graph Protocol is now used as the ‘gold standard’ for major social networks. Facebook, Google+ and LinkedIn all use it. Here are some references:

Even Twitter, which has it’s own markup for meta tag usage (to create Twitter Cards) will fallback on Open Graph properties if it can’t find Twitter Card-specific tags to display.

And Pinterest, which uses Rich Pins, bases those pins on Open Graph Protocol or Schema.org markup (and a couple other options in specific cases).

Who should use Open Graph Protocol?

All online content publishers who want their content clicked on more often around the web should be using Open Graph Protocol. This applies for social network sharing, as well for more advanced cases, such as using native advertising networks.

Native advertisers also need to use Open Graph Protocol:

The way native advertising software decides what content to publish on a site, for optimum relevancy, is based on Open Graph Protocol meta tags. For a primer on what native advertising is, watch our video on the topic (as we are a native ad software company).

The premise here is that in order for a content publisher, like a news website, to show effective ads that will get clicked on more often, they need to be related to what the user is already doing, and wants to see. The psychology of this is explained in more detail in this video, put out by a Facebook development team when they decided to promote native ads within their network.

In short, there is a slimmer chance of monetizing a site with banner ads. But, show a user an article on an interesting topic that is related to what they’re already reading? Now we’re talking.

And for the company that wants to advertise, they want to show up in the right spots on content networks. If ads show up on websites that have no relevancy to their business or target audience, very little traffic will result in their advertising efforts.

So for a win-win, we all want relevant content ads showing on relevant publishing sites.

This is the same concept as helping a search engine find your content, and then display it for relevant search queries using ‘regular’ HTML meta tags. But with native advertising, there is more data needed, and available, to do so.

How do the publisher and content creators automatically find their ‘match’ through a native ad exchange? With Open Graph meta tags.

That’s right, HTML’s ‘traditional’ meta tags are not enough. If you want a higher click-through rate (CTR), images and specially-crafted wording helps with that.

Also remember, ‘traditional’ meta tags don’t even have an image tag. But the Open Graph Protocol does, and can automatically make a special image available for showing on external sites that ‘grab’ Open Graph meta data.

When and where do you use Open Graph Meta Tags?

You can use Open Graph meta tags when you want to entice users to click on your content from around the web. Typically this will be most important on your blog or article posts, as those pages of your website are what will usually contain the ‘sharable’ content that users want to see. But there is no reason you can’t use Open Graph meta tags on your sales pages, product pages, contact pages, and so on, as well.

To insert Open Graph Meta tags, you’ll need to ensure you follow the markup formatting explained on the Open Graph Protocol website (you may need a web developer to help you with this):

http://ogp.me/

They should always appear in the <head> section of your website.

If you use a Content Management System (CMS) like WordPress or Drupal, you will typically be able to find a plugin for your website that can handle Open Graph Protocol quite well, without needing to know a lot of coding language.

For example, the Yoast SEO plugin for WordPress offers at least two nifty features for using Open Graph Protocol:

Per page Open Graph settings:

The information below assumes you are using the Yoast SEO plugin, but the principle of these settings and inputs could be applied to any CMS plugin that offers you these controls:

In the same area where you set up your SEO meta tags, analyze your content, set up your robots settings, etc. for a page or post, you can also click on “Social” (now symbolized with an icon) to determine what your Open Graph settings should be:

yoast-seo-open-graph-settings-per-page

Keep in mind the Yoast SEO plugin can change its visual display and design from time to time, so the screenshots in these examples should only be used as a guide.

These Open Graph settings are extra useful because they allow you to set up eye-catching content and imagery for social sharing that is separate from what you would use for SEO meta tags, which may have a different conversion strategy in your e-marketing goals for a particular url of your site.

For example, in some cases your SEO title meta tag may need to use certain keywords to optimize the URL for ranking opportunities. But if you feel this may compromise the potential conversion of the title on a social sharing network, you could ignore the keyword usage when creating an Open Graph title tag, and instead focus on psychology-based copywriting.

The other useful part of these settings is being able to set up an effective article image that will not only convert better, but be sized appropriately for the Facebook news feed. This means your photo won’t be cropped in awkward spots when the page is shared on social networks.

And that way, if your website requires a differently sized image for its content body, you can keep the two files separate. Here is an example of an image that was specially formulated to fit within Facebook size requirements, and also designed to get you to click on the article:

open-graph-protocol-obama-chicken-special-image-example

Notice that in this case, the photo of the chicken alone, or the photo of JUST Obama on the phone wouldn’t have been as enticing on their own. But put the two together, and now we have made readers into curious cats!

Another popular usage of the Open Graph image tag is to put catchy titles or words into the image itself, using an image editing software. A great example is given in this article, where the following snippet preview is shown as an effective way to grab more attention using words in images:

open-graph-image-tag-use-words-in-image-example-acquisition-artcile

Here is another example, from Harvard Business Review, though it’s not specific to the article title itself, but seems to be used as a generic logo-style image, which is great if you have nothing else to show (it’s better than nothing):

open-graph-image-tag-example-words-in-image-harvard-example

But, when using the method of showing your logo as a ‘default’ image in your Open Graph meta tags, be sure it is sized correctly, and not too small, as in this case, where it doesn’t show up nearly as enticing or powerful:

open-graph-snippet-preview-no-image-conversion-only-logo-example

Site-wide Open Graph settings:

When using the Yoast SEO plugin, you can follow these instructions on their site to allow Open Graph tags to appear in the <head> area of your pages. You can also use the settings under their “Social” link in the WordPress dashboard to set up:

  • Frontpage Open Graph Settings (i.e. your home page)
  • Default image (for when you don’t have one specified, to ensure something can go in that spot, like the logo examples given above)
  • Facebook Admin user app ID (to allow for Facebook Insights, which can tell you how many people visit your site from a link on Facebook)

Here is what these settings screens can look like (and you may want to look for something similar if you’re using another plugin to control your Open Graph code insertions):

yoast-seo-open-graph-settings-1

And further down on this page…

yoast-seo-open-graph-settings-2

The code output of Open Graph meta tags:

The code that is outputted when you set up Open Graph meta tags with a plugin can vary, depending on the plugin’s extensiveness, and the info you’ve entered in different settings areas. An example is below, and this can be found when viewing the source code of a web page (i.e. it does not show up on the ‘front end’ of your site to your readers). We’ll comment on each line to help you understand what each tag is for:

<meta property="og:locale" content="en_US" />

→ This determines that the page is written in USA English. You can use country and language codes to determine the locale you want to use. Use this link for more reference. Setting the locale for a WordPress site using the Yoast SEO plugin requires following these instructions.

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

→ The content type. There are other object types you can use.

<meta property="og:title" content="This is my amazing article title" />

→ The title that appears as the article headline when showing the snippet using Open Graph meta data.

<meta property="og:description" content="Here are about 200 - 300 characters you can use as a description of your content to entice readers to want to click to read the full article" />

→ The description of the article or page content being linked to.

<meta property="og:url" content="http://www.myamazingdomain.com/my-amazing-article" />

→ The URL of the page. This should use the internal site’s canonical URL. For more reference on canonicalization, see this article.

<meta property="og:site_name" content="The title of my site" />

→ The name of the overall site.

<meta property="article:publisher" content="https://facebook.com/myfacebookurl" />

→ The Facebook account this webpage is associated with.

<meta property="article:section" content="My blog category" />

→ The category or section of the site that this article appears in.

<meta property="article:published_time" content="2016-04-09T00:39:02-07:00" />

 

<meta property="article:modified_time" content="2016-05-24T16:45:39-07:00" />

 

<meta property="og:updated_time" content="2016-05-24T16:45:39-07:00" />

→ The above three tags all relate to dates and times for noting ‘freshness’ of an article.

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

<meta property="fb:app_id" content="my_app_id" />

→ The single user ID or app ID to count the data for Facebook Insights. See this link for more info.

<meta property="og:image" content="http://www.myamazingwebsite.com/wp-content/uploads/my-eye-catching-photo.jpg" />

→ The image to show in the snippet preview.

Are there more tags than what is shown above? There certainly are! However, they can get quite detailed. Plus, there are plenty of resources on the web that do justice to their instruction already. So we’ll leave them out of this article. Google is your friend!

What happens when you don’t use any Open Graph tags?

Most systems that can attempt to ‘grab’ Open Graph meta tags will usually default to ‘traditional’ meta tags when possible. However, this is not a sure-fire fallback, as we discussed above, since your Open Graph tags are designed for the social nature of the web, and not so much the search nature of the web.

Plus, you’d miss the opportunity to use important tags your potential readers would want to see, such as the image tag.

And if the system doesn’t read your ‘traditional’ meta tags, and also can’t scan your content to formulate a snippet preview, your article links may show up as a plain URL only (or some other unexpected result could happen). Kind of ‘blah’ and boring, right? No one will understand the reason they should click on that link, because it’s not going to be accompanied with any information about the content they can find on the page.

Testing your Open Graph meta tags before you post an article

There is one final matter to discuss on this topic of using Open Graph meta tags. You may want to test your settings before you post your article on social networks or elsewhere. This is for a couple reasons:

  1. It’s good to get an idea of the visual output you can expect your users to see in the snippet. Then you can make any necessary revisions or code corrections before promoting your content on the web.
  2. You can clear the cache of an incorrect image before it gets ‘stuck’ within the Facebook system.

When you generate a preview of an article you want to share on Facebook, Facebook can take the image from the Open Graph tag and store it in its cache. The cache is like a ‘memory box’ where a site (or other application) can store information it has ‘seen’ before. This way, the next time someone wants to bring it up on their screen, the site won’t take up time trying to fetch it again.

So if you accidentally had the wrong image on your Open Graph image tag, you can use the Facebook Debugger to clear the cache on that image. That way, it will show your article’s most recently referenced image.

Here is a link to the Facebook Sharing Debugger:

https://developers.facebook.com/tools/debug/

However, note that this feature only applies to Facebook, and not other sites that may use Open Graph meta tags.

To conclude, here is what we’ve learned about Open Graph Protocol and how it maximizes clicks to your content:

Here is a rundown of what we’ve learned in this article:

  1. Open Graph Protocol is a set of meta tags designed to make social sharing of content on the web a better experience for publishers and readers.
  2. Open Graph meta tags are needed to promote your content online, in addition to the ‘traditional’ meta tags used for SEO efforts.
  3. Open Graph Protocol is not only used by nearly all major social networks, it is also used to aid native advertising software when finding content to promote on relevant sites.
  4. Really good usage of Open Graph meta tags means paying attention to eye-catching headlines, writing enticing teaser intros, and including awesome images. Plus you’ll need to size all of those to fit within the content network layouts you want to share them on.
  5. There are plugins that can handle Open Graph meta tags in an easy, non-coder’s interface. A popular one for WordPress is the Yoast SEO plugin, but there are others out there.
  6. If you don’t want to use a plugin for your Open Graph meta tags, be sure to include them in the <head> section of the HTML of each page of your site.
  7. Open Graph Protocol must follow certain formats in its markup. The Open Graph Protocol official website explains this in detail.
  8. You should test your Open Graph meta tags with the Facebook Sharing Debugger to check for any possible mistakes, and to clear the cache on any images you want to replace before sharing.

And there you have it! You’re on your way to creating better visibility for your content around the web with Open Graph meta tags!

One Comment

Leave a Reply

Leave a Reply

Your email address will not be published.

Written by Joyce Grace

Joyce goes around saying she's an Internet marketer who makes WordPress web sites, blogs and performs SEO for companies both in Canada and abroad.

She loves all things Dutch.