Technik

Was ist das Charset-Meta-Tag, und warum sieht Text ohne es kaputt aus?

Eine fehlende Codezeile ist meist der Grund, warum Apostrophe, Akzente und Sonderzeichen zu Zeichensalat werden.

Was es ist

Jeder Buchstabe, jede Zahl und jedes Symbol wird in einem Computer letztlich als Zahl gespeichert — "Zeichenkodierung" (oder "Charset") ist einfach das vereinbarte System, welche Zahl für welches Zeichen steht. UTF-8 ist der Standard, die praktisch universelle Kodierung im modernen Web, die so gut wie jedes Zeichen in jeder Sprache darstellen kann, von einfachen englischen Buchstaben über Emojis bis zu Akzentzeichen wie é oder ñ.

Das Charset-Meta-Tag ist eine einzelne Codezeile im Quelltext einer Seite, die dem Browser sagt: "Lies den Text dieser Seite mit dem UTF-8-System." Fehlt es, muss der Browser raten, welches System verwendet wurde — und genau eine falsche Vermutung führt dazu, dass Apostrophe und Anführungszeichen zu seltsamen Zeichenfolgen wie ’ werden.

Warum es wichtig ist

Kaputte Zeichen lassen eine Seite auf den ersten Blick kaputt oder unseriös wirken, selbst wenn jedes Wort darunter richtig geschrieben ist. Es ist im Grunde ein rein kosmetisches Problem, weil der eigentliche Text meist völlig in Ordnung ist — aber das wissen Besucher nicht, und ein Absatz voller seltsamer Symbole wirkt schlampig oder sogar verdächtig.

Die Lösung ist außerdem ungewöhnlich günstig für ein so sichtbares Problem: Es ist eine Codezeile, die einmal hinzugefügt das Problem für die ganze Website löst, statt es Seite für Seite reparieren zu müssen.

So behebst du es

  1. Füge <meta charset="UTF-8"> als allererste Zeile im <head>-Bereich deiner Seite ein — sie muss vor allen anderen Tags stehen, damit Browser sie richtig anwenden.
  2. Falls du einen Website-Baukasten oder ein CMS nutzt (WordPress, Squarespace, Wix, Webflow), ist das in der Regel schon korrekt in der Vorlage eingestellt — kaputte Zeichen entstehen häufiger durch Inhalte, die aus einem anderen Programm (wie Microsoft Word) eingefügt wurden und ihre eigene versteckte Kodierung mitbringen.
  3. Liegt es am Einfügen aus Word oder einem anderen Textprogramm, versuche stattdessen "Als reinen Text einfügen" und wende Fett-/Kursivformatierung danach direkt im Editor erneut an.
  4. Lade die betroffene Seite nach den Änderungen neu und prüfe, ob Apostrophe, Anführungszeichen und Akzentbuchstaben jetzt richtig angezeigt werden.
  5. Führe deinen Launch-Readiness-Check erneut aus, um zu bestätigen, dass das Charset-Tag jetzt erkannt wird.

Prüfe, ob deine eigene Website dieses Problem hat

Launch Readiness scannt deine Website in Sekunden auf dieses und ~50 weitere Probleme vor dem Start — kostenlos, ohne Anmeldung.

Kostenlose Prüfung starten