META tag

About Meta Element

• Meta tags are part of the HTML tags that describe your page content to search engines and website visitors. 
• HTML lets you specify metadata - additional important information about a document in a variety of ways.
• They are part of a web page's head section. 
• The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.
• Multiple Meta elements with different attributes can be used on the same page. 

• It is not displayed on the page itself, it can be read by search engines and web crawlers. 
• The Meta tags appear only in the page’s code and anyone can check them via source code (Ctrl+U).
• This tag is an empty element and so does not have a closing tag but it carries information within its attributes.

Meta elements can specify HTTP headers which character code should be sent before the actual content when the HTML page is served from the web server to the client. 

For example:

<meta charset="utf-8">

Meta tags can be used to describe the contents of the page: 

Example:

<meta name="description" content="The Federal Aviation Administration is an operating mode of the U.S. Department of Transportation.">

• Meta element used in search engine optimization
• Meta elements provide information about the web page, which can be used by search engines to help categorize the page correctly.
• They have been the focus of a field of marketing research known as search engine optimization (SEO), where different methods are used to provide a user's website with a higher ranking on search engines.
• In short, Meta tags are key things for all search engines that appear in the HTML code of a website page and tells the search engine what the page is about, and they are the first impression and point of contact for all search engines.

Attributes of <meta> tag

• Name
• Content
• Description
• Charset
• HTTP-Equiv

Name attribute: 

This attribute is used to define the name of property

Content attribute: 

This attribute is used to specify property value

<meta name=“author”>

It is used to specify the name of the actual person editing the page. 

Example:

<meta name=“author” content=“Vikas”>

<meta name=“description”>

It is used to provide a short description about the web page.

Example:

<meta name=“description” content=“Provides notes of HSC IT Subject and exam questions”>

<meta name=“keywords”>

It is used to a list of keywords and phrases that are matching the content of your web page.

Example:

<meta name=“keywords” content=“HSC IT, IT notes, HTML notes, CSS, html forms”>

Note: The keyword meta tag is obsolete.

Google and other search engines no longer consider the keywords meta tag.

Charset Attribute

The meta charset tag sets the character encoding for the web page. In other words, it tells the browser how the text on your web page should be displayed.

There are hundreds of different character sets, but the two most common on the web are:

UTF‑8           -   Character encoding for Unicode;

ISO-8859-1 - Character encoding for the Latin alphabet.

big5              - Chinese for Taiwan Multi-byte set. 

Example:

<meta charset=“UTF-8”>

HTTP-Equiv Attribute

• The http-equiv attribute is used by servers to gather information about a page using the HTTP header. 
• The meta tag’s http-equiv attribute set is similar to a http header. 
• The attribute lets you to send additional information to the browser in the http header. 
• It can be used to simulate an HTTP response header.

The structure of the meta element is:

<meta http-equiv="value" content="value">

<meta http-equiv="refresh">

It is used to define a time interval for the document to refresh itself.

Example:

<meta http-equiv=“refresh” content=“30”>

Example: To redirect your web page to any other webpage

<meta http-equiv="refresh" content=“3; url=http://exza.in/movies.php">

<meta http-equiv="expires">

It is used to indicate the date and time that the web page is set to expire. When the date is reached, the page will be reloaded even if it is stored in the cache. 

Example:

<meta http-equiv=“expires” content=“Tue, 20 Aug 2020 14:25:27 GMT”>

Using Number of seconds:

<meta http-equiv="Expires" content="86400">

86400 sec = 24 hour

It is also used to expire page session at a specified date and time.
Example:
<meta http-equiv="expires" content="userid=vikas; expires=Wednesday, 8-aug-2020 23:59:59 GMT;">

Web Browser Caching

• The browser will fetch all static resources like images, styles, scripts, etc. from the web server during first time loading of the site.
• When browser caching is enabled on the site for static resources then browser will follow the instruction from the server received through HTTP headers.
• Browser will store the static resources on local storage with the expiry date or the maximum age received from the server.
• The static resources are fetched from the browser’s local storage when the next page is loaded.
• If browser caching is not enabled on the site (expiry time is not set), then the browser will fetch the files every time it loads. This will increase the page load time as well as the load on the server.

HTTP-Equiv Attribute - Cookies

• Cookies are data, stored in small text files on your computer and it is exchanged between web browser and web server to keep track of various information based on your web application need.
• Cookies are strings of data that a web server sends to the browser. When a browser requests an object from the same domain in the future, the browser will send the same string of data back to the origin server.
• The data is sent from the web server in the form of an HTTP header called “Set-Cookie”. The browser sends the cookie back to the server in an HTTP header called “Cookie”.

<meta http-equiv=“set-cookie">

It is used to store cookies on client side and later this information can be used by the Web Server to track a site visitor. 

Example:

<meta http-equiv=“set-cookie” content=“userid=xyz; expires=Wednesday, 19-Sept-20 23:59:59 GMT;”>

<meta http-equiv=“content-type">

It is used to indicates the type of data sent to the browser, enabling the browsers to know what to do with data received. 

Example:

<meta http-equiv=“Content-Type” content=“text/html;  charset=ISO-8859-1″> 

Visit 

https://www.metatags.org/

To know the other meta tag attributes