Declare UTF-8 charset — Claude Code
Without an explicit charset declaration, umlauts, emojis, and non-ASCII characters render as gibberish in some browsers and crawlers.
Fixing this in Claude Code
Anthropic's official terminal coding agent
Claude Code can grep the whole codebase first, plan the change, then edit every affected file. Paste the prompt below into your Claude Code chat and the fix rolls out across the project in one pass.
Using a different tool? Pick your stack:
The prompt for Claude Code
Copy and paste this into your Claude Code chat exactly as-is.
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>.
Why this matters
UTF-8 is the one charset everyone supports. Declaring it explicitly prevents browsers from guessing — and the guess is sometimes wrong, especially for legacy setups.
AI-generated HTML templates include this by default, but some micro-edits can drop it. A quick check avoids the dreaded "�" symbols across your content.
How to use this prompt in Claude Code
- 1. Open your Claude Code project.
- 2. Copy the prompt above with the copy button.
- 3. Paste into the Claude Code chat and send.
- 4. Review the diff, accept the changes, redeploy.
- 5. Verify the fix using the checklist below.
Common mistakes to avoid
- error_outlinePutting the charset meta after the title — browsers may re-parse the head when they discover it, slowing paint.
- error_outlineUsing `iso-8859-1` on modern sites — obsolete, breaks emoji and non-Latin characters.
- error_outlineRelying on HTTP header only — in-HTML declaration is a safety net.
How to verify the fix worked
- check_circleView source — `<meta charset="utf-8">` is the first element in <head>.
- check_circleLighthouse → SEO → "Document has a meta charset" passes.
- check_circleCheck content with umlauts, accents, and emojis — all render correctly.
Frequently asked questions
Uppercase UTF-8 vs lowercase utf-8?expand_more
Is HTTP charset header enough?expand_more
Want all 34 prompts tailored to your Claude Code site?
Pantra scans your site in 10 seconds, detects the stack, and generates the exact prompts that apply — only the ones you actually need.
Scan my siteRelated Claude Code prompts
Set the lang attribute on <html> — Claude Code
Prompt to add lang="en" or lang="de" to the <html> tag for accessibility and SEO.
TechnicalAdd the viewport meta tag — Claude Code
Prompt to add the mobile-friendly viewport meta tag — required for Google mobile-first indexing.
TechnicalEnable gzip or brotli compression — Claude Code
Prompt to turn on compression on your hosting so HTML, CSS, and JS transfer 5-10x faster.
TechnicalAdd a high-resolution favicon — Claude Code
Stack-specific prompt to add a favicon that shows up correctly in browser tabs and Google search results.