The Gold standard for the list of Meta Tags and Markup for your website


Published on: 20 Mar 2017
8 min read

Introduction(skip this section if you know what meta tags are and why we use them): If you ever cared to see the source of a web page, (it’s quite simple if you haven’t before, just do Ctrl + U) you see a host of meta tags and html markup that is used. While they are used by many engines, search engines happen to be the primary consumers (at least that’s the intention) of these meta tags and html markup. Examples include the Title, Meta Description, H1 etc. To know what these are you must first understand that Search Engines are bots, as in computing programs written to crawl the web and rank websites, and they can’t read websites the way humans do. So they need to be fed with additional markup and meta information for them to better understand our web page. A web page that is well understood ranks better.

Ever since SEO as a practice existed, careful use of meta tags and other html markup has been an important part of the SEO mix. Over time, search engines have gotten smarter, SEO practice itself emerged and people no longer look at them in the same way. When you look around, there isn’t enough written on what is the gold standard on meta tags and html markup that is both reliable and recent enough for you to take it seriously and apply it to your website. When we wanted to launch our own website recently, we had to struggle through numerous resources to make sense of this landscape. I wouldn’t dare say we understood it to perfection, but we made a start and we wanted to share what we learned in the process with everyone. This post is something that I wanted badly when I started. Hope it is of use to you.

Here is a long list of almost all the meta tags and markup that is of relevance today, we use them by the way. Each tag is explained as to why it matters.

Meta Tags

<meta charset="utf-8">

Also known as Unicode, UTF-8 is a character encoding similar to ASCII and is capable of displaying all languages. In essence you are telling the browser that your website uses an encoding that it can understand without worrying about which language is used. Supported by Chrome, Internet Explorer, Firefox, Safari and Opera browsers.

<metahttp-equiv="x-ua-compatible" content ="ie=edge">

Use this only if you think some of your visitors could be using an old version of Internet Explorer. This simply tells the browser (a version of IE in this case) as to what is the highest version of IE that your page is designed for.

<meta name="viewport" content=width=device-width, initial-scale=1, shrink-to-fit=no">

Back in the day when websites weren’t built for mobile first, a number of elements had to be tweaked to make the webpage look good on a mobile screen. The viewport is a mobile version of a “window” that needs to be told what width works for your webpage. If your website isn’t mobile responsive, don’t use this tag as it would make things worse.

<meta http-equiv= "Content-Security-Policy" content="default-src 'self'">

Security attacks are part of a website’s life. Most common are the script based attacks that inject a malicious piece of javascript into your website as it loads on a client and do all bad things. To prevent this type of attacks you may tell the browser to trust only scripts loaded from your website, for example. Any other script will result in the browser throwing an error and protect your visitor.

<title>Build businesses, not websites. Unless that is your business<title>

Enter SEO, and you know why Title tag matters. The Title tag tells search bots what your webpage is about. In fact it is the Title tag that people see in big bold blue font when your page shows up in search results (at least on Google). It has to be descriptive enough to entice a click from the searcher as well as be concise enough to show up completely. As of now the max length stands at 60 characters for Google. Make sure you have a unique Title for each page.

<meta name="description" content="How would you describe the feeling of freedom from having to build or update your website by yourself?">

If Title was the hero in your website story, consider this as the main supporting character. Everything I covered for the Title tag apply here too, but importantly the description tag, as the name suggests, allows you to be descriptive about your page’s content. As of now the max length stands at 160 characters for Google. Make sure you have a unique and clear description for each page.

<link rel="canonical" href="https://www.gurujada.com/blog/the-gold-standard-for-the-list-of-meta-tags-and-markup-for-your-website">

One of the basic advice dished out in SEO is to avoid duplicate content. But what do you do when you have to have duplicate content? Say you sell socks across the US and in each city the price is different. You end up having a page for each city that has all the content same as each other except for the price - the socks photos, titles, descriptions, etc. The Canonical tag saves you from being penalized by Search Engines. Simply use the tag and point the URL to the main product page so that Search Engines understand that your intent behind duplicating content isn’t to fool them or the visitor.

OG Tags

Did you notice what Facebook does when you share a link along with your post? I generates a good looking preview of the page your link points to. How does Facebook do that? It uses Open Graph - a protocol that allows you to communicate with Facebook as to what it should use to generate the preview - the Title, short description, the image and the link. Use the following tags you can supply these attributes to Facebook and whenever someone shares your page the preview gets generated using what you supplied.

Important: Facebook caches whatever content you write for a link so please double check before you post the link for the first time. You may use this nifty debugger from Facebook for troubleshooting any issues with Open Graph view of your page.

Caution: Facebook and LinkedIn cache this URL as the canonical link. So be sure to include the correct one in the first place. This is the URL of the page you are putting this tag on.

<meta property="og:title" content="The Gold standard for the list of Meta Tags and Markup for your website"/>

This can be the same as your Title tag. You may play with it if you wish to, no harm.

<meta property="og:description" content="Gurujada offers you a custom built website,hosted and maintained. So you don’t have to learn a tool or write code." />

Again, can be same as the Meta description, but feel free to experiment.

<meta property="og:site_name" content="Gurujada" />

A no brainer.

<meta property="og:image" content="https://www.gurujada.com/images/logo.png"/>

A word of caution here. You could use any image (preferably the cover image) for this tag but it makes sense to create a version of that image for

<meta property="og:type" content="article"/>

The type of content you are sharing - blog, video, etc.

Twitter Tags

Read this amazing guide from Sproutsocial for more details on Twitter cards.

<meta name="twitter:card" content="summary">

Based on what kind of card you want, choose a card from these options:

  • Summary Card
  • Summary Card With Large Image
  • App Card
  • Player Card
  • Lead Generation Card

<meta name="twitter:site" content="@gurujada">

Your twitter handle.

<meta name="twitter:title" content="The Gold standard for the list of Meta Tags and Markup for your website">

The title has a limit of 70 characters and anything beyond that is cut off.

<meta name="twitter:description" content="Gurujada offers you a custom built website,hosted and maintained. So you don’t have to learn a tool or write code.">

The description has a limit of 200 characters and anything beyond that is cut off.

<meta name="twitter:image" content="https://www.gurujada.com/images/gurujada.png">

Use a minimum size of 280 x 150 and keep the file size under 1 MB

There are a few more that you could explore by visiting Twitter’s developer reference.

Favicon

In case you haven’t heard the term, a favicon (pronounced as fave-icon) is the small logo you see in the title bar on top the browser. I know what you are thinking. What is a favicon doing here? Well, a favicon isn’t as unimportant as one may assume it to be. It is important for an odd reason, not necessarily an SEO specific one. When a bot scrapes your website and creates a profile for your business, it will more likely use your favicon as an alternative to your logo. So it pays to have one in the first place, and have it really stand out and communicate your brand.

I know there are a number of other meta tags and markup out there that gets used, but like I said in the beginning, the intent is to include only the most important ones.