HEAD

A collection of HTML head elements.

Below are the essential tags for basic, minimalist websites:

  1. <meta charset="utf-8">
  2. <meta http-equiv="x-ua-compatible" content="ie=edge">
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  4. <title>Page Title</title>

Elements

  1. <!-- Document Title -->
  2. <title>Page Title</title>
  4. <!-- Base URL to use for all relative URLs contained within the document -->
  5. <base href="https://example.com/page.html">
  7. <!-- External CSS -->
  8. <link rel="stylesheet" href="styles.css">
  10. <!-- In-document CSS -->
  11. <style>
  12.   /* ... */
  13. </style>
  15. <!-- JavaScript -->
  16. <script src="script.js"></script>

Meta Elements

  1. <meta charset="utf-8">
  2. <meta http-equiv="x-ua-compatible" content="ie=edge">
  3. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  4. <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  5. <meta name="application-name" content="Application Name">
  6. <meta name="description" content="150 chars">
  7. <meta name="subject" content="your website's subject">
  8. <meta name="robots" content="index,follow,noodp">
  9. <meta name="googlebot" content="index,follow">
  10. <meta name="google" content="nositelinkssearchbox">
  11. <meta name="google-site-verification" content="verification_token">
  12. <meta name="generator" content="program">
  13. <meta name="abstract" content="">
  14. <meta name="topic" content="">
  15. <meta name="summary" content="">
  16. <meta name="classification" content="business">
  17. <meta name="url" content="https://example.com/">
  18. <meta name="identifier-URL" content="https://example.com/">
  19. <meta name="directory" content="submission">
  20. <meta name="category" content="">
  21. <meta name="coverage" content="Worldwide">
  22. <meta name="distribution" content="Global">
  23. <meta name="rating" content="General">
  24. <meta name="referrer" content="never">
  25. <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
  27. <!-- Disable automatic detection and formatting of possible phone numbers -->
  28. <meta name="format-detection" content="telephone=no">
  30. <!-- Geo tags -->
  31. <meta name="ICBM" content="latitude, longitude" />
  32. <meta name="geo.position" content="latitude;longitude" />
  33. <meta name="geo.region" content="country[-state]" /><!-- Country code (ISO 3166-1): mandatory, state code (ISO 3166-2): optional; eg. content="US" / content="US-NY" -->
  34. <meta name="geo.placename" content="city/town" /><!-- eg. content="New York City" -->

Below are the meta attributes which are not recommended for use:

  1. <!-- Used to declare the document language, but not well supported. Better to use <html lang=""> -->
  2. <meta name="language" content="en">
  4. <!-- Google disregards & Bing considers it an indicator of spam -->
  5. <meta name="keywords" content="your,keywords,here,comma,separated,no,spaces">
  7. <!-- No evidence of current use in any search engines -->
  8. <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">
  10. <!-- Provides an easy way for spam bots to harvest email addresses -->
  11. <meta name="reply-to" content="email@example.com">
  13. <!-- Better to use <link rel="author"> or humans.txt file -->
  14. <meta name="author" content="name, email@example.com">
  15. <meta name="designer" content="">
  16. <meta name="owner" content="">
  18. <!-- Tells search bots to revisit the page after a period. This is not supported because most Search Engines now use random intervals for re-crawling a webpage -->
  19. <meta name="revisit-after" content="7 days">
  21. <!-- Google strongly advises not to use this. Better to set up server-side (e.g. Apache, nginx) redirects instead -->
  22. <meta http-equiv="refresh" content="300;url=https://example.com/">
  24. <!-- Cache Control -->
  25. <!-- Better to configure cache control server side -->
  26. <meta http-equiv="Expires" content="0">
  27. <meta http-equiv="Pragma" content="no-cache">
  28. <meta http-equiv="Cache-Control" content="no-cache">
  1. <link rel="copyright" href="copyright.html">
  2. <link rel="stylesheet" href="https://example.com/styles.css">
  3. <link rel="alternate" href="https://feeds.feedburner.com/martini" type="application/rss+xml" title="RSS">
  4. <link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
  5. <link rel="alternate" href="https://es.example.com/" hreflang="es">
  6. <link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
  7. <link rel="me" href="mailto:name@example.com">
  8. <link rel="me" href="sms:+15035550125">
  9. <link rel="archives" href="https://example.com/2003/05/" title="May 2003">
  10. <link rel="index" href="https://example.com/" title="DeWitt Clinton">
  11. <link rel="start" href="https://example.com/photos/pattern_recognition_1_about/" title="Pattern Recognition 1">
  12. <link rel="prev" href="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/" title="OpenSearch and OpenID? A sure way to get my attention.">
  13. <link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
  14. <link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">
  15. <link rel="first" href="https://example.com/atomFeed.php">
  16. <link rel="next" href="https://example.com/atomFeed.php?page=4">
  17. <link rel="previous" href="https://example.com/atomFeed.php?page=2">
  18. <link rel="last" href="https://example.com/atomFeed.php?page=147">
  19. <link rel="shortlink" href="https://example.com/?p=43625">
  20. <link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html">
  21. <link rel="amphtml" href="https://www.example.com/url/to/amp-version.html">
  22. <link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
  23. <link rel="pingback" href="https://example.com/xmlrpc.php">
  24. <link rel="webmention" href="https://example.com/webmention">
  25. <link rel="manifest" href="manifest.json">
  26. <link rel="author" href="humans.txt">
  27. <link rel="import" href="component.html">
  29. <!-- Prefetching, preloading, prebrowsing -->
  30. <link rel="dns-prefetch" href="//example.com/">
  31. <link rel="preconnect" href="https://www.example.com/">
  32. <link rel="prefetch" href="https://www.example.com/">
  33. <link rel="prerender" href="https://example.com/">
  34. <link rel="subresource" href="styles.css">
  35. <link rel="preload" href="image.png">
  36. <!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->

