View Categories

HTML – Meta Tags

Table of Contents

The HTML <meta> tag allows us to define metadata, which provides additional information about a document that doesn’t appear on the page itself but helps search engines, browsers, and other services understand the content better. Meta tags are placed inside the <head> section of the HTML document.

The <meta> tag is self-closing, meaning it doesn’t require an end tag, and the information it carries is specified using attributes. Meta tags don’t affect the physical appearance of a page but are essential for search engine optimization (SEO), character set declaration, page redirection, and more.

Common Uses of Meta Tags #

  • Specifying Keywords
  • Providing a Document Description
  • Document Revision Date
  • Page Redirection
  • Setting the Author’s Name
  • Document Refreshing
  • Setting Cookies
  • Specifying the Character Set

Below are some examples of how you can use the <meta> tag for various purposes on your web page.

Specifying Keywords #

You can specify important keywords related to your document using the <meta> tag. These keywords help search engines categorize your content for search queries.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Meta Tags Demo</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
   <p>Welcome to Coaching Wallah’s Meta Tags tutorial!</p>
</body>
</html>

Document Description #

Providing a description of your document helps search engines understand what your page is about.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Meta Tags Demo</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learn how to use HTML Meta Tags effectively." />
</head>
<body>
   <p>Welcome to Coaching Wallah’s Meta Tags tutorial!</p>
</body>
</html>

Document Revision Date #

This meta tag can specify the last time a document was updated, useful for tracking version control on webpages.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Meta Tags Demo</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learn how to use HTML Meta Tags effectively." />
   <meta name="revised" content="Coaching Wallah, 10/4/2024" />
</head>
<body>
   <p>Welcome to Coaching Wallah’s Meta Tags tutorial!</p>
</body>
</html>

Document Refreshing #

If you want the webpage to refresh automatically, you can use the following meta tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Meta Tags Demo</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learn how to use HTML Meta Tags effectively." />
   <meta http-equiv="refresh" content="5" />
</head>
<body>
   <p>The page will refresh every 5 seconds.</p>
</body>
</html>

Page Redirection #

Use this meta tag to redirect the user to a different page after a specified time.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Meta Tags Demo</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learn how to use HTML Meta Tags effectively." />
   <meta http-equiv="refresh" content="5; url=https://coachingwallah.com" />
</head>
<body>
   <p>You will be redirected to the home page in 5 seconds.</p>
</body>
</html>

Setting Cookies #

The <meta> tag can also be used to store cookies. Below is an example of setting a cookie with an expiration date.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Meta Tags Demo</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learn how to use HTML Meta Tags effectively." />
   <meta http-equiv="set-cookie" content="user=JohnDoe; expires=Wednesday, 08-Aug-2024 23:59:59 GMT;" />
</head>
<body>
   <p>Cookie set for the user.</p>
</body>
</html>

Setting Author Name #

Use the meta tag to specify the author of the document.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Meta Tags Demo</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learn how to use HTML Meta Tags effectively." />
   <meta name="author" content="Coaching Wallah" />
</head>
<body>
   <p>Author: Coaching Wallah.</p>
</body>
</html>

Specify Character Set #

You should always declare the character encoding for your web pages to ensure correct rendering of text. The most common character set is UTF-8.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Meta Tags Demo</title>
   <meta charset="UTF-8" />
</head>
<body>
   <p>This page uses UTF-8 character encoding.</p>
</body>
</html>

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment