Generate the essential document-head meta tags every page needs - character encoding, mobile viewport, and other core settings. Live output, ready to copy. 100% in your browser - nothing is uploaded or stored.
UTF-8 supports every language and emoji - use it unless you have a specific reason not to.
These are the foundation tags that belong at the very top of every page's <head>. Build the rest - title, description, social - with the Meta Tag Generator.
🔒 Everything runs in your browser. Your input is never uploaded, logged or stored.
The Viewport & Charset Meta Generator builds the foundation meta tags that belong at the very top of every page's head - the charset tag that sets character encoding, the viewport tag that makes pages display correctly on mobile, and other core document settings. Get these right and your text renders properly in every language and your layout scales cleanly on phones and tablets.
It is part of the Meta & Tag Generators group in our free SEO Toolkit, alongside the Meta Tag Generator and Meta Robots Tag Generator. Once your head basics are set, build social cards with the Open Graph Generator and audit a live page with the Meta Tag Analyzer. Everything runs in your browser - your input is never uploaded or stored.
The core document meta tags every page needs, generated correctly.
Set UTF-8 or another charset so your text and emoji display correctly everywhere.
Generate the responsive viewport tag so pages scale properly on phones and tablets.
Warns you when zoom-blocking options would harm users who need to enlarge pages.
Add X-UA-Compatible, theme-color and a language reminder, then copy or download.
From settings to ready-to-paste meta tags in seconds.
Choose UTF-8 or another character set for your document.
Keep the responsive default or adjust width and scale.
Toggle theme-color, X-UA-Compatible and a language reminder.
Copy the tags and place them at the top of your page's head.
The essential head tags, in the correct order.
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="theme-color" content="#0A0F1C">
Before any styling or content, a browser needs to know two basic things: how to decode the page's characters and how to size the page for the screen. The charset and viewport meta tags answer those questions. Missing or wrong values cause garbled text or a desktop layout crammed onto a phone. This generator builds these foundation tags correctly, in the right order, ready to drop into your head. It is part of the Meta & Tag Generators group.
The <meta charset="UTF-8"> tag declares the character encoding of your document. UTF-8 is the universal standard - it supports every language, symbol and emoji - and should be used on virtually every modern page. It must appear within the first 1024 bytes of the document, which is why it sits at the very top of the head, before the title and other tags.
| Encoding | Use When |
|---|---|
| UTF-8 | Almost always - supports all languages and emoji |
| ISO-8859-1 | Legacy Western-European content only |
| windows-1252 | Old Windows-authored legacy pages |
The viewport tag controls how a page is scaled and sized on mobile devices. The standard value, width=device-width, initial-scale=1.0, tells the browser to match the page width to the device and start at normal zoom. Without it, mobile browsers assume a desktop-width page and shrink everything, making your site hard to read and use on phones.
Matches the layout width to the device screen, the basis of responsive design.
Sets the starting zoom level so the page loads at a natural size.
Avoid maximum-scale and user-scalable=no - many users rely on pinch-to-zoom.
Google uses mobile-first indexing, so a correct viewport is essential for ranking.
X-UA-Compatible - tells old Internet Explorer to use its most modern rendering modetheme-color - sets the browser UI colour on mobile, matching your brandlang attribute on the <html> element - declares the page language for accessibility and searchThe browser needs to know the encoding before it parses text, so the charset declaration must appear within the first 1024 bytes of the document. Placing it as the first tag in the head guarantees this, preventing a re-parse and avoiding garbled characters.
Yes, in almost all cases. Setting maximum-scale=1.0 or user-scalable=no stops users from pinching to zoom, which is a serious accessibility problem for people with low vision. This tool warns you when those options are enabled. Allow zoom unless you have a very specific reason not to.
It only affects old Internet Explorer versions, which are now rare. It is harmless to include and still common in templates, but if you do not support legacy IE you can safely leave it out. Modern browsers ignore it entirely.
No. The tags are built locally in your browser with JavaScript. Nothing you select is uploaded, logged or stored, so the tool is safe for any project, including private and client work.
Start every HTML document with the correct head foundation tags.
Add a proper viewport to a page that displays badly on phones.
Understand what each foundational meta tag does and why.
Set a theme-color so the mobile browser UI matches your site.
Use the Viewport & Charset Generator with these tools from the SEO Toolkit: build the full head with the Meta Tag Generator, control indexing with the Meta Robots Tag Generator, set the preferred URL with the Canonical Tag Generator, add social cards with the Open Graph Generator, audit a live page with the Meta Tag Analyzer, and check heading structure with the Heading Structure Checker.
Anyone building web pages who wants the head basics right.
Everything about charset, viewport and document head tags.
It builds the foundation meta tags every page needs in its head - the charset tag for character encoding, the viewport tag for mobile scaling, and optional extras like theme-color and X-UA-Compatible. You pick your settings and copy ready-to-use tags in the correct order.
Yes, completely. There is no cost, no sign-up and no limit on how many times you use it. The tool runs entirely in your browser, so there are no server costs and nothing to pay for.
It declares your document's character encoding so the browser decodes text correctly. UTF-8 is the universal standard and supports every language, symbol and emoji. The tag must appear near the top of the head, within the first 1024 bytes, which is why it comes first.
Yes. The tags are built locally in your browser with JavaScript. Nothing you select is uploaded, logged or stored. This makes the tool safe for any project, including private and client work.
It controls how your page is sized and scaled on mobile devices. The standard value, width=device-width and initial-scale=1.0, matches the page to the screen and sets normal zoom. Without it, phones assume a desktop layout and shrink everything.
Almost never. Setting maximum-scale=1.0 or user-scalable=no prevents pinch-to-zoom, which is a serious accessibility problem for people with low vision. This tool warns you when those options are on. Leave zoom enabled unless absolutely necessary.
At the very top of your page's <head>, before the title and other meta tags. The charset tag in particular must come first. In a CMS, your theme usually outputs these, so check before adding duplicates.
It only affects old Internet Explorer, which is now rare. Including it is harmless and still common in templates, but if you do not support legacy IE you can safely omit it. Modern browsers ignore it.
On supported mobile browsers, theme-color sets the colour of the browser interface around your page, such as the address bar area, so it can match your brand. It is purely cosmetic and has no effect on search rankings.
Google uses mobile-first indexing, meaning it primarily evaluates the mobile version of your pages. A correct viewport tag is essential for a usable mobile layout, and mobile usability is a factor in how your pages perform in search.
Yes. The generator is fully responsive, so you can build head meta tags from a phone or tablet. Choosing encoding, configuring the viewport, toggling extras and copying the output all work the same as on desktop.
Convert, compress, and resize images in multiple formats - JPG, PNG, WebP, ICO, and more.
Calculate in-hand salary, CTC breakup, tax deductions, and more for Indian employees.
Convert length, weight, temperature, speed, volume, and 200+ measurement units instantly.
Count words, convert case, generate lorem ipsum, find & replace text, and more writing utilities.
Set the right charset and viewport for every page - free, private and instant in your browser.
📱 Open the Generator ← All Meta Tag Tools