Picture it. You’ve just discovered a very interesting link that you can’t wait to share with your friends. You log into Facebook, write a quick status update, and paste in your link… and you see something like this:
You notice that Facebook has detected a URL in your status update and has automatically displayed the site title in bold text, and the domain name below that. Hmmm… that’s not very helpful. Your friends are not likely to click on that link or to even notice it in their news feed. Of course, you can manually edit your status update to make it more enticing, but the question remains: why do some URLs automatically provide titles, descriptions, and images, while others do not? It turns out the answer is quite simple: metadata.
Metadata refers to data that describes other data. In this case, metadata within a web page describes the page itself. Tim Berners-Lee of the World Wide Web Consortium defines metadata as, “machine understandable information about web resources or other things.” The phrase machine understandable here is key. By marking up our web pages with metadata, we enable other machines or services to identify their attributes, resulting in an improved user experience. If the page you’re sharing has embedded metadata, social sites like Facebook will detect it and automatically pull in the information.
Metadata is typically embedded in web pages through the use of the HTML Meta tag, which has long been a standard part of the HTML language. In fact, meta tags were used by early search engines like Infoseek and Altavista back in 1996. Yet surprisingly, many new websites today lack essential meta tags. Perhaps this is because, unlike other HTML tags, the information contained in meta tags is not displayed on the page, so they can be easy to overlook.
To check the Meta tag content of your site, try using the free assessment tool at: http://www.seositecheckup.com
Commonly used meta tags capture the date the content was published, the copyright date and/or rights information, and a general description of the content, but there are also new types of meta tags established by social giants Facebook and Twitter that provide additional context to content in social applications.
Now that we understand meta tags, let’s go back to our Facebook status update example. If the link you were sharing included the appropriate metadata, that post to your friends might look more like this:
Ah… much better. Pasting this link into Facebook resulted in a nice description being pulled in automatically. This status update better describes the content that you’re sharing and is more likely to catch the eyes of people browsing the news feed.
Website publishers should be using meta tags to ensure their content is best represented on both search engines and social applications. While the Meta Description tag and an effective title tag can go a long way, there are a number of other tags that can be used to embed metadata – allowing you to further optimize how your content looks across the major social sites and services. This is key because making your content more shareable will result in, well, more shares. More shares means more inbound links to your site, which ultimately means better SEO and more traffic. I like to call this ‘shareability’ – the extent to which web content has been optimized for ease of sharing.
Increasing Shareability With Images
To further optimize the shareability of the link in our example, we would probably want an appropriate thumbnail image to be automatically included in the post. Studies show that social content posted with images results in increased engagement. Here are two examples of findings:
- A 2012 study showed that photos on Facebook Pages received 53% more Likes than the average post and that photo posts attracted 104% more comments than the average post. (Source: Hubspot)
- A 2013 study showed that Tweets with images vs. those with no images had a 36% increase in clicks and 41% increase in retweets (Source: Hubspot)
If your page has multiple images in it, social sites will guess which one should be displayed as the thumbnail image for the post. Facebook even provides clickable arrows to navigate through a selection of photos from the page content.
This is helpful, but in some cases, the thumbnail image that is automatically pulled in to the preview is not the one that is most relevant to the content, or not recognized by Facebook at all.
The Open Graph
So, how can website publishers ensure that social previews of their content are accompanied by appropriate thumbnail images? It’s all in The Open Graph, a protocol developed by Facebook. With the Open Graph, the shared link will not be interpreted as a web page, but as an “object” that can be represented in a variety of ways within Facebook.
If present in the shared page, Facebook will use Open Graph meta tags to generate the preview of our content. These tags allow us to customize how information is carried into Facebook when a page is "recommended", "liked", or just generally shared. To turn your web pages into graph objects, you need to use open graph protocol meta tags such as:
<meta property="og:title" content=""/>
<meta property="og:type" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
To ensure an appropriate preview image will appear with the shared content, we’ll leverage the Open Graph image tag (og:image). This tag allows us to define the primary image that should be associated with our content when it appears in social feeds. That might look like this:
<meta property="og:image" content="http://www.yourdomain.com/facebook_thumbnail.png"/>
Let’s revisit our link sharing example once again. If that page had an Open Graph image tag, the status update might then look more like this:
There we go! A proper preview has been automatically created and now I’m ready to share my awesome link.
Facebook recommends the use of Open Graph images that are at least 1200 x 630 pixels to generate great previews.
Although open graph tags were created for Facebook, they work with other social networks. Google+, LinkedIn, and Pinterest will also recognize open graph metadata. But how will this same URL look when you share it on Twitter?
In order to optimize the shareability of the content for Twitter, we’ll include another set of metadata to represent a Twitter Card, a separate set of meta tags. The Twitter Developer Center tells us “Twitter Cards make it possible for you to attach media experiences to Tweets that link to your content”. By ensuring your web content contains Twitter Card meta tags, users who Tweet links to your content will have a "card" added to the Tweet that’s visible to all of their followers. Twitter card meta tags are entered as follows:
<meta name="twitter:card" content="summary.">
<meta name="twitter:site" content="@profilename">
<meta name="twitter:title" content= "Title specifically for Twitter”>
<meta name="twitter:description" content="Description here">
<meta name="twitter:creator" content="eg:author name">
<meta name="twitter:image:src" content=http://www.yourdomain.com/twitter_thumbnail.png>
<meta name="twitter:domain" content="domain.com">
With the Twitter Card metadata in place, my shared link on Twitter will look like this:
There we have it. By using well-formed HTML with Title tags, Meta Descriptions, Open Graph tags, and Twitter Card tags, we made our social media content more shareable.
Remember, a CMS like Drupal or WordPress can make it easy to customize the metadata into your content but the out-of-the-box installations of these platforms don’t provide the ability to customize the all of the necessary metadata for each page. Talk to your technical team to ensure that your site leverages contributed modules (for Drupal) or plug-ins (for WordPress) that provide the appropriate metadata editing features. This way, you'll be able to easily customize the metadata for new content and tune it for the major social sites.