DOCSEARCHbyAlgolia
Submit Docs

HEAD: HTML <head> Elements Guide

repository·master·Indexed 12 days ago

https://github.com/joshbuchea/head

A comprehensive guide and reference for HTML <head> elements, providing optimized meta tags and link configurations for browsers, platforms (iOS, Android), and social integrations. Includes best practices for element ordering, Open Graph metadata, Schema.org structured data, JSON-LD, and script loading behavior using async and defer.

Tokens
7.7K
Snippets
25
Records
26
Agent score
49%

What's inside HEAD

  1. Identify valid HTML head elements

    master

    The <head> section can contain the following elements to provide metadata, resource links, and instructions to browsers, search engines, and bots:

    • meta: Metadata (encoding, viewport, description, etc.)
    • link: Links to external resources (stylesheets, icons, canonical URLs, preconnect hints)
    • title: The document's title
    • style: In-document CSS
    • script: JavaScript
    • noscript: Fallback content for when JavaScript is disabled
    • base: Sets the base URL for all relative URLs in the document
    <meta charset="utf-8">
<title>Page Title</title>
<base href="https://example.com/page.html">
<link rel="stylesheet" href="styles.css">
<style>
  /* ... */
</style>
<script src="script.js"></script>
<script>
  // function(s) go here
</script>
<noscript>
  <!-- No JS alternative -->
</noscript>

  2. Configure Chinese Browser specific meta tags

    master

    Specific configurations for 360 Browser and QQ Mobile Browser.

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

<!-- QQ Mobile Browser: Lock screen orientation -->
<meta name="x5-orientation" content="landscape/portrait">

<!-- QQ Mobile Browser: Display in fullscreen -->
<meta name="x5-fullscreen" content="true">

<!-- QQ Mobile Browser: Display in "application mode" -->
<meta name="x5-page-mode" content="app">

  3. Configure Google Android specific meta tags

    master

    Optimize your site for Android browsers using theme-color and deep linking tags.

    Note: Similar to iOS, standalone behavior and theme-color are better defined using a Web App Manifest. The theme-color meta tag acts as a fallback for browsers not supporting the manifest theme_color property.

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

<!-- Add to home screen -->
<meta name="mobile-web-app-capable" content="yes">

<!-- 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">

  4. Configure UC Mobile Browser specific meta tags

    master

    UC Mobile Browser supports a wide range of meta tags to control orientation, fullscreen mode, image rendering, and layout behavior.

    <!-- UC Mobile Browser: Lock screen orientation -->
<meta name="screen-orientation" content="landscape/portrait">

<!-- UC Mobile Browser: Display in fullscreen -->
<meta name="full-screen" content="yes">

<!-- UC Mobile Browser: Display images even in "text mode" -->
<meta name="imagemode" content="force">

<!-- UC Mobile Browser: Display in "application mode" -->
<meta name="browsermode" content="application">

<!-- UC Mobile Browser: Disable "night mode" -->
<meta name="nightmode" content="disable">

<!-- UC Mobile Browser: Simplify document layout -->
<meta name="layoutmode" content="fitscreen">

<!-- UC Mobile Browser: Disable font scaling -->
<meta name="wap-font-scale" content="no">

  5. Replace link rel="amphtml" with modern alternatives

    master

    The <link rel="amphtml"> relation is no longer required for Google Top Stories and the AMP Project is largely dormant. Avoid using this for SEO purposes as the AMP Page Experience signal has been retired.

    <!-- DEPRECATED: Do not use -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

  6. Configure Apple iOS specific meta tags

    master

    Use specific <meta> and <link> tags to optimize your web application for iOS devices. This includes setting up Smart App Banners, disabling automatic phone number detection, defining launch icons, and configuring standalone mode.

    Note: For Progressive Web Apps (PWAs), it is recommended to use a Web App Manifest (<link rel="manifest">) for properties like apple-touch-icon and apple-mobile-web-app-title. The meta tags below serve as useful fallbacks for older iOS versions.

    <!-- 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="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">

<!-- Viewport fit for notched phones (iPhone X and later); add viewport-fit=cover to your existing viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<!-- 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">

  7. Configure Favicons and Touch Icons

    master

    To provide icons for browsers and mobile devices:

    • Legacy IE: Place favicon.ico in the root directory (no tag required).
    • Standard Icons: Use <link rel="icon" sizes="192x192" href="..."> for high-resolution icons.
    • Apple Touch Icons: Use <link rel="apple-touch-icon" href="..."> for iOS devices (you can reuse your 192px icon).
    <link rel="icon" sizes="192x192" href="/path/to/icon.png">
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

  8. Control script loading behavior

    master

    When placing <script> tags in the <head>, you can control how they affect HTML parsing and rendering using the async and defer attributes:

    • Standard (Blocking): <script src="..."></script> blocks HTML parsing and rendering until the script is fetched and executed.
    • Async: <script async src="..."></script> fetches the script in parallel and executes it as soon as it is available, potentially interrupting parsing.
    • Defer: <script defer src="..."></script> fetches the script in parallel but waits until the page has finished parsing before executing.
    • Hybrid: <script async defer src="..."></script> uses async in modern browsers with defer as a fallback for older ones.
    • Subresource Integrity (SRI): Use the integrity attribute to ensure the fetched resource hasn't been tampered with.

    Best Practice: Place <script> tags at the end of the <body> whenever possible to avoid blocking initial render.

    <!-- Blocks HTML parsing -->
<script src="script.js"></script>

<!-- Fetches in parallel, executes immediately -->
<script async src="script.js"></script>

<!-- Fetches in parallel, executes after parsing -->
<script defer src="script.js"></script>

<!-- Subresource Integrity -->
<script src="https://example.com/script.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"></script>

  9. Implement the recommended minimum HTML head elements

    master

    Every web document should include these essential elements to ensure proper character encoding and mobile responsiveness. These must be placed as early as possible in the <head> to ensure consistent rendering.

    • meta charset="utf-8": Defines the character encoding (UTF-8 is the standard).
    • meta name="viewport": Configures viewport settings for mobile responsiveness. Use width=device-width to match the device's physical width and initial-scale=1 for a 1:1 zoom level.
    • <title>: Sets the document title.
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>

  10. Migrate from apple-mobile-web-app-capable to mobile-web-app-capable

    master

    As of iOS 17.4, the non-standard apple-mobile-web-app-capable meta tag is deprecated. To enable standalone (full-screen) mode for web apps on iOS, use the standardized mobile-web-app-capable meta tag instead.

    <!-- Use this instead of apple-mobile-web-app-capable -->
<meta name="mobile-web-app-capable" content="yes">

  11. Replace RSD and Pingback with Webmention

    master

    For blog-related discovery and automated commenting, avoid using EditURI (RSD) and pingback. RSD is used by discontinued XML-RPC editors, and pingback is often disabled due to DDoS risks. Use Webmention instead.

    <!-- DEPRECATED: Use Webmention instead -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<link rel="pingback" href="https://example.com/xmlrpc.php">

  12. Implement Schema.org structured data

    master

    To provide structured data for search engines, use itemscope and itemtype on the <html> tag, then use itemprop on specific meta tags.

    Example for an Article:

    1. Add itemscope itemtype="https://schema.org/Article" to your <html> tag.
    2. Use <meta itemprop="name" content="...">, <meta itemprop="description" content="...">, and <meta itemprop="image" content="..."> within the <head>.
    <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">