Reference guide · html-css-js · Published 2026-08-15 · 4 min read
The HTML head: the tags that matter
HTML head tags in order: doctype, charset, viewport, title, meta description, canonical, OG, favicon, preload and script placement.
- ·Head tag order
- ·Meta tags that matter
- ·Script placement
Why the head matters
The HTML <head> is the machine-readable part of a page. It sets the document type and character set, controls how the page scales on phones, tells search engines and social platforms what title and description to use, and decides which resources load first. None of it fills the visible page, but most rendering and SEO behaviour is decided here.
A minimal head that works for a normal static page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title under 60 characters</title>
<meta name="description" content="One or two sentences that summarise the page.">
<link rel="canonical" href="https://example.com/page/">
</head>Head tag order
What appears does matter as much as the order, but a consistent order stops you missing something. The usual sequence: doctype, charset, viewport, title, description, canonical, Open Graph and Twitter tags, favicon, then preconnect and preload links, then stylesheets. The charset and viewport tags belong near the top of the head because both affect how a browser handles the whole document.
| Tag | Purpose | Required |
|---|---|---|
<!DOCTYPE html> | Declares HTML5 so the browser renders in standards mode | Yes |
<meta charset="utf-8"> | Sets UTF-8 encoding so emoji and accented text render | Yes |
<meta name="viewport"> | Makes layout scale on phones rather than zooming out | Yes |
<title> | Visible tab label and main search result title | Yes |
<meta name="description"> | Search-result snippet text | Recommended |
<link rel="canonical"> | Points to the preferred URL for a page | Recommended |
| Open Graph tags | Control how the page appears when shared | For marketing pages |
<link rel="icon"> | The favicon in the tab and bookmarks | Optional |
Meta tags that matter
The title tag should be unique to the page and read naturally in a search result. Keep it near 60 characters so it does not truncate. The meta description does not rank a page, but it is what most people read before they click, so make it a plain sentence of value, around 150 to 160 characters.
The canonical tag tells search engines which URL to treat as the original when the page is reachable at several addresses. Use it on every page of a bespoke CMS, because URL parameters and trailing slashes create duplicates without it. See the canonical tags guide for the details.
Open Graph tags are the group people check when a link prints a card on social sites: og:title, og:description, og:image, and og:url. If og:image is missing, platforms pick a random image or no image at all, so set it explicitly for content you plan to share.
Rel preload and preconnect
<link rel="preconnect" href="https://fonts.example.com">
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">preconnect opens a connection to a third-party origin early, which cuts the first wait for fonts or analytics. preload tells the browser to start a specific critical asset, such as the largest image, before the parser reaches it. Both help LCP, but use them sparingly: every unused preload wastes network time. The LCP optimisation route shows where to put the effort.
Scripts and styles
CSS belongs in the head because the browser blocks first paint until it processes stylesheets. JavaScript that is not needed for the first frame should use defer or async, and never sit in the middle of the body without an attribute, because it blocks parsing. The render blocking resources article walks through the exact remedy. One rule of thumb to keep the head thin: add a tag only when you can say what would break without it.