Wondering what the <meta> tags are in the <header> section of your HTML document, then read ahead & get all your queries resolved.
Meta tags:
These are the tags that provide additional document level descriptive information about the content of the html document.
Is the meta tag content visible like the body content?
No
What is the utility of having additional information?
- Specify important keywords related to the document
- Provide relevant keywords to search engines as well as web crawlers to refer to the html document
- Indexing and ranking of web pages during search
- Displaying snippets of document as search result
To answer the above questions, lets dive in & understand the meaning of the most commonly visible meta tag.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
The description in the meta tag is defined in a key-value pair.
As visible above, the key "charset" has the value "UTF-8" defined to it. This provides details to the searcher that the document has UTF-8 character encoding. Not mentioning this can impact the rendering of the website.
name: This meta tag key provides document level information that applies to the whole page.
The value specified to it here is "viewport": this defines that the document is adjustable to be viewed with ease on the mobile screens. Appended with the "content" key we can conclude that the content is adjustable to be viewed on mobile handsets having the defined properties of width and initial-scale.
Together, the name="viewport" can be observed to be the "key" that has the "value" defined by content = "width=device-width, initial-scale=1.0"
charset, name, content & http-equiv and itemprop are known as attributes of the meta tag. Using these attributes the additional information about the document can be defined.
http-equiv: provides information that can be considered to be quivalent to the information provided by HTTP headers. Also referred to as pragma directive tag. Observe the example below:
<meta http-equiv="refresh" content="3;url=https://example.com">
This defines the webpage to be refreshed after 3 seconds by directing it to the specified URL. The use of this should be done wisely and only where truly needed to avoid discomfort to readers of your website caused by frequent reloading of the document.
There are several attributes that can be used in the meta tag to append and provide additional information about it. You can have multiple meta tags with each having information represented in a "key"-"value" pair.
If you are more interested in reading up about meta-tags (What makes a meta-tag Good or Bad?) from a SEO perspective, you can refer to this interesting article Click to Read more
Hope you found this blog valuable.
Thanks for reading!
Top comments (0)