Meta Charset UTF-8: How to Declare Your Page's Character Encoding

What Does Meta Charset UTF-8 Do in HTML?

A browser receives bytes, not letters, so it needs to know the character set. UTF-8 covers every Unicode character, and the W3Techs survey says about 99 percent of sites with a known encoding use it.

<meta charset="utf-8">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

The first block is the current form and the second is the older pragma directive. Use one, never both. The HTML Standard on encoding declarations allows one per document, inside the first 1024 bytes, with utf-8 as the only valid value, so iso-8859-1 or windows-1252 is a legacy leftover.

The beginner guide to what meta tags are covers the wider family of head tags.

Why Does the Charset Declaration Matter for SEO and Users?

It is not a documented ranking factor, so the harm is indirect. When charset sniffing guesses wrong, an apostrophe in a title becomes ’, an é in a product name becomes é, and a currency symbol can turn into a replacement character. Searchers who see that lose trust.

A declaration found late can force the browser to parse the page again, so keep it in the first 1024 bytes. The URL encoder and decoder shows the UTF-8 bytes behind an encoded URL. An encoding mismatch elsewhere breaks text even when the tag is right: a MySQL utf8mb4 database stores 4 byte emoji, but the old utf8 charset cannot.

How SEO Site Checker Tests Your Charset Declaration

Our audit parses the HTML rendered by headless Chromium. Run the free website SEO score checker on your own page.

Exact rule: a non-empty meta charset attribute passes, as does an http-equiv Content-Type tag holding charset=VALUE. There is no warning state.

What passes

A pass prints "This webpage has a character encoding declaration" with the value read. Any non-empty value counts, and the pragma form needs charset=VALUE with no spaces.

What fails

An empty first charset attribute fails even if a later meta charset tag is valid. The pragma form is stricter: lowercase content-type fails, and so do charset = utf-8 with spaces and charset='utf-8' with quotes. The report then prints "This webpage doesn't have a character encoding declaration" and a red How to Fix button.

What the check does not test

We don't read the HTTP header, so a header-only fix stays red. We also skip the 1024 byte limit, tag position, duplicates and the value, so iso-8859-1 passes though the standard calls it non-conforming. A tag in the body or one injected by JavaScript also passes, so a pass can hide a declaration that does not work.

How to Add Meta Charset UTF-8 to Your Page

1. Open the head template. Keep the doctype on line one, as the doctype guide explains, then make the charset tag the first element in head.
2. Save as UTF-8. The tag is true only if the bytes match.
3. Remove duplicates, then verify. A theme and a plugin often print two. Clear caches and run the report again. The Lighthouse charset audit is a fair cross-check, though it also accepts a header.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Your page title</title>

Check the header and the first 1024 bytes

The first command prints the response header, which alone won't pass our check. The second tests the 1024 byte limit, and no output means the tag is late or missing.

curl -sD - -o /dev/null https://example.com/ | grep -i content-type
curl -s https://example.com/ | head -c 1024 | grep -io 'charset[^>]*'

Meta Charset UTF-8 in WordPress, Shopify, Apache and Nginx

Encoding sniffing ranks a byte order mark first, the Content-Type response header second and the meta tag, found by a prescan of 1024 bytes, third. Treat the header as a safety net, not a substitute.

Hosted builders and block themes print the head, so a failure there usually means custom code or caching. On Apache, write utf-8, because AddDefaultCharset On means iso-8859-1. The W3C guide to encoding declarations advises keeping the tag anyway.

Meta Charset UTF-8 Mistakes That Cause Garbled Text

Lighthouse reports "Charset declaration is missing or occurs too late" and the W3C validator says "The character encoding was not declared". Either way, put the tag first in the head.

• Tag too late. Inline CSS above it can push it past byte 1024.
• Wrong file encoding. A windows-1252 file declared as utf-8 shows replacement characters, so re-save it as UTF-8 without a BOM.
• Header disagrees. If the server sends charset=iso-8859-1 and the tag says utf-8, the header wins.
• Duplicate or empty tag. Search the source for charset to find extra copies.