Sharing content via social media is simply the next step after hitting the "Publish" button. How do you ensure your shares on Facebook, Google+, and Twitter are optimized? With a little planning and coding, you can make them look their best so that they go viral and track effectiveness in analytics. In this Whiteboard Friday, Dana Lookadoo unpacks the Structured Social Sharing Formula (SSSF): 10 steps for optimizing Web pages and social shares. The process includes:
- Marking up pages with microdata (Open Graph Protocol)
- Best practices for formatting
- How to find and use hashtags
- Tagging URLs to track social referral data in analytics
Keep an eye on the blog next week for a supplemental post from Dana offering detailed steps from her Community Speaker presentation at Mozcon 2012. To learn more about social markup and tagging, download the free Structured Social Sharing Formula worksheet!
Video Transcription
"Hi Mozzers. All right. What we're going to talk about today is the structured social sharing formula, and I'm going to go over 10 best practices for rocking your SEO with a markup and how this is going affect Google+ and Facebook. So I'm going to run through these, and then we'll delve down a little bit.
So the first of your five items that you would cover are actually going to do with meta tags that are Open Graph protocol. We have the title tag and the description and the OG image and the type of the website and the URL.
Actually, in five of these, four of these are required. The title is one of the first required items, and we're going to break down that in a moment The meta description is not required, and the image is going to actually become your thumbnail image. The type has to do with your website type, and that's going to actually be default. If you don't put anything in there, they're going to assume that's a type value. The other values that you can look at are author, profile, book, video, and you can look more at OGP.me if you want to look up more about types. On your URL, that's your canonical URL. So it's your permalink. So that's pretty easy.
Then we're going to go over your UTM variables so that you can track your campaigns, and that way you're going to make sure that you're getting your social referral data. We'll talk about your share blurb that goes on Facebook and Google+.
Hashtags, we're going to delve into a little bit on best practices. We can't do a demo on here, but at least you'll get an idea of what to do and what not to do. Moving into the best practices for Twitter and then best of all on how to document and track this. I'm going to save that for last.
So in looking at that, let's break this down. So if you look over here, we have the anatomy of a share snippet. The elements on Facebook and Google+
are the same. You have your avatar, and then you have your name. So it's starts out with your share blurb about the post, and then as move into this, you're looking at . . . okay, here's your title tag, which is actually controlled right here by the OG title. That actually becomes an anchor link to your page, to your URL. So keep in mind those two are related.Then your description, this could be your meta description from your page. You may want to copy it, but you're not limited to the same amount of space. So you have about 188 characters or less before Google+ will cut that off. Interestingly I have seen last week that about 453 characters on a description. So I don't know if Google is testing things or if I'm part of that test group, but keep it around 188 or less.
Talking about length on the title tag, that's actually . . . I saw 134. I can't imagine a 134 title. So just follow best practices for title. I go to about 80.
All right. So now we are at our image, so your OG image, and you want that to be square. You want it to be 150 x 150 is optimal. The minimum is 120 x 120. This is very important, because if you do not put in the proper image, you can actually put in the code. You could put this OG image directive in the code. Facebook will honor it. Let's say the image is too small and it's not 150 x 150. It may be 110 x 110. Then it will show up on Facebook, and you'll have an image, but Google+ either won't put anything, or they're going to draw another image to the page. If you have ads on your page, you may end up with an ad showing there instead. So this is where you can really rock your engagement because images are everything and people are looking at them. So that's important to get that right and remember how they're working.
One other thing I want to keep in mind in this is we're using Open Graph here and not Schema.org, Why use two tags? We're just doing this all in one. This is an all in one formula to do it all at one time.
All right. So now let's talk . . . . we're done with the five meta tags that are going to go in the head, and so let's talk actually about your UTM variables. Your UTM variables are actually going to start with you have your URL, and you're going to start with your source. So in this case, we're sharing it on Google+.
Then you're actually going to use your medium. So how are you doing it? The medium here we're sharing it on social, so that's the medium. Actually your campaign, this is a Whiteboard Friday. So by doing this, you have voila your social referral data. Keep in mind this is really important because you don't get this unless . . . you're not going to see that something came from Twitter unless it actually came from the Web itself. TweetDeck doesn't send this information. So this way you can keep track and you can track all of your social shares.
All right. We talked about the share blurb. But I want to go into that a little bit more, because on this share blurb, so what you're actually putting in the "What's on your mind" or "What's New" box, that's really important. Obviously, it's important for people reading it, but when this actually becomes in search plus your world for personalized search, that actually can become a SERP. So when that snippet is actually showing, guess what the title of it is? It's your blurb. So you may want to think SEO. You may want to frontload keywords. So think about this. This isn't just a blurb. There's actually some SEO benefit on personalized search.
Let's talk a little bit more about hashtags. As you're entering in your description, you can type in your description and type in the # sign on Google+, and you're going to see an autocomplete. This is SEO. You're typing in "#S" and you can see a list of related. Start over "#SE" and you're going to see SEO. But what's cool with this, a little pro tip, you're going to see what the latest trends are is what people are showing. So if you want to show up within those trends, you can use the hashtags.
Two more things on hashtags. Facebook, just don't do it. Facebook is not Twitter. On Twitter, you could use tagdef is one that has autocomplete. There's twubs. You can out hashtags.org.
All right. So let's move back and talk a little bit more about Twitter moving on in our formula here. You want to make sure that your tweets are retweetable, but what you want to start with is you want to do your campaign variables first, then create you short URL. So you've got this. You're entering all this. It may be bit.ly or it may be a custom URL shortener, and then as you're creating that, you're going to want to create the title of your post and then the bit.ly or the short URL, your at, your by, your at profile, and your hashtag. That whole length should be about 140 minus 5 minus the length of your profile. So at that point, that gives you enough room so that you have space, and voila you've got a retweetable tweet and you have your social referral data.
Okay. Last thing, document and track. I have a worksheet, and this was actually we're doing a Whiteboard Friday as part of MozCon, and I will be speaking about this tomorrow, on Friday. By the time you see this, it will be after the fact. You'll be able to download a worksheet, and that will be in the information below on the post that you will actually in that worksheet be able to enter in there will be a field for each of this information. You'll put in your campaign variables. It will automatically create your URL for you. All you have to do is cut and paste so that when you cut and paste your information into Google and Facebook, all you have to do is you could paste in your URL, and what Google and Facebook will do is they will parse the page and they'll look for those directives. You'll end up with a structured shared snippet.
I think that's about it for today, and thank you very much. It's been nice."
Very nice indeed although perhaps a little bit rushed through. I would have loved more details on some of the steps but I guess that is not the point of a WBF.
Keep up the good work.
Mauro & cocoonfx,
Thanks for the feedback on the timing. Agreed, I rushed a little through my first WBF.
More details will follow in a Moz post next week with steps outlined.
This is the wonderful theory of Social Sharing formula. Today`s WBF helpful to everyone and also SEO guys for business promotion…
Currently I am using only facebook and Twitter for my website or business promotion but now i also use "Google Plus" at this way..
Thanks for Sharing
Great WBF. One of the best ones of late. I appreciate the technical side of information presented.
Great post, Dana - got a question for you though... We have a lot of clients who use Wordpress for their blogs, and we haven't been able to find a solution that allows us to set up custom OG meta data on each post... the OG data is automatically populated by the Wordpress SEO plugin, so we at least have the meta data there, but we can't change it.
Any experience with this? Or anyone else out there who can help? We'd love to be able to set the title/description/image separately...
Here are 2 WordPress plug-ins for controlling the HEAD so you can insert OG code:
WordPress SEO by Yoast Like - Ads the Facebook Like button with OG tag control
Bang on Dana ... Great.
Thanks.
well structured presentation.. simple and clear..
I am really not aware about 188 Characters..
thanks for sharing this information. Cool WBF this time i must say.. :)
I like the manual approach. I have a question though, why not use AddThis or ShareThis? When I add extra code to my AddThis code, all of it appears in GA.
Manual tagging and sharing on various social networks allows you to track your campaigns specifically and track them in Google Analytics. You don't have such granular control via AddThis & ShareThis.
Disclaimer: You still want to encourage social sharing on your site using these plugins.
Absolutely valuable WBF with - in my opinion - underestimated (and too less used in reality) practic. Your one by one steps makes it really easy to use.
About the UTM variables - I have to confess I delete them from the twitter stream. But most people won't do that ...
Awesome presentation. Glad to see I've been doing the proper things...Thanks Dana!
Clean and simple instruction... loved it. I will look out for the worksheet. I want to start organizing client social sharing more effectively. Thanks for sharing.
Very nice and useful post. With social holding the eyes of search engines it is important to maximize your efforts, including tracking. Love it.
Great WBF, nice and clear and concise and I learned a lot of stuff I didn't know about before (like image sizes!).
2 small criticisms:
1) You move around a bit too much, it's a bit distracting. Rand is a bit less animated and it works better, keeps the focus on the board rather than you moving.
2) a pound sign is £ to us brits so I guess you mean a hash sign, #, afterall that's why it's called a hashtag.
Otherwise it was fantastic!
Points well taken. Thanks!
Don't forget, Rand has literally been doing these for years! You should see him in the beginning! ;) And, in the US, we do call the # a pound sign. It's only been *recently* that we called it a hashtag.
Pound is £ . americans confusing the issue ;D
A note about the length of title tags: what Google archives and what it displays are two different numbers -- somewhere in excess of 120 characters for archival purposes, around 65 characters for display. Keep this in mind when writing the tag, because you will need to "front load" your tag with the information you think is important to potential visitors. The same is true for the meta description tag (again, the display is around 70 characters)
ContentShaman, agree. Thanks for the "front loading" reminder, something that is covered in the upcoming blog post about this.
FYI that previous tests show that Google indexes up to 255 characters of the title, but then we're focusing here on the Open Graph markup, not the meta. For the og:title, they display many more characters in the share snippet. It definitely gives us a different playing field with the social sharing ball game.
I personally find this very helpful. I hadn't embraced Open Graph yet, but looks like I should. Knowing what my title, image, and blurb will look like in both FB and G+ before I submit them will be a good feeling to have.
I think this is the fastest video I have ever seen. I am completely lost. I had to read the video transcript to find out if we where talking about Facebook or are we talking about Google + and sharing this with Facebook.
I think the nerves kicked in on this... be better if it where slown down. Sorry.
Awesome presentation and thanks for the work sheet link
@DanaLookadoo - Just wanted to clarify - The OG meta code goes into the header of the actual blog post, correct? We do not insert this into our actual FB share - FB pulls the OG data when we share the link?
Do we copy and paste the link with the UTM data as the link we want to share in FB? If we use TweetDeck and we paste the UTM moded link will TweetDeck include that UTM data when it shortens the link via bit.ly?
Thanks & sorry if these questions are obvious or too simple
To continue our brief Twitter convo, yes, the OG code goes in the HEAD of each page.
Facebook and Google+ scan the page immediately when a link is added. If they find the microdata, they will use that to populate the fields. If the code provides directive for an image that matches Google's criteria (at least 120 px, preferably 150x150 px), then they will display that as the thumbnail share image. FB does the same.
Regarding TweetDeck, yes. It creates a bit.ly with all the goodness and tracking capability of your UTM variables.
No apologies ever needed for questions. The best learners ask the most!
P.S. Stand by until next week for a post with more details.
@Dana Lookadoo - "The best learners ask the most!" - I must be a friggin' Ph.D. by now *grins*
Thanks for the great answer - I'm in the middle of a couple of site re-designs & ports from Joomla to WP and will have an opportunity to implement these things sort of from scratch on the new sites :)
Hey Dana, great WBF. This post is certainly timely. I just answered a question yesterday in the Q&A forums about how to choose the image that shows up when your URL is shared in Facebook (og:image).
Good stuff, thanks!
Interesting WBF Dana. I find it to be very useful in the new landscape of people thinking that social sharing is imperative to distributing good content. Making sure everything is attractive and coded properly is vital to CTR and really inviting those social actions like shares and clicks.
I thought the image size was a great point. Everyone wants to make sure they have an attractive and relevant OG image that is formatted properly. Also, thinking about your tweets and their retweetability (is that a word?) is something maybe not everyone thinks about.
Also, everyone love anytime we get something and the social worksheet is appreciated. It is great when someone works hard on creating a good tool and hands it out to their peers.
Thanks for the feedback and happy to "pay it forward" by sharing worksheets and processes!
This is a great post, well done Dana. I think what most people are starting to forget is that Social sharing is meant to be engaging and personal. When using third party software such as HootSuite and Tweetdeck, you are really taking away that personal touch. Following this formula is the perfect way to share your content and not come off as so robotic.
Nice post you have choose perfect concept over here to grow up our SEO. We have to put more attention on improving Google+ profile.
Social media becomes very huge platform for every one to promote their business and
getting potential customers. One question arise in my mind is what is the perfect image size for the facebook advertising??
There is no specific size mentioned anywhere for Post image, Your image should be interesting whether it is small or BIG. I found very interesting tips for FB promotion, hope it will help you.
Thanks for these great tips. I will try to implement some of these tips. I have not tried hashtags so thats something that I need to do.
Great, informative post. Nice to know a work around for the issue of Facebook grabbing the wrong image. Thanks!
Great WBF! Few things really simple and effective but don't know. For title, Dana you are absolutely right, only 80 characters shows and you have to describe best in that to create impact.
Use of hashtag, I would probably go with that. There is two benefit, first twitter is definitely biggest advantage and second is Google+ uses hashtag as well. So to get benefit on SERPs ranking you should use that one. Even few time I have noticed that results from twitter and LinkedIn preferred over Facebook in SERPs of Google.
Just a note that the post explaining more details about the 10 best practices for social sharing is now live.
I see there's a better way of doing it than just sharing it and that's it.
Dana assumes that all readers here are well aware about the Open Graph Protocol.
I would recommend that she should add links or should disclose more about the Open Graph Protocol.So that normal readers (not expert) can know about it.
Through this way she will be able to reach to more people and would help to many.
Any one wants to know more about the Open Graph Protocol here are two websites -
https://ogp.me/
https://developers.facebook.com/docs/opengraph/
Lalit, thanks for the resource links.
The WBF was a summary of my MozCon preso to an advanced audience, thus I didn't go into more of the introductory information. The follow-up post provides more details: https://www.seomoz.org/blog/rock-your-seo-with-structured-social-sharing-mozcon-presentation
Dana, awesome post. Informative and actionable information.
A very interesting topic explained in a very intuitive way, is a great post that has helped me a lot.
Awesome post! A lot of great information in one place!
Thanks a lot. I am surely gonna try this on my website.
I was impressed with this WBF it had lots of useful info. I lost it at UTM variables though.
You made the sharing example of Google + . Do I need to choose a social network or can I share it on more than one? If not do I need 3 urls to add variables to?
Point 7 was awesome. If I understood it correctly. SO, If I add these meta tags to my page. then when posting the link on facebook , if I SEO load my blurb, that's what can become a serp?
Thanks again, I'm off to download the additional data.
Phil, you are correct regarding step 7. Your blurb can become a SERP.
UTM variables are explained in more detail in this follow-up post:https://www.seomoz.org/blog/rock-your-seo-with-structured-social-sharing-mozcon-presentation
You can share on as many social networks as you like, but we recommend changing the source variable for each. This enables you to track in Google Analytics.
Please clarify: " One other thing I want to keep in mind in this is we're using Open Graph here and not Schema.org, Why use two tags? We're just doing this all in one. This is an all in one formula to do it all at one time."
What is the all in one formula. I find the Schema.org microformat tags to be universally accepted and the wave of the future for all the engines, why are you suggesting to use OGP tags and not schema.org?
See this answer: https://www.seomoz.org/blog/structured-social-sharing-formula-whiteboard-friday#jtc194202
And yes, Schema.org rocks! Use OG for Facebook and Google+ for results on both platforms with one set of tags for social. Use schema for everything else. They do play well together.
The German translation of this article can be found on our Webmaster Blog.
Nice post. But where is link to the worksheet?
Hi! It's right above the video. Here it is again! Structured Social Sharing Formula
Would be nice to see an example of the code. Is this best used for informational posts or can ecomm product pages benefit from this?
Hi Rob, Dana shared a URL for some examples early in the video. You can go to https://ogp.me/ to learn more and for many code examples. Hope this helps!
Thanks George, must have missed it. Read this before the coffee this morning.
For code examples as seen in the real world, view the presentation and details by the link mentioned in the synpsis above or visit Structured Social Sharing Formula on Slideshare.
Thanks George for posting the link the the Open Graph Protocol!
Nice WBF here. I know that you do not have to chase the pros, but to increase the total number of social signals in the combination of G+, Tweets, FB Likes and combined with SHARING your info. Social signals (+1's) without growing social sharings and links is nothing IMHO.
I would have appreciated another moment or two introducing the tech that's being used, like Open Graph and UTM variables. Anyone who already knows what those things are, is probably already doing this stuff; therefore, your target audience is people who don't already know what those things are (like me). :)
In hindsight, I could have fit more code on the whiteboard as a canvas. ;-) There will be a follow-up Moz post next week that delves into the code and the Open Graph Protocol a little more and best practices for campaign variables.
FYI that if you download the Structured Social Sharing Worksheet, you'll find tips and instructions in the Excel file. Hope this helps!
Thanks for the tips. I can't wait to get the worksheet. When will you post the link?
The worksheet is on the page linked to above the WBF video. Here is the direct URL to the XLS zip file: https://yoyoseo.com/docs/structured-social-sharing-worksheet.zip (Unsure why http is not working for this, so you may have to cut & paste.)
Enjoy!
Great stuff! This was a great help! Adding it to my sites today!
Nice vid, quick question: in the video you said, "One other thing I want to keep in mind in this is we're using Open Graph here and not Schema.org, Why use two tags? We're just doing this all in one."
Would you not suggest utilising both the Open Graph and Schema.org protocols?
Facebook Open Graph serves its purpose well, but it doesn't provide the detailed information search engines use to display rich snippets.
David, good question!
I'd use Schema.org for other page mark-up. For social sharing tags, I'd only use one set of microdata, since FB and G+ both honor the Open Graph directives.
Was this WBF shot at the MozPlex? The camera and lighting seem totally different. Thanks for the informative video, Dana. I just downloaded your SSSW and I'm looking forward to using it. Great share!
Yes, Jason, this was shot at Moz in Seattle. Heck, if Google can play with their algos, I guess the camera guys can play around with lighting! ;-)
Regarding the worksheet, a big "You're welcome!"
WOW, This is exactly what I was searching for, so twitter sharing URL is collected from OG:url or I'm wrong?
For Twitter, the OG code doesn't affect the shared URL. You need to tag that separately, cut & paste into Twitter.
Then how some sites like SEOmoz convert them to the shorter URL automatically?
thank you for the useful tips and the worksheet!