Generate SEO meta tags, Open Graph, and Twitter card markup from a title, description, and image. HTML-escaped output you can paste, all in-browser.
Runs entirely in your browser — your data never leaves your device.
How to use Meta Tag Generator
What it does & when you need it
You are shipping a page and you want it to look right in search results and in
the link previews that appear when someone shares it on X, LinkedIn, Slack, or
iMessage. That takes more than a <title> — it takes a description, a canonical
link, an Open Graph card, and Twitter card tags. This tool builds all of them
from a few fields and hands you a clean, HTML-escaped snippet to drop into your
document head.
It runs entirely in your browser. Nothing you type is uploaded, so you can draft
tags for an unreleased page without anything leaving your machine.
How to use
Fill in a Title and Description — these feed the standard tags plus
their Open Graph and Twitter equivalents.
Add a Canonical URL and an Image URL for a full link-preview card. Use
absolute URLs, because scrapers fetch them from outside your page.
Optionally set Author, Keywords, Theme color, and the Twitter
card type.
Copy the generated snippet with the Copy tags button or
Ctrl/Cmd + Enter, and paste it inside your page's <head>.
Things worth knowing
Open Graph is what builds the preview card. When a URL is pasted into a chat
or social app, the platform reads your og: tags to decide the title, summary,
and image it shows. Without them it guesses from the page and often picks the
wrong image or a stray line of text. Setting them explicitly is the difference
between a polished card and a broken-looking link.
Image dimensions have a sweet spot. Use 1200×630 pixels — the 1.91:1
ratio that Facebook and LinkedIn render at full width — and always give an
absolute URL. A relative path fails because the scraper cannot resolve it from
its own servers.
Every value is HTML-escaped for you. A title containing a quote, ampersand,
or angle bracket — like Tom & "Jerry" — is encoded to
Tom & "Jerry", so it cannot break out of an attribute or inject
markup. Fields you leave blank are simply omitted, so the snippet is always
valid. Pair this with the Slug Generator to build the
matching canonical URL, and the QR Code Generator
when you want a scannable link to the same page.
Examples
Full blog article tags
{"title":"Deploying Next.js on a VPS","description":"A step-by-step guide to shipping a Next.js app to your own server.","url":"https://example.com/blog/nextjs-vps","image":"https://example.com/og/nextjs.png"}
A complete set of title, description, canonical, Open Graph, and Twitter tags for an article.
Title only
My Portfolio
Just a title produces the minimal valid snippet — title plus og:title and twitter:title.
Shows how quotes, ampersands, and angle brackets are safely HTML-escaped in the output.
Frequently asked questions
What meta tags does this generate?+
It builds the head tags that matter for search and sharing: a <title>, a meta description, a canonical link, the Open Graph set (og:title, og:description, og:url, og:image, og:type), and Twitter card tags (twitter:card, twitter:title, twitter:description, twitter:image). Optional author, keywords, and theme-color tags are added when you fill those fields.
What is Open Graph and why do I need it?+
Open Graph is the protocol Facebook, LinkedIn, Slack, and most chat apps read to build a link preview — the title, summary, and image card you see when a URL is pasted. Without og: tags a platform guesses from the page, often picking the wrong image or text. Setting them explicitly makes your shared links look intentional and clickable.
What size should the Open Graph image be?+
Use 1200 by 630 pixels, the 1.91:1 ratio Facebook and LinkedIn render at full width, and keep it under about 5 MB. Provide an absolute URL (https://example.com/og.png), not a relative path, because scrapers fetch the image from outside your page and cannot resolve a relative link.
Are the values safe to paste into HTML?+
Yes. Every value is HTML-escaped, so a title containing a quote, ampersand, or angle bracket — like Tom & "Jerry" — is encoded to Tom & "Jerry" and cannot break out of the attribute or inject markup. You can paste the output straight into your document head without a sanitising step.
Do I have to fill in every field?+
No. Any field you leave blank is simply omitted from the output, so a title-only entry produces just the title and its matching og:title and twitter:title tags. Fill in what you have and add the rest later; the snippet always stays valid.