Skip to content
BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

427 Commits
.github
.github
.prettierignore
.prettierignore
DEPRECATED.md
DEPRECATED.md
README.md
README.md

Repository files navigation

🤯 HEAD

A simple guide to HTML <head> elements

ContributorsCC0Follow @joshbuchea on Mastodon

Table of Contents

Recommended Minimum

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

<metacharset="utf-8"><metaname="viewport" content="width=device-width, initial-scale=1"><!-- The above 2 meta tags should come as early as possible 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

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.--><metacharset="utf-8"><!-- Set the document's title --><title>Page Title</title><!-- Set the base URL for all relative URLs within the document --><basehref="https://example.com/page.html"><!-- Link to an 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>

Recommended Order

The following is the recommended order of elements in the <head> for best performance and correct document rendering:

  1. <meta charset> — Character encoding declaration; must appear within the first 1024 bytes of the document
  2. <meta name="viewport"> — Viewport settings; declare early to ensure correct responsive rendering
  3. <title> — Document title; placed after encoding/viewport to prevent potential re-rendering
  4. Other <meta> tags (description, robots, etc.)
  5. Open Graph / Social meta tags
  6. <link rel="canonical"> and other <link> tags (excluding stylesheets and resource hints)
  7. <link rel="preconnect"> / <link rel="dns-prefetch"> — Resource hints; early to maximize their value
  8. <link rel="stylesheet"> — External CSS; stylesheets should come before scripts
  9. <link rel="icon"> — Favicons
  10. <script> — Scripts; use defer or async where possible to avoid blocking rendering
<head><metacharset="utf-8"><metaname="viewport" content="width=device-width, initial-scale=1"><title>Page Title</title><metaname="description" content="Page description"><!-- other meta tags --><!-- Open Graph / Social meta tags --><metaproperty="og:title" content="Page Title"><!-- other social meta tags --><linkrel="canonical" href="https://example.com/page.html"><!-- other link tags (excluding stylesheets and resource hints) --><linkrel="preconnect" href="https://example.com"><linkrel="dns-prefetch" href="https://example.com"><linkrel="stylesheet" href="styles.css"><linkrel="icon" href="favicon.ico"><scriptdefersrc="script.js"></script></head>

Meta

<!-- The following 2 meta tags should come as early as possible in the <head> to consistently ensure proper document rendering. Any other head element should come *after* these tags.--><metacharset="utf-8"><metaname="viewport" content="width=device-width, initial-scale=1"><!-- Allows control over where resources are loaded from. Place as early in the <head> as possible, as the tag only applies to resources that are declared after it.--><metahttp-equiv="Content-Security-Policy" content="default-src 'self'"><!-- Name of web application (only should be used if the website is used as an app) --><metaname="application-name" content="Application Name"><!-- Theme Color for Chrome, Firefox OS and Opera --><metaname="theme-color" content="#4285f4"><!-- Indicates the supported color schemes for the page (light, dark, or both) --><metaname="color-scheme" content="light dark"><!-- Short description of the document (limit to 150 characters) --><!-- This content *may* be used as a part of search engine 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="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"><!-- Geo tags --><metaname="ICBM" content="latitude, longitude"><!-- Geographic coordinates (latitude, longitude) in decimal degrees; eg. content="48.8566, 2.3522" --><metaname="geo.position" content="latitude;longitude"><!-- Geographic coordinates; latitude and longitude are separated by a semicolon --><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" --><!-- Web Monetization https://webmonetization.org/docs/getting-started --><metaname="monetization" content="$paymentpointer.example">

Note: Geo tags are not used by browsers directly — they are intended for search engines, web crawlers, and location-based services to understand the geographic relevance of a page's content. ICBM (named after the military ICBM address convention) and geo.position both express coordinates in decimal degrees; ICBM uses a comma separator while geo.position uses a semicolon. geo.region identifies the country (and optionally the state/region) using ISO codes, and geo.placename provides a human-readable place name.

Link

