UTF-8-Charset deklarieren — Claude Code
Ohne expliziten Charset rendern Umlaute, Emojis und Non-ASCII in manchen Browsern/Crawlern als Gibberish.
In Claude Code fixen
Anthropics offizieller Terminal-Coding-Agent
Claude Code kann zuerst den ganzen Codebase greppen, die Änderung planen, dann jede betroffene Datei editieren. Prompt unten in deinen Claude Code-Chat einfügen und der Fix rollt in einem Rutsch über das ganze Projekt aus.
Anderes Tool? Wähle deinen Stack:
Der Prompt für Claude Code
Diesen Text exakt so in deinen Claude Code-Chat kopieren und einfügen.
Run Claude Code in the project root and make these exact changes, scanning the whole codebase first: Add charset declaration 1. Add <meta charset="utf-8"> as the first element in <head>.
Warum das wichtig ist
UTF-8 ist der Charset den alle unterstützen. Explizit deklarieren verhindert Browser-Rätselraten — und das Raten ist manchmal falsch, besonders bei Legacy-Setups.
AI-generierte HTML-Templates inkludieren das per Default, aber Micro-Edits können es droppen. Ein Quick-Check verhindert die "�"-Symbole überall.
So nutzt du diesen Prompt in Claude Code
- 1. Dein Claude Code-Projekt öffnen.
- 2. Prompt oben mit Copy-Button kopieren.
- 3. In Claude Code-Chat einfügen und senden.
- 4. Diff reviewen, Änderungen akzeptieren, neu deployen.
- 5. Fix mit der Checkliste unten verifizieren.
Typische Fehler vermeiden
- error_outlineCharset-Meta nach dem Title — Browser re-parsen eventuell den Head, bremst Paint.
- error_outline`iso-8859-1` auf modernen Sites — obsolet, bricht Emojis und Non-Latin.
- error_outlineNur auf HTTP-Header verlassen — In-HTML-Deklaration als Safety-Net.
Wie du prüfst ob der Fix geklappt hat
- check_circleQuelltext — `<meta charset="utf-8">` ist erstes Element im <head>.
- check_circleLighthouse → SEO → "Document has a meta charset" besteht.
- check_circleContent mit Umlauten, Akzenten, Emojis prüfen — alles rendert korrekt.
Häufige Fragen
UTF-8 gross oder klein?expand_more
Reicht HTTP-Charset-Header?expand_more
Alle 34 Prompts passend zu deiner Claude Code-Site?
Pantra scannt deine Site in 10 Sekunden, erkennt den Stack und generiert genau die Prompts die passen — nur die du brauchst.
Site scannenÄhnliche Claude Code-Prompts
lang-Attribut auf <html> setzen — Claude Code
Prompt um lang="en" oder lang="de" auf <html> zu setzen — für Accessibility und SEO.
TechnikViewport-Meta-Tag setzen — Claude Code
Prompt um den mobile-friendly Viewport-Meta-Tag zu setzen — Pflicht für Googles Mobile-First-Indexing.
TechnikGzip- oder Brotli-Kompression aktivieren — Claude Code
Prompt um Kompression am Hosting zu aktivieren damit HTML, CSS, JS 5-10x schneller übertragen.
TechnikHochauflösenden Favicon setzen — Claude Code
Stack-spezifischer Prompt für einen Favicon der in Browser-Tabs und Google-Ergebnissen korrekt erscheint.