Social signals are becoming increasingly important in the world of SEO. Facebook shares, Tweets and Google +1s have reached such volume that they have potential to be a great measure of content quality. This is why search engines have started to consider these signals when they rank web pages.
Social signals are still not as important as other ranking factors such as a site’s link profile and content, but they will undoubtedly be an essential ranking factor in the future.
In order to maximize the visibility of our content we need to control how it looks as a social snippet. A good social snippet has the potential to attract a lot of extra visitors to our websites. Let’s see how we can create one of these.
Social Snippets?
A social snippet is a preview of a page that is used when you share that page on social media. Instead of a simple link, users get additional information about the content behind the link.
For example, if we want to share the article about pagination from Webdesigntuts+ on Facebook, we see the following social snippet:
A social snippet on Google+ will look roughly the same:
So instead of a basic link, users see much more information about the page. We can see a preview image, the title and even a short description. This makes it easier for us to decide whether or not the link is worth clicking.
These social snippets are generated automatically. The person who shares the webpage has no control over the image, title and description that’s being used. These can only be changed by the webmaster himself (we’ll learn how to do this later in the article).
Why Social Snippets Are Important
The social snippet of a page is something a lot of webmasters forget, potentially causing display problems on social media. If the social snippet markup isn’t present, a social snippet will often be displayed incorrectly.
The goal of social snippets is to persuade people to click on them. The more people click on it, the more visitors the underlying page gets. That’s why you should treat them as a free advertisement. An equivalent advertisement should have an eye-catching photograph, a click-worthy title and an interesting description. A social snippet should have the same elements.
If one of these elements isn’t functioning properly, for example the wrong thumbnail is shown, it can ultimately cost you visitors and clients.
This is an example of a page which hasn’t implemented social snippets. I shared a page of ‘De Bakboetiek’, a store that specializes in baking equipment. They also have a webshop where they sell products such as this cake pop mold, but as you can see, this social snippet is not particularly useful…
Instead of showing a thumbnail of the cake mold and a short description, we can only see the logo and the wrong title. There isn’t even a description! How is this social snippet supposed to bring visitors from Facebook to their website?
The Open Graph Protocol
Social snippets are based on the Open Graph Protocol. It is used to turn a webpage into a rich object in the social graph. Thanks to this, social media such as Facebook, Google+ and Twitter can identify important elements of a page.
The OG Protocol is based on RDFa (remember RDFa from our structured data article?). We can implement it by using additional <meta> tags in the <head> of a page.
More information about the Open Graph Protocol can be found on ogp.me.
Creating a Social Snippet
Now it’s time to take control of our own social snippet. There are several elements that can be tweaked: the thumbnail, title, description, URL and content type.
Note: the following markup is used by Facebook and Google+. Twitter uses different meta tags, which we’ll discuss later.
Thumbnail
This is perhaps the most important element of a social snippet. It’s the part that most users will see first, so make sure you use a clear image for this.
I suggest using a square picture of at least 200 x 200 pixels. If the image is too small, it might not be displayed or another image of the page might be used instead (in some cases the image of an ad…).
We can specify the location of the thumbnail with this markup:
<meta property="og:image" content="http://www.website.com/thumbnail.jpg" />
Title
This is the title of your social snippet. It is the second most important element, next to the thumbnail. Your title should persuade the user to click on it. It also acts as an anchor text for the link to the page.
The code for the title looks like this:
<meta property="og:title" content="Article Title." />
Description
Write a short summary of the page that can be used as a description. I often use my meta-description text for a social snippet, but you can choose whatever you like. Just make sure it tickles the reader’s curiosity and makes him or her click on the link.
<meta property="og:description" content="Article Description." />
Content Type
If you want to specify the content on the page you can use the og:type tag. If this tag is omitted, the page will be categorised as ‘website’. Other content types that can be used are music, video, article, book and profile. More info can be found on the built-in objects page on Facebook.
<meta property="og:type" content="article" />
URL
This is the URL the user will be sent to when he clicks on the title. Add the canonical URL to this tag:
<meta property="og:url" content="http://www.website.com/article-title" />
If you want to track traffic coming from social media, you can add tracking parameters which allow information to show up in Google Analytics. Use the Google URL Builder for this.
You only need to add three parameters: Source, Medium and Campaign.
- Source: facebook
- Medium: social
- Campaign: a unique name/id
The final URL will look something like this: http://www.website.com/article-title?utm_source=facebook&utm_medium=social&utm_campaign=article-name
Twitter Cards
Twitter uses a different markup to create Twitter Cards. Twitter cards allow you to attach media to tweets that link to your content.
Three types of media can be used:
- summary: similar to a social snippet on Facebook and Google+
- photo: a photo card
- player: a media player card
Let’s discuss each Twitter Card individually:
Summary
The Summary Card is a Twitter Card that resembles the social snippets we see on Facebook and Google+. It can be used for various content types (blog posts, articles, products…). A Summary Card can look like this:
<meta name="twitter:card" content="summary"/> <meta name="twitter:url" content="http://www.website.com/article-name"/> <meta name="twitter:title" content="Title of the Article"/> <meta name="twitter:description" content="A short summary of the article."/> <meta name="twitter:image" content="http://www.website.com/thumbnail.jpg"/> <meta name=”twitter:creator” value=”@username” />
First of all we need to identify the type of Twitter card via the twitter:card tag (in this case a summary). The URL should be the canonical URL of the page. The twitter:title tag should be no longer than 70 characters. The description on the other hand is limited to 200 characters. The image is used as a thumbnail and should be square. Images smaller than 60 x 60px will not be displayed. Finally, the creator tag can be used to give credit to the author.
Photo
There are several elements of a Photo Card that are also used in the Summary Card. The major difference between the two is the styling of the tweet. The photo card puts the image front and center in the tweet.
Twitter uses the twitter:image URL for the photo. If this image is smaller than 280 x 150px, it will not be displayed. You can specify a width and height of the image to help Twitter preserve the aspect ratio of the image when resizing.
A photo card might look like this:
<meta name="twitter:card" content="photo"/> <meta name="twitter:title" content="My Dog"/> <meta name="twitter:description" content="A great picture of my Dog, Sir Barksalot."/> <meta name=”twitter:creator” value=”@username” /> <meta name="twitter:image" content="http://www.website.com/my-dog.jpg"/> <meta name="twitter:image:width" content="800"> <meta name="twitter:image:height" content="600">
The twitter:card and twitter:image tag are required, all the rest is optional.
Player
The Player Card is used for audio and video. The media file is embedded in the tweet via an iframe. The downside of a Player Card is that it must be approved by Twitter!
If you want use a Player Card for approval, add the following code to your page:
<meta name="twitter:card" content="player"> <meta name="twitter:url" content="http://www.website.com/video-page"> <meta name="twitter:title" content="My Video"> <meta name="twitter:description" content="This is my new video."> <meta name="twitter:image" content="http://www.website.com/thumbnail.jpg"> <meta name="twitter:player" content="https://www.website.com/embed/a"> <meta name="twitter:player:width" content="435"> <meta name="twitter:player:height" content="251">
The twitter:card tag is used to identify the Player Card. URL, Title, Image and Description are similar to other player cards. The twitter:player tag contains a HTTPS link to the iframe player. You can specify the width and height of the iframe via the twitter:player:width and twitter:player:height tags.
A couple of other requirements for player cards:
- Use a HTTPS URL (the video must be served via HTTPS too)
- Stop or pause controls are mandatory
- No automatic playback is allowed
- The content must not require you to sign in
Twitter Cards and the Open Graph
Twitter first looks for twitter:card tags on your website, but if it can’t find any it falls back to the Open Graph markup. This means that you don’t need to create duplicate tags. You can simply supplement your existing Open Graph tags with twitter-card tags.
Twitter sees the following tags as similar (twitter markup on the left, OG on the right)
- twitter:ul = og:url
- twitter:description = og:description
- twitter:title = og:title
- twitter:image = og:image
- twitter:image:width = og:image:width
- twitter:image:height = og.image.height
Conclusion
Search engines are spending more and more time on social signals because they are a great indicator for quality content. In order to improve the chance that someone clicks on a social snippet, we need to take control of its content. We can do this via the Open Graph protocol for Facebook and Google+. For Twitter we need to supplement these Open Graph tags with Twitter-specific code.
Useful Resources
To help you with the implementation of social snippets, I have collected several tools that might be useful:
- Google+ Snippet Creator: Use this tool to generate a HTML code for a social snippet. Simply paste the code in the head section of your page and you’re done.
- Facebook Debugger: check the open graph information that was scraped from your page.
- Rich Snippet Testing Tool: can be used to check the information of your social snippet.