Unifying the appearance of your brand outside of your website can increase brand awareness, engagements with your site content and traffic to landing pages. By adding a few lines of HTML Markup to your website, you can control the way your web pages look when they are shared on social media or appear in search results. Without this markup, you are leaving the presentation of your web pages in the hands of social networks and search engines.

The main social networks provide tags to add markup to your website that indicate your preferences regarding the presentation of your content. Below is an example from Twitter comparing the same tweet, without and then with markup. The marked-up tweet provides a large image, a description and a second link to our blogpost, making it much more likely to generate engagements.

The following sections discuss how to effectively implement markup for Twitter, Facebook, LinkedIn, Google+ and Search Engines.

Add Twitter Cards Markup to Control the Image and Snippet on Twitter

Twitter Cards make it possible to show images, videos and informative snippets on tweets that link to your content or landing pages. Twitter has 4 Card types and we found the most common one to be the “Summary Card with Large Image”. This Card will allow you to provide a large image, a description and an additional link to your web page in your tweets.

Twitter Card Markup Example

Below you can see an example of how we implemented the Summary Card with Large Image on our blogpost titled The Role of Curation in B2B Content Marketing. You can see the original markup by following the link to the post and clicking F12 to open your browser’s HTML inspector. In the inspector, click Ctrl+f and search for “twitter:”. This will bring you to the first twitter tag in the head section of the page’s HTML markup.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@inboundli">
<meta name="twitter:creator" content="@inboundli">
<meta name="twitter:title" content="The Role of Curation in B2B Content Marketing [Infographic]
">
<meta name="twitter:description" content="Content curation is a powerful tactic to increase reach and engagements on social media. Learn the why, where, when and how of implementing curation." >
<meta name="twitter:image" content="https://inbound.li/media/uploads/blog/2015-08-18_b2b_curation_infographic/content_curation_in_b2b_marketing.png">

The next section explains what the name and content properties above mean and how to treat them.

Summary Card with Large Image Markup Reference

You can find Twitter’s original documentation here: https://dev.twitter.com/cards/types/summary-large-image

Twitter Card Markup Validation

The best way to check how your Card will appear on Twitter is by putting your web page URL into Twitter’s Card Validator tool. The tool displays the Card and lists errors if there are any. What you see in the Card Validator is what your followers will see when they click on “View summary” on a tweet containing a link to your website.

The result of implementing the Summary Card with Large Image Markup:

The other Card types are summary, player and app. You can read about each type on Twitter’s Cards documentation. Briefly explained, the Summary Card is similar to the example I used above, but includes a small thumbnail image instead of a large image and is equally easy to implement. The Player Card allows associating video and audio resources with your web page (this Card requires an approval from Twitter). Finally, the App Card is made especially for app developers and can be used to highlight important attributes such as pricing and reviews for your app.

You can track the performance of your Cards under the “Twitter Cards” module in Twitter Analytics.

Add Open Graph Markup to Control the Image and Snippet on Facebook, LinkedIn and Google+

To control how your content appears when it’s shared on Facebook, you would need to use the Open Graph tags to markup your website. Without this markup, Facebook will attempt a best guess to fill the title, description and preview image for your web page. The great thing about Open Graph is that it became a universally recognizable markup and will be understood and used by LinkedIn and Google+.

Open Graph Markup Example

The following example shows an implementation of the Open Graph Markup using the same article that I used in the example for Twitter Cards. To see the original markup search for “og:” in the element inspector.

<meta property="og:type" content="article">
<meta property="og:title" content="The Role of Curation in B2B Content Marketing [Infographic]">
<meta property="og:site_name" content="inboundli">
<meta property="og:url" content="https://inbound.li/blog/the-role-of-curation-in-b2b-content-marketing-infographic">
<meta property="og:image" content="https://inbound.li/media/uploads/blog/2015-08-18_b2b_curation_infographic/content_curation_in_b2b_marketing.png">
<meta property="og:description" content="Content curation is a powerful tactic to increase reach and engagements on social media. Learn the why, where, when and how of implementing curation.">

Open Graph Markup Reference

You can find Facebook’s original documentation with all available tags here: https://developers.facebook.com/docs/sharing/webmasters

Open Graph Markup Validation

To validate the appearance and information that will appear when your web page is shared on Facebook, you can use Facebook’s Open Graph Object Debugger. Just copy your article URL into the “Input URL” field and click on “Fetch new scrape information”.

The result of implementing Open Graph markup:

As mentioned in the beginning of this section, Open Graph markup is also used by LinkedIn and Google+. However, while LinkedIn abandoned its own markup in favor of Open Graph, Google+ still provides it’s own way of tagging content.

Add Structured Data Markup to Control the Image and Snippet on Google+ and Search Results

While Open Graph markup is recognized by Google, it may make sense to use Schema.org tags with Microdata markup (or use JSON-LD) on your website to control the appearance of your content on Google+. A good reason to do so is that it won’t only control the appearance of your web pages on social media, but also in search results. In addition, many SEO professionals claim that having structured data implemented on your website will result in better search rankings.

Structured Data Markup Example

The following example shows how an implementation of Microdata markup would look like on our article from the previous sections.

<head itemscope itemtype="http://schema.org/Article">
  <meta itemprop="headline" content="The Role of Curation in B2B Content Marketing [Infographic]"/>
  <meta itemprop="description" content="Content curation is a powerful tactic to increase reach and engagements on social media. Learn the why, where, when and how of implementing curation." />
  <meta itemprop="image" content="https://inbound.li/media/uploads/blog/2015-08-18_b2b_curation_infographic/content_curation_in_b2b_marketing.png"/>
  <meta itemprop="datePublished" content="2015-08-18T16:35:11+02:00"/>
</head>

However, Google provides a better way to implement the same tags by using JSON-LD code, which replaces the markup with a JSON object containing information about the article. Here is how we implemented Structured Data on our website:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Article",
  "headline": "The Role of Curation in B2B Content Marketing [Infographic]",
  "image": "https://inbound.li/media/uploads/blog/2015-08-18_b2b_curation_infographic/content_curation_in_b2b_marketing.png",
  "datePublished": "2015-08-18T16:35:11+02:00",
  "description": "Content curation is a powerful tactic to increase reach and engagements on social media. Learn the why, where, when and how of implementing curation."
}
</script>

Microdata Markup and JSON-LD Reference

Schema.org is a vast project and many of it’s items aren’t recognized by Google. The fastest way to find the right items is on Google’s developer website: https://developers.google.com/structured-data/rich-snippets/articles.

Structured Data Validation

To validate structured data on your website, you can use Google’s Structured Data Testing Tool. In the tool, paste your intended markup into the code box or click ”fetch URL” to verify that the markup is implemented correctly. Make sure to include the “http(s)” part and to put a final URL that won’t redirect anywhere else - As of this writing, the tool doesn’t resolve URLs and won’t find your web page if you don’t paste it correctly.

• Correct URL - https://inbound.li/blog
• Wrong URL - inbound.li/blog (no https before the url)
• Wrong URL - http://inbound.li/blog (not a final URL because http is redirected to https).

The result of implementing JSON-LD:

Structured Data can be confusing and if you need it for social media only, it makes sense to fall back on Open Graph tags to be used by Google+. However, I believe it’s well worth the extra effort to use Structured Data because of the search benefits: Search results will include helpful information and links which will help your web pages stand out and get more traffic.

Implementing the Markup in Your CMS

There are many plugins to add the markup in the main Content Management Systems e.g. Wordpress, Joomla, Drupal, Magento or Zen Cart. Most plugins are simple to implement and provide detailed documentation and intuitive interfaces to manage the markup. I summarized the most straightforward (and free) plugins for Wordpress:

Twitter Cards Markup

• Jetpack Plugin
• JM Twitter Cards Plugin
• Yoast SEO Plugin (only summary cards)

Open Graph Markup

• Facebook Plugin (Facebook’s official plugin)
• Yoast SEO Plugin
• SEO Ultimate Plugin

Structured Data Markup

• Schema.org Rich Snippets (Schema.org's official plugin)
• SEO Ultimate Plugin
• Yoast SEO Plugin (available in the near future)

A quick Google search will return many more plugins for all the main CMS out there. We implemented the markup with Python’s Mezzanine CMS using the Django template language.

Summary

Creating a website, optimizing landing pages and creating engaging content requires a significant investment of resources. To make your online assets stand out from the crowd on social media and search results, you can add a few lines of markup to your website. Implementing the markup tags mentioned in the article will unify your brand’s online footprint and give people more reasons to click-through to your web pages and share your content with their networks.

I hope this article is helpful and sheds light on how to control the appearance of your web content. If you have any suggestions or questions, feel free to write to me on Twitter: @GeneSobolev