Meta Tag Generator
Build SEO, Open Graph, and Twitter Card tags with live previews
Meta Tag Generator tool
Front-load the phrase people search for. 40–60 characters is the sweet spot.
Two sentences that earn the click. Quotes and ampersands are escaped for you.
Must be absolute. Also used as the og:url fallback.
Emitted as og:site_name and shown in social cards.
Drives the html lang attribute and the og:locale default.
Comma separated. Trimmed and de-duplicated on output. Google ignores this tag — it is here for the crawlers that still read it.
<html lang="en">Leave blank to reuse the page title.
Leave blank to reuse the meta description.
Leave blank to reuse the canonical URL.
Underscore form. Defaults from the language field.
Absolute URL only. 1200×630 renders cleanly everywhere.
Audit
- TitleNo title. It is the single strongest on-page signal and the clickable line in every search result.
- OG imageNo og:image. Shares render as a bare text link, which measurably reduces clicks.
- Twitter Cardsummary_large_image needs an image. With none, X renders no card at all rather than falling back to summary.
- DescriptionNo description. Google will invent one from your page text, which is rarely the pitch you would write.
- Canonical URLNo canonical URL. Without one, parameter and duplicate URLs compete with each other.
- OG URLNo og:url and no canonical URL to fall back on. Platforms will use whatever URL was shared, including tracking parameters.
- Site nameNo og:site_name. Platforms show the bare domain instead of your brand.
- Twitter CardNo title reaches twitter:title — set a page title, an og:title, or a Twitter title.
- Twitter Cardtwitter:site attributes the card to your account handle. Without it, the card shows no publisher.
Previews
Your page title appears here
Your meta description appears here. Without one, Google writes its own from the page text.
Desktop truncation is measured, not guessed: the title is clipped at 600px and the description at 920px using the same font metrics Google renders with.
Preview images are loaded straight from the URL you entered — that request goes to whatever host serves it. Everything else here stays in your browser.
Output
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Crawling and indexing -->
<meta name="robots" content="index, follow">
<!-- Open Graph — Facebook, LinkedIn, WhatsApp, Slack -->
<meta property="og:type" content="website">
<meta property="og:locale" content="en">
<!-- Twitter / X card -->
<meta name="twitter:card" content="summary_large_image">Meta Tag Generator: key facts
- What it does
- Build SEO, Open Graph, and Twitter Card tags with live previews
- Category
- SEO Tools
- Cost
- Free, with no account, sign-up, or install.
- Your data
- Runs entirely in your browser — the files and text you enter are never uploaded to a server.
- Last reviewed
- . Report an incorrect result.
What the Meta Tag Generator does
A page's head block is where you decide what Google prints, what Facebook crops, and whether X draws a card at all. This generator assembles that whole block — primary SEO tags, Open Graph, Twitter Card, robots directives, icons, theme colours, and verification tokens — and shows you the result rendered the way each platform will render it, updating as you type.
Values are escaped on the way out, which matters more than it sounds: a double quote in a title like The "best" CRM will end a raw content attribute early and silently cut your description in half. Quotes, ampersands, and angle brackets are converted to entities, line breaks are folded so each attribute stays on one line, and the encoding declaration is emitted first because the standard requires it inside the document's opening kilobyte.
Using the Meta Tag Generator, step by step
- Pick a page-type preset — blog article, product, landing page, local business, docs, or a private staging page — or start from the blank form.
- Write the title and description. The readout beside each shows characters plus measured pixel width, since Google clips on width rather than character count.
- Add the canonical URL and site name. The canonical has to be absolute, and it doubles as the og:url fallback.
- Open the crawling section if the page needs more than index and follow: noarchive, nosnippet, noimageindex, notranslate, max-snippet, max-image-preview, and max-video-preview are all here, with the composed directive string shown underneath.
- Switch on Open Graph, add an image URL with its alt text and pixel dimensions, and choose a type — article and product reveal their own date and price fields.
- Switch on the Twitter Card and choose summary or summary_large_image; blank fields inherit from Open Graph, then from the page values.
- Read the audit. Errors are things that will break a preview outright, such as a relative og:image; warnings are things that will cost you clicks.
- Flip through the Google, Facebook, and X previews, switching the Google card between desktop and mobile.
- Choose an output shape — HTML, Next.js metadata, React Helmet, or Nuxt useHead — then copy the whole block, copy one section, or download it.
What makes this one worth using
- Nothing is generated on a button press, so the code you are looking at always matches the fields above it. There is no stale-output trap.
- The desktop search preview truncates using real font metrics against a 600-pixel title budget and a 920-pixel description budget, so you see the actual cut point instead of guessing from a character count.
- Around sixty checks run continuously — relative canonical URLs, a large-image card with no image, contradictory noindex and canonical signals, undersized or wrongly-proportioned social images, malformed ISO dates on article tags, prices without a currency code.
- The same tag set is emitted four ways, including a Next.js 14 build that puts themeColor and colorScheme in the separate viewport export where that version expects them.
- Already have tags? Paste your existing head block and it is parsed back into the form by plain string matching — the markup is never inserted into this page, so nothing in it can run or phone home.
- The obsolete content-language pragma that older generators still emit is gone; the language field produces a copyable html lang attribute and the og:locale default instead.
Frequently Asked Questions
Why does my title get cut off even though it is under 60 characters?
Because search engines clip by rendered width, not by letter count. A title full of wide characters — capitals, W and M, em dashes — runs past the available pixels well before 60 characters, while a narrow one survives past 65. The pixel readout and the desktop preview here both measure the string, so you can see which side of the line you are on.
My Facebook share shows no image. What is wrong?
Nearly always one of three things: the og:image URL is relative rather than absolute, the file is under the 200-pixel minimum, or the platform has an older copy cached. This tool flags the first two as you type. For the third, run the page through Facebook's Sharing Debugger and ask it to re-scrape.
Do I need Twitter Card tags if I already have Open Graph?
Not strictly — X reads Open Graph when Twitter tags are absent, so links will still preview. You add them to control the card type, to credit an account with twitter:site and twitter:creator, or to show different copy on X than on Facebook. Leave the block switched off and the X preview shows exactly what the Open Graph fallback produces.
Is anything I type sent anywhere?
Only one thing leaves your browser, and only if you ask for it: the preview panels load your og:image and twitter:image straight from the URLs you enter, which is a request to whichever host serves those files. No text is uploaded, there is no account, and the form is only saved locally if you tick "Remember on this device".
Where does the generated block go?
In HTML mode, paste it inside the head element before the closing tag. In a framework, use the matching output: the Next.js metadata and viewport exports go in a page or layout file, the React Helmet component renders inside your page, and useHead is called from a Nuxt script setup block. The html lang snippet is separate because it belongs on the html element, not in the head.