Below are the link relations which are not recommended for use:

  1. <link rel="shortcut icon" href="path/to/favicon.ico">

Favicons

  1. <!-- For IE 10 and below -->
  2. <!-- No link, just place a file called favicon.ico in the root directory -->
  4. <!-- For IE 11, Chrome, Firefox, Safari, Opera -->
  5. <link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">
  6. <link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">
  7. <link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">
  8. <link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png">
  9. <link rel="icon" href="path/to/favicon-192.png" sizes="192x192" type="image/png">
  10. <!-- More info: https://bitsofco.de/all-about-favicons-and-touch-icons/ -->

Social

Facebook / Open Graph

  1. <meta property="fb:app_id" content="123456789">
  2. <meta property="og:url" content="https://example.com/page.html">
  3. <meta property="og:type" content="website">
  4. <meta property="og:title" content="Content Title">
  5. <meta property="og:image" content="https://example.com/image.jpg">
  6. <meta property="og:description" content="Description Here">
  7. <meta property="og:site_name" content="Site Name">
  8. <meta property="og:locale" content="en_US">
  9. <meta property="article:author" content="">
  10. <!-- Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup -->
  11. <!-- Open Graph: http://ogp.me/ -->

Facebook / Instant Articles

  1. <meta charset="utf-8">
  2. <meta property="op:markup_version" content="v1.0">
  4. <!-- The URL of the web version of your article -->
  5. <link rel="canonical" href="http://example.com/article.html">
  7. <!-- The style to be used for this article -->
  8. <meta property="fb:article_style" content="myarticlestyle">

Twitter

  1. <meta name="twitter:card" content="summary">
  2. <meta name="twitter:site" content="@site_account">
  3. <meta name="twitter:creator" content="@individual_account">
  4. <meta name="twitter:url" content="https://example.com/page.html">
  5. <meta name="twitter:title" content="Content Title">
  6. <meta name="twitter:description" content="Content description less than 200 characters">
  7. <meta name="twitter:image" content="https://example.com/image.jpg">
  8. <!-- More info: https://dev.twitter.com/cards/getting-started -->
  9. <!-- Validate: https://dev.twitter.com/docs/cards/validation/validator -->

Google+ / Schema.org

  1. <link href="https://plus.google.com/+YourPage" rel="publisher">
  2. <meta itemprop="name" content="Content Title">
  3. <meta itemprop="description" content="Content description less than 200 characters">
  4. <meta itemprop="image" content="https://example.com/image.jpg">

OEmbed

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

Browser/Platform

Apple iOS

  1. <!-- Smart App Banner -->
  2. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
  4. <!-- Disable automatic detection and formatting of possible phone numbers -->
  5. <meta name="format-detection" content="telephone=no">
  7. <!-- Add to Home Screen -->
  8. <meta name="apple-mobile-web-app-capable" content="yes">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <meta name="apple-mobile-web-app-title" content="App Title">
  12. <!-- Touch Icons -->
  13. <link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">
  14. <link rel="apple-touch-icon-precomposed" href="path/to/apple-touch-icon-precomposed.png">
  15. <!-- In most cases, one 180×180px touch icon in the head is enough -->
  16. <!-- If you use art-direction and/or want to have different content for each device, you can add more touch icons -->
  18. <!-- Startup Image -->
  19. <link rel="apple-touch-startup-image" href="path/to/startup.png">
  21. <!-- More info: https://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/articles/metatags.html -->

Apple Safari

  1. <!-- Pinned Site -->
  2. <link rel="mask-icon" href="path/to/icon.svg" color="red">

Google Android

  1. <meta name="theme-color" content="#E64545">
  3. <!-- Add to homescreen -->
  4. <meta name="mobile-web-app-capable" content="yes">
  5. <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

Google Chrome

  1. <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">
  3. <!-- Disable translation prompt -->
  4. <meta name="google" value="notranslate">

Microsoft Internet Explorer

  1. <meta http-equiv="x-ua-compatible" content="ie=edge">
  2. <meta http-equiv="cleartype" content="on">
  3. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
  5. <!-- Disable link highlighting on IE 10 on Windows Phone (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) -->
  6. <meta name="msapplication-tap-highlight" content="no">
  8. <!-- Pinned sites (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) -->
  9. <meta name="application-name" content="Contoso Pinned Site Caption">
  10. <meta name="msapplication-tooltip" content="Example Tooltip Text">
  11. <meta name="msapplication-starturl" content="/">
  13. <meta name="msapplication-config" content="http://example.com/browserconfig.xml">
  15. <meta name="msapplication-allowDomainApiCalls" content="true">
  16. <meta name="msapplication-allowDomainMetaTags" content="true">
  17. <meta name="msapplication-badge" content="frequency=30; polling-uri=http://example.com/id45453245/polling.xml">
  18. <meta name="msapplication-navbutton-color" content="#FF3300">
  19. <meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile">
  20. <meta name="msapplication-square150x150logo" content="path/to/logo.png">
  21. <meta name="msapplication-square310x310logo" content="path/to/largelogo.png">
  22. <meta name="msapplication-square70x70logo" content="path/to/tinylogo.png">
  23. <meta name="msapplication-wide310x150logo" content="path/to/widelogo.png">
  24. <meta name="msapplication-task" content="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico">
  25. <meta name="msapplication-task-seperator" content="1">
  26. <meta name="msapplication-TileColor" content="#FF3300">
  27. <meta name="msapplication-TileImage" content="path/to/tileimage.jpg">
  28. <meta name="msapplication-window" content="width=1024;height=768">

Microsoft Internet Explorer (LEGACY DO NOT USE)

  1. <!-- Disable the image toolbar when you mouse over images in IE 6 (https://msdn.microsoft.com/en-us/library/ms532986(v=vs.85).aspx) -->
  2. <meta http-equiv="imagetoolbar" content="no">
  4. <!-- Disable Windows theming to form inputs/buttons (https://support.microsoft.com/en-us/kb/322240) -->
  5. <meta name="MSThemeCompatible" content="no">
  7. <!-- Disable a feature that only appeared on IE 6 beta (https://stackoverflow.com/q/2167301) -->
  8. <meta name="MSSmartTagsPreventParsing" content="true">
  10. <!-- Interpage Transitions (https://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx) -->
  11. <meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=2)">
  12. <meta http-equiv="Page-Exit" content="revealtrans(duration=3,transition=12)">
  13. <meta http-equiv="Site-Enter" content="revealtrans(duration=2,transition=2)">
  14. <meta http-equiv="Site-Exit" content="revealtrans(duration=3,transition=12)">

360 Browser

  1. <!-- select rendering engine in order -->
  2. <meta name="renderer" content="webkit|ie-comp|ie-stand">

UC Mobile Browser

  1. <!-- Locks the screen into the specified orientation -->
  2. <meta name="screen-orientation" content="landscape/portrait">
  3. <!-- Display this page in fullscreen -->
  4. <meta name="full-screen" content="yes">
  5. <!-- UC browser will display images even if in "text mode" -->
  6. <meta name="imagemode" content="force">
  7. <!-- Page will be displayed in "application mode"(fullscreen,forbiding gesture, etc.) -->
  8. <meta name="browsermode" content="application">
  9. <!-- Disabled the UC browser's "night mode" in this page -->
  10. <meta name="nightmode" content="disable">
  11. <!-- Simplify the page to reduce data transfer -->
  12. <meta name="layoutmode" content="fitscreen">
  13. <!-- Disable the UC browser's feature of "scaling font up when there are many words in this page" -->
  14. <meta name="wap-font-scale" content="no">

QQ Mobile Browser

  1. <!-- Locks the screen into the specified orientation -->
  2. <meta name="x5-orientation" content="landscape/portrait">
  3. <!-- Display this page in fullscreen -->
  4. <meta name="x5-fullscreen" content="true">
  5. <!-- Page will be displayed in "application mode"(fullscreen,etc.) -->
  6. <meta name="x5-page-mode" content="app">
  1. <!-- iOS -->
  2. <meta property="al:ios:url" content="applinks://docs">
  3. <meta property="al:ios:app_store_id" content="12345">
  4. <meta property="al:ios:app_name" content="App Links">
  5. <!-- Android -->
  6. <meta property="al:android:url" content="applinks://docs">
  7. <meta property="al:android:app_name" content="App Links">
  8. <meta property="al:android:package" content="org.applinks">
  9. <!-- Web Fallback -->
  10. <meta property="al:web:url" content="http://applinks.org/documentation">
  11. <!-- More info: http://applinks.org/documentation/ -->

Notes

Performance

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:

  1. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

Other Resources

Author

Josh Buchea