Skip to main content

Character encoding is declared

ab-002512 · seo-fundamentals.meta-tags.charset-declared
Severity: mediumactive

Why it matters

Without a declared charset, browsers fall back to heuristics — usually Windows-1252 or Latin-1 on legacy configs — and render multi-byte UTF-8 content as mojibake. Smart quotes, em dashes, emoji, and non-English characters turn into garbage sequences like ’ or é. The Google crawler follows the same fallback and indexes the corrupted text, which then shows up in search results. This is also a minor XSS signal: ambiguous encoding lets attackers smuggle script tags through characters the browser misinterprets.

Severity rationale

Medium because modern frameworks usually inject it automatically, but when missing it breaks rendering and indexing immediately.

Remediation

Most frameworks emit <meta charset="utf-8"> by default — Next.js, Remix, Astro, and Vite-based apps all do. If you are on a custom HTML template or Express-rendered view, add the tag as the first element inside <head> so the browser switches before parsing any content.

// app/layout.tsx or equivalent root template
<head>
  <meta charSet="utf-8" />
</head>

Verify via curl -I that responses also include Content-Type: text/html; charset=utf-8.

Detection

  • ID: seo-fundamentals.meta-tags.charset-declared

  • Severity: medium

  • What to look for: Check for <meta charset="utf-8"> (or equivalent) in the document head. In Next.js, this is typically handled automatically. For other frameworks, check _document.*, index.html, or the root layout.

  • Pass criteria: A charset declaration is present, either as <meta charset="utf-8"> in HTML or via Content-Type: text/html; charset=utf-8 HTTP header, or via framework default. Enumerate all charset declarations found (explicit tags and framework-inferred). At least 1 declaration must exist.

  • Fail criteria: No charset declaration found in the HTML head and no evidence of framework-automatic charset handling.

  • Skip (N/A) when: Never — charset should always be declared.

  • Detail on fail: "No <meta charset> tag found in document head and framework does not appear to set it automatically"

  • Remediation: Character encoding tells browsers how to interpret your page's text. Without it, special characters may display incorrectly. Modern frameworks usually add this automatically. If yours doesn't, add it to your root layout:

    // app/layout.tsx — Next.js handles this automatically, but for other frameworks:
<head>
  <meta charSet="utf-8" />
</head>

Taxons

findability

History