Social Media Meta Tags in HTML and Drupal

Using Social Media Meta Tags in your website is a must. Meta tags are added to the HTML of your web pages and optimize sharing your content on Twitter, Facebook, Google+ and Pinerest Meta-tags do this defining how titles, descriptions, images, etc appear in social media streams when posted.

Its as simple as this, if you post a URL without meta-tags you may get little or nothing displayed on Google, Facebook or Twitter, or it may display something you do not want. With meta tags you control how your website and pages appear across social media and search.

This is the basic description meta tag, placed between the <head> tags of your website HTML.

<meta name="description" content="Page description. Less than 155 characters." />

Basic template to use in HTML:

<!-- Place tags between the <head> tags of your website -->
<meta name="description" content="Description. Less than 155 characters." />

<!-- Google: markup  -->
<meta itemprop="name" content="Title">
<meta itemprop="description" content="Description">
<!-- MIN 160x90 px, MAX 920x1080 px -->
<meta itemprop="image" content="">

<!-- Twitter: Card meta data -->
<!-- either a "summary" card or "summary_large_image" w/ dependant image tags below -->
<meta name="twitter:card" content="summary">
<!-- <meta name="twitter:card" content="summary_large_image"> -->
<meta name="twitter:site" content="@publisher_twitter_handle">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Description. Less than 200 characters">
<meta name="twitter:creator" content="@author_twitter_handle">
<!-- Twitter Summary card image: MIN 120x120 px -->
<meta name="twitter:image" content="">
<!-- Twitter summary card w/ large image: MIN 280x150 px -->
<!-- <meta name="twitter:image:src" content=""> -->

<!-- FB: Open Graph data -->
<meta property="og:title" content="Title" />
<meta property="og:type" content="article" />
<meta property="og:url" content="" />
<!-- MIN 200x200 px, FB recommends 1200x630 px wide -->
<meta property="og:image" content="" />
<meta property="og:description" content="Description" />
<meta property="og:site_name" content="Site Name, eg. my-webite" />
<!-- less critical FB tags -->
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<!-- your Facebook id#, gives you access post analytics -->
<meta property="fb:admins" content="Facebook numberic ID" />

Testing Tools:

Social media info:

Drupal Metatag module

The Drupal Metatag module allows you to configure and automatically provide structured metadata, aka "meta tags" about Drupal website content. The module provides support for meta tags (Open Graph Protocol from Facebook, Twitter Cards from Twitter) that allow control of how content appears when shared via social networks.

  • Enable the metatag, metatag_facebook , metatag_google_plus, metatag_opengraph and metatag_twitter_cards modules.
  • Configure: /admin/config/search/metatags

You can configure meta-tag defaults, per content type and per node.