🤯 HEAD
A simple guide to HTML <head> elements
Table of Contents
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 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.
-->
<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>
Recommended Order
The following is the recommended order of elements in the <head> for best performance and correct document rendering:
<meta charset> — Character encoding declaration; must appear within the first 1024 bytes of the document<meta name="viewport"> — Viewport settings; declare early to ensure correct responsive rendering<title> — Document title; placed after encoding/viewport to prevent potential re-rendering- Other
<meta> tags (description, robots, etc.)
- Open Graph / Social meta tags
<link rel="canonical"> and other <link> tags (excluding stylesheets and resource hints)<link rel="preconnect"> / <link rel="dns-prefetch"> — Resource hints; early to maximize their value<link rel="stylesheet"> — External CSS; stylesheets should come before scripts<link rel="icon"> — Favicons<script> — Scripts; use defer or async where possible to avoid blocking rendering
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<meta name="description" content="Page description">
<!-- other meta tags -->
<!-- Open Graph / Social meta tags -->
<meta property="og:title" content="Page Title">
<!-- other social meta tags -->
<link rel="canonical" href="https://example.com/page.html">
<!-- other link tags (excluding stylesheets and resource hints) -->
<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://example.com">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<script defer src="script.js"></script>
</head>
<!--
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.
-->
<meta charset="utf-8">
<meta name="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.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Name of web application (only should be used if the website is used as an app) -->
<meta name="application-name" content="Application Name">
<!-- Theme Color for Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Indicates the supported color schemes for the page (light, dark, or both) -->
<meta name="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. -->
<meta name="description" content="A description of the page">
<!-- Control the behavior of search engine crawling and indexing -->
<meta name="robots" content="index,follow"><!-- All Search Engines -->
<meta name="googlebot" content="index,follow"><!-- Google Specific -->
<!-- Tells Google not to show the sitelinks search box -->
<meta name="google" content="nositelinkssearchbox">
<!-- Tells Google not to provide a translation for this document -->
<meta name="google" content="notranslate">
<!-- Verify website ownership -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->
<!-- Identify the software used to build the document (i.e. - WordPress, Dreamweaver) -->
<meta name="generator" content="program">
<!-- Short description of your document's subject -->
<meta name="subject" content="your document's subject">
<!-- Gives a general age rating based on the document's content -->
<meta name="rating" content="General">
<!-- Allows control over how referrer information is passed -->
<meta name="referrer" content="no-referrer">
<!-- Disable automatic detection and formatting of possible phone numbers -->
<meta name="format-detection" content="telephone=no">
<!-- Geo tags -->
<meta name="ICBM" content="latitude, longitude"><!-- Geographic coordinates (latitude, longitude) in decimal degrees; eg. content="48.8566, 2.3522" -->
<meta name="geo.position" content="latitude;longitude"><!-- Geographic coordinates; latitude and longitude are separated by a semicolon -->
<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" -->
<meta name="geo.placename" content="city/town"><!-- eg. content="New York City" -->
<!-- Web Monetization https://webmonetization.org/docs/getting-started -->
<meta name="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 -->
<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 a Web App Manifest — the recommended way to define PWA metadata such as app name, icons, theme_color, and display mode -->
<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
Used for RelMeAuth, a distributed form of identity verification.
See https://microformats.org/wiki/RelMeAuth to learn more -->
<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">
<!-- 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 previous, and next documents in a series of documents, respectively -->
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="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 -->
<link rel="webmention" href="https://example.com/webmention">
<!-- Enables posting to your own domain using a Micropub client
More information at https://indieweb.org/Micropub -->
<link rel="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. -->
<link rel="token_endpoint" href="https://example.com/token">
<link rel="authorization_endpoint" href="https://example.com/auth">
<!-- 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="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 -->
<script src="script.js"></script>
<!-- The script will be fetched in parallel with parsing and executed as soon as it is available (before parsing completes) -->
<script async src="script.js"></script>
<!-- The script will be fetched in parallel with parsing and executed when the page has finished parsing -->
<script defer src="script.js"></script>
<!-- async takes precedence in modern browsers; defer acts as a fallback for older browsers that don't support async -->
<script async defer src="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 -->
<script src="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 -->
<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">
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.
<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="">
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.
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):
<script type="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.
<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">
OEmbed
<link rel="alternate" type="application/json+oembed"
href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&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&format=xml"
title="oEmbed Profile: XML">
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">
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 -->
<link rel="schema.DC" href="https://purl.org/dc/elements/1.1/">
<meta name="DC.title" content="Page Title">
<meta name="DC.creator" content="Author Name">
<meta name="DC.subject" content="Keywords; Topics">
<meta name="DC.description" content="A brief description of the page content">
<meta name="DC.publisher" content="Publisher Name">
<meta name="DC.contributor" content="Contributor Name">
<meta name="DC.date" content="YYYY-MM-DD">
<meta name="DC.type" content="Text">
<meta name="DC.format" content="text/html">
<meta name="DC.identifier" content="https://example.com/page.html">
<meta name="DC.source" content="https://example.com/original-source">
<meta name="DC.language" content="en">
<meta name="DC.relation" content="https://example.com/related">
<meta name="DC.coverage" content="Spatial or temporal coverage">
<meta name="DC.rights" content="Copyright Owner Name">
一份关于 HTML 元素的简明参考指南——讲解一个网页应该包含哪些 meta、link、title 等标签,并针对图标、SEO 和社交分享预览给出建议。