The META Element:
If you remember from a few Topics back, we explored how meta elements are placed inside of the <head> element, and briefly described what role they perform. Let’s dig a littler deeper into this concept.
The <meta> element describes metadata about an HTML page. This metadata is not displayed to users, but used by browsers and search engines. This may describe what character encoding the document contains, the published date, author information, descriptions for search engines, keywords, etc.
The <meta> element is an “empty element”. As such, no closing tag is necessary. Also, as with form elements, metadata is always passed as a name:value pair. Typically via the name="" and content="" attributes.
NOTE: <meta> elements are always placed inside the <head> element.
Meta Name Types
You can assign any value you want to the name attribute of the meta element. This can be used for other developers, web browser parsers you design, or to store information you deem necessary.
As one example, Twitter instructs developers to use specific, unique-to-Twitter name values in the meta element when building Twitter applications. You can check that out on the Twitter developer pages.
There are however, some specific name values that you need to be aware of and use in your pages. These standard meta types are parsed and read by browsers and search engines.
description
The description name type provides a short description to search engines crawlers about the contents of your site.
<meta name="description" content="An introductory course to web development and design at the University of Montana.">
keywords
The keywords name type allows developers to provide a list of keywords describing the contents of the website. Separated each keyword with a comma (,).
<meta name="keywords" content="MOOC, Web Development, Web Design, HTML, CSS, Montana">
author
The author name type allows the developer and content creators to specify the “authors” of the page.
<meta name="author" content="Justine Evans">
robots
The robots name type tells browsers whether they may spider or crawl the published webpage.
This name type takes one of four acceptable content values. The noindex value prevents a page from being indexed, and nofollow prevents links from being crawled. The noarchive value instructs a search engine not to store an archived copy of the page, and nosnippet asks that the search engine not include a snippet from the page along with the page’s listing in search results.
<meta name="robots" content="nofollow">
viewports
The viewports name type tells a browser how to display the page with respect to size, pixel density, and zoom-capabilities. This meta type is critical for websites are mobile device friendly. (Read: You should start setting the viewports meta type in your documents.)
The following is the setting you should use for most sites.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tells the browser that the width of the page is initentially equal to the width of the device. (i.e. there will be no horizontal scrolling, which users are not accustomed to.) It also tells the browser to initially display the page with a scale factor of 1, or no zooming.
charset
One metadata use that you should be familiar with is the charset declaration. This informs the browser of the character set encoding of the document (i.e. the character set that matches the binary data).
You should always include the metadata charset line in your head element of your html documents.
<meta charset="utf-8">
{ TODO: }
- Read pages 191-192 of Chapter 08 in Duckett.
- Watch the following video on how Google’s search engine uses meta tags, and read its related article.