🤯 HEAD

A simple guide to HTML <head> elements

Recommended Minimum
Elements
Meta
Link
Icons
Social
Browsers / Platforms
Browsers (Chinese)
App Links
Other Resources
Related Projects
Other Formats
Translations
Contributing
- Contributors
Author
License

Recommended Minimum

Below are the essential elements for any web document (websites/apps):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  The above 2 meta tags *must* come first in the <head>
  to consistently ensure proper document rendering.
  Any other head element should come *after* these tags.
 -->
<title>Page Title</title>

meta charset - defines the encoding of the website, utf-8 is the standard

meta name="viewport" - viewport settings related to mobile responsiveness

width=device-width - use the physical width of the device (great for mobile!)

initial-scale=1 - the initial zoom, 1 means no zoom

⬆ back to top

Elements

Valid <head> elements include meta, link, title, style, script, noscript, and base.

These elements provide information for how a document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, etc.

<!--
  Set the character encoding for this document, so that
  all characters within the UTF-8 space (such as emoji)
  are rendered correctly.
-->
<meta charset="utf-8">

<!-- Set the document's title -->
<title>Page Title</title>

<!-- Set the base URL for all relative URLs within the document -->
<base href="https://example.com/page.html">

<!-- Link to an external CSS file -->
<link rel="stylesheet" href="styles.css">

<!-- Used for adding in-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript & No-JavaScript tags -->
<script src="script.js"></script>
<script>
  // function(s) go here
</script>
<noscript>
  <!-- No JS alternative -->
</noscript>

⬆ back to top

Link

<!-- Points to an external stylesheet -->
<link rel="stylesheet" href="https://example.com/styles.css">

<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="https://example.com/article/?page=2">

<!-- Links to an AMP HTML version of the current document -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

<!-- Links to a JSON file that specifies "installation" credentials for the web applications -->
<link rel="manifest" href="manifest.json">

<!-- Links to information about the author(s) of the document -->
<link rel="author" href="humans.txt">

<!-- Refers to a copyright statement that applies to the link's context -->
<link rel="license" href="copyright.html">

<!-- Gives a reference to a location in your document that may be in another language -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Provides information about an author or another person -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:[email protected]">
<link rel="me" href="sms:+15035550125">

<!-- Links to a document that describes a collection of records, documents, or other materials of historical interest -->
<link rel="archives" href="https://example.com/archives/">

<!-- Links to top level resource in an hierarchical structure -->
<link rel="index" href="https://example.com/article/">

<!-- Provides a self reference - useful when the document has multiple possible references -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">

<!-- The first, last, previous, and next documents in a series of documents, respectively -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">

<!-- Used when a 3rd party service is utilized to maintain a blog -->
<link rel="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 -->
<link rel="pingback" href="https://example.com/xmlrpc.php">

<!-- Notifies a URL when you link to it on your document -->
<link rel="webmention" href="https://example.com/webmention">

<!-- Enables posting to your own domain using a Micropub client -->
<link rel="micropub" href="https://example.com/micropub">

<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">

<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->
<!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image">

📖 Link Relations

⬆ back to top

Icons

<!-- For IE 10 and below -->
<!-- Place favicon.ico in the root directory - no tag necessary -->

<!-- Icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png">

