In our recent posts we’ve touched on some of the more advanced options for optimizing your social sharing and testing variations on your share pages and social share content.

Before diving in deeper, I want to take a step back to focus on one of the basic capabilities that is the first step towards testing variations in your share content: being able to set custom images and text for blog and action pages on your website that will be used by social network sites.  

This is the difference between your page links appearing like this when shared on Facebook:

and like this:

First things first, how do social networks know what information to pull?

It’s called metadata.

For those who are new to HTML metadata tags, this is the information that describes the content and context of your webpages.  This information about your page is HTML that sits in the “head” of your page’s HTML code.  This information is not visible when looking at a page in a browser, but is parsable and can be read by browsers, search engines, and social network sites.  In short, it is a summary of what is on your webpages for other web services.

I do want to take a moment to point out that metadata is a term that can be used to describe a wide variety of descriptive information about everything from books in a library (in card catalogs) to the information about your phone calls (the where, when, and to whom your calls are made, but not the calls themselves) that the NSA has been collecting. In this article we are focused specifically on HTML metadata for web pages.    

Meta Title and Meta Description are common metadata tags for a web page and to date have been the baseline for much Search Engine Optimization (SEO) work on the web as it is the information that was provided to search engines to tell them what was on your webpage. In the current age of SEO, making sure that each of the pages on your site has relevant metadata tags is just the first step in making your information known and available to your audience as they search use search engines, but still a very important one.

And now in the age of social media, metadata is essential to how links from your website appear on social media sites from Facebook and Twitter to Google+ and Pinterest.  Without the ability to set the exact Title, Description, and Images that will be scraped by Facebook or any other social network and displayed to viewers when a link to your page is shared, you are missing out on the most basic opportunity to optimize your web content for social sharing.  

Social Network Specific Metadata Tags

The first thing you need to know about how metadata works for social networks is that there are specific metadata tags for different social media sites. Given the core differences in how each of these platforms work, they also each have different information they are looking to pull from a web page’s metadata.  

If you look at the full list of meta tags that each social network supports, it gets pretty long.  And while you might not need to use all the tags for every page you create, there are definitely some that you should always set in order to optimize your content.  In order to give you an idea of what his possible, here is the list of all of the metadata tags that some of the primary networks support:

Meta Tags for Twitter:

1. twitter:card– Your options are summary, photo or player. Twitter will default to “summary” if it is not specified. <meta name=”twitter:card” content=”summary”>

2. twitter:url- <meta name=”twitter:url” content=”http://www.nytimes.com/2012/02/19/arts/music/amid-police-presence-fans-congregate-for-whitney-houstons-funeral-in-newark.html”>

3. twitter:title–This is the title of the content to be shared and should be limited to 70 characters. Go for headlines instead of keywords.<meta name=”twitter:title” content=”Parade of Fans for Houston’s Funeral”>

4. twitter:description– This is the description should be limited to 200 characters.  <meta name=”twitter:description” content=”NEWARK – The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.”>

5. twitter:image – This is the image that will be displayed on the Twitter Card and it should be a square image no smaller than 60×60 pixels. <meta name=”twitter:image” content=”http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg”>

Meta Tags for Facebook:

1. og:title –This is the title of the piece of content. You should use this as a headline that will appeal to the Facebook audience. It is completely ok to use a different title than the one on the actual site as long as the message is ultimately the same. You have 95 characters to work with. Format: <meta property=”og:title” content=”iAcquire’s awesome blog”/>

2. og:type – This is the type of object your piece of content is. For your purposes it will usually be blog, website or article, but if you want to get fancy Facebook provides a complete list. Format: <meta property=”og:type” content=”article”/>

3. og:image <meta property=”og:image” content=”http://www.iacquire.com/some-thumbnail.jpg”/>

4. og:url <meta property=”og:url” content=”http://blog.iacquire.com”/>

5. og:description This is the description Facebook will show in the screenshot of the piece of content. You have to 297 characters to make it happen. <meta property=”og:description” content=”Stop hitting refresh on your ex-girlfriend’s Facebook page? You should check out the iAcquire blog and learn something instead”/>

6. fb:admins – This metatag is critical for getting access to the wealth of data made available via Facebook Insights. You simply have to specify the Facebook User IDs in the metadata of those users you want to have access. For more information on Facebook Insights see the documentation. <meta property=”fb:admins” content=”USER_ID”/>

Meta Tags for Google+:

1. Itemscope=”[pageType]“ – where [pageType]is Article, Blog, Book, Event, LocalBusiness, Organization, Person, Product or Review.

2. itemprop=”name”– This acts as the title attribute of the rich snippet and should be limited to 140 characters.

3. itemprop=”description”– This is the description of the rich snippet and should be limited to 185 characters

4. itemprop=”image” This is the image of the rich snippet with an optimal size is 180 x 120. Google+ will shrink this image, but if it is too small it will not be displayed.

Source: iAcquire

So how do you make sure your pages are set up with the right information?

When you create a new Petition, Donate Page, Blog Post, or other type of page in your website’s CMS (WordPress, Drupal, Joomla, etc.) or in your online advocacy tool (Salsa, Blue State Digital, Convio) you MAY have the option to set custom image, title, description, and tweets for each of your new pages.  If you are using an advanced plugin, or highly customized CMS, you may even be able to set distinct content for each of the unique social network meta tags.

However, more than likely your CMS and advocacy tool was never set up to enable you to customize this content, in which case your CMS will automatically pull the Page Title, first paragraph, and a random photo from the post or website to use as the metadata.  Or even worse, not have metadata set up at all.  

If your site does not have social network specific metadata, social networks will often do their best to accurately present the information on your web page on the network, but often this ends up resulting in an irrelevant photo or text description of your page being shared on Facebook. This can significantly reducing the likelihood that anyone that sees the shared page will click through and visit your site.

The best case scenario that provides you the ability to optimize your content for social sharing is that you have the ability to manually set the metadata for the page for the social networks that are most popular for your audience.  This ability will either be an out-of-the-box option that is built into your CMS or CRM (Drupal, Salsa, Convio, etc.), a plugin that you can install, or will be custom built for you when your CMS or toolset is set up.  

With this ability, you’ll be easily able to choose a specific image, custom title text and your chosen intro text for a Facebook share post, the image that appears on Pinterest, or even set the Twitter account of the blog post author so it appears when the page is shared on Twitter.  When setting this content, you’ll want to make sure the images are the right size, and the text is the right length, but if set up well in your CMS, this will be easy! For Facebook, the optimal size for images that appear with page links is 627 pixels wide and 1200 pixels tall.  You can find out more about the image size and text length recommendations for the different social networks here.

Why does it matter? Social media currently drives a huge amount of website traffic.  If you look at your analytics, I bet Facebook is one of your top referral sources.  If you cannot customize your social share content, you concede the opportunity to add compelling images to attract new audiences, you lose the ability to use the curiosity gap to attract visitors, and lose the ability to apply any knowledge you have about your audience and how they use social media to build emotional connections to your posts and actions through social media.

If you are not able to do this currently in your system, let us know.  We want to empower you to make the most of your social shares!

This article was co-authored by Anna Hovland, New Media Intern and Austen Levihn-Coon, Chief Innovation Officer.