Meta tags provide data about a web page, such as title, author, keywords, etc.
They also provide instructions to the browser, such as, how to display content.
Meta tags are not visible to the users.
These <meta> tags set values that the browser can use.
<head>
<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">
</head>
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 details 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 default-style refresh |
Set an HTTP header for the value of the content attribute |
| name |
application-name author description generator keywords viewport |
Sets the name for the metadata. The value is given in the content attribute. |
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">
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.">
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.">
The author meta value specifies the author of the page.
It can be a person or an organization.
<meta name="author" content="Deborah Anderson">
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">
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.
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.
This table lists when <meta> support started for each browser:
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
2.0 | Oct 2006 |
 IE/Edge
|
6.0 | Aug 2001 |
 Opera
|
10.0 | Aug 2009 |
 Safari
|
3.1 | Mar 2008 |
