What Are Social Meta Tags? Open Graph and Twitter Cards Made Easy
Have you ever pasted a link into Facebook or Google+ to find that the associated image has nothing to do with the content of that page, or that the post description reads like an SEO Mad Lib? You think twice about sharing it, don’t you? Social Meta tags give marketers control over the experience their content produces as it shows up on social networks including Google+, Facebook and Twitter. For instance, if someone copies a link to this page in their Facebook status update:
It looks like this:
The above is not an impressive piece of content. A social media user may even abandon this post instead of sharing it.
The title, description and image can all be specified by the content publisher so that the content, when viewed in a social feed, looks snazzy and is optimized to get a click.
Aren’t you much more likely to click on a post that comes across your feed looking like this?
Read on to learn how to customize titles, descriptions and images via social Meta tags. This article covers the following topics:
- Social Meta Plugins for WordPress
- Open Graph Tags
- Twitter Card Markup
- Schema for Sharing on LinkedIn, Google+ and Pinterest
You can jump to these sections with the links above.
Using WordPress? Let’s Talk Social Meta Plugins
If you’re using WordPress, several plugins make it possible to implement social Meta markup without ever having to write a single line of code. Some options include Facebook’s official plugin, JM Twitter Cards for Twitter, and, the plugin we use, WordPress SEO by Yoast which implements Open Graph tags for Facebook and Google+ and Twitter Cards for Twitter. WordPress social Meta plugins are a quick and easy way to associate custom social media titles, descriptions and images with blog posts (or web pages) on a page-by-page basis.
While you’re not likely to be getting your hands in the code to implement social Meta markup, next we run down the code doing the work behind the scenes, for your reference.
Open Graph Tags
The Open Graph protocol is Facebook’s standard for implementing Social Meta tags. It has also become recognized by all the major social platforms, including LinkedIn, Google+ and Twitter.
The basics of Open Graph markup include:
- og:title = title or alternate title of post
- og:url = URL of post
- og:description = two to four sentences describing post
- og:image = URL to unique image at least 1200×630 pixels
- og:type = article (otherwise defaults to “website”)
So in order to have the Facebook shares that come from your web pages formatted with an image, title, and description of your choosing, like this:
…this is what the social Meta tags look like in the HTML code:
<meta property=”og:title” content=”Liveblog Coverage of Pubcon Las Vegas“/>
<meta property=”og:url” content=”http://www.bruceclay.com/blog/pubcon-las-vegas-2014-liveblog-schedule/“/>
<meta property=”og:description” content=”Find out where the Bruce Clay, Inc. team will be during Pubcon Las Vegas 2014 this week, and get our Pubcon liveblog schedule.“/>
<meta property=”og:image” content=”http://www.bruceclay.com/blog/wp-content/uploads/2014/10/bruce-clay-inc-pubcon-social.jpg“/>
<meta property=”og:type” content=”article“/>
To make sure your Open Graph tags have been properly configured, use Facebook’s Open Graph Debugger Tool to see a preview of how your post will appear in Facebook.
From our experience using the Yoast WordPress SEO plugin to optimize social Meta tags, you can upload an image to the “Facebook Image” field under the “Social” tab, and this image will be used to populate the image in shares on Facebook, Google+ and Twitter, if you only include this one. For optimal image dimensions for Facebook, Google+, Twitter and other social networks, bookmark this Always Up-to-Date Guide to Social Media Image Sizes from sproutsocial.
Twitter Card Markup
Twitter Cards allow you to attach rich photos and videos to Tweets with a few lines of HTML. There are at least 9 types of Twitter Cards but Summary Cards and Photo Summary Cards are most commonly used. The basic Meta tags for Twitter are:
- twitter:card = Card type (full list of card types here)
- twitter:title = Title or alternate title of post
- twitter:url = URL of post
- twitter:description = Brief description in less than 200 characters
- twitter:image:src = URL to unique image of at least 280×150 pixels
So in order to get something like this:
… Twitter Card social Meta tags will look like this:
<meta name=”twitter:card” content=”summary_large_image”/>
<meta name=”twitter:title” content=”SEO Copywriting Style Guide from @Pubcon #Liveblog”/>
<meta name=”twitter:url” content=”www.bruceclay.com/blog/pubcon-seo-copywriting-style-guide/”/>
<meta name=”twitter:description” content=”Liveblog converage of a Pubcon session with tips and tools that SEO copywriters can use to write better content for search engines and human audiences alike.”/>
<meta name=“twitter:image:src” content=”http://www.bruceclay.com/blog/wp-content/uploads/2014/10/lindsay-mineo-pubcon-300.jpg”/>
You can preview your Twitter markup using Twitter’s Card Validator tool to make sure you’ve configured your Meta data correctly.
Schema for Sharing on LinkedIn, Google+ and Pinterest
Open Graph tags are also read by LinkedIn, Google+ and Twitter. Most of the social networks recognize and support Open Graph as a default standard when it comes to social markup. But there is another solution for Google+, Pinterest and LinkedIn which is schema markup.
To use schema markup to customize the title, description and image associated with your Google+ or Pinterest, the social Meta tags look like this:
<html itemscope itemtype=”http://schema.org/Article”>
<meta itemprop=”name” content=”Blog Post Title”>
<meta itemprop=”description” content=”This a description of blog post”>
<meta itemprop=”image” content=”http://www.domain.com/image.jpg”>
Again, this Schema markup will go in the HTML code associated with your post right before the closing </head> tag.
You can validate your schema markup using Google’s Structured Data Testing Tool.
Quick Tips for Crafting Social Meta Tags
- The key to maximizing your social distribution is to control the way your content is displayed in feeds rather than letting Facebook, Twitter and other social platforms decide for you.
- Recycle unused headline ideas by using them as alternative titles for Facebook and Google+. You could use this opportunity to test headline ideas for future content.
- Showcase images that will appeal to the unique interests of each network’s distinct audience. This is especially useful if you want to test out different versions of an image.
- Craft social descriptions that approach the nature of the content from a different angle or aimed at a different audience. This way, you can target specific personas on different social channels.
Why You Need Social Meta Tags
According to IBM’s Tami Cannizzaro, all search is now social. This means you need to start thinking of all your social media posts more like social advertising, as asserted by aimClear’s Merry Morud who believes strategic content markup for social distribution is everything in today’s dynamic digital landscape.
The key to maximizing your social distribution is to control the way your content is displayed in feeds rather than letting Facebook, Twitter and other social platforms decide for you. By optimizing Social Meta tags, you can craft messages about your blog post geared toward the distinct audiences you have on each social network.
Much like page Title tags and Description tags help boost search engine rankings, Social Meta tags are elements in your HTML that boost social exposure, increase social media traffic and improve click-through rates.