Lesson 9 – HTMl Meta Tags

What are HTML Meta Tags?

HTML meta tags are important from SEO point of view because they define author, title, keywords and expiry date etc. of a document. They don’t interfere with the appearance of a web page, but however carries important additional information for search engines. The <meta> tags are a part of empty elements family  and don’t have a closing tag. You can include more than one meta tag in your document depending upon the requirement.

HTML meta tags work in name/value pair and are always put in the header section of a document, where:

  • name stands for name of the property e.g. keywords, author name etc. and 
  • value or content stands for value or content of the property and should always be put in double quotes. 

Let’s learn how to use meta tags in html codes:

  • Adding Keywords:

Putting competitive keywords in a document is important from SEO point of view. Majority of the search engines use these keywords to rank your page. You can also add keywords to your document using html <meta> tag. Let’s learn more with below example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name=”Related keywords” content=”HTML Tutorial, Learn free HTML” />
</head>
<body>
<p>This is paragraph text</p>
</body>
</html>

The result will be displayed as:

 This is paragraph text

 

  • Adding Document Description in HTML:

You can add a short description about the document using html <meta>tag. This will help search engines to identify & index the content of your web page in a better manner. Let’s learn more with below example:

<!DOCTYPE html>
<html>
<head>
<title> Document Description Example</title>
<meta name=”keywords” content=”HTML Tutorial, Learn HTML” />
<meta name=”description” content=”This document is about learning HTML online.” />
</head>
<body>
<p>This is a Paragraph text.</p>
</body>
</html>

 

  • Adding Author Name in HTML:

    Author name to a document can be added using same html <meta> tags. Example is explained below:

<!DOCTYPE html>
<html>
<head>
<title> Adding Author Name Example</title>
<meta name=”keywords” content=”HTML Tutorial, Learn HTML” />
<meta name=”description” content=”This document is about learning HTML online.” />
<meta name = “author” content = “Robert James”/>
</head>
<body>
<p>This is a Paragraph text.</p>
</body>
</html>

 

  • Adding Document Revision Date in HTML:

Setting document revision date helps search engines to identify, when it was last modified to display latest results. You can set document revision using html <meta> tag. Let’s learn more with following example:

<!DOCTYPE html>
<html>
<head>
<title> Setting Revision Date Example</title>
<meta name=”keywords” content=”HTML Tutorial, Learn HTML” />
<meta name=”description” content=”This document is about learning HTML online.” />
<meta name = “author” content = “Robert James”/>
<meta name = “revised” content  = “5/11/2016 17:30″/>
</head>
<body>
<p>This is a Paragraph text.</p>
</body>
</html>

 

  • Setting Document Cookies in HTML:

Cookies are the small data packets, which are stored on your computer browser. They help us to identify important information related to web applications. You can also store cookies at client server, which can later be used to monitor your web page traffic. Let’s learn it with below example:

<!DOCTYPE html>
<html>
<head>
<title>  Setting Document Cookies Example</title>
<meta name=”keywords” content=”HTML Tutorial, Learn HTML” />
<meta name=”description” content=”This document is about learning HTML online.” />
<meta name = “author” content = “Robert James”/>
<meta name = “cookies” content  = “expires =  Every Monday”/>
</head>
<body>
<p>This is a Paragraph text.</p>
</body>
</html>

 

  • Setting Page Redirection in HTML:

You can redirect a web page to another web page using html <meta> tag. A time limit clause  can also be added to define, after how many seconds it should redirect. Example is explained below:

<!DOCTYPE html>
<html>
<head>
<title>  Page Setting Example</title>
<meta name=”keywords” content=”HTML Tutorial, Learn HTML” />
<meta name=”description” content=”This document is about learning HTML online.” />
<meta name = “author” content = “Robert James”/>
<meta http-equiv=”refresh” content=”7; url=http://www.freetutorialpoint.com” />
</head>
<body>
<p>This is a Paragraph text.</p>
</body>
</html>

In above example, if you don’t specify the time limit, page will be redirected immediately.

Chapter Summery:

Use html <meta> tag to add following additional information into a document :

  • Keywords
  • Document short description
  • Author name
  • Document revision date
  • Setting cookies
  • Page redirection etc

Interview Questions:

  • How would you redirect a webpage automatically to an another web page?

A web page can be redirected to an another page using <meta> tags. We will use following meta element to redirect it:

 <meta http-equiv=”refresh” content=”7; url=http://www.freetutorialpoint.com” />
  •  Why it is considered to be important to add meta information to a document?

Meta data defines additional information about a document, which is used by search engines to index it properly. 

 

Practice Exercise:

<!DOCTYPE html>
<html>
<heading>
<title> Practice exercise </title>
</heading>
<body>
<p> This is a practice exercise. You can learn html only with practice. </p>
</body>
</html>

In above html code,

  • Add author name as “Mike Johnson”.
  • Redirect page to http://freetutorialpoint.com with a delay of 9 sec.
  • Add keywords ‘Practice questions’ and ‘html tutorial’.
Click here to practice above exercise in real time HTML code editor

Leave a Reply

Your email address will not be published. Required fields are marked *

+ 45 = 49