A simple guide to understand HTML Meta tag
Meta tags are used for the metadata of the webpage. These tags are inside in the head tag and don’t really have any visual impact but are crucial for search engine optimization (SEO). These tags are read by web crawlers or browsers.
When building a webpage, we have numerous metadata options available for defining the information about the webpage. In addition to essential information such as the page title, page description, and charset definition, the <head> can provide comprehensive information for browsers. Such a list includes defining relevant keywords that are associated with the webpage’s content, author and copyright information, description of the webpage, instructions for web crawlers, etc.
The general syntax for meta elements is:
<meta name=" " content=" "/>
Where the name attribute specifies the name for the metadata and content is the value associated with the meta name.
Now let’s look at some <meta> elements.
Description
The description is one of the most important HTML meta tags for search engine optimization. It is also known as the meta description. It is used to provide a brief summary of a webpage. According to Google’s guidelines description should be unique and each webpage should contain meta description with precise information about that webpage. This meta description is very important for the user to understand the content of the webpage because it is displayed in the search results. However, it is important to remember that the description has a limit of 160 characters (including spaces). Any text after this point is cut off and an incomplete description will appear in the search results. And nobody likes incomplete description and may cost one to just click away.
This is how it looks like:
<meta name="description" content="I can tell you everything about this webpage under 160 characters"/>
When you search using a search engine, the description is displayed like the following:
Author and Copyright
Author and copyright met tags are used to record information such as the creator of the website and the copyright ownership information. In some content management systems (CMS), the author tag is automatically inserted and always gives the name of the last person who edited the page. This would help the administrators to check who edited which page.
This is how it looks:
<meta name="author" content="Name of the author" /><meta name="copyright" content="Copyright information" />
Character encoding
Web browsers understand need the character encoding information to display a webpage correctly. To define the character encoding we use charset attribute and assign it with an appropriate value. The most common character encoding used is the UTF-8. We use UTF-8 because it has more than 10,000 characters. The other possible values for charset are: ASCII, ANSI, ISO-8859–1, Windows-1252 etc.
This is how it looks
<meta charset="UTF-8">
Viewport
Viewport meta tag is necessary because it instructs web browsers (mainly mobile web browsers) on how to render a webpage on all devices. The viewport meta tag has 2 more properties: content and initial-scale. Google recommends setting the content to width=device-width, initial-scale=1 every time because it will make sure that the webpage content (mainly text) is rendered correctly i.e. optimized for reading on a small screen.
Here’s how it looks:
<meta name="viewport" content="width=device-width, initial-scale=1">
Robots
Robots meta tag is used to provide index information to search engine crawlers. The following meta tags are used to determine whether a page is available for a web search and if it is added to a search engine index. This tag is one of the most relevant meta tags for SEO.
Index:
This allows the web crawlers to index your webpage.
<meta name="robots" content="follow"/>
The value follow also makes sure that any outgoing hyperlinks are also crawled.
Noindex
It is the opposite of Index. It tells web crawlers not to index your webpage.
<meta name="robots" content="noindex"/>
Nofollow
It prevents web crawlers from indexing outgoing hyperlinks on your web page.
<meta name="robots" content="nofollow"/>
Http equivalents
http-equivalents attribute is used to include information that is usually contained in HTTP header. It is used to control cache information, expiration date, refresh page redirection and much more.
Cache control
When we use the meta tag “cache-control” with the value “no-cache”, we prevent caching of the webpage and that means the webpage is reloaded for every page view. This may lead to longer loading times but is helpful in cases where webpage is being updated frequently.
<meta http-equiv="cache-control" content="no-cache"/>
Expires
We can set expiry date for the webpage data instead of preventing caching completely.
When the reach the expiry date for the webpage cache, a web browser will load the corresponding HTML document from the source address. We can set expiry using either seconds or a timestamp:
<meta http-equiv="expires" content="4500"/>
The above webpage expires in 4500seconds => 75 mins => 1 hour 15 mins.
<meta http-equiv="expires" content="Thu, 06 Aug 2020 20:13:13 GMT"/>
The above web page expires on 6 August 2020 at 20:13:13. The GMT time is defined according to 24-hour clock as HH/MM/SS.
Refresh
Instead of using complicated ways of redirecting web pages using JavaScript or other programming languages. HTML provides a much more succinct and simple solution. To redirect a webpage, we need three attributes set to:
<meta http-equiv="refresh" content="time(seconds); url=http://www.your-website.com/"/>
Here, the value of the content is set to the waiting time for the redirection in seconds and the url is set to the webpage you want to redirect to.
Keywords
We can search using keywords in a search engine. Searching using keywords will show the internet user web webpages with keywords corresponding to their search. Preference is given to those webpages that contain appropriate search terms in keywords meta tag. In the early days, keywords meta tag used to be most crucial part of SEO and a central feature for search result ranking. But because this tag could be manipulated easily, it is now left out of Google’s ranking factors. Even though the keywords meta tag doesn’t have a positive impact on webpage’s ranking it may still have a negative impact if we overuse them. So as a good practice should include keywords meta tag with a limited set of appropriate keywords.
This is how it looks:
<meta name="keywords" content="keyword #1, keyword #2, keyword #3"/>
Wrap-Up
There are so many more meta tags. You might run into some HTML documents that use legacy meta tags that are no longer required today. What this is an exhaustive list of the meta tags that are relevant and an understanding of them is a must for every web developer.