A list of everything that could go in the <head> of your document
- Recommended Minimum
- Elements
- Meta
- Link
- Social
- Browsers / Platforms
- Browsers (Chinese)
- App Links
- Notes
- Other Resources
- Related Projects
- Other Formats
- Translations
- Contributing
- Contributors
- Author
- License
Below are the essential tags for basic, minimalist websites:
<metacharset="utf-8"><metahttp-equiv="x-ua-compatible" content="ie=edge"><metaname="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --><title>Page Title</title><!-- Document Title --><title>Page Title</title><!-- Base URL to use for all relative URLs contained within the document --><basehref="https://example.com/page.html"><!-- External CSS --><linkrel="stylesheet" href="styles.css"><!-- In-document CSS --><style>/* ... */</style><!-- JavaScript --><scriptsrc="script.js"></script><noscript><!--no JS alternative--></noscript><metacharset="utf-8"><!-- set character encoding for the document --><metahttp-equiv="x-ua-compatible" content="ie=edge"><metaname="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --><!-- Allows control over where resources are loaded from --><metahttp-equiv="Content-Security-Policy" content="default-src 'self'"><!-- Place as early in the document as possible --><!-- Only applies to content below this tag --><!-- Name of web application (only should be used if the website is used as an app) --><metaname="application-name" content="Application Name"><!-- Short description of the page (limit to 150 characters) --><!-- In *some* situations this description is used as a part of the snippet shown in the search results. --><metaname="description" content="A description of the page"><!-- Control the behavior of search engine crawling and indexing --><metaname="robots" content="index,follow"><!-- All Search Engines --><metaname="googlebot" content="index,follow"><!-- Google Specific --><!-- Tells Google not to show the sitelinks search box --><metaname="google" content="nositelinkssearchbox"><!-- Tells Google not to provide a translation for this page --><metaname="google" content="notranslate"><!-- Verify ownership for Google Search Console --><metaname="google-site-verification" content="verification_token"><!-- Verify ownership for Yandex Webmasters --><metaname="yandex-verification" content="verification_token"><!-- Verify ownership for Bing Webmaster Center --><metaname="msvalidate.01" content="verification_token"><!-- Verify ownership for Alexa Console --><metaname="alexaVerifyID" content="verification_token"><!-- Verify ownership for Pinterest Console--><metaname="p:domain_verify" content="code from pinterest"><!-- Verify ownership for Norton Safe Web --><metaname="norton-safeweb-site-verification" content="norton code"><!-- Used to name software used to build the website (i.e. - WordPress, Dreamweaver) --><metaname="generator" content="program"><!-- Short description of your site's subject --><metaname="subject" content="your website's subject"><!-- Gives a general age rating based on sites content --><metaname="rating" content="General"><!-- Allows control over how referrer information is passed --><metaname="referrer" content="no-referrer"><!-- Disable automatic detection and formatting of possible phone numbers --><metaname="format-detection" content="telephone=no"><!-- Completely opt out of DNS prefetching by setting to 'off' --><metahttp-equiv="x-dns-prefetch-control" content="off"><!-- Stores cookie on the client web browser for client identification --><metahttp-equiv="set-cookie" content="name=value; expires=date; path=url"><!-- Specifies the page to appear in a specific frame --><metahttp-equiv="Window-Target" content="_value"><!-- Geo tags --><metaname="ICBM" content="latitude, longitude"><metaname="geo.position" content="latitude;longitude"><metaname="geo.region" content="country[-state]"><!-- Country code (ISO 3166-1): mandatory, state code (ISO 3166-2): optional; eg. content="US" / content="US-NY" --><metaname="geo.placename" content="city/town"><!-- eg. content="New York City" -->- Meta tags that Google understands
- WHATWG Wiki: MetaExtensions
- ICBM on Wikipedia
- Geotagging on Wikipedia
<!-- Points to a CSS stylesheet --><linkrel="stylesheet" href="https://example.com/styles.css"><!-- Helps prevent duplicate content issues --><linkrel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"><!-- Used to be included before the icon link, but is deprecated and no longer is used --><linkrel="shortlink" href="https://example.com/?p=42"><!-- Links to an AMP HTML version of the current document --><linkrel="amphtml" href="https://example.com/path/to/amp-version.html"><!-- Links to a JSON file that specifies "installation" credentials for web applications --><linkrel="manifest" href="manifest.json"><!-- Links to the author of the document --><linkrel="author" href="humans.txt"><!-- Refers to a copyright statement that applies to the links context --><linkrel="license" href="copyright.html"><!-- Gives a reference to a location in your document that may be in another language --><linkrel="alternate" href="https://es.example.com/" hreflang="es"><!-- Gives information about an author or another person --><linkrel="me" href="https://google.com/profiles/thenextweb" type="text/html"><linkrel="me" href="mailto:name@example.com"><linkrel="me" href="sms:+15035550125"><!-- Links to a document that describes a collection of records, documents, or other materials of historical interest. --><linkrel="archives" href="https://example.com/archives/"><!-- Links to top level resource in an hierarchical structure --><linkrel="index" href="https://example.com/"><!-- Gives a self reference - useful when the document has multiple possible references --><linkrel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3"><!-- The first, next, previous, and last documents in a series of documents, respectively --><linkrel="first" href="https://example.com/atomFeed.php"><linkrel="next" href="https://example.com/atomFeed.php?page=4"><linkrel="prev" href="https://example.com/atomFeed.php?page=2"><linkrel="last" href="https://example.com/atomFeed.php?page=147"><!-- Used when using a 3rd party service to maintain a blog --><linkrel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD"><!-- Forms an automated comment when another WordPress blog links to your WordPress blog or post --><linkrel="pingback" href="https://example.com/xmlrpc.php"><!-- Notifies a url when you link to it on your site --><linkrel="webmention" href="https://example.com/webmention"><!-- Loads in an external HTML file into the current HTML file --><linkrel="import" href="/path/to/component.html"><!-- Open Search --><linkrel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title"><!-- Feeds --><linkrel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS"><linkrel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3"><!-- Prefetching, preloading, prebrowsing --><linkrel="dns-prefetch" href="//example.com/"><linkrel="preconnect" href="https://www.example.com/"><linkrel="prefetch" href="https://www.example.com/"><linkrel="prerender" href="https://example.com/"><linkrel="preload" href="image.png" as="image"><!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ --><!-- For IE 10 and below --><!-- Place favicon.ico in the root directory - no tag necessary --><!-- For IE 11, Chrome, Firefox, Safari, Opera --><linkrel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png"><linkrel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png"><linkrel="icon" type="image/png" sizes="96x96" href="/path/to/favicon-96x96.png"><metaproperty="fb:app_id" content="123456789"><metaproperty="og:url" content="https://example.com/page.html"><metaproperty="og:type" content="website"><metaproperty="og:title" content="Content Title"><metaproperty="og:image" content="https://example.com/image.jpg"><metaproperty="og:description" content="Description Here"><metaproperty="og:site_name" content="Site Name"><metaproperty="og:locale" content="en_US"><metaproperty="article:author" content=""><metacharset="utf-8"><metaproperty="op:markup_version" content="v1.0"><!-- The URL of the web version of your article --><linkrel="canonical" href="http://example.com/article.html"><!-- The style to be used for this article --><metaproperty="fb:article_style" content="myarticlestyle"><metaname="twitter:card" content="summary"><metaname="twitter:site" content="@site_account"><metaname="twitter:creator" content="@individual_account"><metaname="twitter:url" content="https://example.com/page.html"><metaname="twitter:title" content="Content Title"><metaname="twitter:description" content="Content description less than 200 characters"><metaname="twitter:image" content="https://example.com/image.jpg"><linkhref="https://plus.google.com/+YourPage" rel="publisher"><metaitemprop="name" content="Content Title"><metaitemprop="description" content="Content description less than 200 characters"><metaitemprop="image" content="https://example.com/image.jpg">Pinterest lets you prevent people from saving things from your website, according to their help center. The description is optional.
<metaname="pinterest" content="nopin" description="Sorry, you can't save from my website!"><linkrel="alternate" type="application/json+oembed"
href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=json"
title="oEmbed Profile: JSON"><linkrel="alternate" type="text/xml+oembed"
href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=xml"
title="oEmbed Profile: XML"><!-- Smart App Banner --><metaname="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"><!-- Disable automatic detection and formatting of possible phone numbers --><metaname="format-detection" content="telephone=no"><!-- Add to Home Screen --><metaname="apple-mobile-web-app-capable" content="yes"><metaname="apple-mobile-web-app-status-bar-style" content="black"><metaname="apple-mobile-web-app-title" content="App Title"><!-- Touch Icons --><!-- In most cases, one 180×180px touch icon in the head is enough --><linkrel="apple-touch-icon" href="/path/to/apple-touch-icon.png"><!-- Note: Safari on iOS 7 doesn’t add effects to icons. --><!-- Older versions of Safari will not add effects for icon files named with the -precomposed.png suffix. --><!-- Startup Image ( Deprecated ) --><linkrel="apple-touch-startup-image" href="/path/to/startup.png"><!-- iOS app deep linking --><metaname="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com"><linkrel="alternate" href="ios-app://APP-ID/http/url-sample.com"><!-- Pinned Site --><linkrel="mask-icon" href="/path/to/icon.svg" color="red"><metaname="theme-color" content="#E64545"><!-- Add to home screen --><metaname="mobile-web-app-capable" content="yes"><!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen --><!-- Android app deep linking --><metaname="google-play-app" content="app-id=package-name"><linkrel="alternate" href="android-app://package-name/http/url-sample.com"><linkrel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID"><!-- Disable translation prompt --><metaname="google" content="notranslate">Since Chrome 31, you can set up your web app to "app mode" like Safari.
<!-- Link to a manifest and define the manifest metadata. --><!-- The example of manifest.json could be found in the link below. --><linkrel="manifest" href="manifest.json"><!-- Define your web page as a web app --><metaname="mobile-web-app-capable" content="yes"><!-- Homescreen Icon --><linkrel="icon" sizes="192x192" href="highres-icon.png"><metahttp-equiv="x-ua-compatible" content="ie=edge"><metaname="skype_toolbar" content="skype_toolbar_parser_compatible"><!-- IE10: Disable link highlighting upon tap (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) --><metaname="msapplication-tap-highlight" content="no"><!-- Pinned sites (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) --><metaname="application-name" content="Sample Title"><metaname="msapplication-tooltip" content="A description of what this site does."><metaname="msapplication-starturl" content="http://example.com/index.html?pinned=true"><metaname="msapplication-navbutton-color" content="#FF3300"><metaname="msapplication-window" content="width=800;height=600"><metaname="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"><metaname="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"><metaname="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://example.com/path/to/file.xml"><metaname="msapplication-TileColor" content="#FF3300"><metaname="msapplication-TileImage" content="/path/to/tileimage.jpg"><metaname="msapplication-config" content="http://example.com/browserconfig.xml"><metaname="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile;polling-uri2=http://example.com/livetile2"><metaname="msapplication-task-separator" content="1"><!-- iOS --><metaproperty="al:ios:url" content="applinks://docs"><metaproperty="al:ios:app_store_id" content="12345"><metaproperty="al:ios:app_name" content="App Links"><!-- Android --><metaproperty="al:android:url" content="applinks://docs"><metaproperty="al:android:app_name" content="App Links"><metaproperty="al:android:package" content="org.applinks"><!-- Web Fallback --><metaproperty="al:web:url" content="http://applinks.org/documentation"><!-- More info: http://applinks.org/documentation/ --><!-- select rendering engine in order --><metaname="renderer" content="webkit|ie-comp|ie-stand"><!-- Locks the screen into the specified orientation --><metaname="x5-orientation" content="landscape/portrait"><!-- Display this page in fullscreen --><metaname="x5-fullscreen" content="true"><!-- Page will be displayed in "application mode"(fullscreen,etc.) --><metaname="x5-page-mode" content="app"><!-- Locks the screen into the specified orientation --><metaname="screen-orientation" content="landscape/portrait"><!-- Display this page in fullscreen --><metaname="full-screen" content="yes"><!-- UC browser will display images even if in "text mode" --><metaname="imagemode" content="force"><!-- Page will be displayed in "application mode"(fullscreen,forbiding gesture, etc.) --><metaname="browsermode" content="application"><!-- Disabled the UC browser's "night mode" in this page --><metaname="nightmode" content="disable"><!-- Simplify the page to reduce data transfer --><metaname="layoutmode" content="fitscreen"><!-- Disable the UC browser's feature of "scaling font up when there are many words in this page" --><metaname="wap-font-scale" content="no">Moving the href attribute to the beginning of an element improves compression when GZIP is enabled, because the href attribute is used in a, base and link tags.
Example:
<linkhref="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">- Atom HTML Head Snippets - Atom package for
HEADsnippets - Sublime Text HTML Head Snippets - Sublime Text package for
HEADsnippets - head-it - CLI interface for
HEADsnippets - vue-head - Manipulating the meta information of the
HEADtag for Vue.js
Open an issue or a pull request to suggest changes or additions.
The HEAD repository consists of two branches:
This branch consists of the README.md file that is automatically reflected on the <head> Cheat Sheet website. All changes to the content of the cheat sheet as such should be directed to this file.
Please follow these steps for pull requests:
- Modify only one tag, or one related set of tags at a time
- Use double quotes on attributes
- Don't include a trailing slash in self-closing elements — the HTML5 spec says they're optional
- Consider including a link to documentation that supports your change
This branch is responsible for the <head> Cheat Sheet website. We use Jekyll to deploy the README.md Markdown file through GitHub Pages. All website related modifications must be directed here.
You might want to go through the Jekyll Docs and understand how Jekyll works before working on this branch.
Check out all the super awesome contributors.
To the extent possible under law, Josh Buchea has waived all copyright and related or neighboring rights to this work.