<!-- Apple Touch Icon (reuse 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Safari Pinned Tab Icon -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

⬆ back to top

Social

Facebook Open Graph

Most content is shared to Facebook as a URL, so it's important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook. More about Facebook Open Graph Markup

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="A description of what is in the image (not a caption)">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">

📖 Open Graph protocol
🛠 Test your page with the Facebook Sharing Debugger

Twitter Card

With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. More about Twitter Cards

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:image:alt" content="A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.">

📖 Getting started with cards — Twitter Developers
🛠 Test your page with the Twitter Card Validator

Twitter Privacy

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 -->
<meta name="twitter:dnt" content="on">

Schema.org

<html lang="" itemscope itemtype="https://schema.org/Article">
    <head>
      <link rel="author" href="">
      <link rel="publisher" href="">
      <meta itemprop="name" content="Content Title">
      <meta itemprop="description" content="Content description less than 200 characters">
      <meta itemprop="image" content="https://example.com/image.jpg">

Note: These meta tags require the itemscope and itemtype attributes to be added to the <html> tag.

📖 Getting Started - schema.org
🛠 Test your page with the Rich Results Test

Pinterest lets you prevent people from saving things from your website, according to their help center. The description is optional.

<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">

Facebook Instant Articles

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- The URL of the web version of your article -->
<link rel="canonical" href="https://example.com/article.html">

<!-- The style to be used for this article -->
<meta property="fb:article_style" content="myarticlestyle">

📖 Creating Articles - Instant Articles
📖 Code Samples - Instant Articles

OEmbed

<link rel="alternate" type="application/json+oembed"
  href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
  title="oEmbed Profile: JSON">
<link rel="alternate" type="text/xml+oembed"
  href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
  title="oEmbed Profile: XML">

📖 oEmbed format

QQ/Wechat

Users share web pages to qq wechat will have a formatted message

<meta itemprop="name" content="share title">
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="share content">

📖 Code Format Docs

⬆ back to top

Browsers / Platforms

Apple iOS

<!-- Smart App Banner -->
<meta name="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 -->
<meta name="format-detection" content="telephone=no">

<!-- Launch Icon (180x180px or larger) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Launch Screen Image -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">

<!-- Launch Icon Title -->
<meta name="apple-mobile-web-app-title" content="App Title">

<!-- Enable standalone (full-screen) mode -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status bar appearance (has no effect unless standalone mode is enabled) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- iOS app deep linking -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

📖 Configuring Web Applications

Google Android

<meta name="theme-color" content="#E64545">

<!-- Add to home screen -->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

<!-- Android app deep linking -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">

Google Chrome

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">

<!-- Disable translation prompt -->
<meta name="google" content="notranslate">

Microsoft Internet Explorer

<!-- Force IE 8/9/10 to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Disable automatic detection and formatting of possible phone numbers by Skype Toolbar browser extension -->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<!-- Windows Tiles -->
<meta name="msapplication-config" content="/browserconfig.xml">

Minimum required xml markup for browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>

📖 Browser configuration schema reference

⬆ back to top

Browsers (Chinese)

360 Browser

<!-- Select rendering engine order -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ Mobile Browser

<!-- Locks the screen into the specified orientation -->
<meta name="x5-orientation" content="landscape/portrait">

<!-- Display this document in fullscreen -->
<meta name="x5-fullscreen" content="true">

<!-- Document will be displayed in "application mode" (fullscreen, etc.) -->
<meta name="x5-page-mode" content="app">

UC Mobile Browser

<!-- Locks the screen into the specified orientation -->
<meta name="screen-orientation" content="landscape/portrait">

<!-- Display this document in fullscreen -->
<meta name="full-screen" content="yes">

<!-- UC browser will display images even if in "text mode" -->
<meta name="imagemode" content="force">

<!-- Document will be displayed in "application mode"(fullscreen, forbidding gesture, etc.) -->
<meta name="browsermode" content="application">

<!-- Disabled the UC browser's "night mode" for this document -->
<meta name="nightmode" content="disable">

<!-- Simplify the document to reduce data transfer -->
<meta name="layoutmode" content="fitscreen">

<!-- Disable the UC browser's feature of "scaling font up when there are many words in this document" -->
<meta name="wap-font-scale" content="no">

📖 UC Browser Docs

⬆ back to top

App Links

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">

<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">

<!-- Web fall back -->
<meta property="al:web:url" content="https://applinks.org/documentation">

📖 App Links

⬆ back to top

Other Resources

⬆ back to top

Related Projects

Atom HTML Head Snippets - Atom package for HEAD snippets
Sublime Text HTML Head Snippets - Sublime Text package for HEAD snippets
head-it - CLI interface for HEAD snippets
vue-head - Manipulating the meta information of the HEAD tag for Vue.js

⬆ back to top

Other Formats

📄 PDF

⬆ back to top

🌐 Translations

🇮🇩 Bahasa
🇧🇷 Brazilian Portuguese
🇨🇳 Chinese (Simplified)
🇩🇪 German
🇮🇹 Italian
🇯🇵 Japanese
🇰🇷 Korean
🇷🇺 Russian/Русский
🇪🇸 Spanish
🇹🇷 Turkish/Türkçe

⬆ back to top

🤝 Contributing

Open an issue or a pull request to suggest changes or additions.

Guide

The HEAD repository consists of two branches:

1. `master`

This branch consists of the README.md file that is reflected on the htmlhead.dev website. All changes to the content of the guide should be made in this file.

Please follow these steps for pull requests:

{:.list-style-default}

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

2. `gh-pages`

This branch is responsible for the htmlhead.dev website. We use Jekyll to deploy the README.md markdown file to GitHub Pages. All website related modifications should be made in this branch.

You may find it helpful to review the Jekyll Docs and understand how Jekyll works before working in this branch.

🌟 Contributors

Check out all the super awesome contributors 🤩

👤 Author

Josh Buchea

GitHub: @joshbuchea
Twitter: @joshbuchea

💛 Support

If this project was helpful for you or your organization, please considering supporting my work directly:

Everything helps, thanks! 🙏

— Josh

📝 License

⬆ back to top

Here is an example of a curated HEAD. I will give some explanations later or check the respective sites, twitter, fb

NOTE

html5, quotes are no more required unless special chars : = ; / (script-type neither)
the order of the first line is important for some problematic search engines
not all tags are required for twitter, twitter can understand some usual one or og:
some twitter content are without a dot!
for the icon, that's totally crazy, the block is curated, ~1 year ago, some usual are not missing, order is very important as some are omitted intentionally, I'll try to find the site to produce and the explanations, need to be enhanced as MS 10 has new one.
and for SEO, length, type, etc of the contents are important

<!doctype html>
<html lang=fr prefix="og: http://ogp.me/ns#">
<head>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1.0">
<meta http-equiv=content-type content="text/html;charset=utf-8">

<title>Stop wasting paper</title>
<meta name=description content="How can we stop wasting paper at the office">
<meta name=keywords content="waste, paper, wasting paper, environment">
<meta name=title content="Stop to waste paper">
<meta name=author content="John Doe">

<meta name=twitter:card content=summary>
<meta name=twitter:site content="@examplecom">
<meta property=og:title content="Stop to waste paper">
<meta property=og:description content="How can we stop wasting paper at the office.">
<meta name=twitter:creator content="@mrjohnnydoe">

<meta property=og:image content="https://www.example.com/apple-touch-icon-180x180.png">
<meta property=og:image:type content="image/png">
<meta property=og:image:width content=180>
<meta property=og:image:height content=180>

<meta property=og:site_name content=example.com>
<meta property=og:url content="https://www.example.com/">
<meta property=og:locale content=fr_FR>
<meta property=og:type content=website>

<meta name=robots content="index,follow">

<link rel=canonical href="https://www.example.com/">

<base href="https://www.example.com/"><!--[if lte IE 6]></base><![endif]-->

<link rel=stylesheet href=mynice.css>

<link rel=apple-touch-icon sizes=57x57 href="/apple-touch-icon-57x57.png">
<link rel=apple-touch-icon sizes=60x60 href="/apple-touch-icon-60x60.png">
<link rel=apple-touch-icon sizes=72x72 href="/apple-touch-icon-72x72.png">
<link rel=apple-touch-icon sizes=76x76 href="/apple-touch-icon-76x76.png">
<link rel=apple-touch-icon sizes=114x114 href="/apple-touch-icon-114x114.png">
<link rel=apple-touch-icon sizes=120x120 href="/apple-touch-icon-120x120.png">
<link rel=apple-touch-icon sizes=144x144 href="/apple-touch-icon-144x144.png">
<link rel=apple-touch-icon sizes=152x152 href="/apple-touch-icon-152x152.png">
<link rel=apple-touch-icon sizes=180x180 href="/apple-touch-icon-180x180.png">
<link rel=icon type="image/png" sizes=16x16 href="/favicon-16x16.png">
<link rel=icon type="image/png" sizes=32x32 href="/favicon-32x32.png">
<link rel=icon type="image/png" sizes=96x96 href="/favicon-96x96.png">
<link rel=icon type="image/png" sizes=194x194 href="/favicon-194x194.png">
<link rel=icon type="image/png" sizes=192x192 href="/android-chrome-192x192.png">
<link rel=manifest href="/manifest.json">
<link rel=mask-icon href="/safari-pinned-tab.svg" color="#ff6600">
<meta name=apple-mobile-web-app-title content=example.com>
<meta name=application-name content=example.com>
<meta name=msapplication-TileColor content="#ffffff">
<meta name=msapplication-TileImage content="/mstile-144x144.png">
<meta name=theme-color content="#ffffff">

</head>
<body>
<p>Hello World!</p>
</body>
</html>

add explanation for each item

This is great work, but it would be great if each item has an explanation for the reason to use (or not). Some items may not apply in particular cases and having an explanation would help decide when to use it.

One example, if I'm not providing a feed, then alternate links would not apply.

opened by apsoto 16
viewport meta tag doesn't reflect current best use for iOS

with the iPhone X being over a year old and the iPad now having safe areas as well, changing the default viewport tag to something like 'initial-scale=1, viewport-fit=cover' would be more appropriate.

opened by e110c0 14
Split into files

This is pretty awesome! I usually end of having a ton a gists with different things in them.

I was wondering if there is any plan to break these out into files? Then the can be pulled directly into a project via their https://raw.githubusercontent.com URL.

I use a plugin for Sublime Text that lets me fetch a URL and copy the contents to the current window. This would be a good project to have a bunch of snippets of text for.

For example, if you are only interested in adding the head meta for Apple iOS, then you could just request the contents of that single file/piece.

Is there any interest in that type of workflow for anyone else?

opened by james2doyle 14

Curated Sample HEAD

opened by TraderStf 10

move "rel" attribute to end of tag
Moving the rel attribute to the end saves a few bytes when using gzip compression.

-rw-r--r-- 1 marcobiedermann staff 4853 May 23 20:28 after.md.gz -rw-r--r-- 1 marcobiedermann staff 4855 May 23 20:29 before.md.gz

In this example it does only matter 2 bytes but this will increase when used in a real world website. Because href does occur more often than rel, e. g. in a tags this will reduce the overall filesize. I know this does not seem like a lot, but in my opinion it is a best practice.

Also Google uses this pattern:

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
opened by marcobiedermann 8
Meta viewport is not same as mentioned version by bootstrap.

Hi,

Your version of meta viewport (<meta name="viewport" content="width=device-width, initial-scale=1">) is not same as mentioned version in bootstrap docs (<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">).

I'm wondering which one is better option?

opened by dehghani-mehdi 7
rel-me
A subset of the XFN microformat

http://microformats.org/wiki/rel-me

<link rel="me" href="mailto:XXX" /> <link rel="me" href="sms:+123456789" />

also related: http://microformats.org/wiki/RelMeAuth and http://microformats.org/wiki/web_sign-in
opened by jasonkarns 7
Add viewport-fit=cover
the viewport-fit=cover is a viewport meta value that enable the usage of environment variables env() inside CSS, in order to handle rounded display and notches (margin and paddings). This value is currently supported by Chrome and Safari mobile, and i think it should be always present to handle today's mobile devices screens.

EXAMPLE

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

CSS SPEC https://drafts.csswg.org/css-round-display/

ADDITIONAL INFO HERE https://www.codewall.co.uk/css-env-variables-for-todays-edge-screen-devices/
opened by equinusocio 6
DNS prefetching

As you mentioned

"A list of everything that could go in your head"

. So, why not include DNS prefetching to it as it is quite an important one.

opened by adityasiwan 6
Recommended minimal tags

I think you should add a section for the minimal websites to clarify which tags are essential. I would argue that these 5 tags are pretty much a necessity for most websites today. The first 3 especially, the last 2 being of lesser importance but still pretty critical and easy to implement. Just my recommendation.

opened by ghost 6
Language Specification in Header

Option to specify the language is missing, without that Chrome cannot suggest the full page translation also the content rendering may face some problem or performance problem as browser will have to identify it (maybe).

opened by kailashvele 5
Removed deprecated rel types 'first' and 'last'

According to https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types first and last are deprecated. They are also no longer listed on https://html.spec.whatwg.org/multipage/links.html#linkTypes

A discussion about this can be found on https://stackoverflow.com/q/42841618/534883

opened by PitWenkin 0
Add more IndieWeb meta tags to page, modify rel=me comment

I noticed that the README.md file links to the Webmention specification, a method of facilitating comments that are published on one's own site and sent to another site. This specification is one of a few in active use by the IndieWeb community that enables a more social, distirbuetd web.

I have added meta tags that are used for IndieAuth and Microsub, the former a W3C recommendation for identifying one's self with a URL and the latter a draft standard for enabling social readers. I have also added links to relevant resources to some comments, such as the comments for RelMeAuth and Webmention, pointing people to further information.

opened by capjamesg 0

Meta tag order in

Is there any official source(s) defining meta tag orders in <head> tag such as reported below or is it a best practice / recommandation?

<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  The above 2 meta tags *must* come first in the <head>
  to consistently ensure proper document rendering.
  Any other head element should come *after* these tags.
 -->

opened by adam314315 3