<!-- Points to an external stylesheet --><linkrel="stylesheet" href="https://example.com/styles.css"><!-- Helps prevent duplicate content issues --><linkrel="canonical" href="https://example.com/article/?page=2"><!-- Links to a Web App Manifest — the recommended way to define PWA metadata such as app name, icons, theme_color, and display mode --><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 Used for RelMeAuth, a distributed form of identity verification. See https://microformats.org/wiki/RelMeAuth to learn more --><linkrel="me" href="https://google.com/profiles/thenextweb" type="text/html"><linkrel="me" href="mailto:name@example.com"><linkrel="me" href="sms:+15035550125"><!-- Provides a self reference - useful when the document has multiple possible references --><linkrel="self" type="application/atom+xml" href="https://example.com/atom.xml"><!-- The previous, and next documents in a series of documents, respectively --><linkrel="prev" href="https://example.com/article/?page=1"><linkrel="next" href="https://example.com/article/?page=3"><!-- Notifies a URL when you link to it on your document More information at https://webmention.net --><linkrel="webmention" href="https://example.com/webmention"><!-- Enables posting to your own domain using a Micropub client  More information at https://indieweb.org/Micropub --><linkrel="micropub" href="https://example.com/micropub"><!-- Enables you to use your site with IndieAuth, an identity solution that lets you authenticate with your domain name. Read more at https://indieauth.net. --><linkrel="token_endpoint" href="https://example.com/token"><linkrel="authorization_endpoint" href="https://example.com/auth"><!-- 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 --><!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ --><linkrel="dns-prefetch" href="//example.com/"><linkrel="preconnect" href="https://www.example.com/"><linkrel="prefetch" href="https://www.example.com/"><linkrel="preload" href="image.png" as="image">

Note: The Web App Manifest (manifest.json) is the recommended, cross-platform way to declare installable web app properties — including name, icons, theme_color, and display mode — in a single file, instead of relying on multiple platform-specific <meta> tags.

Scripts

<!-- Scripts: place <script> tags at the end of <body> when possible. The following attributes control loading behavior when placed in <head>:--><!-- Blocks HTML parsing and content rendering until the script is fetched and executed --><scriptsrc="script.js"></script><!-- The script will be fetched in parallel with parsing and executed as soon as it is available (before parsing completes) --><scriptasyncsrc="script.js"></script><!-- The script will be fetched in parallel with parsing and executed when the page has finished parsing --><scriptdefersrc="script.js"></script><!-- async takes precedence in modern browsers; defer acts as a fallback for older browsers that don't support async --><scriptasyncdefersrc="script.js"></script><!-- Inline script --><script>// function(s) go here</script><!-- Subresource Integrity (SRI): use the integrity attribute to verify that the fetched resource has been delivered without unexpected manipulation --><scriptsrc="https://example.com/script.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"></script>

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 --><linkrel="icon" sizes="192x192" href="/path/to/icon.png"><!-- Apple Touch Icon (reuse 192px icon.png) --><linkrel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

Social

Open Graph

The Open Graph protocol is the de facto standard for controlling how your content appears when shared on social platforms. Originally created by Facebook, it's now consumed by most major platforms — including LinkedIn, X (as a fallback when Twitter Card tags are absent), Discord, Slack, iMessage, Mastodon, Bluesky, and WhatsApp.

<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:image:alt" content="A description of what is in the image (not a caption)"><metaproperty="og:description" content="Description Here"><metaproperty="og:site_name" content="Site Name"><metaproperty="og:locale" content="en_US"><metaproperty="article:author" content="">

Schema.org

<htmllang="" itemscopeitemtype="https://schema.org/Article"><head><linkrel="author" href=""><linkrel="publisher" href=""><metaitemprop="name" content="Content Title"><metaitemprop="description" content="Content description less than 200 characters"><metaitemprop="image" content="https://example.com/image.jpg">

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

Google JSON-LD Schema

The following is used by Google to help provide your site with a knowledge graph result when someone Googles you (this is the pane to the right of the search results that typically appears for larger brands):

