Fix Missing Doctype: Stop Quirks Mode
Your page is missing the <!DOCTYPE html> declaration at the very top of its HTML. Without it, browsers fall back to quirks mode, a legacy rendering path that emulates old browser bugs and changes how the CSS box model, layout, and inheritance behave. The fix is a single line placed as the first characters of the page.
What this means
The doctype is the first thing in an HTML document: the string <!DOCTYPE html> on line one, before the <html> tag. It is not a real HTML element and holds no content. It is a signal to the browser about which rendering mode to use.
When a browser sees <!DOCTYPE html> at the top, it renders in standards mode using the modern, spec-compliant engine. When the doctype is missing, malformed, or preceded by other content, the browser drops into quirks mode (or the in-between limited-quirks mode). Quirks mode deliberately reproduces the buggy layout behavior of late-1990s browsers so that very old sites still render the way their authors intended.
Our audit flags missing_doctype when the fetched HTML for a page does not begin with a valid doctype declaration. Common causes: a template that emits a blank line, a UTF-8 byte-order mark (BOM), a PHP notice, or an HTML comment before the doctype; a partial or fragment served as a full page; or a hand-built page where the line was never added. The declaration is case-insensitive, so <!doctype html> is equally valid, but it must be the first thing in the document. Even a single space or newline before it can trigger quirks mode.
Why it matters
A missing doctype rarely gets a page deindexed on its own, but it undermines two things modern SEO depends on: correct rendering and a clean layout.
Rendering and layout. In quirks mode the CSS box model reverts to the old Internet Explorer model, where width includes padding and border instead of adding to them. Table cell sizing, line-height inheritance, image spacing, and percentage heights all behave differently. The result ranges from subtle to severe layout breakage: elements the wrong size, overlapping content, or a page that looks fine in one browser and broken in another. Google renders pages with a modern Chromium engine before assessing them, so a page that collapses in quirks mode can look broken to Google too. Layout instability can also feed Cumulative Layout Shift (CLS), one of the Core Web Vitals.
Mobile-first indexing. Google evaluates the mobile version of your page. A layout that breaks in quirks mode on a phone is the version Google judges, so a rendering fault here works directly against you.
Trust signals. A doctype is one of the most basic markers of a well-formed HTML document. Its absence often travels with other structural problems (missing <html lang>, missing charset, unclosed tags) that together suggest sloppy or machine-generated markup.
AI answer engines. Crawlers behind ChatGPT, Perplexity, and Google's AI Overviews parse your HTML to extract answerable content. These systems mostly read the DOM rather than pixel-rendering the page, so a missing doctype is less catastrophic for them than for visual rendering. But a clean, standards-mode document is easier to parse reliably, and a missing doctype tends to signal other structural sloppiness. Getting the fundamentals right (doctype, charset, lang, semantic structure) makes your content more machine-extractable across both classic search and AI surfaces.
How to fix it
- 1
Add the HTML5 doctype as the first line
Put exactly
<!DOCTYPE html>as the very first characters of the document, before<html>and before anything else. Use the short HTML5 form; you do not need the long XHTML or HTML 4.01 strings anymore. It is case-insensitive, so<!doctype html>is equally valid. Nothing (no space, no blank line, no comment) should come before it. - 2
Remove anything that sneaks in above it
If the doctype is present but the page still misrenders, something is being emitted before it. The usual culprits are a UTF-8 BOM, a stray blank line at the top of a PHP or template file, a leading HTML comment, or a server warning printed by the application. Save template files as UTF-8 without BOM, trim leading whitespace before
<?php, and check for framework debug output. View the raw source (Ctrl+U, orcurl -s https://yoursite.com | head -c 200) and confirm the first bytes are the doctype. - 3
Fix it in your layout template, not per page
The doctype lives in the master layout, so fix it once. On WordPress it is in the active theme's
header.phpfor classic themes, or the block theme's HTML template. Never hardcode it into post content. On Next.js it is emitted automatically, so a missing doctype usually means a custom_documentor a route serving a raw fragment. On Shopify, Wix, and Squarespace the platform emits it for you; if it is flagged there, you are likely auditing an embedded fragment or a custom-code block served standalone. - 4
Confirm the page renders in standards mode
After deploying, open the page and check the rendering mode. In Chrome or Firefox DevTools, run
document.compatModein the console. It should return"CSS1Compat"(standards mode)."BackCompat"means the browser is still in quirks mode, so the doctype is missing or preceded by content. Firefox also prints a "This page is in Quirks Mode" warning in the console. Re-run the audit to clear themissing_doctypewarning. - 5
Audit sitewide, not just the flagged URL
Because the doctype comes from a shared layout, if one page is missing it, other pages using the same template usually are too. After fixing the template, recrawl the site or a representative sample (homepage, a post, a category, a landing page) to confirm every template type now emits the doctype. Watch for edge cases like error pages (404/500) and third-party embed endpoints, which sometimes use a different or minimal template.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title</title>
</head>
<body>
<!-- page content -->
</body>
</html>
<!-- Check the rendering mode in the DevTools console:
document.compatMode === "CSS1Compat" // standards mode (correct)
document.compatMode === "BackCompat" // quirks mode (doctype missing) -->A correct document head: the doctype is the first line, followed immediately by the html tag with a lang attribute and a charset declaration. Nothing precedes the doctype.
Platform-specific steps
The doctype is not controlled by an SEO plugin. It comes from the active theme's header.php in classic themes or the block template in block themes. Confirm the first line of header.php is <!DOCTYPE html> before any output. If it is present but still flagged, check for a plugin or functions.php snippet printing output early, or a BOM in a theme file. Never paste a doctype into post or page content.
These platforms emit the doctype for you in theme.liquid (Shopify) or the managed template (Wix, Squarespace), so a live page almost always has it. If the audit flags a URL here, you are usually auditing a fragment: a custom Liquid section rendered standalone, an embedded snippet, or a proxied page. On Shopify, verify the first line of layout/theme.liquid is the doctype and that no app injects output above {{ content_for_header }}.
Next.js injects <!DOCTYPE html> automatically for server-rendered and static pages, so a missing doctype signals a custom pages/_document.js that omits it, or a route or API handler returning a raw HTML fragment instead of a full document. For plain static HTML files, add the line manually as line one of each file or your shared layout. Ensure your build tool or editor saves files as UTF-8 without a BOM.
Frequently asked
Use <!DOCTYPE html>, the HTML5 doctype. It is the only one you need for modern sites. The long HTML 4.01 and XHTML 1.0 doctypes with DTD URLs are obsolete; the short form triggers full standards mode in every current browser. It is case-insensitive, so <!doctype html> works identically.
Not as a direct ranking penalty, but indirectly. A missing doctype forces quirks mode, which can break your layout and mobile rendering. Since Google renders pages (mobile-first) before evaluating them, a page that misrenders looks lower quality and can suffer worse Core Web Vitals, including CLS from layout instability. Fixing it is cheap insurance.
Open your browser's DevTools console and type document.compatMode. "CSS1Compat" means standards mode (good). "BackCompat" means quirks mode, so your doctype is missing or something is being output before it. Firefox also prints a "This page is in Quirks Mode" warning in the console.
Something is being emitted before the doctype, so the browser never sees it as the first thing. Common causes are a UTF-8 BOM at the start of the file, a blank line or whitespace before <?php, a leading HTML comment, or a PHP or framework warning printed above the output. Inspect the raw response (curl -s URL | head -c 200) and make sure the doctype is the literal first bytes.
AI crawlers mostly parse the DOM rather than pixel-rendering the page, so a missing doctype is less damaging for them than for visual rendering. But a clean, standards-mode document is easier to parse reliably, and a missing doctype often signals other structural sloppiness. Getting the document fundamentals right (doctype, charset, <html lang>, semantic markup) makes your content more consistently machine-extractable across search and AI answer engines.
Does your site have this issue?
Run a free, AI-powered audit and we’ll flag this and 150+ other checks in about a minute. No signup.