head

HEAD is a simple, community-maintained guide to the elements that belong inside an HTML document's head section. It is written as a reference rather than a library, collecting practical snippets and notes about how browsers, search engines, crawlers and social platforms interpret head metadata. The guide opens with a recommended minimum: a charset meta tag set to utf-8, a viewport meta tag with width=device-width and initial-scale=1, and a title element. It explains that the charset and viewport tags should appear as early as possible in the head so the document renders consistently, with all other head elements following them. A section on elements lists the valid head children: meta, link, title, style, script, noscript and base, with short examples of each. A recommended order section then lays out a practical sequence: charset first, then viewport, title, other meta tags, social meta tags, canonical and other link tags, resource hints such as preconnect and dns-prefetch, stylesheets, favicons, and finally scripts, preferably with defer or async to avoid blocking rendering. The meta section is the largest part of the reference. It documents character encoding, viewport, Content-Security-Policy, application-name, theme-color, color-scheme, description, robots directives for general and Google-specific crawlers, site verification tags for several search consoles, generator, subject, rating, referrer policy, format-detection, geographic tags (ICBM, geo.position, geo.region, geo.placename) and Web Monetization. Notes clarify that geo tags are aimed at search engines and location services rather than browsers directly. The link section covers stylesheets, canonical URLs, web app manifests, author and license links, alternate and hreflang links, rel=me identity links, self, prev and next relations, webmention, micropub, IndieAuth endpoints, Open Search, RSS and Atom feeds, and resource hints including dns-prefetch, preconnect, prefetch and preload. It notes that a web app manifest is the recommended cross-platform way to declare installable app properties. The scripts section explains the difference between a plain script tag, async, defer, and the combined async defer pattern, and mentions Subresource Integrity for verifying fetched resources. The icons section shows favicon and Apple touch icon usage. Social metadata is covered in depth: Open Graph tags for titles, images, descriptions, site name and locale; Schema.org microdata requiring itemscope and itemtype on the html element; Google JSON-LD organization markup for knowledge graph results; Pinterest's nopin directive; oEmbed link relations; QQ and WeChat share tags; Dublin Core metadata elements with the DC. prefix; and the Fediverse creator meta tag used by Mastodon and similar software. Platform-specific sections collect tags for Apple iOS (smart app banners, touch icons, startup images, standalone mode, status bar style, viewport-fit for notched phones, and deep linking), Google Android (theme color, add to home screen, Play Store deep linking) and Google Chrome (web store item, translation prompt control). A further section documents Chinese mobile browsers: 360 Browser's renderer selection, QQ Mobile Browser's x5 orientation, fullscreen and page-mode tags, and UC Mobile Browser's screen orientation and related tags. A deprecated section and lists of other resources, related projects, translations, contribution guidance, contributors, author, support and license (CC0) round out the document. The project is a documentation resource for web developers who want a single place to check head markup conventions across browsers, search engines and social platforms.