SeoGuard
Noticemeta.charset

The character encoding is not declared

Why it matters

When a page doesn't say how its text is encoded, each browser and scraper guesses, and a wrong guess turns "£" into "£" and "café" into "café", in the page and in every link preview made from it. Browsers only look for the declaration in the first 1024 bytes, so one that comes after a long inline script or stylesheet counts as missing.

Source: HTML Standard, specifying the document's character encoding: the declaration "must be serialized completely within the first 1024 bytes of the document". A charset in the Content-Type response header does the same job.

How to fix it

Make this the first thing inside <head>, before the title and any scripts:

<meta charset="utf-8" />

Examples

These are the rule's own test pages, and what it says about each. They are run on every change to the rule book.

<html lang="en">
<title>T</title>
content-type
text/html

NoticeNeither the page nor the server says how the text is encoded, so browsers and link previews guess.

fail-none
<html lang="en">
<title>T</title>
<style>.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}.a{color:red}</style>
<meta charset="utf-8">

NoticeThe charset tag comes too late to count: browsers only look in the first 1024 bytes, and it starts at about byte 1368.

fail-too-late
<html lang="en">
<title>T</title>
content-type
text/html; charset=UTF-8

PassedThe server declares the character encoding.

pass-header
<html lang="en">
<meta charset="utf-8">
<title>T</title>

PassedThe page declares its character encoding (utf-8).

pass-meta