As one of the important elements used in the head section of an HTML page, Meta-Tags could be more helpful for a website page in various ways. If you are not aware of what Meta-Tags are exactly then please read ‘What are Meta-Tags?’ for an introduction of Meta-Tags will help you to understand all types of Meta-Tags mentioned below.
Character Encoding Meta-Tag
This Meta-Tag is different from others because it uses only 1 attribute ‘charset’ & helpful in scenarios when the font is not defined in the HTTP header. This Meta-Tag makes sure that all special characters used in the HTML page are displayed correctly. This Meta-Tag also works when you open any HTML page in your browser locally. It is used as shown below:
<meta charset="utf-8"/>
Description Meta-Tag
The description, also known as the meta description, offers room for a brief summary of the page content. Since search engines present this meta tag as a snippet in the SERPs, careful editing is absolutely imperative for any content that’s displayed here. Due to its significant influence on web users’ click behavior, the description is one of the most important HTML meta tags for search engine optimization. However, it is important for website owners to remember to limit the description to 160 characters (including spaces). Any text after this point is cut off and an incomplete description will appear in the search results.
The meta description tag is aimed first and foremost at internet users and should therefore provide a succinct summary of the page content. Google’s guidelines also dictate that website operators should ascertain that each web page has a unique description with precise information about the page content. This attribute is of clear value to the user, who can ascertain at a glance whether the webpage is appropriate, and this has a positive impact on the click-through rate. The following shows an example of a meta description:
<meta name="description" content="HTML Meta-Tags are a cornerstone of coding. But which are the most essential? Will give you a rundown of all the meta tags you need to know."/>
Keywords Meta-Tag
Keyword Meta-Tags are used to define keywords related to the content of an HTML page. When any user searches on the internet with any keyword or phrase then web crawlers look for websites pages & compare their Keyword Meta-Tags content with the keyword or phrase the user is searching for, on the basis of which final results are shown to the end user. The page which has more appropriate Keyword Meta-Tag as per the search keyword, comes on top of search results.
Misuse of Keyword Meta-Tag in your HTML page can have a negative impact on your website ranking. That’s why it is recommended to be careful while selecting keywords for your page. Also avoid use of too many keywords and irrelevant keywords which are not related to your page content. You can use Keyword Meta-Tag as shown below:
<meta name="keywords" content="keyword 1, keyword 2, keyword 3"/>
Author and Copyright Meta-Tags
The “Author” and “Copyright” Meta-Tags are simply used to define who built that page & to mention the owner who has copyright for that page. Nowadays the ‘Author’ Meta-Tag is automatically added in some of the content management systems (CMS). As these 2 Meta-Tags are optional so you can use them as per your requirements & need as shown below:
<meta name="author" content="Author name" /> <meta name="copyright" content="Copyright owner" />
Robots Meta-Tags
Robots Meta-Tag is used to interact with web crawlers to instruct them about the index of our website page. Using this Meta-Tag you can define whether a page should be added to a search engine index or not & also whether it should be considered for web search scenarios or not. Another helpful feature of this Meta-Tag is that you can specify whether out-going links from your page should be followed or ignored by web crawlers. These abilities of this Meta-Tag make it an important part to be included in your website pages for better SEO compatibility of your website. Below mentioned are the options you can use for using Robots Meta-Tags:
Default behavior of an HTML page
<meta name="robots" content="follow"/>
In case, you want to exclude an HTML page to appear in the web search index results, then you must explicitly define it.
<meta name="robots" content="noindex"/>
The value “robots” defined as the name attribute includes all search engine web crawlers & the content attribute value ‘noindex’ defines that the current page shouldn’t be indexed. If you want to prevent indexing of any page for specific search engine web crawlers then you can use that specific search engine bot-name as value of ‘name’ attribute of Robots Meta-Tag. i.e. ‘googlebot’ instead of ‘robots’.
Follow
Web crawlers follow outgoing HTML links by default. However, if desired, it can be expressed by the following robot metadata:
<meta name="robots" content="follow"/>
This meta tag is also essentially redundant, since the crawlers of all the significant search engines should automatically follow hyperlinks as long as nothing else is defined.
Nofollow
The following meta tag can be used to prevent search bots arriving at sub-pages via hyperlinks or following links to other domains:
<meta name="robots" content="nofollow"/>
Crawlers then treat the page as though no links exist. That meta element doesn’t prevent the content of the corresponding HTML file from being transmitted to the search database.
The meta tags index/noindex and follow/nofollow can be combined or used alone. For example, they can be used to specify that a site be recorded in the index, but the hyperlinks should be ignored. Alternatively, both actions can be prohibited or allowed.
<meta name="robots" content="index,nofollow" /> <meta name="robots" content="index,follow" /> <meta name="robots" content="noindex,nofollow" />
HTTP Equivalents Meta-Tags
With the attribute 'http-equiv', HTML meta tags can include information equivalent to that usually contained in the HTTP header. This information is read as a substitute if the web server is not correctly configured. Generally, an identical HTTP header is preferred over HTML meta tags.
Cache control
It is standard for websites to be stored on proxy servers, which allows the websites to load faster when subsequently called up. To prevent this process, use the meta tag 'cache-control' with the value 'no-cache' like shown below:
<meta http-equiv="cache-control" content="no-cache"/>
Websites that are provided with this Meta-Tag are reloaded from the web server with every page view. This leads to longer loading times, but on the other hand, it can be very useful if your web page’s content is frequently updated.
Expires
Rather than completely preventing the storage of data in a cache, you can set an expiry date for the HTML data in question with the attribute 'http-equiv' like shown below:
<meta http-equiv="expires" content="expiry time in seconds"/>
This tag allows an expiry date to be set in seconds for as long as you want. When the defined time span has expired, a web browser will load the corresponding HTML document from the source address. Should the content load from the original page anyway, an expiration date of 0 seconds is chosen. For an expiration date of 12 hours, you should choose 43,200 seconds like shown below.
<meta http-equiv="expires" content="0"/>
<meta http-equiv="expires" content="43200"/>
Similarly, you can set a time span to the exact date and time which should be defined in GMT format as shown below:
<meta http-equiv="expires" content="Sat, 07 Feb 2016 00:00:00 GMT"/>
Refresh
Another helpful scenario where ‘http-equiv’ Meta-Tags can be used is to set up a redirection instruction where you can define the time in seconds after which the re-direction of you current page will be initiated to the URL which you will mention in the Meta-Tag. If you will use this Meta-Tag then web browsers are redirected to your pre-defined URL like in below shown example, shows a redirection to 'https://www.blog.nakulrajput.com/' after 5 seconds once page is loaded.
<meta http-equiv="refresh" content="10; url=https://www.blog.nakulrajput.com/"/>
NOTE: Refresh Meta-Tag don’t work with some web browser as the World Wide Web Consortium (W3C) recommends to use a server side redirection using ‘HTML status code 301‘ instead of redirecting by Meta-Tags.