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.
These <meta> tags set values for charset, title, description, keywords, author, and viewport.
<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>
Meta data is passed as name/content pairs, that is, name/value pairs.
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.
Here's a list of the meta tag's attributes.
|charset||character-set||Specifies the character encoding for the HTML document|
|content||value||Sets the value for the associated http-equiv or name attribute|
|Set an HTTP header for the value of the content attribute|
|Sets the name for the metadata.
The value is given in the content attribute.
For more information on meta tags, see our HTML meta tags Reference.
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 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 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 value specifies the author of the page.
It can be a person or an organization.
<meta name="author" content="Deborah Anderson">
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.
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">
width=device-width sets the page width to be the same as the device width (which varies by device).
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: