Meta tags form an integral part of search engine optimisation. If you are new to content development they can seem a bit intimidating at first. In general, metadata is simply information about data and there are lots of them available to us. These tags can be identified by inclusion of the word “meta” in the description. They are inserted in the <head> section of your page.
It’s worth mentioning that whenever you are adding metadata you can include keywords but you should avoid keyword stuffing. Old search engine optimisation tricks liked packing in as many keywords as possible. But search engines have become wise to this, and these techniques don’t work now and can even lead to your content being penalised (think spam). Instead, use keywords sparingly and focus more on natural, human-readable descriptions where applicable.
If you’re using a Content Management System (CMS) you may not have access to meta tags directly because your pages are often created on-the-fly by the platform. In that case you’ll need to explore the settings for your site to see how you can add the relevant meta information.
1. CHARACTER SET Tag
One of the ways the internet has evolved is to acknowledge speakers of other languages. HTML5 allows you to easily specify other character sets which include characters, symbols, and accents not used in English. For English sites you’ll just include the charset tag as shown below:
2. Page DESCRIPTION Tag
Search engine algorithms no longer need you to explicitly tell them what the page is about; they use artificial intelligence to determine that on their own. Instead, write your page description in natural language, including any relevant keywords. It should be a paragraph or so in length (3-4 sentences). Although not needed by the search engine algorithms, sometimes the description is presented as a snippet in search results to help the user.
<meta name=”description” content=”paragraph description here”>
3. AUTHOR Tag
The author tag can be useful. For example, if you have lots of developers working on different pages of your site and you want to do an update you might want to know who the original author was. It also saves you from including “page maintained by” text in the actual content to be rendered.
<meta name=”author” content=”Bob Smith”>
4. VIEWPORT Tag
With the rise in importance of mobile devices, the size of the screen and scaling has become important. We can use Bootstrap to help with responsive content but we should still include a viewport tag in the <head> similar to the following:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
5. ROBOTS Tag
Although it’s common to use a robots.txt file to instruct search bots on what they can and cannot do on a site-wide basis, it can also be done at the document level by using a robots meta tag. It is common to explicitly state “no indexing” and “no following” but there are many other options available.
<meta name=”robots” content=”noindex, nofollow”>
6. Depreciated Tags
We’ve listed the most common ones above but it is important to note that many have been depreciated (or aren’t used very often) thanks to better alternatives introduced in the HTML5 standard. You can read more about them in Mozilla’s Document-level Metadata element article.
Notable ones that are not used now include the KEYWORDS tag, COPYRIGHT tag and tags that try to instruct search bots on how often they should check for updates.
7. Other Important Elements
Although the focus of this article has been on the meta tag, it’s worth mentioning a few other important elements that include metadata. The ones you need to be aware of include:
- the <title> element which allows you to specify the name of the page
- specifying a canonical link whenever duplicate content exists or you have several URLs pointing to the same content:
<link rel=”canonical” href=”https://smithsshoes.com/products/outdoors” />
- alt text decriptions for images, since this is displayed if the image can’t be loaded or the user is visually impaired:
<img src=”logo.jpg” alt=”Smith’s Shoes logo”>