HTML Meta Tags: Description, Robots, Viewport and Charset

HTML <meta> elements provide metadata about a document. They belong inside the <head> and are not displayed as normal page content.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A concise description of the page.">
  <title>HTML Meta Tags Example</title>
</head>

Modern starting point: most pages need a character encoding declaration and viewport metadata. A useful meta description can also help search engines understand how to describe the page in search results.

Show Table of Contents

Meta Description
Meta Keywords
Character Encoding
Viewport
Robots Meta Tag
noindex
nofollow
Prevent Image Indexing
Author Metadata
Meta Refresh
Outdated or Unnecessary Meta Tags
Complete Head Example
Video Tutorial
Common Meta Tag Mistakes
FAQs

Meta Description Top ↑

The meta description summarizes the page. It is placed inside the document head:

<meta name="description" content="Learn HTML forms with text fields, radio buttons, checkboxes and select lists.">

A good description should accurately summarize the specific page and make sense when read independently.

There is no useful fixed minimum or maximum character count that every search result will display. Search engines can shorten, rewrite or replace a supplied description depending on the query and available page content. Focus on accuracy and usefulness rather than filling a character quota.

The meta description is not visible as normal body text, so the page itself still needs a clear heading and useful introductory content.

Meta Keywords Top ↑

The older HTML page used a keywords meta tag like this:

<meta name="keywords" content="HTML tutorial, HTML tags, web page">

This tag is now obsolete for normal SEO work. Google does not use the keywords meta tag for web ranking, and adding a list of target keywords does not replace writing relevant page content.

Recommendation: omit meta name="keywords" from new pages unless you have a separate internal system that specifically consumes it.

Character Encoding Top ↑

Declare the document character encoding near the beginning of the head:

<meta charset="UTF-8">

UTF-8 is the normal choice for modern web pages because it can represent a very large range of characters.

The actual file encoding and the declared encoding should agree. Declaring UTF-8 does not convert an existing Windows-1252 file into UTF-8.

Viewport Top ↑

The viewport meta tag helps mobile browsers size the layout to the device width.

<meta name="viewport" content="width=device-width, initial-scale=1">

This is a common starting point for responsive layouts.

The viewport tag does not make a page responsive by itself. The page still needs responsive CSS, flexible layouts and appropriately sized media.

Robots Meta Tag Top ↑

The robots meta tag can give indexing and link-following instructions to compatible search-engine crawlers.

<meta name="robots" content="index, follow">

For a normal indexable page, explicitly writing index, follow is usually unnecessary because those are the ordinary defaults for crawlable pages.

noindex Top ↑

When a page should not appear in search results, use:

<meta name="robots" content="noindex">

You can also target a specific supported crawler with its crawler name:

<meta name="googlebot" content="noindex">

A crawler must be able to fetch the page to read its meta robots directives. Blocking the URL from crawling can prevent the crawler from seeing a page-level noindex instruction.

nofollow Top ↑

To tell compatible crawlers not to follow links on the entire page:

<meta name="robots" content="nofollow">

This is a page-wide directive. When the concern is only one particular link, apply the appropriate rel value to that link instead of changing the whole page.

User-generated links are normally handled at the link level rather than applying page-wide nofollow to every link on the document.

Prevent Image Indexing Top ↑

If compatible search engines should not index images embedded on a page, a robots directive can be used:

<meta name="robots" content="noimageindex">

This is clearer than the old example that attempted to use Googlebot-Image with a generic noindex value.

Author Metadata Top ↑

You can provide an author name as document metadata:

<meta name="author" content="Subhendu Mohapatra">

This is optional document metadata. It is not a requirement for a page to be indexed, and it should not be treated as an SEO ranking technique.

For visible authorship, use normal page content that identifies the author and provides useful information about them.

Meta Refresh Top ↑

This example asks the browser to reload the current page after 15 seconds:

<meta http-equiv="refresh" content="15">

A timed refresh can interrupt users who are reading or interacting with the page, so use it only when automatic refresh is genuinely necessary.

Redirect after a delay Top ↑

<meta http-equiv="refresh" content="5; url=https://www.example.com/new-page">

For normal permanent or temporary URL redirects, an HTTP server-side redirect is generally preferable because it communicates the redirect directly at the HTTP level.

More about the Meta Refresh Tag

Outdated or Unnecessary Meta Tags Top ↑

Older pages often contain metadata such as:

<meta name="revisit-after" content="2 days">
<meta name="keywords" content="html, tutorial, web page">
<meta name="robots" content="index, follow">

revisit-after is not a useful way to control when search engines recrawl a page.
keywords is not needed for modern search-engine ranking.
index, follow is normally redundant on an ordinary crawlable page.

Complete Head Example Top ↑

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Learn the main HTML meta tags used in modern web pages.">
  <title>HTML Meta Tags Example</title>
</head>
<body>
  <h1>HTML Meta Tags</h1>
</body>
</html>

See HTML title tag, HTML body tag, and HTML page structure.

Video Tutorial Top ↑

HTML basic tags and understanding of types, structure and meta tags

Common Meta Tag Mistakes Top ↑

Keeping a keywords meta tag for SEO Top ↑

Do not rely on meta keywords for ranking. Put effort into useful page content, descriptive titles and accurate metadata instead.

Writing one generic description for many pages Top ↑

The description should reflect the specific page rather than repeating the same boilerplate everywhere.

Using a rigid character-count rule for descriptions Top ↑

Search-result snippets vary. Write a concise summary that communicates the page clearly.

Assuming the viewport tag makes a desktop layout responsive Top ↑

Responsive CSS and flexible content are still required.

Using nofollow for all links because some content is user-generated Top ↑

Use appropriate link-level attributes when only particular links need special treatment.

Using noindex while blocking crawling of the same URL Top ↑

A crawler normally has to fetch the page before it can read a meta robots directive.

Using meta refresh as the first choice for redirects Top ↑

Use HTTP redirects for normal URL moves. Use timed refresh only when the page genuinely requires it.

Frequently Asked Questions Top ↑

Q1: Where do HTML meta tags go?

Meta elements belong inside the head section of the HTML document.

Q2: What does the meta description do?

It provides a concise summary of the page that search engines may use when presenting the page in search results.

Q3: Should I still use meta keywords?

For normal SEO work, no. Google does not use the keywords meta tag for web ranking.

Q4: What viewport meta tag should I use?

A common responsive starting point is width=device-width, initial-scale=1.

Q5: How do I prevent a page from appearing in search results?

For compatible crawlers, use a robots meta directive with noindex on a page the crawler can access.

Q6: Is index, follow required?

No. Those are normally the default behaviors for an ordinary crawlable page.

Q7: Is meta refresh the best way to redirect a page?

Usually no. HTTP redirects are generally preferable for normal URL redirects.

HTML Body Tag Title Tag Introduction to HTML Page Structure Types of Tags Standard Layout of Web Pages HTML

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

ronald	03-07-2010
Its a good example of meta, but would be appreciated if it could have working examples

HTML Meta Tags: Description, Robots, Viewport and More