Character encoding

What we check

We read the character encoding in two places:

1. in the HTTP header of the server response, e.g. Content-Type: text/html; charset=utf-8,
2. in the HTML, e.g. <meta charset="utf-8">.

Then we compare:

• No setting in either place: warning.
• Contradictory settings, e.g. server UTF-8, HTML ISO-8859-1: warning.
• Setting only in the HTML, not in the header: note.
• An encoding other than UTF-8: note.

Why it matters

Computers store text as numbers. The character encoding defines which number stands for which letter. For A to Z all encodings agree, for ä, ö, ü, é, à and ç they do not.

If the browser reads a page with the wrong encoding, the familiar broken characters appear:

• "Zürich" becomes "Zürich"
• "Offerte für Sie" becomes "Offerte f�r Sie"

For websites with umlauts and accents this is particularly awkward. It looks unprofessional, and search engines capture words such as "Zürich" or "café" wrongly, so that the website is found less well for these terms.

Contradictory settings often arise when an old website moves to a new server: the files are still stored in an old encoding, but the server reports UTF-8, or the other way round.

How to fix it

In the HTML

Right at the start of the <head>, as the first element:

<meta charset="utf-8">

In the HTTP header

• Apache (.htaccess): AddDefaultCharset UTF-8
• nginx: charset utf-8;
• PHP: header('Content-Type: text/html; charset=utf-8');

Files and database

The settings only help if the content is actually stored in UTF-8:

• Save HTML, CSS and template files in the editor as "UTF-8" (without BOM).
• With older CMS installations the database may have to be converted to utf8mb4. This is a task for the agency or hosting provider, and a backup is needed beforehand.

WordPress and builders

WordPress has used UTF-8 for many years and sets the settings itself. So do website builders such as Wix, Jimdo and Squarespace. Problems affect almost only older, individually developed websites.

How to check it yourself

Open the developer tools (F12), "Network" tab, reload the page and click the HTML document. Under "Response headers" the encoding is in content-type. In the page source, search for charset.

Frequently asked questions

Umlauts are displayed correctly in the browser. Is there still something to do?

If we report a contradiction or a missing setting, yes. Modern browsers often guess right, but not always. On other devices, in email previews or with search engines, "Zürich" can then become "Zürich".

What is UTF-8?

The worldwide standard for text on the web. It can represent all characters, from umlauts and French accents to emojis. Practically all websites use it.