The web is a paradigm that is ever changing. Essentially, change is required to keep up with it. 2014 is here and the changes bought about by the use of social media, the way users search online and online conversion tracking are perhaps some of the key elements businesses & brands today want to monetize on.
If you website is not optimized for the way users search for you, or how they view your presence online on social media then you are failing and hence its essentials to change along with the shift in the web – asap!
A website has 2 faces;
- one which is visible to the user that looks at it
- the way everything else perceives your website’s content – specifically in context here is search engines and crawlers.
The part that is most relevant to your presence being found is the second point. Lets concentrate on the way content is included on your website that is actually not visible to your user. The most relevant meta tags that you must use are described here.
General must have meta tags
Lets get done with the obvious first. Here is the list of tag that simply, well… must exist.
The title tag
<title>This is the title of my page, yes it contributes to SEO. Make sure its 60 - 70 characters only</title> |
Nothing major to explain here except for the fact that you must have this on each page and it contributes to SEO. This is the content that appears in a search result page as the link to your page. Make sure its always something unique for each page of your website.
Note : Use Google Webmaster tools to analyze the use of meta tags which will also report how much duplicate meta content exists for your website.
The description tag
<meta name="description" content="Yep, this also contributes to SEO. Make sure its no longer than 155 characters"> |
This the second most relevant part of content that appears in search results. Use the content of this meta tag effectively with relevant keywords that relate to the content of your page.
The robots tag
<meta name=”robots” content=”noindex, nofollow” /> |
Use this only when required, this can be used to control what parts of your website should not be crawled – which kind of defeats the purpose of this post!
The viewport tag
<meta name="viewport" content="width=device-width, user-scalable=no"> |
Is your website responsive? if yes – then make sure the viewport tag exists. If your website is NOT RESPONSIVE – then make sure this does not exist. Just because it is part of the HTML5 Boilerplate does not mean it needs to always be part of your code.
The canonical tag
<link rel="canonical" href="http://www.example.com/dresses/greendress.html"> |
Not essentially a meta tag, but it exists in the
of your website, so kinda makes sense to put in under the obvious. If the same content of your website is accessed via 2 URL’s – then make sure you tell search engines that. Read more about the Canonical tag.There are a whole bunch of other meta tags that you may want to consider too. A good read about other older meta tags is available on tuts+
Social Meta Tags
The rise of social media and the way content is shared today make it absolutely essential that your website’s content is well documented in your meta tags using the relevant tags of various sites. On a general level the most popular method used are the Open Graph protocol and Schema.org
Each social media network depends on one of the above, with certain exceptions ofcoz. So rather than describing what Facebook, Twitter, Linked or Google need separately – let me show you the use of these tags based around your content.
The basic layout for social media meta tags
This slimmed back version runs lean and fast. It contains a bare minimum of data for optimized sharing across Twitter, Facebook, Google+, Linkedin, Pinterest… etc
<!-- Place this data between the <head> tags of your website --> <title>Your Page Title. Maximum length 60-70 characters</title> <meta name="description" content="Your Page description. No longer than 155 characters." /> <!-- Twitter Card data --> <meta name="twitter:card" value="summary"> <!-- Open Graph data --> <meta property="og:title" content="Title visible on social media content"/> <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 text visible on social media" /> |
Wait, what is Twitter cards your ask? and what is this og:title?
Detailed description on Twitter cards can be found on the official dev.twitter.com website – its worth to note that there is a bit of a verification process that you must follow before getting this activated on your website.
Facebook open graph tags have been around since a while – but if you still need to know more about it, read about it on Facebook’s Developer website – also make sure you use the Facebook Debug Tool to see if your content appears correctly.
The standard layout for websites
The standard template represents a more robust implementation of social tags and is meant to work across all platforms. In addition to the basic layout above, included here is a full Twitter card summary and the ablity to link to Facebook Insights.
<!-- 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." /> <!-- Twitter Card data --> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@publisher_handle"> <meta name="twitter:title" content="Title visible on Twitter"> <meta name="twitter:description" content="Page description less than 200 characters"> <meta name="twitter:creator" content="@author_handle"> <-- Twitter Summary card images must be at least 200x200px --> <meta name="twitter:image" content="http://www.example.com/image.jpg"> <!-- Open Graph data --> <meta property="og:title" content="Title visible on social media content" /> <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 text visible on social media" /> <meta property="og:site_name" content="Site Name, i.e. Conceptualize" /> <meta property="fb:admins" content="Facebook numeric ID" /> |
It’s worth to note here that the use of the <title> and the <meta name=”description”> tag still contributes to social media as the fall back when the Open Graph is not supported.
The complete layout.
This is the beast! the complete solution and the most relevant of all social media content sharing. In addition to all the data contained in the standard layout, this layout contains the Google Authorship tag, Schema.org tags and additional open graph tags.
<!-- 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 visible on social media."> <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 visible on Twitter"> <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.jpg"> <!-- Open Graph data --> <meta property="og:title" content="Title for social media goes 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 for social media goes here" /> <meta property="og:site_name" content="Site Name, i.e. Moiz Sitabkhan" /> <meta property="article:published_time" content="2014-03-17T05:59:00+01:00" /> <meta property="article:modified_time" content="2014-03-20T19: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" /> |
Few things to note here;
- the Twitter card now contains a bigger image.
- a modification is made to the <html> to define the scope of scheme.org
- Schema.org does not have to be part of the – your can define the scope within your <body> too.
