Control How Your Website's Content Looks in Social Media and Search Results

Control How Your Website's Content Looks in Social Media and Search Results

Unifying the appearance of your brand outside of your website is important for increasing brand awareness, engagements with your site's 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 a markup that you can put on your website to indicate how the networks should display 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.

Twitter post without Cards tags

Twitter post with Cards tags

The following sections discuss how to add markup on Twitter, Facebook, LinkedIn, Google+ and on 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. As of this writing, Twitter has four 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

Property Description
twitter:card (required) Set to a value of “summary_large_image”
twitter:site (required) The Twitter handle the card will be attributed to
twitter:title (required) The content title, truncated at 70 characters
twitter:description (required) The description of the content, truncated at 200 characters
twitter:image (optional) A URL to the image you would like to appear when the article is shared

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 look 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:

A Twitter post with Cards Tags Implemented

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 "Summary Card with Large Image" except for the fact that it uses a small thumbnail image instead of a large image. 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 will 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 is understood 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

Property Description
og:title The title of the webpage.
og:description The description of the webpage.
og:url The canonical url of the webpage.
og:image URL to an image attached to the shared post.
og:type A string that indicates the type of the webpage and influences how your content appears in a news feed. The various content types can be viewed here: https://developers.facebook.com/docs/reference/opengraph#object-type. This tag defaults to “website”.
og:locale (optional) Provides information about site language. Defaults to en_US
fb:app_id The ID of your facebook app. Used in Domain Insights for tracking traffic and links to your site from Facebook.

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:

Facebook post with Open Graph tags implemented

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 this 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

Property Description
type (required) The content type. We used the Article type (http://schema.org/Article). You can be more specific and use NewsArticle or BlogPosting.
headline (required) The headline of the article
image (required) A URL to the image file
datePublished (required) The date and time the article was first published

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.

The result of implementing JSON-LD:

Google+ post with Structured Data implemented

Structured Data can be confusing and if you only need it for social media, it makes sense to let Google+ use Open Graph tags. However, I believe that using Structured Data is well worth the extra effort because 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 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

Open Graph Markup

Structured Data Markup

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. All you need to do to make your online assets stand out from the crowd on social media and search results is 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.