Using Meta Tags in HTML: Some Basics and Best Practices

Metadata is often referred to as ‘data about data’ and one of the ways it’s done on web pages is by means of the <meta> tag. The content of meta tags generally describes information about the HTML page which usually cannot be represented by any other HTML tags. In addition to that, the meta tag can also be used to emulate an HTTP response header (like redirection to a different page) and it has attributes like http-equiv and charset, the details of which have been described clearly on the Mozilla Developer Network.

Why are Meta Tags Important?

In the past, meta tags were used by search engines to index web pages based on title, description, and even keywords. In a perfect world, if everyone had used them fairly, it would have served as a boon. However, certain websites started overusing them, cramming popular keywords in the hope of getting better search results. Google, recognizing this, announced in 2009 that they don’t use meta keywords or descriptions in their search algorithms for ranking purposes.

Even though the description meta tags have no effect on search engine rank, they do appear in search results. This means that a person gets to read your description on a search results page before clicking on your link, showing that meta descriptions should be written for people to read rather than for robots to find. So while a good meta description will not improve your ranking, it will increase click-through rates to your website from search pages.

Another important thing to note is that not all search traffic is generated from Google, Bing, and Yahoo. Think of the others (like Baidu) that give weight to meta tags, accounting for millions of searches per day.

Usage for Different Meta Tags

Different meta tags are defined by changing the name attribute to a valid value.

The most commonly used meta tag is the one used for descriptions:

<meta name="description" 
      content="A general guide on the use of meta tags in html pages">

In cases of empty descriptions (or non-existent ones), search engines will generate a description from the content of the page.

You can also set the author of a page using meta tags.

<meta name="author" content="Shaumik Daityari">

The charset attribute is used to specify the character encoding of your content. An HTML page can have only a single charset. For most web pages, you should use the UTF-8 character encoding.

<meta charset="UTF-8">

More information on character encodings and choosing a character encoding can be found on W3C.

Substituting HTTP Headers

As mentioned, meta tags can be used to perform the task of HTTP headers like redirection and refresh.

<meta http-equiv="refresh" content="5;url=https://www.sitepoint.com/">

The value of the content attribute refers to the time interval in seconds before the refresh is performed. The URL might be kept the same or different depending on whether you want to refresh the page or redirect to a new one. You could also leave the url empty to refresh the current page.

Obsolete Usage

The meta tag usage has evolved over the years and there are certain popular practices from years ago that should not be followed today. For instance:

<!-- don't use this! -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

That’s the longer version of the character encoding that was common in XHTML. Shortening it to what we discussed above is sufficient.

Meta tags have also been used to indicate copyrights.

<!-- don't use this! -->
<meta name="copyright" content="SitePoint" />

This can be improved by instead providing a link tag pointing to a copyright page (or an anchor on the same page).

<link rel="copyright" href="copyright.html">

Finally, although many websites still use the keywords value of the name attribute, Google will not consider this in its search ranking algorithm or when displaying search results. In fact, Google has never considered keywords in its search algorithm.

<meta name="keywords" content="web,design,html,css,html5,development">

Google has said that it is extremely unlikely that this will change in the future, so you shouldn’t bother with the keywords meta tags.

But an important factor, as pointed out earlier, is the fact that Baidu’s Chinese-language search engine considers the keywords meta tag a major factor in its search algorithm. So if you expect that a significant part of your traffic is coming from Chinese-language users, then you should include the keywords meta tag — but always be careful not to use unnecessary and unethical keyword stuffing.

Having said all of this, it won’t hurt your ranking to use any of these obsolete methods, but they will often add unnecessary code to your page, so it’s best to just avoid them and use alternative methods.

Usage in Social Media (Open Graph, Twitter Cards, and Schema.org)

With the ever-increasing relevancy of social networks, meta tags have evolved. Facebook’s Open Graph allows you to specify how your content is displayed on a user’s timeline. These tags can enable you to check how your data was shared on Facebook using Insights.

<meta property="og:title" content="The best site">
<meta property="og:image" content="link_to_image">
<meta property="og:description" content="description goes here">

For further reading, I suggest you go through Facebook’s Open Graph documentation.

Similar to Open Graph, Twitter has Twitter cards (using name="twitter:title" or name="twitter:url") and Google+ uses Schema.org (using itemscope and itemprop).

Open Graph has become very popular, so most social networks default to Open Graph if no other meta tags are present. If Open Graph meta tags are absent as well, they assume default values for the absent meta tags.

Metadata Tools

Metadata tools don’t require a deep knowledge of HTML or other web technologies, so you still have a way out if you don’t want to get your hands dirty.

If you use WordPress, you have a lot of options for generating metadata while creating or editing a post, the most popular of which is WordPress SEO by Yoast. Joomla and Drupal also have a set of meta related plugins and modules. If you don’t use any of these, there’s always the option of using an online meta tag generator.

Conclusion

Meta tags will not solve all your SEO and accessibility problems, but they do play an important role in these areas. If you are the owner of a website, you can monitor your website performance by registering on Google Webmaster Tools. Once registered, you can get notified in case there are any crawl errors that might be related to incorrect use of meta tags.