SEO-ready HTML boilerplate
A full head block with meta, Open Graph, Twitter cards and structured data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Linen shirts, made in small runs — Acme</title>
<meta name="description" content="Hand-finished linen shirts cut in Leeds. Free delivery over £75.">
<link rel="canonical" href="https://example.com/shirts/linen/">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1">
<meta name="theme-color" content="#3B4FE4">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Acme">
<meta property="og:title" content="Linen shirts, made in small runs — Acme">
<meta property="og:description" content="Hand-finished linen shirts cut in Leeds.">
<meta property="og:url" content="https://example.com/shirts/linen/">
<meta property="og:image" content="https://example.com/og/linen.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A folded linen shirt on a workbench">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Linen shirts, made in small runs — Acme">
<meta name="twitter:description" content="Hand-finished linen shirts cut in Leeds.">
<meta name="twitter:image" content="https://example.com/og/linen.png">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="/assets/css/site.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Acme",
"url": "https://example.com/",
"logo": "https://example.com/logo.png"
}
</script>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header><!-- navigation --></header>
<main id="main">
<h1>Linen shirts</h1>
</main>
<footer><!-- footer --></footer>
<script src="/assets/js/site.js" defer></script>
</body>
</html>/* The skip link must be reachable but not visible until focused. */
.skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 999;
background: #3B4FE4;
color: #fff;
padding: 10px 16px;
}
.skip:focus {
left: 0;
}How it works
This is the previous boilerplate with everything a public page actually needs. The ordering is deliberate rather than aesthetic.
Charset first, always. It has to land inside the first 1024 bytes. Push it below a long title or a block of Open Graph tags and you risk the browser re-parsing the document.
One canonical, absolute, matching your real URL. If your site serves trailing slashes, the canonical needs one. A mismatch between the canonical and the URL the server actually returns is a contradiction, and Google resolves it however it likes.
Open Graph and Twitter tags are not optional in practice. Without them, every platform guesses at the title and image when someone shares your link, and the guess is usually the first image on the page. That might be your logo. It might be an icon.
The skip link is the first focusable element. That is the whole point of it — a keyboard user should not have to tab through forty navigation links to reach the content. It stays off-screen until focused, then appears.
preconnect, used sparingly. One or two origins you know you will need. Preconnecting to everything is worse than preconnecting to nothing, because each connection costs a DNS lookup and a TLS handshake you may never use.
Accessibility notes
The lang attribute and the skip link are the two accessibility features that belong in every document from the first commit, because retrofitting them later means auditing every page.
Keep one <h1> per page and do not skip heading levels. Screen reader users navigate by heading, and a broken hierarchy is a broken table of contents.
Making it yours
The meta tag generator builds the meta block from a form, with a live preview of the Google result and the shared-link card.
The schema generator produces the JSON-LD for Article, Product, LocalBusiness and the rest.
Related templates
Minimal HTML5 boilerplate
The shortest document that is still correct. Nine lines, nothing optional.
HTMLSingle-file landing page
A complete landing page in one file — hero, features, call to action.
HTMLCSSHTML email boilerplate
A table-based email shell that survives Outlook and Gmail.
HTMLBreadcrumbs
A breadcrumb trail with the correct markup and matching structured data.
HTMLCSSCheck your version
Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.