Don't make this Social Media mistake

by Iain Wilson

4 November 2014

Ever posted one of your webpages to social media and not been happy with the result?

It's probably because your pages don't contain social media meta information used by Facebook, Twitter, Google+, Pinterest, Feedly etc.

Social media is here to stay and even if you're not ready for it personally, you need to make sure your website is.

What's the big deal, you say? If someone wants to make a post about one of my website pages, they just paste in the URL and add their comments and maybe a couple of #hashtags.

True, that will work, but what will be posted? Take a look at this page from our site:

http://www.blotdesign.com/web-development.php

No Social Media meta information

Now, if we decided to share this page as a post in a social media service like Google+, this is what the post will look like if it had no additional social media meta information :

post with no meta information

Looks OK, I suppose. The social media software has arbitrarily chosen an image from the page - the company logo.

Of course I would have preferred that it had chosen the bigger image from the top of the text.

But if they can't find a suitable image, some social media platforms will just choose the first one they find.

This might be totally NOT the one you want to be included in the post!

Worse than that, if it doesn't like the image proportions, it will crop it and chop out things you really wanted to show.

But at least it has chosen our logo. Still not very alluring is it? There's no indication to say what the page is about - no title, or description.

We can do better. With meta tags.

With Social Media meta information

With a few additional lines of meta information in our HTML, our post can look like the following:

social media post with meta information

This time it has included the image we wanted, and the title of the page, and a small descriptive paragraph.

A whole lot more interesting, and much more likely that someone might want to click on the link to the page, or perhaps share it.

How to do it

So how do we do this?

First off, you should put some schema information in your <html> tag:

<html lang="en" xml:lang="en" itemscope itemtype="http://schema.org/Article">

This just explains what meta schema (specification) you are going to use for some of the meta tags.

I've seen it work without this, but it's best to be on the safe side.

Then you need to include the following meta information within your <head> section:

<meta property='og:title' content='Web Development' />
<meta property='og:type' content='article' />
<meta property='og:url' content='http://www.blotdesign.com/web-development.php' />
<meta property='og:site_name' content='Blot Design'/>
<meta property='og:description' content="Web design creates a visually appealing web site that matches your company's identity, values and aspirations.  If you want your site to be more than an 'online brochure', then you need to go further."/>
<meta property='og:image' content='http://www.blotdesign.com/images/web-development.jpg' />
<link rel='publisher' href='https://plus.google.com/+Blotdesign'/>
<meta itemprop="name" content="Web Development" />
<meta itemprop="description" content="Web design creates a visually appealing web site that matches your company's identity, values and aspirations.  If you want your site to be more than an 'online brochure', then you need to go further." />
<meta itemprop="image" content="http://www.blotdesign.com/images/web-development.jpg" />
<meta name='twitter:card' content='photo' />
<meta name='twitter:site' content='@blot_design' />
<meta name='twitter:title' content='Web development' />
<meta name='twitter:creator' content='@blot_design' />
<meta name='twitter:image' content='http://www.blotdesign.com/images/web-development.jpg' />

Lets go through these :

og:title - the title of your page.

og:type - we're using 'article' here as a sort of default, but there are also schemes for products, videos etc

og:url - the address of the webpage

og:site_name - whatever you call your site

og:description - short intro paragraph

og:image - the preferred image you'd like to be included. If your page doesn't have a main image, you should come up with a default one.

rel='publisher' - this connects the page to you as the publisher in Google+

itemprop="name" - name of the page

itemprop="description" - short intro paragraph

itemprop="image" - the preferred image you'd like to be included

name='twitter:card' - telling Twitter that this is a 'card' description

name='twitter:site' - your Twitter identity

name='twitter:title' - page title for Twitter

name='twitter:creator' - your Twitter identity

name='twitter:image' - image you want Twitter to use.

Note - please substitute your own identies for Google+ and Twitter.

Open Graph

'og:' in some of the tags refers to Open Graph - Facebook's protocol for page integration.

Although Open Graph is clearly a Facebook initiative, it is a de-facto 'open' specification too. It's used by some other social media platforms, either as a primary or secondary source of information.

Image quirks

The way the different social media platforms handle images is quirky to say the least.

Here are just some of the things to look out for:

If you don't have the meta information in your pages and the image chosen by the social media platform is not in 4:3 proportions, some platforms (e.g. Google+, LinkedIn) will crop the image.
If the image chosen is smaller than a certain size (varies between systems) it may not include it at all, or it may include it as a thumbnail.
On Google+, if the image isn't at least 400px wide, it will show it as a thumbnail, but will not show any description, even if you have all the right meta information.
Twitter want images at least 200px wide and 200px deep.
Twitter won't display your image in the tweet directly (for security reasons, they say), but as a sort of attachement that you have to click on to see the image. If you want to see the image displayed automatically in the tweet, you must do a native Twitter tweet (i.e. using Twitter) and upload your image to the Twitter server.

Post caching

One last thing you should be aware of is that most of the social media platforms will retain an 'image' of your webpage post details when you make the post.

It keeps this in memory, so if you make a change to the description or the image and re-post the page, the old details will still be shown, not the new ones!

This of course is highly annoying, but there are ways around it:

Put some dummy parameter onto the end of the page name (e.g. yourpage.html becomes yourpage.html?x=1)
Do the post from a different device that has not posted that page previously
Wait

Don't make this social media mistake

Getting your HTML right for social media posts