Five things I should know about WHAAAT?
Good question. You probably haven’t heard about social meta tags, and I don’t blame you.
But unknown to you, they do a great deal to make your social media experience better. They also help website publishers and content marketers get more clicks for their content.
How do they do that? By ensuring that page previews look good.
1. So, what are open graph meta tags?
It’s a type of social meta tag! Platforms like Facebook, Linkedin and Google+ rely on a Facebook-created standard called Open Graph (og) for social-share-preview. So what does this mean?
The above example is around an article from Quartz. The automatically-populated Title, Description and Image that you see above comes from a piece of code (called og:meta) ‘hidden’ on the webpage.
Similarly, when you share a link on social platforms such as Facebook, Linkedin, or Google+, the platform is able to create a page preview thanks to og:meta.
2. How can you make og:meta work for you?
Make sure that you insert content corresponding to og:url, og:title, og:type, og:description, og:site_name, og:image on your webpage. Or else, the URL preview would look something like this.
Kinda meh, right?
If you do not have og:meta filled in, platforms would fetch whatever is there under the meta tags (not the open graph meta), ex:
If you do a quick check of this URL, it’s clear that:
- og:url ❌ (Though on click, the link would take you to the shared product page, the og:url is mapped to the home page, www.snapdeal.com)
- og:title ❌ (It’s the website title that’s getting fetched from the old school meta)
- og:description ❌ (It’s the website title that’s getting fetched from the old school meta)
- og: type ❌ (Thanks to the incorrect implementation, Facebook deduces this to be a “website”, whereas it should be “article”)
- og:site_name ❌ (Missing, but since this is identified as a “website” and not an “article”, Facebook shows the site name correctly)
- og:image ❌ (Missing)
To learn more on getting this implemented, check here what Facebook says. You could also use Facebook’s Open Graph Debugger Tool to see if you have implemented it right. Here’s what the debugger says about the page on Snapdeal. Apart from Facebook, Linkedin and Google+ also use og for content-sharing previews. (In the case of G+, it’s called a “snippet” and snippets are based on schema.org microdata and og is a fall back option. To make things easy for web developers, it’s better to stick to og as it works on all these three networks, at least.
3. What’s the og meta tag equivalent on Twitter?
To make the maximum use of the real estate and go beyond what 140 characters can achieve (in case of organic tweets containing article links), you should get Twitter Summary Cards or Twitter Summary Cards with Large Image implemented for your web pages. Though open graph properties act as fall back options for some of the parameters, it’s better to implement one of these cards on each of your pages. After you implement this, don’t forget to get it validated and an exception added to your website’s robots.txt file.
4. How does the code look on an implemented website?
This is from the source code of the Quartz page discussed earlier.
5. What are the top reasons to get social meta implemented?
- Social meta is a way to control the social-messaging around your content. The website publisher gets to call the shots here. If social meta isn’t implemented, you are killing the social-messaging golden goose.
- You can make the title, description, image etc perfect for social media where click-decisions are made in 2-5 seconds. Largest possible impact in the shortest possible time.
- You could have different text (and image) for Twitter v/s the rest (or even Google +) to test and understand what’s impactful, where.
Understanding social meta is just the surface of social-sharing best practices. Have you implemented social meta on your website? What were the roadblocks you faced? Comment or tweet to me and let me know.
Part 2 of this post can be read here
Twitter: @nikhilnarayanan
PS: I don’t have any control on the social meta of this page; I don’t own the platform or have access to making changes to these tags
Recent Comments