HTML Meta Tags

Meta tags in HTML provide data about a web page, such as title, author, keywords, description, etc.  They also provide instructions to the browser, such as how to display content, or to reload a page.

HTML Tutorial


These <meta> tags set values for charset, title, description, keywords, author, and viewport.

  <meta charset="UTF-8">
  <meta name="title" content="Vincent van Gogh's early life">
  <meta name="description" content="Early life of van Gogh as a budding painter">
  <meta name="keywords" content="Vincent, van Gogh, Dutch, painter, young, early life">
  <meta name="author" content="Deborah Anderson">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
When running the above HTML you won't see anything.

Using meta

All <meta> tags are placed inside a <head> element.

Meta data is passed as name/content pairs, that is, name/value pairs.

If a name or http-equiv attribute is defined then the content attribute must have a value.

Meta data is used by the browser to optimally render the page. Users will not see this data.

Metadata can also help your pages rank better with search engines.

For more information on <meta>, see our HTML meta Tag Reference


Here's a list of the meta tag's attributes.

Attribute Value Description
charset character-set Specifies the character encoding for the HTML document
content value Sets the value for the associated http-equiv or name attribute
http-equiv content-type
Set an HTTP header for the value of the content attribute
name application-name
Sets the name for the metadata.
The value is given in the content attribute.
Note:  Like other tags, meta tags also accept global attributes.

For more information on meta tags, see our HTML meta tags Reference.

Title Meta

The <title> meta value specifies the title of the page.

As an end-user the title value is not easy to see.

It shows up in the page tab, often with a tooltip to display the entire title.

The title is very important for Search Engine Optimization (SEO).

<meta name="title" content="Vincent van Gogh's early life">

Description Meta

The description meta value specifies the content of the page.

It makes it easier for search engines to determine what the page is about.

The description can be important for Search Engine Optimization (SEO).

<meta name="description" content="Early life of van Gogh as a budding painter.">

Keywords Meta

The keywords meta value specifies a number of keywords about the page.

Keywords are comma separated list of keywords that represent the content of the page.

These keywords can be important for SEO but less so than the title and description.

<meta name="keywords" content="Vincent, van Gogh, Dutch, painter, young, early life.">

Author Meta

The author meta value specifies the author of the page.
It can be a person or an organization.

<meta name="author" content="Deborah Anderson">

Viewport Meta

The viewport meta value specifies the visible area of the page.

Viewports vary by device and are smaller on a mobile phone than on a computer screen.

The viewport meta tag informs the browser how to control the dimension and scaling of a page.

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

Code explanation

The width=device-width sets the page width to be the same as the device width (which varies by device).

The initial-scale=1.0 sets the initial zoom level to 100% when the page is loaded.

Did you know?

Did you know?

Viewing a website's metadata

Meta data is not displayed, but it still exists on the page. How can you see it?

Simply right click on a page in the browser and select View Source or View Page Source.

You'll find the meta tags in the top part of the code in the <head> section.

Tip:  It can be quite useful to explore your competitor's metadata for SEO purposes.

Browser Support

This table lists when <meta> support started for each browser:

4.0 Jan 2010
2.0 Oct 2006
6.0 Aug 2001
10.0 Aug 2009
3.1 Mar 2008

You may also like