Cookies disclaimer

I agree Our site saves small pieces of text information (cookies) on your device in order to deliver better content and for statistical purposes. You can disable the usage of cookies by changing the settings of your browser. By browsing our website without changing the browser settings you grant us permission to store that information on your device.

Open Graph & Social Media Tags

Open Graph & Social Media Tags

Contents:

Open Graph & Social Tags

The Open Graph (OG) protocol enables all web pages to become rich objects in the social graph. By implementing Open Graph meta tags on each page of the site it is possible to control how those pages appear in social media channels when shared.

Social tags are a broader group of tags used primarily by Facebook, Twitter, Pinterest, and Google+, all of which we discuss in some detail in this article.

What is Open Graph?

Open Graph tags allow us to state things or define how Facebook uses web page data. For example; It is possible to state the title of the page as it will be displayed when shared, along with a description, image and URL.

Without these tags present it is possible for pages to be shared with scraped data for the description, title and often the image can be a random button image present on the page.

It is easy to see that controlling the way in which your content appears when shared is conducive to repeat shares and improved performance overall.

The image below shows how these tags would affect the appearance of a page being shared on Facebook:

As the image above shows, when OG tags are used to control these basic components the shared pages becomes a much stronger ad.

Open Graph Meta Data

Below we describe the main and most common / essential OG Meta tags that need to be implemented within the <head> section of the website’s source code.

og:title

This is the title that you would like to be displayed when the page is shared on Facebook. This should be relevant to the page’s content and ideally target the keyword that the page targets.

og:type

This is the type of object that you are stating that the page is about for example; video.movie or content=”article”. Depending on the type that you specify, you may be required to specify other properties.

http://ogp.me/#types

og:image

This will be the image that is displayed when the object / page is shared socially and should be represented by a URL for the image.

og:url

This is the canonical URL of your page / object that will be used as its permanent ID in the graph, e.g., "http://www.example.com/page".

og:description

This is the description that you would like to be displayed when the page is shared on Facebook. This should be relevant to the page’s content and ideally target the keyword that the page targets and the content on that page.

OG Example Code

Below is an example of how the above components could be applied to the infamous example.com which should be located in the <head> section of the page’s source code:

<html prefix="og: http://ogp.me/ns#">
<meta property="og:title" content="Prepaid Mobile Phone Plans" />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://example.com" />
<meta property="og:image" content="https://example.com/directory/image.png" />
<meta property="og:description" content="Enter your description between the quotation marks, like this!" />

Open Graph Product Info

There’s different code available for products that is also supported by Open Graph, we provide a couple of examples below:

og:price:amount

This stipulates the cost of a product and is entered without a currency symbol.

og:price:currency

This defines the currency to which the ‘amount’ is referring.

Example Code for OG Products

Below is an example of how the above components could be applied to the infamous example.com which should be located in the <head> section of the page’s source code:

<meta property="og:price:amount" content="50.00"/>
<meta property="og:price:currency" content="AUD”/>

For more information on implementing Open Graph tags and sharing on Facebook, follow the link to the Facebook Best Practices.

Twitter Summary Cards

Twitter Cards work in the same way as the Open Graph tags we describe above. Below are some examples of different Twitter Summary Card types (news and product):

Below is a list of the most common Twitter component used and what they do:

twitter:card

This is a property that is defined as: content="summary" and is a compulsory part of the code required to indicate to Twitter what it is.

twitter:site

This is where you stipulate what the publisher is for this content, typically the business Twitter handle, for example: @example_name

twitter:title

This is the title that you would like to be displayed when the page is shared on Twitter. This should be relevant to the page’s content and ideally target the keyword that the page targets.

twitter:description

This is the description that you would like to be displayed when the page is shared on Twitter. This should be relevant to the page’s content and ideally target the keyword that the page targets and the content on that page.

twitter:image

This will be the image that is displayed when the object / page is shared socially and should be represented by a absolute URL pointing to the image. Images used for the ‘Twitter Summary card’ must be at least 120x120px.

twitter:creator

This is the creator of the content or the author if different from the twitter:site tag. This has to be input in the form of a Twitter handle for example: @example_name

Twitter Example Code

Below is the sample code for each of the tags described above, which should be located in the <head> section of the page’s source code:

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

<meta name="twitter:site" content="@publisher_handle">

<meta name="twitter:title" content="Page Title">

<meta name="twitter:description" content="Page description less than 200 characters">

<meta name="twitter:creator" content="@example_name">

<meta name="twitter:image" content="http://example.com/directory/image.jpg" />

Twitter Cards For Products

There is additional code for products which can be used / adapted for many other purposes. We describe how these work and provide some typical examples below.

twitter:label

These are used to define the data property and they achieve this through numbering the label and data attributes correspondingly. So for example twitter:label1 defines what twitter:data1 relates to. Examples of labels include things like ‘price’, ‘color’, & ‘genre’.

twitter:data

Once you have defined the label, you can define the data to which it corresponds. Therefore data is the value or description of the label, continuing the three examples given above we could have:

  • Price - $10
  • Color - Blue
  • Genre - Rock

Twitter Product card Code Example

Below is the sample code for each of the tags described above, which should be located in the <head> section of the page’s source code:

<meta name="twitter:data1" content="$5">
<meta name="twitter:label1" content="Price">
<meta name="twitter:data2" content="Red">
<meta name="twitter:label2" content="Color">

For more information on implementing Twitter tags, follow the link to dev.twitter. To test and validate your code go to the Twitter Validator.

Schema.org Mark-Up for Google+

Twitter Cards work in the same way as the Open Graph tags we describe above. Below is an example of this mark-up code when shared on Google+.

Itemprop=”name”

This is the title that you would like to be displayed when the page is shared on Google+. This should be relevant to the page’s content and ideally target the keyword that the page targets.

Itemprop=”description”

This is the description that you would like to be displayed when the page is shared on Google+. This should be relevant to the page’s content and ideally target the keyword that the page targets and the content on that page.

Itemprop=”image”

This will be the image that is displayed when the object / page is shared on Google+ and should be represented by a absolute URL pointing to the image.

Itemprop=”url”

This is the canonical URL of your page / object that will be used as its permanent ID in the graph, e.g., "http://www.example.com/page".

For more information on Schema.org visit their website or see our instructional articles in the structured data section of this knowledge base.

Example Schema.org Code For Google+

Below is the sample code for each of the tags described above, which should be located in the <head> section of the page’s source code:

<meta itemprop="name" content="The Name or Title Here">

<meta itemprop="description" content="This is the page description">

<meta itemprop="image" content="http://www.example.com/image.jpg">

<meta itemprop="url" content="http://www.example.com/page">

Google Authorship (The death of!)

Google authorship used to be a thing! Google axed this in 2014, so there is no need to worry about it anymore!

Sign Up For Early Access
& Earn a Chance to Win 1 Years Free Subscription!

What You Get...

There's no obligation to become a full member after your trial, but we think that once you've seen what's available, you'll want to join us.

We are in the process of building our software and are ramping up to launch the Technical Auditing component in early 2018, soon to be followed by a suite of other components such as keyword ranking and backlink analysis.

Sign up today for 1 months free access and get a further 10% off of any package price when we launch for the first year as a reward for being an early subscriber.

Also, you will be entered into a lottery, where we will be giving away five 1-year subscriptions for free!

Sign up for early access today!