Social meta data for beginners

  • 3
  • September 23, 2014
Jack Cornwall

Jack Cornwall

Search Strategist

Using meta data can help to get the best possible click through rate from the two most popular social media websites: Facebook and Twitter.

Facebook Open Graph and Twitter Card mark-up have been around for a while now, but not everyone knows how or why to use the meta data to its full extent.

When utilised correctly, posts/pages will be displayed in a way that will be more likely to entice users to click because the publisher will have control on how images, titles, descriptions and URLs are displayed – basically giving the publisher the option to ensure she is occupying as much of a viewer’s feed as possible…as well as allowing him to encourage interaction with a catchy title and description.

These are great ways to ensure both your editorial content and products are showcased to their full extent. Combine this with great content that people want to share – and an on-page user experience that facilitates sharing – this can increase engagement via social media substantially.

Facebook Open Graph meta data

Facebook has started offering its own mark up. This allows stricter rules being imposed around sharing that can make the posts more eye catching and engaging when they appear in someone’s timeline by adding meta data to the top of the page. A basic example of OG (Open Graph) mark-up is shown below:


<meta property=”og:title” content=”Article Name” />

<meta property=”og:type” content=”Article or Video” />

<meta property=”og:url” content=”The URL you want to share” />

<meta property=”og:image” content=”IMAGE URL” />


As long as the image is large enough, Facebook will automatically turn the post shared into a larger feature. The image needs to be at least 600×315 pixels, but Facebook recommends 1200x 630. Anything smaller than 600x 315 and Facebook will automatically share the smaller post.

More specific examples with different mark-up elements can be found on the Facebook developer’s page or the Open Graph Protocol Site. Facebook even offers a debugger which can show you what the post will look like when shared before you share it. Below is a snip of the two different share sizes:

Two different share sizes

WordPress SEO plugin by Yoast will automatically give you the option to add both Facebook Open Graph and Twitter Cards to your WordPress Posts. The only reservations regarding the plugin are that it picks up all images on the shared page; meaning that if you have a small author bio photo or logo below the required dimensions it will automatically share the smaller version in the feed.

Twitter cards

Twitter offers a similar solution to Facebook when it comes to sharing editorial content and videos. A summary card with a large image will need Meta data like that in the following example:

<meta name=”twitter:card” content=”summary_large_image”>

<meta name=”twitter:site” content=”Website’s Handle”>

<meta name=”twitter:title” content=”Article Title”>

<meta name=”twitter:description” content=”Description to be placed here, this will appear below image and below title”>

<meta name=”twitter:image:src” content=”IMG URL”>


The URL should automatically be pulled through from Twitter and shared in the post based on the page on which this meta data is placed.

A list of all the twitter card tag references can be found on the Twitter Developers site. In the below snip the different sizes can be seen:

Twitter different sizes

Twitter different sizes 2

Alternative Twitter Cards

Twitter has recently been introducing some new Twitter cards to the mix. For example, app cards can be used to promote your mobile applications. Twitter actually offers special treatment for the Apple App Store and Google Play for android. Simply sharing a link to the download page of your app will automatically generate an app card look to your tweet.

If however you want to tailor the experience to what you believe your target audience will want to see, you can mark up your web pages to share your app card by customising and implementing the following code:

<meta name=”twitter:card” content=”app”>

<meta name=”twitter:description” content=”App Description Max 200 characters and Optional”>

<meta name=”twitter:app:country” content=”Target Audience Country Code i.e. UK”>

<meta name=”twitter:app:name:iphone/ipda/googleplay” content=”Your App’s Name”>

<meta name=”twitter:app:id:iphone/ipda/googleplay” content=”Your Apple/Google Play Store ID  which will be in the form of a string of numbers or a URL for Google Play”>

-You can submit multiple IDs if your app is available on different stores/applications Twitter will return the relevant one for which the device is being viewed on.

<meta name=”twitter:app:url:iphone/ipda/googleplay” content=”example://”>

-You may submit multiple URLs if your app is available to download in different places for different platforms/devices

On an iPhone for example, this will show up as follows:

iPhone example

Other interesting options are product cards; these offer the option to show expanded product information and my personal favourite, the player cards. These work by sharing a video or song in a format that a Twitter user can play directly from their browser or twitter phone app. These are common for sharing YouTube and Vimeo videos or even playing music through services such as Soundcloud. Here is one I shared before:

<blockquote class=”twitter-tweet” lang=”en”><p><a href=””></a></p>&mdash; Jack (@JackDCornwall) <a href=”″>September 18, 2014</a></blockquote>

<script async src=”//” charset=”utf-8″></script>

Twitter’s Buy Now Button

Twitter has also started testing a new buy now button in the US. This will give users the possibility to buy something directly from Twitter. No payment gateways, no complicated logins, all your details are stored after the first time you complete a purchase. This was covered by Mashable at the start of July, but based on this video on the Twitter blog, it seems that it is a very simple system, which might prove really popular when it comes to impulse buys.

<iframe width=”560″ height=”315″ src=”//” frameborder=”0″ allowfullscreen></iframe>

There is plenty of mark-up available for those who want to ensure their websites stand apart from other search results, although some like video snippets and Google+ Authorship have been removed.

Facebook and Twitter are both highly visual platforms, which means that you probably can’t afford not to use the available mark-ups to try and improve the impact of your posts.