A Brief Introduction To Meta Tags

What are meta tags? What do they do? Anybody who has worked with HTML has come across meta-tags located in the head section of the HTML document. They provide information about the contents of a webpage, such as the encoding, the author, the description, etc.

In this post, I'm going to go over a few of the most common meta tags and their functions.

Charset

<meta charset="utf-8">

The charset is short for character settings, also known as character code or character map. The charset is the first and most important piece of metadata that needs to be added to the head element of your HTML code; it specifies to whatever browser or application that accesses your site what character set your page was written in and should be displayed in. UTF-8 is the dominant encoding for the World Wide Web (and internet technologies), accounting for 98% of all web pages, and up to 100% for some languages, as of 2022.

Description

<meta name="description" content="The why? and how? of html meta-tags">

The description meta tag attribute is used to describe the purpose of your website and the kind of content on it, but the most important use of this tag is in search engine optimization (S.E.O). A good site description can increase the chances of your site showing up as a search engine result generating exposure.

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

The viewport meta tag attribute is very useful in responsive web design by controlling and setting the layout for mobile browsers, it ensures when your site is loaded on a mobile phone the contents of your webpage scale up or down to fit the device width and saves the user the trouble of having to zoom in and out to view parts of your webpage. learn more here.

HTTP-EQUIV

The HTTP-EQUIV meta tag attibute can changes the way a webpage is compiled. The attribute has multiple keywords that can be used to affect the state of a webpage. A couple of examples of these keywords include:

• X-UA-Compatible

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

This keyword is used to specify what version of internet explorer a webpage should be rendered in, to know when and if to use this, read this post here.

• Refresh

 <meta http-equiv="refresh" content="0; url=http://example.com">

This keyword is used to refresh or redirect a webpage. Learn more.

For more http-equiv keywords and their uses visit here..

Keywords

<meta name="keywords" content="html, css, meta tags, dev.to, coding, hello world">

The keywords meta tag, just like the descriptions meta-tag is used mainly in search engine optimization (S.E); By providing keywords that describe the kind of content on your webpage search engines will display websites with the most keywords that match a search. Unfortunately due to spamming and misuse this tag is rarely utilized by search engines anymore. You can learn more here..

When I started learning to code from mostly video tutorials, meta tags were a topic that was mostly glossed over or outright skipped. I wanted to know what functions they performed and decided to share what I learned with people also curious about it. I recommend checking out this article about open graph meta-tags here.