Going by the formal definition, metadata is data about data. Now if we talk about metadata in terms of website or webpage, it is used to describe how your content should be interpreted by the Search Engine & how it should be portrayed. In this HTML Meta Tags article, I’ll explain the following terms:
What are Meta Tags in HTML?
Metadata is the additional information about the web document such as page description, author, a list of important keywords, etc. In this blog we will learn how to add metadata to your webpage in HTML.
To add metadata, HTML gives you <meta> tag. <meta> tag is similar to <img> tag in HTML wherein you do not have a closing tag and it stores information within its attributes.
Points to Remember
You can go ahead and add multiple meta tags in your webpage or document depending on the additional information that you want to disclose.
Meta tags do not change the appearance of the webpage. So, including metadata doesn’t change the appearance of the webpage, but it is very crucial from the perspective of Search Engine Optimization.
HTML Meta Tags Attributes
The <meta> tag should be included inside the header of the document, i.e. inside <head> and </head> tags. Attributes associated with <meta> tags are:
name: Describes the name of the property such as keywords, include, author, description, etc.
content: Describes the value of the property.
scheme: Defines a scheme to interpret the value of the property
http-equiv: http response message headers. Used to set a cookie or refresh a page.
Take your design skills to the next level with our new UI UX Design Course.
Meta Tags Information
There is a lot of different information that metadata portrays. Let’s have a look at them:
- Specifying Meta Keywords
There are various important keywords that a document contains. You can specify the important keywords in <meta> tag & let the search engine know about them. Search Engine uses these keywords for indexing the webpage.
<!DOCTYPE html> <html> <head> <title>Meta Tags in HTML</title> <meta name = "keywords" content = "edureka, online training, online course, online certification, trending technologies" /> </head> <body> Welcome to Edureka </body> </html></span>
As we already discussed that, <meta> tags will not change the appearance of the webpage. So, I won’t be writing the complete code multiple times.
- Document Description
Description is also a crucial part of metadata which gives a small description about the webpage. Search Engine uses this meta description for indexing webpages.
<head> <title>Meta Tags in HTML</title> <meta name = "keywords" content = " edureka, online training, online course, online certification, trending technologies" /> <meta name = "description" content = " Edureka is an online training provider with the most effective learning system in the world. We help professionals learn trending technologies for career growth. /> </head>
- Document Revision Date
You can leverage <meta> tag to update the last modified data of your webpage. This data is again used by Search Engines for Optimization & web browsers.
<head> <title>Meta Tags in HTML</title> <meta name = "keywords" content = " edureka, online training, online course, online certification, trending technologies" /> <meta name = "description" content = " Edureka is an online training provider with the most effective learning system in the world. We help professionals learn trending technologies for career growth. /> <meta name = "revised" content = "Edureka, 31/7/2019" /> </head>
- Document Refreshing
You can use <meta> tag to set the refresh rate of your webpage. The duration is specified in seconds, after which the webpage will automatically refresh.
<head> <title>Meta Tags in HTML</title> <meta name = "keywords" content = " edureka, online training, online course, online certification, trending technologies" /> <meta name = "description" content = " Edureka is an online training provider with the most effective learning system in the world. We help professionals learn trending technologies for career growth. /> <meta name = "revised" content = "Edureka, 31/7/2019" /> <meta http-equiv = "refresh" content = "10" /> </head>
Find out our UI UX Design Course in Top Cities
| India | India |
| UI UX Designer Course in Chennai | UI UX Design Course in Mumbai |
| UI UX Design Course in Pune | UI UX Design Course in Ahmedabad |
| UI UX Design Course in Bangalore | UI UX Design Course in Delhi |
- Page Redirection
<meta> tag can also be used for redirection. You can specify the navigation using the url of another webpage and the duration in seconds after which you want the users to get redirected.
<head> <title>Meta Tags in HTML</title> <meta name = "keywords" content = " edureka, online training, online course, online certification, trending technologies" /> <meta name = "description" content = " Edureka is an online training provider with the most effective learning system in the world. We help professionals learn trending technologies for career growth. /> <meta name = "revised" content = "Edureka, 31/7/2019" /> <meta http-equiv = "refresh" content = "10; url = http://www.edureka.co" /> </head>
- Setting Cookies
In simple words, cookie is a message passed to a web browser by a web server. It is stored in a text file by the web browser. It is again reverted to the server whenever browser requests a page. It keeps tracks of various information depending on the application needs.
One of the important functions of <meta> tag is to store cookies on the client side, which can later be used by the web server.
<head> <title>Meta Tags in HTML</title> <meta name = "keywords" content = " edureka, online training, online course, online certification, trending technologies" /> <meta name = "description" content = " Edureka is an online training provider with the most effective learning system in the world. We help professionals learn trending technologies for career growth. /> <meta name = "revised" content = "Edureka, 31/7/2019" /> <meta http-equiv = "cookie" content = "id = 401; expires = Saturday, 31-Jul-19 23:59:59 IST;" /> </head>
In case you are not specifying the expiry date & time, the cookie will get deleted whenever the browser is closed.
- Setting Author Name
Author name can also be specified using <meta> tag.
<head> <title>Meta Tags in HTML</title> <meta name = "keywords" content = " edureka, online training, online course, online certification, trending technologies" /> <meta name = "description" content = " Edureka is an online training provider with the most effective learning system in the world. We help professionals learn trending technologies for career growth. /> <meta name = "author" content = "Ron Wisely" /> </head>
- Specify Character Set
We can also leverage <meta> tags to specify the character set used within the webpage. By default, ISO-8859-1 encoding is used to process Web pages by web browser & servers.
<head> <title>Meta Tags in HTML</title> <meta name = "keywords" content = " edureka, online training, online course, online certification, trending technologies" /> <meta name = "description" content = " Edureka is an online training provider with the most effective learning system in the world. We help professionals learn trending technologies for career growth. /> <meta name = "author" content = "Ron Wisely" /> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" /> </head>
With this, we come to an end of this HTML Meta Tags article. Now after executing the above snippets you would have understood how you can add metadata to your webpage using <meta> tag. I hope this blog is informative and added value to you.
Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.
Check out the Angular Online Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.
Got a question for us? Please mention it in the comments section of “HTML Meta Tags” blog and we will get back to you.