Fix charset declaration

Properly declare character encoding to prevent text rendering issues and security vulnerabilities.

Harlan Wilton3 min read Published Jan 18, 2025

A missing or late charset declaration forces browsers to guess your page's encoding. This causes garbled text, broken layouts, and security vulnerabilities.

What's happening

Character encoding tells the browser how to interpret bytes as text. Without it, browsers guess and often fail. Special characters, emojis, and non-ASCII text render as garbage like â€™ instead of '.

Charset sniffing is a security hole. Attackers bypass XSS filters by crafting payloads that browsers misinterpret as different encodings. Lighthouse requires the charset declaration within the first 1024 bytes of HTML.

The browser checks three places for charset:

HTTP Content-Type header with charset parameter.
<meta charset="UTF-8"> in the first 1024 bytes.
Byte Order Mark (BOM) at the start of the file.

If none of these exist or they appear too late, you fail this audit.

Diagnose

Check your HTML source

View page source and look for a charset declaration in the <head>:

<!-- Good: meta charset in first 1024 bytes -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

Place <meta charset> as the first element in <head>.

Check HTTP headers

In DevTools Network tab:

Select the main document request.
Look at Response Headers for Content-Type.
It must include charset: Content-Type: text/html; charset=UTF-8.

Or via command line:

curl -I https://your-site.com | grep -i content-type

Count bytes

If you have a long <head> before the charset, verify it's within 1024 bytes:

curl -s https://your-site.com | head -c 1024 | grep -i charset

Fix

1. Add meta charset tag

Place the charset declaration first in <head>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
  <!-- other head elements -->
</head>

Use UTF-8. It supports all languages and characters.

2. Set HTTP header (server-side)

Configure your server to send the charset in the Content-Type header. Browsers process this before parsing the HTML.

Nginx:

http {
  charset utf-8;
  charset_types text/html text/css application/javascript;
}

Apache (.htaccess):

AddDefaultCharset UTF-8

Express/Node.js:

app.use((req, res, next) => {
  res.setHeader('Content-Type', 'text/html; charset=UTF-8')
  next()
})

Cloudflare Workers / Edge Functions:

async function handleRequest() {
  return new Response(html, {
    headers: {
      'Content-Type': 'text/html; charset=UTF-8',
    },
  })
}

3. Move charset earlier in document

Move charset first if you have too much content before it.

<!-- Bad: charset buried after 1200 bytes of inline scripts -->
<head>
  <script>/* 800 bytes of tracking code */</script>
  <script>/* 600 bytes more */</script>
  <meta charset="UTF-8">
</head>

<!-- Good: charset first -->
<head>
  <meta charset="UTF-8">
  <script>/* tracking code */</script>
  <script>/* more scripts */</script>
</head>

Verify the fix

View page source and confirm <meta charset="UTF-8"> appears within the first few lines of <head>.
Check Network tab for Content-Type: text/html; charset=UTF-8 header.
Run Lighthouse and confirm "Properly defines charset" audit passes.
Test pages with special characters (emojis, accented letters) to make sure they render correctly.

Common mistakes

Using http-equiv instead of charset: Legacy formats like <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> are verbose. Use <meta charset="UTF-8">.
Placing charset after title or other meta: The charset must be early enough for the browser to read it before parsing text content. Put it first in <head>.
Wrong case for charset value: Use UTF-8. It is the canonical form.
Mixing encodings: Make sure your editor saves files as UTF-8. If your file is saved as ISO-8859-1 but you declare UTF-8, characters will break.
Large inline scripts before charset: The 1024-byte limit is firm. Move large inline scripts to external files or after the charset declaration.