Sure, you’ve optimized your website for search, but have you optimized it for social? When you include social meta tags in the code of your website, you tell the social networks precisely which content to pull from your website when generating a link preview. The result is content that is more attractive and useful for users. Applied correctly, social meta tags can help your content stand out on social networks like Facebook, Twitter, and Pinterest – potentially luring users out of the stream and onto your website.
You’ve likely seen meta tags in action. In this post, we’ll discuss the types of meta tags available on each of the social networks, and how you can add them.
Twitter has one of the most diverse and sophisticated social meta tag systems of all the networks. Called Twitter Cards, Twitter’s meta tags enable you to include a variety of information in Tweets linked to your website, even product information. There are eight types of Twitter Cards, including:
Because you can include a single card per page, we recommend using the card that best represents the content on your various web pages. For example, you might use the Player Card on a page that includes a video, an App Card on a page that included an app download, or a Lead Generation Card on a page that includes a lead gen form.
To implement Twitter Cards on your website, you will need to add specific Twitter Card coding to your web page’s header.
For example: <meta name=”twitter:card” content=”summary” />
Once added, you can verify that you added your card correctly, and generate a preview for how the link will appear via the Twitter Cards Validator.
For more information, and to get code for specific Twitter Cards, visit Twitter’s Developer site.
Like Twitter Cards, Rich Pins enable Pinterest to pull page-specific information from your website and dynamically populate the pins made from your page. This makes your pinned content more appealing and user-friendly.
Rich Pins include:
For more about Rich Pins, read our original post.
To implement Rich Pins, you must apply for the pins by adding the code to your site, and then validate your pins. Learn more on Pinterest’s developer’s site.
Facebook’s Open Graph is the oldest example of social meta tags, and the system that Twitter Cards is based on. In fact, if you have Open Graph tags implemented on your website, you can easily implement Twitter Cards without a lot of additional work.
Facebook Open Graph enables you to tell Facebook precisely what content to display from your URL. For example, instead of simply displaying the default header image from your website, Open Graph enables you to display an alternate image. This is ideal when your website’s header image does not fit into the 175×175 square that Facebook previews it in. For example:
Facebook Open Graph also enables you to display location information, which is a “must do” for marketers looking to drive foot traffic.
One downside of Facebook Open Graph is that it is not as functional or user-friendly as Twitter and Pinterest meta tags are. It’s best to get a developer to help you properly implement Open Graph code to your website.
To implement Open Graph:
Your <head> should be updated to:
<head prefix=”og: http://ogp.me/ns#”>
Then, it will be necessary to add four tags to every page:
<html xmlns=http://www.w3.org/1999/xhtml” dir=”ltr” lang=”en-US”
<title>A Catchy Title Tag</title>
<meta properly=”og:title” content=”website” />
<meta property=og:url” content=http://www.example.com/a-catchy-title/” />
<meta property=”og:image” content=http://www.example.com/images/open-graph-pic.jpg/>
Once you’ve added this content, you can check your work using Facebook’s Open Graph Debugger Tool.
Because Google+’s social meta tag system is integrated with schema.org, if you’ve already included structured data on your website, your content should already be optimized for Google+.
If not, Google makes this relatively easy to do via their snippet generator tool. For example:
With their snippet validator tool, Google+ enables users to generate <head> or <body> code for a variety of pages / purposes, including:
The bad news is that this tool, like Facebook’s, was created more for developers than lay users. So while you can easily generate the code for adding this information to your website, it is not as easy to validate the result.
There’s a lot that can be done with social meta tags, and if you’re new to the concept, the opportunities here might seem overwhelming. Our advice is to engage a developer that you trust and implement the social meta tags that make the most sense for your content and your business.
For example, e-commerce websites can greatly benefit from implementing Product Cards / Pins and meta tag code onto their websites, thereby putting their products, prices and purchase information in users’ hands across the social networks. For these businesses, adding product social meta tags is a no-brainer.
For others, we recommend beginning with the social networks where you have the biggest natural audience, and greatest to gain from social content optimization.