A list of everything that *could* go in the <head> of your document
- Recommended Minimum
- Elements
- Meta
- Link
- Favicons
- Social
- Browsers / Platforms
- Browsers (Chinese)
- App Links
- Notes
- Other Resources
- Related Projects
- Other Formats
- Translations
- Contributing
- 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. † Use the content="ie-edge" tag if your project must support Internet Explorer prior to version 11. --><title>Page Title</title>Valid <head> elements include meta, link, title, style, script, noscript, and base.
<!-- Set the character encoding for this document (if not set already), so that all characters within the UTF-8 space (such as emoji) are rendered correctly --><metacharset="utf-8"><!-- Set the document's title --><title>Page Title</title><!-- Base URL to use for all relative URLs contained within the document --><basehref="http://example.com/page.html"><!-- Link to external CSS file --><linkrel="stylesheet" href="styles.css"><!-- Used for adding in-document CSS --><style>/* ... */</style><!-- JavaScript & No-JavaScript tags --><scriptsrc="script.js"></script><script>// function(s) go here</script><noscript><!-- No JS alternative --></noscript><meta> elements provide information for how a document should be perceived, and rendered, by other technologies. e.g. bots, search engines, browsers, etc.
<metacharset="utf-8"><!-- Set the character encoding for this document (if not set already), so that all characters within the UTF-8 space (such as emoji) are rendered correctly --><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 resources 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 document (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 document --><metaname="google" content="notranslate"><!-- Verify website ownership --><metaname="google-site-verification" content="verification_token"><!-- Google Search Console --><metaname="yandex-verification" content="verification_token"><!-- Yandex Webmasters --><metaname="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center --><metaname="alexaVerifyID" content="verification_token"><!-- Alexa Console --><metaname="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console--><metaname="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web --><!-- Identify the software used to build the document (i.e. - WordPress, Dreamweaver) --><metaname="generator" content="program"><!-- Short description of your document's subject --><metaname="subject" content="your document's subject"><!-- Gives a general age rating based on the document's 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 a cookie on the client web browser for identification purposes --><metahttp-equiv="set-cookie" content="name=value; expires=date; path=url"><!-- Specifies the document 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 an external CSS style sheet --><linkrel="stylesheet" href="http://example.com/styles.css"><!-- Helps prevent duplicate content issues --><linkrel="canonical" href="http://example.com/2010/06/9-things-to-do-before-entering-social-media.html"><!-- Used to be included before the icon link, but it has been deprecated --><linkrel="shortlink" href="http://example.com/?p=42"><!-- Links to an AMP HTML version of the current document --><linkrel="amphtml" href="http://example.com/path/to/amp-version.html"><!-- Links to a JSON file that specifies "installation" credentials for the web applications --><linkrel="manifest" href="manifest.json"><!-- Links to information about the author(s) of the document --><linkrel="author" href="humans.txt"><!-- Refers to a copyright statement that applies to the link's 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"><!-- Provides 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="http://example.com/archives/"><!-- Links to top level resource in an hierarchical structure --><linkrel="index" href="http://example.com/"><!-- Provides a self reference - useful when the document has multiple possible references --><linkrel="self" type="application/atom+xml" href="http://example.com/atomFeed.php?page=3"><!-- The first, next, previous, and last documents in a series of documents, respectively --><linkrel="first" href="http://example.com/atomFeed.php"><linkrel="next" href="http://example.com/atomFeed.php?page=4"><linkrel="prev" href="http://example.com/atomFeed.php?page=2"><linkrel="last" href="http://example.com/atomFeed.php?page=147"><!-- Used when a 3rd party service is utilized to maintain a blog --><linkrel="EditURI" href="http://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="http://example.com/xmlrpc.php"><!-- Notifies a URL when you link to it on your document --><linkrel="webmention" href="http://example.com/webmention"><!-- Enables posting to your own domain using a Micropub client --><linkrel="micropub" href="http://example.com/micropub"><!-- Loads in an external HTML file into the current document --><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="http://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="http://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="http://example.com/page.html"><metaproperty="og:type" content="website"><metaproperty="og:title" content="Content Title"><metaproperty="og:image" content="http://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="">- 📖 Facebook Open Graph Markup
- 📖 Open Graph protocol
- 🛠 Test your page with the Facebook Sharing Debugger
<metaname="twitter:card" content="summary"><metaname="twitter:site" content="@site_account"><metaname="twitter:creator" content="@individual_account"><metaname="twitter:url" content="http://example.com/page.html"><metaname="twitter:title" content="Content Title"><metaname="twitter:description" content="Content description less than 200 characters"><metaname="twitter:image" content="http://example.com/image.jpg">- 📖 Getting started with cards — Twitter Developers
- 🛠 Test your page with the Twitter Card Validator
If you embed tweets in your website, Twitter can use information from your site to tailor content and suggestions to Twitter users. More about Twitter privacy options.
<!-- disallow Twitter from using your site's info for personalization purposes --><metaname="twitter:dnt" content="on"><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="http://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!"><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"><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"><!-- 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="/path/to/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"><!-- Select rendering engine order --><metaname="renderer" content="webkit|ie-comp|ie-stand"><!-- Locks the screen into the specified orientation --><metaname="x5-orientation" content="landscape/portrait"><!-- Display this document in fullscreen --><metaname="x5-fullscreen" content="true"><!-- Document will be displayed in "application mode" (full screen, etc.) --><metaname="x5-page-mode" content="app"><!-- Locks the screen into the specified orientation --><metaname="screen-orientation" content="landscape/portrait"><!-- Display this document in fullscreen --><metaname="full-screen" content="yes"><!-- UC browser will display images even if in "text mode" --><metaname="imagemode" content="force"><!-- Document will be displayed in "application mode"(full screen, forbidding gesture, etc.) --><metaname="browsermode" content="application"><!-- Disabled the UC browser's "night mode" for this document --><metaname="nightmode" content="disable"><!-- Simplify the document 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 document" --><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
- 🇧🇷 Brazilian Portuguese
- 🇨🇳 Chinese (Simplified)
- 🇮🇹 Italian
- 🇯🇵 Japanese
- 🇰🇷 Korean
- 🇷🇺 Russian/Русский
- 🇹🇷 Turkish/Türkçe
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 gethead.info 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 gethead.info website. We use Jekyll to deploy the README.md Markdown file through GitHub Pages. All website related modifications must be directed here.
You may want to go through the Jekyll Docs and understand how Jekyll works before working on this branch.
Check out all the super awesome contributors.
