Today we are talking about social sharing. There are plenty of strategy guides for sharing on social media, and our team has also written a few, both on this blog and on State of Search, so today I won’t venture into that. However, what do you do when the content you and followers/fans share is not formatted properly? Or, what if it’s not shareable at all?
When a post is shared on social networks like Facebook or Google + for instance, a snippet is generated from the page mark-up.
The snippets you see above are generally not taken from the title and meta description tags, well-known in the SEO world. They use instead Open Graph Protocol tags, a set of meta data that enables any webpage to be represented within the Social Graph. It was originally developed by Facebook and it’s been used by many other social networks since then.
The basic four tags, required by the protocol, are: og:title, og:type, og:url, and og:image and they are placed within meta tags in the head of a webpage.
The attributes can vary in order, so for instance the above article from Mashable had:
<meta content="Facebook Unveils a Radically Redesigned News Feed" property="og:title" />
<meta content="article" property="og:type" />
<meta content="http://mashable.com/2013/03/07/new-facebook-news-feed/" property="og:url" />
<meta content="http://rack.0.mshcdn.com/media/ZgkyMDEzLzAzLzA3L2EyL01hcmtadWNrZXJiLjIxM2I2LmpwZwpwCXRodW1iCTcyMHg3MjAjCmUJanBn/b9d4f7ad/c7a/Mark-Zuckerberg-FB-news-feed.jpg" property="og:image" />
Yes, I know; that image URL is bloody long, but I guess that it’s their CDN’s fault, as I can safely assume they are using sets of unique identifiers for Mashable’s static assets.
Mashable is the king of social sharing, so it’s no surprise that they are using also several optional metadata. You can find the list of all the Open Graph Protocol tags here.
These tags should appear on every page that you want to be shared, unless you want social networks bots to best guess from the web page content which ones are the snippets to feature.
Any good social plugin will do the job of adding the tags for you, so you shouldn’t worry about it… until problems arise.
Why the title appears twice when a blog post is published on Google +?
That’s quite a common scenario. Google + is not the smartest social network (take that, Google), so it may go a bit nuts when it’s given contrasting instructions, while Facebook seems to be able to handle it better. That’s a happy Mark Zuckerberg.
Let’s understand why this issue happens by going step by step. A post published Google+ including a link extracts the page title, a brief description of the page, and a thumbnail image from the shared page content in the following order:
1. Schema.org microdata
2. Open Graph protocol
3. Title and meta description tags
4. Best guess from page content
Search engines like Google are pushing for Schema microdata, so Google + will use the name, image and description properties of whichever schema.org type is being used. There is also a tool by Google to customize your G+ snippet.
However, when a property like og:title appears twice on a webpage, Google+ merges them and features them together in a long string, so you may get something like:
Facebook Unveils a Radically Redesigned News FeedFacebook Unveils a Radically Redesigned News Feed
which simply looks horrible. So, why on earth would the og:title be twice on a page? That happens when two plugins conflict and try to serve the same purpose. It could have been, for example, be introduced:
• Once from the OpenGraph Slick Social Share Buttons plugin
• Once from Yoast WordPress SEO plugin
Solution: go to one of the two plugin settings and deactivate the two Open Graph protocol metadata. In this case, I would intervene on Yoast’s plugin.
Before doing anything, always double-check your page with the structured data testing tool; if there’s anything wrong like a tag repeated twice, you should be able to spot it instantly. This is the output for a correctly implemented page.
If you have problems that seem to be attributed to your Open Graph Protocol tags (90% of the cases), and they are a bit more difficult to spot, use Facebook’s own debug tool, which provides more data and allows you to see how their scraper sees your URL (similar to the Fetch as Google function in Google Webmaster Tools).
The post image is not featured in the snippet. Why?
This may depend on the image size and proportions (apart from the image not having metadata).
On LinkedIn, in fact, images are required to at least 80 x 150 pixels. If your post images doesn’t meet the criteria meet this minimum size, LinkedIn selects an appropriate image of the correct size. It will be then cropped to 180×110 on the feed. If you don’t want your images to look bad when they are posted, check this awesome cheatsheet put together by the guys at LunaMetrics.
However, in the latest days, Google + and Facebook have introduced new features, that change the size of the images. While Facebook updates are not publicly available yet, Google + users can now upload cover photos of up to 2120x1192px (minimum 480×270) and profile image sizes of 250×250.
That’s it for the moment. But if you have any questions on social sharing, or you can’t get your head round why your social snippets don’t work, ask me any questions in the comments or hit me on twitter.