You have probably written some meta tags in your HTML head tag.
But what's the use of meta tags, and why are they only written within the HTML head tag?
Meta tags are written within the head tag because the head tag is used for configuring the HTML document.
METADATA
Metadata is simply data that describes data. Simply put metadata describes more about the data of the HTML document.
These more details may be the viewport size, author's name, document description, character set, etc.
Metadata also includes styles, scripts, titles, etc but in this article, we will focus on the metadata with the explicit meta tag.
WHY DO WE HAVE TO USE METADATA
Metadata gives more information about our HTML document. Metadata is not displayed on the webpage, but browsers interpret metadata and render our page in line with the meta.
Hence, we can say metadata directs the browser in how to render our page.
SOME METADATA AND THEIR USES
1.) Meta charset: this metadata sets the HTML document character encoding. We are advised to always use 'UTF-8' because it contains almost all the characters
2.) Meta http-equiv: this metadata property takes a content type and content text/value. It has many uses. However, in HTML5 the most common uses of this metadata is to set the rendering engine of the web browser
This instructs Internet Explorer to use the highest version of Edge available.
and to set page refresh time
This set the page refresh time to 30 seconds.
Many other meta elements require a name and content attribute. While the meta name specifies the type of metadata, the content attribute sets the exact data or the value of the metadata.
Some of the most common are
3.) Meta name = 'author': this metadata specifies the name of the author of the HTML document. This is useful if some would want to meet the author
4.) Meta name = 'description': this metadata describes more about what the HTML document is about. It gives a broad description of the HTML document's content.
5.) Meta name = 'keywords': specifying metadata with specific keywords has the potential to increase your page's visibility and make your page appear in more relevant searches. Hence, using this metadata increases Search engine optimization (SEO).
While many search engines and websites still use the keyword's content value in rendering search results, Google doesn't consider this in its search ranking algorithm or when displaying search results due to the overuse of specific keywords by some pages.
6.) Meta name = 'viewport': The viewport is the user's visible area of a web page. It varies with the device. Specifying this metadata enables the browser to automatically set the viewport to the device's visible area. This prevents oversized pages on smaller devices.
The width sets the width of the page to the device's width while the initial scale sets the initial zoom level when the page is first loaded to 100% of the device's visible area.
Aside from these, there are lots of other metadata properties. Read more about metadata here
https://www.sitepoint.com/meta-tags-html-basics-best-practices/
That's a wrap
Thanks for reading guys.
Top comments (0)