<scripttype="application/ld+json">{"@context": "http://schema.org","@type": "Organization","name": "yourbrand.com","url": "https://www.yourbrand.com/","logo": "https://www.yourbrand.com/logo.png","sameAs": ["https://www.facebook.com/yourbrand","https://twitter.com/yourbrand","https://uk.pinterest.com/yourbrand/","https://www.instagram.com/yourbrand/","https://www.linkedin.com/company/yourbrand-com"]}</script>

Pinterest

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

OEmbed

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

QQ/Wechat

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

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

Dublin Core

Dublin Core is a metadata vocabulary standardized as ISO 15836 and maintained by the Dublin Core Metadata Initiative (DCMI). It defines fifteen core elements for describing resources and is widely used in digital libraries, institutional repositories, academic publishing, and government portals. To use Dublin Core in HTML, declare the DC namespace and then add the desired elements as <meta> tags with a DC. prefix.

<!-- Declare the Dublin Core namespace --><linkrel="schema.DC" href="https://purl.org/dc/elements/1.1/"><metaname="DC.title" content="Page Title"><metaname="DC.creator" content="Author Name"><metaname="DC.subject" content="Keywords; Topics"><metaname="DC.description" content="A brief description of the page content"><metaname="DC.publisher" content="Publisher Name"><metaname="DC.contributor" content="Contributor Name"><metaname="DC.date" content="YYYY-MM-DD"><metaname="DC.type" content="Text"><metaname="DC.format" content="text/html"><metaname="DC.identifier" content="https://example.com/page.html"><metaname="DC.source" content="https://example.com/original-source"><metaname="DC.language" content="en"><metaname="DC.relation" content="https://example.com/related"><metaname="DC.coverage" content="Spatial or temporal coverage"><metaname="DC.rights" content="Copyright Owner Name">

Fediverse

Some Fediverse software such as Mastodon allow you to put your Fediverse handle in a meta tag which will show up in embeds to your website. In addition to the tag you will also need to add your domain to the list of allowed websites in "Settings -> Public profile -> Verification -> Author attribution" (for Mastodon).

<metaname="fediverse:creator" content="@handle@example.org">

Browsers / Platforms

Apple iOS

<!-- 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"><!-- Launch Icon (180x180px or larger) --><linkrel="apple-touch-icon" href="/path/to/apple-touch-icon.png"><!-- Launch Screen Image --><linkrel="apple-touch-startup-image" href="/path/to/launch.png"><!-- Launch Icon Title --><metaname="apple-mobile-web-app-title" content="App Title"><!-- Enable standalone (full-screen) mode --><metaname="mobile-web-app-capable" content="yes"><!-- Status bar appearance (has no effect unless standalone mode is enabled) --><metaname="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 --><metaname="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><!-- 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">

Note: Properties such as app title (apple-mobile-web-app-title), standalone/display mode, and app icons (apple-touch-icon) are more reliably and portably configured using the Web App Manifest (<link rel="manifest">), which is the recommended approach for Progressive Web Apps (PWAs). The Apple-specific meta tags remain useful as a fallback for older iOS versions.

Google Android

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

Note:theme-color and the "add to home screen" / standalone behavior are better defined using the Web App Manifest (<link rel="manifest">). The theme-color meta tag can still serve as a fallback for browsers that do not yet support the manifest theme_color property.

Google Chrome

<linkrel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID"><!-- Disable translation prompt --><metaname="google" content="notranslate">

Browsers (Chinese)

360 Browser

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

QQ Mobile Browser

<!-- 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" (fullscreen, etc.) --><metaname="x5-page-mode" content="app">

UC Mobile Browser

<!-- 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"(fullscreen, 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">

App Links

<!-- 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 fall back --><metaproperty="al:web:url" content="https://applinks.org/documentation">

Deprecated

For tags and elements that were once part of this guide but are no longer supported (Internet Explorer compatibility, Safari Pinned Tabs, Alexa verification, etc.), see DEPRECATED.md.

Other Resources

Related Projects

🌐 Translations

🤝 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

💛 Support

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

Everything helps, thanks! 🙏

— Josh

📝 License

CC0

About

🗿 A list of everything that *could* go in the head of your document

htmlhead.dev

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors