Why are meta tags used in HTML?

1.	Why are meta tags used in HTML?
Answer» Meta tag is used to describe the data in the webpage. Metadata literally means data about data. One of the most popular uses of the meta tag is to INCREASE the SEO(Search Engine Optimisation) so that your website comes on the top of google search. the clever use of meta tag can do that but it is more than that. <meta> tags are included in the webpage by placing it inside <head>..</head> in your webpage. They contain various attributes which define them. Keywords This attribute is used to specify the keywords used in your web-page. It is used by crawlers from search engines like google to find sites. So, giving the right keyword is very necessary for good SEO. <meta name=“keywords” content=“HTML, Meta, Metadata, Meta tutorial” /> Description This attribute is used to describe the content of your web-page. It is again used by search engines like google to index your site. So, giving the right description of your website is also very IMPORTANT for SEO. <meta name=“description” content=“Learn Meta in one hour” /> Revision Date This attribute is used to give the last revision date of your website. It is used by browsers to refresh your page. Browsers generally keep the cached version of the website for displaying, so if the revision date is updated it will refresh its version in your computer. <meta name=“revised” content=“MetaTutorials, 5/9/2019” /> Refreshing This attribute is used to notify the browser to refresh your website after the mentioned duration. It is used by browsers to refresh your page. Browsers generally keep the cached version of the website for displaying, so this attribute will force the browser to refresh our site after the mentioned time in seconds. <meta http-equiv=“refresh” content=“300” /> Redirection You can use the refresh attribute to redirect your website to some other webpage, after the mentioned duration in seconds. It is done by adding an additional URL to the content. The below example will redirect your website to sometutorial.com after 5 seconds. <meta http-equiv=“refresh” content=“5, url=“sometutorial.com” /> Cookies Cookies are data stored in your computer web-browser and are exchanged with the web-server which hosts the site. One of the most common use is to store your authentication details on the web-browser and use it to communicate with the server so that you don’t have to enter credentials every time. In the cookie attribute for meta, we mention the time till the cookies will be stored in your system. <meta http-equiv=“cookie” content=“userid = nabs; expires = Wednesday, 08-Aug-22 23:59:59 GMT;” /> Author This attribute is used to set the author name of your web-page. It is again used by search engines like google. <meta name=“author” content=“Hiren Pandey” /> Character Set This attribute is used to specify the character set of your web-page. By default, web-servers uses ISO-8859-1 (Latin1) encoding to process your web-page. This is an old encoding with very limited 256 characters. You can use the more modern UTF-8 encoding by this attribute or if your website is in Chinese you can use Big5 encoding. <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" /> <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" /> Viewport A very important attribute which sets the viewing area, as per the device you are rendering your web-page. So by using this website, it becomes a bit responsive by itself and adjusts it according to devices. <meta name="viewport" content="width=device-width, initial-scale=1.0"> Now, we will make a complete web-page with these meta tags including the amazing viewport also. <!DOCTYPE html> <html> <head> <title>Meta tutorials</title> <meta name="keywords" content="HTML, Meta, Metadata, Meta tutorial" /> <meta name="description" content="Learn Meta in one hour" /> <meta name="revised" content="MetaTutorials, 5/9/2019" /> <meta http-equiv="refresh" content="300" /> <meta http-equiv="cookie" content="userid = nabs; expires = Wednesday, 08-Aug-22 23:59:59 GMT;" /> <meta http-equiv="Content-Type" content="text/html; charset = UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Meta tutorials</h1> <p>Meta tag is used to describe the data in the webpage. Metadata literally means data about data. One of the most popular uses of the meta tag is to increase the SEO(Search Engine Optimisation) so that your website comes on the top of google search. A clever use of meta tag can do that but it is more than that. </p> <figure> <img src="https://source.unsplash.com/900x600/?water" width="100%" alt="Water"> <figcaption>Random Water image.</figcaption> </figure> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus sunt voluptatem PLACEAT doloribus aperiam ipsum incidunt, a in aliquam ab.</p> </body> </html> Save the above code as demo.html and open in any browser. Now, resize the browser to check the mobile view. You can see the viewport meta tag in play and will add responsiveness to the web-page.

Answer»

Meta tag is used to describe the data in the webpage. Metadata literally means data about data. One of the most popular uses of the meta tag is to INCREASE the SEO(Search Engine Optimisation) so that your website comes on the top of google search. the clever use of meta tag can do that but it is more than that.

Keywords

This attribute is used to specify the keywords used in your web-page. It is used by crawlers from search engines like google to find sites. So, giving the right keyword is very necessary for good SEO.

Description

This attribute is used to describe the content of your web-page. It is again used by search engines like google to index your site. So, giving the right description of your website is also very IMPORTANT for SEO.

Revision Date

This attribute is used to give the last revision date of your website. It is used by browsers to refresh your page. Browsers generally keep the cached version of the website for displaying, so if the revision date is updated it will refresh its version in your computer.

Refreshing

This attribute is used to notify the browser to refresh your website after the mentioned duration. It is used by browsers to refresh your page. Browsers generally keep the cached version of the website for displaying, so this attribute will force the browser to refresh our site after the mentioned time in seconds.

Redirection

You can use the refresh attribute to redirect your website to some other webpage, after the mentioned duration in seconds. It is done by adding an additional URL to the content. The below example will redirect your website to sometutorial.com after 5 seconds.

Cookies

Cookies are data stored in your computer web-browser and are exchanged with the web-server which hosts the site. One of the most common use is to store your authentication details on the web-browser and use it to communicate with the server so that you don’t have to enter credentials every time. In the cookie attribute for meta, we mention the time till the cookies will be stored in your system.

Author

This attribute is used to set the author name of your web-page. It is again used by search engines like google.

Character Set

This attribute is used to specify the character set of your web-page. By default, web-servers uses ISO-8859-1 (Latin1) encoding to process your web-page. This is an old encoding with very limited 256 characters. You can use the more modern UTF-8 encoding by this attribute or if your website is in Chinese you can use Big5 encoding.

Viewport

A very important attribute which sets the viewing area, as per the device you are rendering your web-page. So by using this website, it becomes a bit responsive by itself and adjusts it according to devices.

Now, we will make a complete web-page with these meta tags including the amazing viewport also.

<!DOCTYPE html> <html> <head> <title>Meta tutorials</title> <meta name="keywords" content="HTML, Meta, Metadata, Meta tutorial" /> <meta name="description" content="Learn Meta in one hour" /> <meta name="revised" content="MetaTutorials, 5/9/2019" /> <meta http-equiv="refresh" content="300" /> <meta http-equiv="cookie" content="userid = nabs; expires = Wednesday, 08-Aug-22 23:59:59 GMT;" /> <meta http-equiv="Content-Type" content="text/html; charset = UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Meta tutorials</h1> <p>Meta tag is used to describe the data in the webpage. Metadata literally means data about data. One of the most popular uses of the meta tag is to increase the SEO(Search Engine Optimisation) so that your website comes on the top of google search. A clever use of meta tag can do that but it is more than that. </p> <figure> <img src="https://source.unsplash.com/900x600/?water" width="100%" alt="Water"> <figcaption>Random Water image.</figcaption> </figure> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus sunt voluptatem PLACEAT doloribus aperiam ipsum incidunt, a in aliquam ab.</p> </body> </html>

Save the above code as demo.html and open in any browser.

Now, resize the browser to check the mobile view. You can see the viewport meta tag in play and will add responsiveness to the web-page.

Why are meta tags used in HTML?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment