Rock Your SEO with Structured Social Sharing - #MozCon Presentation
http://bit.ly/P02Qyk
Posted by Dana Lookadoo
During my MozCon 2012 talk, attendees learned about the Structured Social Sharing Formula (SSSF) - 10 steps to optimize and track social share snippets on Facebook, Google Plus, and Twitter. The formula includes use of microdata and best practices for controlling the snippet that displays on Facebook and Google+ as well as how to automatically tag URLs with campaign variables for analytics.
PRO TIP: This structured markup makes a difference for SEO!
I'm sharing the process, my MozCon presentation, and a free worksheet with you below. Oh! La! La!
You can also view my Whiteboard Friday on SSSF where I give a bird's-eye view of through the process.
Why are social snippets important?
You put your heart and soul into creating a piece of great content or a killer blog post. It looks good, reads well, is attractive, and maybe even authoritative. You're hoping for links and social engagement. Then you share it online... OUCH! The wrong image displays, or worse, maybe no image displays. Your share doesn't look as good as you hoped and fizzles.
If you don't optimize your page with the right code, your dreams of going viral may flop. That killer content most likely won't get as many reshares, likes, or retweets as you thought it would.
Example: Great content without structured markup
Rand Fishkin put together an absolutely stellar Whiteboard Friday: 8 Rules for Exceptional Slide Presentations
The video rocked! He included a SlideShare presentation along with transcripts. There were some fantastic images in the presntation and nice visuals in Rand's video.
However, when shared on Facebook and Google+, the share snippet image didn't work in both cases:

Facebook grabbed Rand's avatar for the post image correctly, but Google+ found no image on the page large enough to pull.
Publishers beware: Most CMS are not set up to allow an editor to control the <head> where the structured markup to control a share snippet needs to be placed. (There are a couple references below for WordPress users.) Amazingly, major news publishers such as the Reuters and the LA Times don't even have it right. Often, a sponsor's ad on the page is the default image that displays. OOPS!
Anatomy of a Share Snippet
Let's review the elements of a share snippet before we get to the SSSF and steps. Every share snippet contains, at least, the following elements:

The code on your page controls how the share snippet displays:
- Share Blurb - your explanation about the content.
- Title - page Title
- Description - brief description of the page
- Image - a thumbnail image
- URL - links the Title to the page
When you don't use microdata to specify what to display for these elements, Facebook and Google+ determine it for you. You can make your social snippets look good and know if your social media engagement is working for you by implementing the steps below!
Formula for Optimized Social Engagement
Here's the all-in-one Structured Social Sharing Formula to optimize your social engagement:
Five of the 10 steps include placing additional <meta> in the <head> of each Web page using Open Graph Protocol (OG).
PRO TIP:
You don’t have to create two sets of tags - Open Graph and Schema.org. OG works for both Google and Facebook for social sharing! (Save Schema for other microdata markup.)
10 Steps With Microdata & Analytics
Four of the five Open Graph tags are required, marked with an asterisk (*) below. Let's break each step down:
-
OG: Title*
<meta property="og:title" content="Share Snippet Title Goes Here" />
The title becomes anchor text to the page. Follow best practices for writing OG titles the same way you would write captivating and explanatory text for your meta title tag. (OG title overrides meta title tag.)Size? You're not limited by 60 or 70 characters as with the meta title tag. I've seen up to 134 characters in a Google+ snippet title, but that's just too long. (Personally, long titles are not preferred, and they are not quickly readable.)
-
OG: Description
<meta property="og:description" content="Your descriptive content goes here, probably similar to your meta description." />
This markup acts like a meta description, but you are not so limited by the number of characters as with the equivalent meta. I recommend up to 188 characters for your text to display without the ellipsis. (OG description overrides meta description tag.)Best practice is to write it like an ad, summarizing the first paragraph of the page copy and/or include benefit statements.
Caveat: I’m still testing character length. I saw 453 characters in a Google+ description. It was pulled from a page without markup, and that page had short one-sentence paragraphs. Google may have been testing how much they display for the description.
-
OG: Image*
<meta property="og:image" content=" " />
Enter the URL of the thumbnail image. If you don't have an image, Facebook and Google+ will look for another image on your page, e.g. avatars, images for related posts, and worst of all...sponsored ad graphics.150x150 square is the best size for both Facebook and Google+. The height must be at least 120px. (If the width is less than 100px, then the aspect ratio must be no greater than 3:1.)
Important: Size overrides code. Images that are too small or not square enough are not included in a Google+ snippet, even if the images are explicitly referenced by schema.org microdata or Open Graph markup.
-
OG: Type*
<meta property="og:type" content="website" />
Specify the type of content (object) being shared. Any non-marked up webpage will be treated as og:type website. Other type values include article, book, profile, video.movie, music.song.Read more about Open Graph Object Types.
-
OG: URL*
<meta property="og:url" content="http://www.domain.com/file-namespanspanspanspanspan
