Don't make this social media mistake
Getting your HTML right for social media posts
by Iain Wilson
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 :
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:
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
Summary
So get your social media HTML tags up to date before you post on social media.
A little work could deliver big benefits!
Liked this article? Please share it with your friends and colleagues.
