The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. The meta tag is placed in the <head> tag in an html page.
Below is the list of the attributes that are specific to this tag/element.
- name: Name for the property. Can be anything, however, HTML5 does specify some standard metadata names. Standard HTML5 metadata names include: application-name, author, description, generator, keywords.
- content: Specifies the property’s value.
- charset: Specifies the character encoding used by the document. This is called a character encoding declaration.
- http-equiv: Used for http response message headers. For example this can be used to periodically refresh the page, redirect to another page, etc. This attribute is used by servers to gather information about a page using the HTTP header. This is similar to a http header.
Note, Do not include the name attribute in the meta when the http-equiv attribute is included and Do include the content attribute.
Based on the application and target device, there are different name/value pairs that we can apply on <meta>. Below given details of some of them.
General HTML meta<meta http-equiv=”content-type” content=”type; charset=charset” />This indicates the type of data sent to the browser, enabling the browsers to know what to do with data received.
<meta http-equiv=”expires” content=”date” />The date indicates the date and time that the document is set to expire. When the date is reached, the document will be reloaded even if the document is stored in the cache. This is used to disable caching of the document: simply put a date that has passed in the date, and this will cause the browser to fetch new files. Put a date far into the future if you want the page to be cached.
<meta http-equiv=”set-cookie” content=”name=value; expires=date; path=url“” />
The name is the name of the cookie. The value is the value to be set for that named cookie. The date is the date and time when the cookie will be deleted from the the computer. The date is optional. If you don’t include an expiration date and time, the cookie will be deleted when you exit the browser. You can include more than one http-equiv=”set-cookie” if you need to set more than one cookie name/value pair.
<meta http-equiv=”content-encoding” content=”data encoding” />Indicates the encoding of the returned data; usually the compression type. For g-zipped documents, use content as gzip.
<meta http-equiv=”date” content=”date” />Include the date and time that the page was created.
<meta http-equiv=”last-modified” content=”date” />The content is the date and time the page was last modified.
<meta http-equiv=”window-target” content=”location” />This meta specifies the “named window” of the current page. The main use is to prevent a page from appearing inside another framed page.
<meta http-equiv=”window-target” content=”_top” />
Usually this means that the Web browser will force the page to go the top frame set.
<meta http-equiv=”www-authenticate” content=”” />This is one method of providing basic access authentication, but providing such authentication in such a visible manner is not recommended for security reasons.
<meta http-equiv=”pics-label” content=’labellist‘ />The Platform for Internet Content Selection (PICS) is a standard for labelling online content: basically online content rating.
<meta http-equiv=”content-language” content=”language–Country” />Enables language specification, enabling search engines to accurately categorise the document into language and country. The language is the main language code, and the country is the country where the dialect of the language is more specific, such as en-US versus en-GB
<meta http-equiv=”content-script-type” content=”language“>The default script language for the script element is javascript. This informs the browser which type of scripting language you are using by default.
<meta http-equiv=”imagetoolbar” content=”no”>This is an IE specific meta, In some older versions of Internet Explorer, when an image is hovered, an image toolbar appears. content=no used to disable the image toolbar.
<meta http-equiv=’x-dns-prefetch-control’ content=’off’>To enable/disable DNS prefetching
<meta charset=’UTF-8'>Specify the character encoding for the HTML document
<meta name=’keywords’ content=’your tags’>Used to tell search engines what the topic of the page is.
<meta name=’description’ content=’short description of your web-page’>The meta description is a snippet of up to about 155 characters, which summarises a page’s content.
<meta name=’copyright’ content=’company name’>To explain that the photos and the text on your website are protected.
<meta name=’language’ content=’ES’>To explain in which language your website is in
<meta name=’robots’ content=’index,follow’>To explain to a spider of a search engine you only want it to index just the first page of your website or that it is allowed to index the whole website. Valid values for the “content” attribute are: “index”, “noindex”, “follow”, “nofollow”.
<meta name=”revisit-after” content=”period”>Tell the spider to come back to your website and index it again.
<meta name=’abstract’ content=’’>This can used to indicate in just a very short sentence what the web-page is about. So every web-page of your website gets it’s own abstract-tag. For HTML5, abstract is not registered.
<meta name=’author’ content=’name, email’>To give credit to the person of company that made the webpage.
<meta name=’reply-to’ content=’email’>By adding the email address of your web master in the REPLY-TO tag you are able to explain how people can contact the right person in your organisation who is responsible for your website.
<meta name=’distribution’ content=’Global’>This defines the level or degree of distribution of your web-page and how it should be classified in relation to methods of distribution on the world wide web. There are currently only three forms of distribution supported by the distribution tag:
- Global — indicates that your web-page is intended for everyone
- Local — intended for local distribution of your document
- IU — Internal Use, not intended for public distribution
- So if you put this meta tag in your web-page source and choose IU by accident you will end up being blocked and unfindable. The Distribution Meta Tag is not a commonly used tag because most web page authors intend for their distribution to be set to everyone or for Global distribution.
<meta name=’rating’ content=’General’>If you wish to rate your page’s audience appropriateness, use the rating meta tag. This meta tag is often use to let the younger web-surfers know the content is appropriate. If you use this tag the wrong way (call an adult website safe for kids is bad!) you will get banned for live. Supported values are general, mature, restricted, 14 years, safe for kids.
<meta name=”geo.position” content=”latitude; longitude”>
<meta name=”geo.placename” content=”Place Name”>
<meta name=”geo.region” content=”Country Subdivision Code”>
These are used for address recognition purpose. These are supported by Bing but not Google.
<meta name=’identifier-URL’ content=’web url’>URL of your site. This tag is not obligatory. If you use it, put the same value in all the pages of your site.
<meta name=’category’ content=’’>Category of the page (for sites catalogs). This tag is not obligatory.
<meta name=”generator” CONTENT=”program”>Specifies one of the software packages used to generate the document. This tag is not obligatory.
<meta name=’csrf-param’ content=’authenticity_token’>
<meta name=’csrf-token’ content=’/bZVwvomkAnwAI1QeewvpOIiWwc=’>
This is used for storing an anti CRSF token within the page and is the OWASP recommended solution for preventing attacks
Apple Specific Meta Tags<meta name=”apple-mobile-web-app-title” content=”My App”> On iOS, you can specify a web application title for the launch icon. By default, the <title> tag is used. To set a different title, add this meta tag to the webpage
<meta name=’apple-mobile-web-app-capable’ content=’yes’>On iOS, as part of optimising your web application, have it use the standalone mode to look more like a native application. When you use this standalone mode, Safari is not used to display the web content — specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen.
<meta name=’apple-mobile-web-app-status-bar-style’ content=’black’>If your web application displays in standalone mode like that of a native application, you can minimise the status bar that is displayed at the top of the screen on iOS.
<meta name=’format-detection’ content=’telephone=yes’>When running in a browser on a mobile phone, this meta determines whether or not telephone numbers in the HTML content will appear as hypertext links. The user can click a link with a telephone number to initiate a phone call to that phone number.
<meta name=’viewport’ content=’width=device-width; content=’width = 320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes; target-densitydpi=160dpi’>
A meta viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device. The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
<link href=’/apple-touch-icon.png’ rel=’apple-touch-icon’ type=’image/png’>
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png.To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:To specify multiple icons for different device resolutions — for example, support both iPhone and iPad devices — add a sizes attribute to each link element as follows:
<link rel=”apple-touch-icon” href=”touch-icon-iphone.png”><link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png"><link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png"><link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
as an alternative, we can use the below metas also
<link href=’touch-icon-iphone4.png’ sizes=’114x114' rel=’apple-touch-icon-precomposed’>
<link href=’touch-icon-ipad.png’ sizes=’72x72' rel=’apple-touch-icon-precomposed’>
<link href=’apple-touch-icon-57x57.png’ sizes=’57x57' rel=’apple-touch-icon-precomposed’>
<link href=’/startup.png’ rel=’apple-touch-startup-image’>On iOS, similar to native applications, you can specify a launch screen image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a link element to the webpage, as in the meta
Safari 9 Pinned tabs<link rel=”mask-icon” href=”website_icon.svg” color=”red”>Pinned Sites allow your users to keep their favorite websites open, running, and easily accessible. You can set the icon that the user sees when they pin your site by providing a vector image.
Internet Explorer/Windows 8 Meta Tags
You can customise pinned sites using the meta element, including the name of your pinned site, the background for various tile sizes, notification updates, badges, and more. Here’s a list of the supported metadata values and what they do.
<meta http-equiv=”page-enter” content=”revealtrans(duration=seconds,transition=num)” />
<meta http-equiv=”page-exit” content=”revealtrans(duration=seconds,transition=num)” />
Page-enter and page-exit are Microsoft proprietary transitions that only work in Internet Explorer. The seconds is how long the transition should take, and num is an integer between 0 and 23, correlated with a specific type of transition (23 is random). There are 23 transitions, from 0–22. A transition with value of 23 is allows Internet Explorer to randomly select from the 23 available transitions.
<meta content=”IE=edge" http-equiv=”X-UA-Compatible”/>When Internet Explorer encounters the X-UA-Compatible META tag it starts over using the designated version’s engine.
<meta name=’msapplication-starturl’ content=’root url'>
The root URL of the pinned site. The content attribute specifies the URL, which can fully qualified or relative to the current document. Only HTTP and HTTPS protocols are allowed. If this element is missing, the address of the current page is used instead.
<meta name=’msapplication-navbutton-color’ content=’#ffffff’>Defines the custom color of the Back and Forward buttons in the Pinned site browser window. The content attribute can be any named color or supported hex color value. If msapplication-navbutton-color is not specified, the default color is based on the color palette of the site icon (or, favicon).
<meta name=”msapplication-tooltip” content=”Example Tooltip Text”>Provides additional tooltip text that appears when you hover over the Pinned site shortcut. The content attribute should be set to the desired tooltip text.
<meta name=”msapplication-TileImage” content=”tileimage.jpg”>
Specifies the background image for live tile. The content value specifies a URI for the desired image.
<meta name=”msapplication-badge” content=”frequency=30; polling-uri=”>
Defines a badge for a live tile. The value of the content attribute is a semi-colon separated string containing the following component values:
- frequency: (Optional) Indicates the frequency, in minutes, that a client should check for updates to the polling URL. The supported values are 30, 60, 360 (6 hours), 720 (12 hours), and 1440 (1 day). If no value is specified, the default value of 1440 minutes is used.
- polling-uri: The content value “polling-uri” is required and specifies the URI for an XML file containing badge schema. Only “http” and “https” URI schemes are supported.
<meta name=”msapplication-config” content=” browserconfig.xml”/> Identifies an XMLfile that contains browser configuration schema that defines live tile customizations. The value of the content attribute refers to a fully-qualified or relative Uniform Resource Identifier (URI) containing the address of the XML file. The default value is “browerconfig.xml”.
<meta name=’msapplication-task’ content=’name=About;action-uri=/about/;icon-uri=about.ico’>
Defines a Jump list task. The value of the content attribute is a semi-colon separated value containing the following component values:
name: A string that contains the name of the task displayed in the Jump list.
- action-uri: A fully qualified or relative URI containing the address of the document to be launched when the Jump list task is clicked.
- icon-uri: A fully qualified or relative URI containing the address of the icon to be displayed for the Jump list task.
- window-type: “tab”: (default): Task opens as a new tab in the current window. “self”: task opens in the curent window. “window”: task opens as a new Pinned site window.
<meta name=’msvalidate.01' content=’6E3AD52DC176461A3C81DD6E98003BC9'>
This tag to help your site verify with Bing Webmaster Tool
<meta name=”application-name” content=” Contoso” />The default name displayed with the pinned sites tile (or icon). Set the content attribute to the desired name.
<meta name=”msapplication-allowDomainApiCalls” content=”true”>
Allows tasks to be defined on child domains of the fully qualified domain name associated with the pinned site.The content attribute should be set to a value indicating whether this is allowed (true) or not (false).This is supported only on the webpage used to install the pinned site. It cannot be changed afterward.
<meta name=”msapplication-allowDomainMetaTags” content=”true”>Allows tasks to be defined on child domains of the fully qualified domain name associated with the pinned site. The content attribute should be set to a value indicating whether this is allowed (true) or not (false). This is supported only on the webpage used to install the pinned site. It cannot be changed afterward.
<meta name=”msapplication-TileColor” content=” #009900" />Sets the background color for a live tile. The content value specifies supported named color or hex color value.
<meta name=”msapplication-square70x70logo” content=”image.png” />
Specifies the image to use as the small tile, which is 70x70 pixels at 100% scaling.
<meta name=”msapplication-square150x150logo” content=”image.png” />
Specifies the image to use as the medium tile, which is 150x150 pixels at 100% scaling.
<meta name=”msapplication-wide310x150logo” content=”image.png” />
Specifies the image to use as the wide tile, which is 310x150 pixels at 100% scaling.
<meta name=”msapplication-square310x310logo” content=”image.png” />
Specifies the image to use as the large tile, which is 310x310 pixels at 100% scaling.
<meta name=”msapplication-tap-highlight” content=”no” />
This meta tag allows you to disable the grey tap highlight on Windows Phone 8 and greater.
<meta name=”msapplication-window” content=”width=1024;height=768"> Sets the initial size of the Pinned site window when it is launched for the first time. However, if the user adjusts the size of the window, the Pinned site retains the new dimensions when it is launched again. The content attribute is a string that specifies the initial size of the Pinned site window when it is launched for the first time, as shown in the following example: The content value must contain values for both the width and height. Each value specifies, in pixels, the desired size. If the user adjusts the size of the window, the Pinned site retains the new dimensions when it is launched again.
<meta name=”msapplication-notification” content=”frequency=30; polling-uri=;/>
Identifies up to five URLs to periodically poll for notifications. The content attribute is a semi-colon (“;”) separated string containing the following component values:
- frequency : (Optional) Indicates the frequency, in minutes, that the target URLs should be polledThe supported values are 30, 60, 360 (6 hours), 720 (12 hours), and 1440 (1 day). If no value is specified, the default value of 1440 minutes is used
- cycle: (Optional) Indicates whether notifications cycle and, if so, for which tiles.
- polling-uri: The content value “polling-uri” is required and indicates the URL to poll for notification binding. Only “http” and “https” URI schemes are supported.
References
