Social Meta Tags: The New Optimization

Robert Kohser - October 7, 2014

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 Cards

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:

• The Summary Card – The default card that includes a title, description and image thumbnail.
• Summary Card with Large Image
• Photo Card – A card with an image only.
• Gallery Card – A card highlighting a collection of photos.
• Player Card – A card that includes a video player, so your content can play right in the user’s Twitter stream.
• App Card – A card designed for promoting a mobile app with a direct download feature.
• Product Card – A card that displays product information including price (pictured above).
• Lead Generation Card – A card that displays a lead generation form.

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.

Rich Pins

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:

• Place Pins – Pins that include a map, address and phone number – think of the local search possibilities!
• Article Pins – Pins that enable your written web content, such as blog content, to display beautifully.
• Product Pins – Pins that dynamically pull up-to-date product information such as prices and product ratings.
• Recipe Pins – Pins that include recipe information.
• Movie Pins – Pins that include film information such as the official movie posters, reviews, and availability.

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

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:

• og:title (the title you want displayed; Facebook requires that there be NO BRANDING in this tag)
• og:type (the tag that describes what type of content is on your page)
• og:image (an image URL for your content; Facebook suggests using images that are 1200×630 pixels)
• og:url (the canonical URL of your content that will be used as its permanent ID in the graph)

For example:

<html lon_url” content=http://www.example.com/a-catchy-title/” />
<meta property=”og:image” content=http://www.example.com/images/open-graph-pic.jpg/>
</head>

Once you’ve added this content, you can check your work using Facebook’s Open Graph Debugger Tool.

Google+ Web Snippets

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:

• Articles
• Blog Posts
• Books
• Events
• Local Businesses
• Organizations
• Persons
• Products
• Reviews

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.

Our Advice: Making Effective Use of Social Meta Tags

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.