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="https://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.
-
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="https://www.domain.com/file-name" />
Put in your canonical URL. Simple (period).
OK! We're now done with the markup...
-
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).
-
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.
-
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
-
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 -
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.
Tag every URL you share for maximum "data" to know if and how each social media share is sending you traffic.
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.
Additional Social Sharing Tips & Resources
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.)
3. Structured Social Sharing - Rock Your SEO with Structured Social Sharing from Yo! Yo! SEO
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. Listen to the podcast.
I want to give a personal thanks to the SEOmoz team who put together such a fantastic event! Thank you for allowing 4 community speakers take 10-15 minutes on stage. To the readers, please do share how you are controlling your social shares and any additional tips. I look forward to your ideas!
Excellent, thanks for posting this Dana.
I was a little confused after the WBF (not your fault, these concepts are new to me) and this new info compliments it nicely.
Much appreciated!
David
Very good followup from last week, Dana.
But I'm still confused about one thing... can I specify the OG:image below the head (rather in the body of my webpage)?
If so, how?
Update: I just created a RoundUp page that's all about Open Graph and Structured Social Sharing references. I (of course) included Dana's article here... even included an open source software plugin that hooks into WordPress to automate the entire process:
https://www.fetch123.com/SEM/open-graph-basics
OG:image can't be set, but Google's schema for G+ snippets can be.
Markus, with OG, you need to set the image in the <head> given it acts like meta directives. As Ferk mentioned, schema.org is inline, in the <body>.
One little tool I find invaluable with this is the open graph helper bookmarklet from ipullrank
https://ipullrank.com/open-graph-helper/
It just provides a one click way of checking the OG data on the page you are viewing.
Thanks for the iPullRank tool tip.
In the SlideShare preso above, the Resources section at the end references the Facebook Debugger for checking Open Graph validation.
Dana, thank you for sharing all of this. It's sooooo comprehensive but it's very well laid out, easy to understand, clearer to me than some of the previous articles/posts I've read on Social Tagging and Microdata and a great addition to my upskilling arsenal. Much appreciated. *I've added this to Evernote so I can digest it more later too. I hate losing great articles like this in my bookmarks or history.
CoashCijaye, being part of your arsenal is a bonus! Thank YOU!
P.S. I'm an Evernote fan as well for digesting content! ;-)
Great presentation Dana! Should be bookmarked by all Internet marketers!
Just a point of clarification regarding this note:
Yes, Google+ snippets are indeed populated from og: metadata when it is present, but schema.org microdata takes precedence when it's present (as per https://developers.google.com/+/plugins/snippet/).
In this sense one cannot "save Schema for other microdata markup" because that microdata will be pushed to the Google+ snippet if it's presence (though it's not entirely clear if Google will extract that microdata for use in snippet population if the itemscope is declared at a lower level than <html> and <body> - something I hope to test soon).
In practice I find it beneficial to align the relevant og: tags with the equivalent itemprop declarations in the code, especially in situations where metadata population is done at the template level, such as in ecommerce. So, for example, it makes sense if your og:description and (page-level) itemprop="description" are the same.
This alignment, of course, provides a potentially bigger bang for one's coding buck by providing precise control over Facebook and Google+ snippets and maximizing the possibility that rich snippets will appear in the SERPs for that resource.
And while you don't mention this in your post, that same alignment also applies to the code for Twitter Cards, which I think will become more prevalent in the near future (the Twitter Card metadata aligning with the example above being twitter:description).
None of this to say, by the way, that your note was incorrect - just expanding on it.:) Thanks again for this useful post!
Aaron, belated reply.
THANKS for the clarification. Someone else just asked about the 2 tags. They definitely have different uses. Schema to markup elements on a page. OG to create socially pretty shares! ;-)
Yes, both for a bigger bang for the buck all around!
Thank you so much for this kind of nice post...This can be helpful for planed proper viral marketing strategies. Not only this But, it can also helpful to analysis with very effectively and very easily.
This is a seriously good post Dana (even by SEOmoz's extremely high standards!)
We were just about to implement a lot of the areas you talked about on our sites. Now I don't have to research on 20 different sites. Thanks!
Oh, gosh... thank you, Brad! Super happy about the timing for you. Let me know how it goes!
Another great post Dana. It amazing how little websites use these techniques nowadays.
Thank you, Wundle! It's incredibly important to look good in social and not just in the SERPs! Of course, the game changes a little bit along the way, so we have to stay on top.
This is a good time to mention that Facebook changed the minimum size of the images to a recommended og:image size of 1200x627 and a minimum size of 560x292.
I'm really glad you made this post, considering the fact that the corresponding Whiteboard Friday left me rather confused. I think between that, this, and your Mozcon presentation, which I have yet to watch, I'll finally get my head around this concept.
Admittedly, it is a tough concept to wrap one's head around at first. We struggles on whether the Whiteboard Friday should go up first or the post. Glad the multiple resources are helpful!
Fantastic! That's an amazing amount of useful data and as Brad said, very timely for us here.
For Joomla! CMS and OG: https://extensions.joomla.org/extensions/site-management/seo-a-metadata/open-graph
or Install sh404SEF which has everything built-in.
Great post! I like to bookmark these posts for quick reference material. I would also recommend WordPress SEO by Yoast for WP users.
Holy crap, this is awesome Dana!
Talk about timeliness. this issue has been plaguing me for weeks. Thank you for the informative article. Looks like ill be up tonight writing code.
Brilliant article Dana, not so much information out there as in-depth as yours on social markup. I always wondered why when sharing posts and web pages there would be random images included in the share. Also that worksheet is brilliant, have something similar but this is much better thanks!
Glad to read this post Dana, yes snippets is important for the giving right direction of our content and make our get maximum viewers. I like the infographic way of representing Structured Social Sharing Formula for optimizing social engagement. I think one of the best advantage is having free Structured Social Sharing Worksheet .
This is a great piece of information Dana! Thank you
Hi Dana, excellent post. Thanks for mapping out everything from your MozCon presentation, WBF, and podcast?! I need to listen to that now.
I bet a lot of people will be using this information today to get themselves hooked up with social sharing. Thanks!
Your'e welcome, George! (Confession: I need to follow the same advice given the Cobbler's Shoes effect.)
This post is resonating pretty well with my geek side. Bomb info on share snippets, thanks Dana.
It's well worth taking the few extra minutes to make sure all your snippet information is in order. There is so much we can't control online that you definitely need to take what you can and run with it!
Nice point, Nick! Let's control what we can!!
Excellent article!!! Thank you for sharing . . . it's prep notes for another in-house meeting, lol. We will certainly be implementiing much of what you have shared.
Glad to help. Feel free to use. As mentioned, it's Creative Commons Attribution, which is only appreciated but not required. ;-)
Excellent post Dana, I am very glad to read this post. Yes snippets are most important because they will right direction of our content. Thanks for mapping sharing this post.
Outstanding post. That work sheet is a great piece of work - thanks for putting it out there.
As far as the OG stuff, let me remphasize your mention of Yoast Tools. It is so seamless that I discovered by accident that is was doing this for me on Facebook. I love pleasant surprises.
Wowzers !! Great resource, many thanks
Excellent share of information on rich snippets and social sharing, invaluable demonstration of best practice for successful SEO, thanks a lot Dana
hey . I have added tags exxactlly same as discribed in this post but not even a single of them is working :( can you please help me https://www.lithuaniaresidencepermit.com/
Better late than never? Sorry for overlooking your comment/question. However, today it looks pretty good.
You can check your format using the <a href="https://smo.knowem.com/">Social Media Optimizer</a> testing tool by KnowEm.
Great post. Very interesting and complete ! thanks
For my Wordpress sites, I have found the plugin "Ultimate SEO" to work great. It has a section under the blog post page editor that allows you to enter "Social Network Listings" and even a spot for a URL. Great plugin to help speed with efficiency.
Thanks for this awesome followup post to your MozCon presentation. I have two questions I am hoping you will answer. You wrote: "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.)"
Does this mean that if we already have Schema in place on our product pages that there's no need to add Open Graph? Wouldn't using Schema.org have an advantage over Open Graph because it is recognized by Bing as well? Thanks!
First, nice to meet another Dana!
Schema for Bing and for Google has a completely different value. This structured markup tells the search engines more about various components of a page, metadata about page elements. If that is your goal, use Schema for that reason. Facebook OG turns your content into a "social object" and enhances the appearance when you share. So, using both in this case is fine. The purpose of the SSSF is for social.
Hope that helps.
Thanks Dana,
Good informative post and some good tips in the comments too - I knew about the Facebook debugger but wasn't aware of the iPullRank tool - will be checking that out. Also thanks for confirming that 150 by 150 for og:image is the best all round size.
Thanks
BWRic, I really should update this post or have the Moz team do so. Facebook OG now prefers 200x200.
Change, it's guaranteed. So make your thumbs 200x200, and they will work in both Facebook and Google (as well as Twitter cards).
Thanks Dana, yep, I've checked the latest site we built and we use a range of 200 by 200 images. It's for a job/career site so it's very handy to be able to scroll through a gallery and use the most relevant image for a particular job posting on FB etc. Just getting in to Twitter cards too. Thanks for the heads up!
Great summarization Dana!
I'm currently developing a Facebook application that shares links via open graph and found that Facebook removes all url parameters so UTM tracking won't work. Essentially if I submit a link with UTM campaign (url) parameters in the open graph call Facebook will use their linter to crawl the page and extract the url from the original open graph tags thus dropping my tracking ability.
Do you have any ideas for how to get around this?
Sorry to hear that. Without knowing more about your app, I can't answer. So far, I've never seen Facebook drop off any of my UTM variables.
Sorry, hope you may be able to explain this. When should we actually be using the OG meta descriptors. I ask as I followed the link to your website (https://yoyoseo.com/resources/structured-social-sharing-formula/) and that page does not use the OG meta descriptors but instead "li class" (no idea what that is BTW) sorry i guess it is a silly question but I was expecting to see meta details like <meta property="og:title" content="The Rock" />
easyrider2, it's easy to explain. Cobbler's shoes! ;-)
We're in midst of planning a site redesign so we can have better control over the head for just this reason!
Awesome, thanks for clearing that up, just thought I was missing something.
Thanks
Really good information..thanks for sharing..
Great post Dana! I liked the way you explained this post in info graphics. Keep up good work. :)
This was a great presentation. At a local SEO meetup they covered this presentation, and it really was informative. It encourages me, as a techical SEO, to delve into areas that I don't know, and am not comfortable with, which is good.
Zach, thanks for the comment and glad it helped! You must have been at the Philly SEO Meetup with Bill Rowland. I was honored he covered the content and shared it there!
Great work on this Dana! love seeing my picture in the post :)
ahhh, CommandPartners! It's you, Roy! Yes, I "used" you throughout the preso! ;-)
Fantastic Post Dana...Thank you for discussing about social sharing Formula for optimizing social engagement..This is a really nice post about social snippets important ? like all OG meta property...
Thank you very much
Merhaba( Hi) Dana,
Glad to read this post. I am following Adam Sherk ( https://www.adamsherk.com/ ) on twitter and he just tweeted and ı am really glad to reach this article. Thank you.
Best / İstanbul
Dana,
Great analyst WBF; I newly got George really it's working...? let's try over first one. If then great to share with us.
Regards,
Manoj
Hi Dana. This is the First time that I read your article and I really appreciate your concept about Seo. Thanks for sharing such a valuable article with us.
Excelent post Dana! It really worth my time reading in this informative article.
You really explained everything in your article. Keep on posting!
Thanks a lot.
Awesome Post. Thanks alot for the all good information :)