All About meta Tags

ยท

2 min read

All About meta Tags

This meta tag was introduced to me when I first began learning HTML. Like many of us, I'm curious about what exactly a meta tag is, why we use it, and how it might benefit our website. If you're looking for answers, you've come to the right place. I'll try to explain this in the simplest way possible.

What exactly is a meta tag?

The HTML <meta> tag is used to represent the metadata about the HTML document.

  • Metadata gives additional important information about the document.
  • The data is not visible to the user but used by browsers and search engines.
  • <meta> tags always go inside the <head> element.
  • <meta> tag is self closing tag, it carries information within its attributes.
  • It specifies the page description, keywords, copyright, language, author of the documents, etc.

Adding Meta Tags in Document

You can add <meta> tags inside the header of the document, which is <head> and </head> tags.

  • Here are some of the most common attributes of a meta tag.

Character Set

<meta charset="UTF-8">

The HTML5 specification encourages use of "UTF-8" because it covers almost all characters and symbols in the world.

This article helps you to learn more about character encoding. w3.org/International/questions/qa-what-is-e..

Note:- Attributes allow us to provide the extra data needed. Think of attributes as key/value pairs where charset is the key and "UTA-8" is the value.

Document Description

<meta name="description" content="This is a blog about meta tags">

Using this, we can give a short description of the document. 02-c.webp

Specifying Keywords

<meta name="keywords" content="HTML, metadata, meta tags">

This takes important keywords related to the document, and help us enhance our SEO rankings.

Author Name

<meta name="author" content ="Ammar Azam Khan" />

This helps us to set an author name on a web page.

Viewport

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

This helps our website to render properly on different devices. We do this by adding the attribute name with a value of viewport to the meta tag.

Refreshing

<meta http-equiv ="refresh" content ="5"/>

This can be used to specify a duration after which our web page will keep refreshing automatically.

Summary

I think now everyone has some idea about the <meta> tag. In summation, I'll say that <meta> tags are important because they impact how your site appears in the SERP. A good <meta> description will attract users to click through and visit your site. This will therefore impact your traffic and engagement rates, which can impact your SEO and rankings.

Thank you.

Did you find this article valuable?

Support Ammar Azam Khan by becoming a sponsor. Any amount is appreciated!

ย