Metatags provide extra data which get used by search engines, social networks, etc, to present information on their sites as you want it presented.
Metadata is an example of the semantic web, meaning that webpages have more than just raw HTML, but some data tucked inside the <head> tag which is used by software to give more data about our pages.
I am most familiar with implementation for Blogger and Drupal, so I'll focus on that. However, because of Blogger's deficiencies, this will also be a good tutorial for implementing metatags on any HTML page.
Drupal quick start
The impatient Drupaler should use either the
Nodewords (D6) or Metatag (D7) module. Unfortunately neither support everything and maybe your specific needs are a bit different, meaning you'll have to implement your own module or perhaps do it in the theme.
Blogger
You'll have to dig into the template and add some custom code. Unfortunately Blogger's documentation for their template system is weak. That is, editing the template is a fairly straightforward task, but knowing what code to put into the template is weakly documented.
To edit the template simply navigate to the Blogger dashboard for your blog, click on the Template tab, then click the "Edit HTML" button. You'll end up in a programmer-friendly HTML editor.
Add this to the HTML tag: xmlns:og='http://ogp.me/ns#' It will look something like
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Then navigate down to just above the </head> tag and insert this:
<!-- Begin Open Graph metadata -->
<meta expr:content='"en_US"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<!--
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' property='og:image'/>
<b:else/>
<meta content='http://audio.davidherron.com/Prius%20C/prius_c_003.jpg' property='og:image'/>
</b:if>
-->
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL FOR DEFAULT IMAGE' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' property='description'/>
<b:else/>
<!-- Still looking for a way to use the post snippet if there's no description -->
</b:if>
<!-- End Open Graph metadata -->
<!-- Twitter cards -->
<b:if cond='data:blog.pageType == "item"'>
<meta content='summary' name='twitter:card'/>
<meta content='@7genblogger' name='twitter:site'/>
<meta content='@7genblogger' name='twitter:creator'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
</b:if>
<!-- end twitter cards -->
These rely on Blogger data objects but which are poorly documented. See
Layouts Data Tags and Widget Tags for Layouts and
Page Elements Tags for Layouts for Google's lame attempt at documentation.
The
Open Graph Object Debugger is very helpful in debugging.
A problem with the above code is that Facebook wants the og:image to refer to an image that's at least 200x200 pixels in size. BUT, the image Blogger gnerates with the above code is a 72x72 pixel thumbnail. Facebook refuses to use such a small image, and starts hunting around for a replacement image. And we know from experience that Facebook usually selects the wrong image.
Some useful links
http://www.simplebloggertutorials.com/2011/07/add-open-graph-protocol-meta-tags-to.html
http://www.bloggerhow.com/2012/07/implement-open-graph-in-blogger-blogs.html
http://www.bloggerhow.com/2012/07/implement-twitter-cards-blogger-blogspot.html
How to install Facebook's Open Graph tags into Blogger -
http://www.quicksprout.com/2013/03/25/social-media-meta-tags-how-to-use-open-graph-and-cards/
Facebook Open Graph Meta Tags For Blogger -
http://www.bwidgets.com/2013/03/facebook-open-graph-meta-tags-for.html
How To Add Twitter Cards To Blogger Appropriately? -
http://www.thewildblogger.com/2013/11/enable-twitter-cards-to-blogger-correctly.html
How to Add Facebook Open Graph Metatags in Blogspot Blog? -
Unfortunately, the URL given by Blogger in the above snippet results in a 72 pixel image, and Facebook now rejects that image size as being too small. Facebook et al wants larger images to give better pictorial experience in the news stream. In any case this workaround was developed (see
https://groups.google.com/forum/#!topic/bloggerdev/lYFWDJ2JmUQ). Install this PHP script on a web server somewhere,
<?php
$url = $_GET['url'];
$target = str_replace("s72-c","",$url);
header("Location: {$target}");
?>
Then change the meta tags shown above to use this:
<meta expr:content='http://domain.com/script-name.php?data:blog.postImageThumbnailUrl' property='og:image'/>
http://www.blogxpertise.com/2014/01/Twitter-summary-card-for-blogger-blog.html
http://www.blogxpertise.com/2013/09/validating-for-rich-pins-for-pinterest.html
http://blogger2ools.mystady.com/
More to do with Drupal
D6
Adding Open Graph Meta Tags Instructions for D6 nodewords 6.x-1.11 that covers adding a patch to support OpenGraph meta tags.
D6
Integrated Metatags Nodewords
Auto Open Graph
Generic metatags
From:
moz.com/blog/meta-data-templates-123
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<!-- Google Authorship and Publisher Markup -->
<link rel="author" href="https://plus.google.com/[Google+_Profile]/posts"/>
<link rel="publisher" href=”https://plus.google.com/[Google+_Page_Profile]"/>
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.html">
<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<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" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />
