Sponsored Ads
Html Meta Tags are used to provide Meta information about the document. Meta Information or Meta data are information about the data. There are a lot of meta tags in Html to specify a variety of information about the document like description, keywords, author of the document, last modified date, expiry date if applicable etc.
Sponsored Ads
Meta tags are added in the head section of Html document and hence will not be displayed by the browser. Meta tags are actually machine parsable. Meta tags are actually used by browsers and Search Engines.
The html meta tags are written as <meta>. It is an empty element and hence does not have closing tag. It carries information within its attributes. They are written as key value pair as shown below.
<meta name="tag name" content="tag content">
The tag name and tag content varies according to the type of Meta tag.
Meta tag doesn’t affect the physical appearance of the document. So it is not compulsory for an Html document to work or display properly. But it is highly recommended to add Meta tags as some tags are important for search engines and search engines parse Meta tags.
Meta tags also have other uses like
- It can be used to control view port
- It can be used to refresh a document at specific intervals
- It can be used to redirect the page to another page
- It can also be used to set cookie
You can see these later in this chapter
A meta tags can have following attribute
Name: Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
Content: Specifies the property’s value.
Scheme: Specifies a scheme to interpret the property’s value (as declared in the content attribute).
http-equiv: Used for HTTP response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.
Example
<head>
<meta charset="UTF-8">
<meta name="description" content="Free online tutorials">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="author" content="Ranjith">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Since Meta tags are not displayed by the browser the output are not shown here.
Meta Description Tag
<meta name="description" content="Free online tutorials">
In the above the meta description is the most Important as it is used by search engine while displaying your page in search results. The length of the description can be lesser than 160 characters but calculating the actual length is more complicated procedure. If you omit description meta tag search engines will wont display description. You can learn more about this in SEO tutorials.
Meta Keyword Tag
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
You don’t need to use the Keyword meta tags as it is no longer used by search engines. But for your information keywords is a comma separated list of keywords and you can add up to 10-15 keywords. Initially it was used by search engines to find relevant keywords by search engines but now they use more sophisticated methods.
Sponsored Ads
Setting the Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. Viewport means the visible area of a webpage and it varies with variable devices like a computer screen will have larger screen and a mobile phone smaller.
A <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Define the author of a page
<meta name="author" content="Ranjith">
You can define the author of the page using the above meta tag.
Document Revision Date
Meta tags can also be used to set the date when the Html document was last updated. This information can be used by various web browsers while refreshing your webpage.
<meta name = "revised" content = "Tutorialmanthra, 01/01/2019" />
Refreshing the Document
Meta tags can be used to refresh the document after a certain amount of time. For example the below code will refresh the document every 10 seconds.
<meta http-equiv = "refresh" content = "10" />
Page Redirection
You can use meta tag to redirect your page to any other webpage. You can also set a time in sec after which the page should be redirected.
<meta http-equiv = "refresh" content = "10; url = https://www.tutorialmanthra.com" />
The following page will be redirected after 10 sec. If you omit the content attribute the page will be redirected immediately.
Setting Cookies
Cookies are small date stored on small text fileson your computer and it is exchanged between web browser and web server to keep track of various information based on your web application need.
You can use <meta> tag to store cookies on client side and later this information can be used by the Web Server to track a site visitor. If you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.
<meta http-equiv = "cookie" content = "userid = xyz; expires = Thursday, 31-Oct-15 23:59:59 GMT;" />
Sponsored Ads
There are a lot of Meta tags available. You can learn them in detail in later chapters.
Sponsored Ads