We love digital

Call 0845 485 1219

We love digital - Call and say hello - Mon - Fri, 9am - 5pm

How To Use Twitter Cards, Facebook Open Graph and Google+ Markup

Graeme Benge

by Graeme Benge on 8th July 2013

Social network treeI had a science kit when I was quite a bit smaller and I never really made the most of the magic it contained. I couldn’t get enough of watching what would happen to a pile of iron filings when a magnet was close by. That’s the image I muster when picturing how using the right keyword can attract searchers. It’s just a case of finding the right magnet or keyword.

Digital marketing is a pretty volatile industry with ‘the more things change, the more they stay the same’ the only real constant. A focus on keywords has been one of the more enduring tactics (because it has worked and worked well) amongst the chaos.

Using a keyword centric strategy for your website is the traditional and still vital strategy of identifying core themes that bond your service or product to an audience. This gets built from extensive keyword research, on-going onsite analysis, as well as real life interaction with your audience.

Much of this is driven by identifying core keywords and writing content around them, however this process continues to get harder the more data Google remove from us, such as (not provided).

The upside of this is how it is making, forcing even, marketers into needing to understand (and innovate to find ways to understand) how visitors are interacting with their sites; namely what content resonates with their audience and what they then do with it. It can be difficult to pin point exactly what makes a bit of content ‘quality’ but what isn’t in doubt is the proof that is on offer to publishers: produce a piece of great content that sees your audience double up as your marketing team, and you’ve pretty much hit the jackpot.

Multiple Traffic Sources As An Insurance Policy

Unfortunately online marketing is more than just picking keywords, optimising pages accordingly and waiting for the rankings and then the traffic; it really just starts there. The one necessary constant that each algorithm apocalypse teaches me is the need to not have all your eggs in one basket. Especially if that basket is filled with only ‘organic’ eggs and you are at risk of a penalty.

Farming consistent volume from multiple traffic sources is the best insurance policy you can have against algorithm updates. The main traffic sources to consider are organic search, paid search, referral traffic  (traffic driven by third party sites linking to you) and social traffic.

This is one of the driving forces behind Socialised Content and why it has become more and more an obligation and the reason is pretty compelling – rather than just relying on search engines, mark up your content and you can have your audience market for you.

Whilst algorithms do exist on these platforms the name of the game is recency, so posting  good stuff at the right time for your audience gives you a lot of opportunity and a big difference to achieving prominent search engine ranking positions. See an example from Buzzfeed.

14 books

That’s a lot of social shares and a lot of potential to have your customers share your content in the way you want. Best of all three of the top social networks are giving publishers help in optimising their content with structured mark up. Alex Moss presented this topic brilliantly at BrightonSEO, and in the remainder of this post I am going to look at this, the impact of social optimisation and how you can incorporate Social Structured data mark-up into your site.

Is This Just The Emperor’s New Clothes…?

Unless you are particularly pessimistic, you should assume that anything you publish online is going to be shared at some point. So with that in mind surely you want to exploit any avenue that allows you some measure of control. Surely knowing where an audience is and actively marketing to them is better than waiting for them to come to you?

Add the below mark up to your site and you make it easier for the user sharing your content by pre-populating the description and image they share.

Facebook Open Graph

So first off is Facebook Open Graph mark up. Facebook should be your first port of call for two reasons:

  1. There are far more options in terms of what metadata you can use in the share snippet
  2. Facebook Open Graph mark up is being recognised and used across other platforms most notably Google+.

Basic Format:

<meta property=”og:description” content=”Super charming description of your brand in 300 words or less”/>
<meta property=”og:url” content=”www.yourdomain.com”/>
<meta property=”og:image” content=”www.yourdomain.com/supercharmingimage.png”/>
<meta property=”og:type” content=”article or website or product”/>
<meta property=”og:site_name” content=”Your Company Name”/>

The above code is really the basic amount to incorporate, please see the link above for more. With this, you’ll get the following displayed:

  1. Page description (tip: here you can take advantage of not just tailoring the description at page level but also to include reference to your presence on Facebook to then increase interaction)
  2. Your page’s URL
  3. An image snippet
  4. Content type
  5. Your company name

As mentioned above, Facebook have created a large amount of metadata for publishers to use including actions so that you can have people share how they are carrying out certain actions like listening, reading and watching.

Twitter Cards

Next up are Twitter Cards. You will have noticed some Tweets being richer in content and this is as a result of website owners implementing similar structured mark up to your web page specifically for Twitter and getting something similar to this:

twitter card

Twitter is gradually working on building the functionality up but for now it is worth adding this mark up to each page you want shared:

<meta name=”twitter:card” content=”A Twitter title for the page being shared. Keep keywords towards the front”>
<meta name=”twitter:site” content=”@profilename”>
<meta name=”twitter:title” content= “Title specifically for Twitter”>
<meta name=”twitter:description” content=”Super charming description of your brand in 200 words or less – maybe including reference to your Twitter presence”>
<meta name=”twitter:creator” content=”eg:author name”>
<meta name=”twitter:image:src” content=http://www.yourdomain.com/thumbnail.png>
<meta name=”twitter:domain” content=”domain.com”>

Google+ Structured Data

Lastly, there is Google+ which currently is limited and if there is no Google+ structured data, it will use Facebook Open Graph metadata if a page is shared on Google+. The mark up available is:

<meta itemprop=”name” content=”A Google+ title for the page being shared. Keep keywords towards the front”>
<meta itemprop=”description” content=”Longer form description, you’ve 200 words here that can specifically reference your presence on Google+”>
<meta itemprop=”image” content=”http://www.yourdomain.com/supercharmingimage.png”>



So you’ve written some epic content and you’ve added social buttons to your page to make it easier for your audience to share it; now adding this mark up to your page will mean you get to control some of the metadata used in the social shares your site benefits from. Scale this and you’ll find your audience is doing (some) of your marketing for you.

It would be great to hear from people already ahead of the game about how you are finding people reacting to structured data tailored to the three big social networks. Feel free to comment below.

Image Credits

Books to read before they hit the big screen by BuzzFeed
Social Network Tree by BigStock

Graeme Benge

Graeme Benge

With five years background in Travel, Graeme has built up strong commercial experience alongside online and offline marketing skills working with a variety of Travel Agents and Cruise Specialists. A passionate advocate of SEO and Social Media, Graeme has a strong interest in ROI and analytics in order to deliver the best level of returns.

down arrow

Your Free Whitepaper

The Complete Guide to Content Marketing

The Complete Guide to Content Marketing

Download this whitepaper now and get a new one every month!


  • Jim Seward 31st July 2013

    I’ve noticed some really weird things with Google+ sharing, even with proper fb opengraph data applied (which facebook uses just fine), it doesn’t share properly on G+ – taking the site title rather than the post title and the url. anybody else noticed this, or is it just me?

    Reply to this comment

    • Jim Seward 28th August 2013

      And I have actually worked out what had happened and can report here:

      Google will take schema data over opengraph data, in this case the footer of the page had organisation schema in and as part of it the

      Google Plus took this as the title of the page over the opengraph data and the main title tag.

      Reply to this comment

  • Graeme Benge

    Graeme Benge 28th August 2013

    Ah I see, that make sense that schema will be the preferred weapon of choice.
    Reckon it is still a good back up to have opengraph data in place too as its my understanding that Google can use that in the absence of Schema.

    Thanks for clarifying Jim.

    Reply to this comment

    • Jim Seward 28th August 2013

      True, but in this case, the schema was nothing to do with the actual page content and I was after Google using the opengraph data.

      It was just wrapped round a contact address in the footer of the page. I reckon quite a few people could get caught out like this

      Reply to this comment

  • Asin Arora 30th November 2013

    Hello Sir,

    Thanks for wonderful post. I m new in SEO & Social Media Optimization. Just wondering that can i use FB Open Graph, Twitter Card, Google+ Structured Data simultaneously with the existing meta title and meta description tags which are already written in our page’s source code.

    If this possible, Google may raise duplicate description message in our Google’s webmaster tool.

    Expecting solution and waiting for your reply.


    Reply to this comment

  • Graeme Benge

    Graeme Benge 2nd December 2013

    Hi Asin,

    If you’re looking to make use of this mark-up I’d forget about what Google makes of it for a second. The benefit of using this is that you’ll be able to tailor what snippet of text for each platform is used to promote your brand. Should mean you can engage the user better on different social networks.

    Simply copying your page’s meta description misses this opportunity.

    I’d look at it like this:
    Meta description = an advert for your page in the SERP
    FB Open graph mark-up sells the reason to engage on FB.

    Reply to this comment

    • Graeme Benge

      Graeme Benge 2nd December 2013

      Twitter Card gives the user a reason to follow your brand on Twitter..
      And so on…

      Hope that helps Asin. Thanks for commenting.


      Reply to this comment

      • Asin Arora 9th December 2013

        Thanks for suggestion Graeme.

  • Pingback: Understanding and Using Social Markup to Give Your Prospects a Richer Social Experience - Zen Optimise

  • Riccardo Casatta 22nd April 2014

    the value of the twitter:card must be a type like “summary” or any other available from twitter and not a title

    Reply to this comment

Subscribe To The Koozai Blog