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.
You can also view my Whiteboard Friday on SSSF where I give a bird's-eye view of through the process.
Below are a few more tips to enhance your social sharing (and SEO) experience:
1. Enhanced Google Site Search
A worthy by-product of the "Structured Social Sharing Formula" is that it enhances results for Google's Search Appliance for in-site search results. So if your site uses Google's Site Search, you can control and add images to those search results using the same og:image code. The images will be scaled to a smaller size to fit your own personal in-site SERPs.
2. WordPress
There are a couple WordPress plug-ins that have received good ratings for accessing the <head> to enable you to insert OG code. Check out the following:
This is the full presentation as given at MozCon 2012.
4. Best Practices for Structured Social Sharing on WebmasterRadio.FM
I joined Ross Dunn and John Carcutt, co-hosts of SEO 101 Podcast, on WebmasterRadio.FM.
While Ross and I were in Seattle for MozCon, we joined John to discuss best practices for optimizing social share snippets and how to track efforts.
Source: http://www.seomoz.org
- PRO TIP: This structured markup makes a difference for SEO!
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:
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).
Four of the five Open Graph tags are required, marked with an asterisk (*) below. Let's break each step down:
1. 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.)
2. 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.
3. OG: Image*
<meta property="og:image" content="http://www.domain.com/images/image-file-name.png" />
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.
4. 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.
5. OG: URL*
<meta property="og:url" content="http://www.domain.com/file-name" />
Put in your canonical URL. Simple (period).
OK! We're now done with the markup...
6. UTM Variables
Append tracking tags to end of your URL:
?utm_source=facebook&utm_medium=social&utm_campaign=conference
URL tagging with UTM campaign variables gives you social referral data!
All you need to do is identify your URL and the three required attributes: the source (social network), the medium (how it is delivered), and the campaign (the category for how you want to track in Google Analytics).
7. Share Content
This is the textual blurb you want to put in the share box.
Enter it in the boxes where it says, “Share what’s new” (Facebook) or “What’s on your mind?” (Google+).
SEO tip: this share text become the title tag <title> of that share snippet when it becomes a SERP. So, if you are targeting Search Plus Your World (SPYW) personalized search, remember that your Google+ share blurb can rank. Think SEO and front load keywords – without being spammy. However, always think more about your message and audience engagement first.
8. Hashtags
Use #hashtags on Google+.
When you type a # in the G+ share box, it auto-completes (auto-suggests) hashtags other people have used.
Tip: Use hashtags to discover trends! Don't use hashtags on Facebook. (Facebook is not Twitter. Forget the hashtags.) Choose one hashtag for Twitter, and don't abuse that precious hash (#) sign!
Tools: Discover hashtags on Twitter for your topic: Tagdef, Hashtags.org, Twubs
9. Twitter/Retweetable
Sharing on Twitter is a different beast, since the OG markup doesn't affect the tweet. Below are some tips to optimize and track your tweets.
Steps:
1. Append your UTM campaign variables to end of each URL.
2. Create a bit.ly or custom (branded) short URL.
3. Choose a single #hashtag, if any.
4. Create a “retweetable” tweet. (See "Format" below.)
Size:
To be retweetable, your tweet needs to be short enough that it doesn't get cut off. Here's the formula for determining the length:
Max Characters = 140 – 5 – (LEN)@YourProfile
Format:
Put the post title first, followed by your short URL, the "by" you or your company's profile name. Add your #hashtag to the end.
Latest Greatest SEO Post Title:
bit.ly.Moz3Xlu by @YourProfile #hashtag
10. Document & Track
Here's the fun part, err, the FREE part...
Yo! Yo! SEO is making this process nearly error-free and easy for you. Download the Structured Social Sharing Worksheet to plan each page's Open Graph tags and social shares.
Bonus: the Excel worksheet contains an automatic URL builder to tag your file names with UTM campaign variables!
The last step after documenting everything in the worksheet is to cut and paste into each social network.
OK, we're almost done...
Analytics - URL Tagging
Let's delve a little into tagging those URLs. As mentioned, you can quickly and automatically create UTM variables to track the effectiveness of each social share, including Twitter. The worksheet does it for you through its automatic URL builder to tag URLs with UTM campaign variables. The required fields and a sample tagged URL are shown below:
Why is tagging important?
You won’t get full social referral data in Google Analytics when you shared a post without campaign variables.
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.)
Four of the five Open Graph tags are required, marked with an asterisk (*) below. Let's break each step down:
1. 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.)
2. 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.
3. OG: Image*
<meta property="og:image" content="http://www.domain.com/images/image-file-name.png" />
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.
4. 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.
5. OG: URL*
<meta property="og:url" content="http://www.domain.com/file-name" />
Put in your canonical URL. Simple (period).
OK! We're now done with the markup...
6. UTM Variables
Append tracking tags to end of your URL:
?utm_source=facebook&utm_medium=social&utm_campaign=conference
URL tagging with UTM campaign variables gives you social referral data!
All you need to do is identify your URL and the three required attributes: the source (social network), the medium (how it is delivered), and the campaign (the category for how you want to track in Google Analytics).
7. Share Content
This is the textual blurb you want to put in the share box.
Enter it in the boxes where it says, “Share what’s new” (Facebook) or “What’s on your mind?” (Google+).
SEO tip: this share text become the title tag <title> of that share snippet when it becomes a SERP. So, if you are targeting Search Plus Your World (SPYW) personalized search, remember that your Google+ share blurb can rank. Think SEO and front load keywords – without being spammy. However, always think more about your message and audience engagement first.
8. Hashtags
Use #hashtags on Google+.
When you type a # in the G+ share box, it auto-completes (auto-suggests) hashtags other people have used.
Tip: Use hashtags to discover trends! Don't use hashtags on Facebook. (Facebook is not Twitter. Forget the hashtags.) Choose one hashtag for Twitter, and don't abuse that precious hash (#) sign!
Tools: Discover hashtags on Twitter for your topic: Tagdef, Hashtags.org, Twubs
9. Twitter/Retweetable
Sharing on Twitter is a different beast, since the OG markup doesn't affect the tweet. Below are some tips to optimize and track your tweets.
Steps:
1. Append your UTM campaign variables to end of each URL.
2. Create a bit.ly or custom (branded) short URL.
3. Choose a single #hashtag, if any.
4. Create a “retweetable” tweet. (See "Format" below.)
Size:
To be retweetable, your tweet needs to be short enough that it doesn't get cut off. Here's the formula for determining the length:
Max Characters = 140 – 5 – (LEN)@YourProfile
Format:
Put the post title first, followed by your short URL, the "by" you or your company's profile name. Add your #hashtag to the end.
Latest Greatest SEO Post Title:
bit.ly.Moz3Xlu by @YourProfile #hashtag
10. Document & Track
Here's the fun part, err, the FREE part...
Yo! Yo! SEO is making this process nearly error-free and easy for you. Download the Structured Social Sharing Worksheet to plan each page's Open Graph tags and social shares.
Bonus: the Excel worksheet contains an automatic URL builder to tag your file names with UTM campaign variables!
The last step after documenting everything in the worksheet is to cut and paste into each social network.
OK, we're almost done...
Analytics - URL Tagging
Let's delve a little into tagging those URLs. As mentioned, you can quickly and automatically create UTM variables to track the effectiveness of each social share, including Twitter. The worksheet does it for you through its automatic URL builder to tag URLs with UTM campaign variables. The required fields and a sample tagged URL are shown below:
Why is tagging important?
You won’t get full social referral data in Google Analytics when you shared a post without campaign variables.
- Google Analytics will automatically know if someone clicks on a link from Twitter Web to go to your page. Twitter will be shown as a referral.
- However, referral data is not available when you use third-party clients like TweetDeck and HootSuite to post to social networks via an API.
- PRO TIP: You can add UTM variables via AddThis and ShareThis. But you cannot vary your campaigns for each post. Do make it easy to share by using these and other sharing plugins, but for your personal/company sharing, tag and share them manually. Your analytics gurus will be happy for the data.
Below are a few more tips to enhance your social sharing (and SEO) experience:
1. Enhanced Google Site Search
A worthy by-product of the "Structured Social Sharing Formula" is that it enhances results for Google's Search Appliance for in-site search results. So if your site uses Google's Site Search, you can control and add images to those search results using the same og:image code. The images will be scaled to a smaller size to fit your own personal in-site SERPs.
2. WordPress
There are a couple WordPress plug-ins that have received good ratings for accessing the <head> to enable you to insert OG code. Check out the following:
- WordPress SEO by Yoast - Lots of <head> control
- Like - Ads the Facebook Like button along with OG tag control (NOTE: The plugin is outdated.)
This is the full presentation as given at MozCon 2012.
4. Best Practices for Structured Social Sharing on WebmasterRadio.FM
I joined Ross Dunn and John Carcutt, co-hosts of SEO 101 Podcast, on WebmasterRadio.FM.
While Ross and I were in Seattle for MozCon, we joined John to discuss best practices for optimizing social share snippets and how to track efforts.
Source: http://www.seomoz.org
