Charset Declaration: Why UTF-8 Belongs at the Top of Every Page
The charset declaration (`<meta charset="UTF-8">`) tells the browser which character encoding to use when decoding the page's bytes into text, so letters, symbols, and non-Latin scripts render correctly rather than as garbled "mojibake".
Why it matters
It isn't a ranking factor, but a missing or wrong charset breaks text rendering. Users on some browsers see mojibake (garbled symbols) instead of readable words; crawlers can misparse the content. A page that's otherwise fine suddenly looks broken.
Get the charset right and every visitor sees your actual text, no matter their browser or system language. Broken rendering undermines credibility, and search engines might skip the page entirely if they can't read it.
How it works
The charset meta tag must land in the first 1024 bytes of the <head> so the browser decodes the rest of the document correctly. It tells the parser which encoding standard (UTF-8, ISO-8859-1, Windows-1252, etc.) was used to save the file's bytes.
An HTTP Content-Type header can also carry charset info; when both are present, the header wins. Since most servers default to UTF-8 now, the meta tag functions as both a failsafe and an explicit declaration to any tool reading the HTML.
What does not matter
UTF-8 is the only sane choice for new pages. It's the global standard; anything else introduces compatibility headaches with no benefit. Legacy encodings like ISO-8859-1 or Windows-1252 are dead except on ancient sites you're probably not building.
Position matters only in one sense: it must appear early. You don't need it as the very first tag, just before the browser renders the rest. Modern browsers are forgiving; leading with it is simply good practice.
Code example
Correct declaration at the top of <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<!-- page content -->
</body>
</html>
A missing charset declaration leaves the browser to guess, which can cause mojibake:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- No charset declared; browser may misinterpret accents, symbols, emoji -->
</head>
Checking your charset
Audit every template in your stack; most modern frameworks set UTF-8 automatically, but old sites or static HTML can slip through. If you're seeing garbled text in your analytics or user reports, check the charset first: it's often the culprit on inherited codebases.