Free Meta Tag Generator
Fill in your title, description, and image to get clean, copy-paste og: and twitter: tags for your page's <head>. No image yet? Generate one from a template — it's rendered by our own API, with nothing uploaded.
Everything is assembled in your browser — nothing is uploaded. The optional generated image is just a URL to our stateless render API.
Your meta tags
<!-- Primary -->
<title>Your page title</title>
<meta name="description" content="A concise, compelling description of your page (50–160 chars)." />
<link rel="canonical" href="https://example.com/page" />
<!-- Open Graph -->
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A concise, compelling description of your page (50–160 chars)." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Your page title" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your page title" />
<meta name="twitter:description" content="A concise, compelling description of your page (50–160 chars)." />
<meta name="twitter:image" content="https://example.com/og-image.png" />Paste these into your page's <head>. Sensible defaults fill any field you leave blank.
Live preview
Just shipped this — take a look 👇
Shown close to real display size — this is how your card appears when the link is shared.
Already shipped your tags? Check how a live page unfurls with the Open Graph Image Preview & Checker.
Design an imageWhat each tag does
A complete link preview comes from a short, predictable set of tags. Here's what the generator outputs and why each one matters:
og:title— the bold headline of the card. Keep it under ~60 characters so it isn't truncated.og:description— the supporting line beneath the title. One clear sentence, ideally under ~110 characters.og:image— the absolutehttps://URL of your 1200×630 share image. The most important tag for how the link looks.og:image:width/og:image:height— declaring1200and630lets platforms render the large card on the first scrape instead of waiting to measure the file.og:url— the canonical URL of the page being shared.og:type—websitefor most pages,articlefor posts.twitter:card— set tosummary_large_imagefor X's big landscape card, plustwitter:title/twitter:description.
How to use the generated tags
- Fill in your title, description, and the absolute URL of your share image.
- No image yet? Choose one of 200+ templates and the tool renders the
og:imagefor you. - Copy the block and paste it inside your page's
<head>, in the HTML your server returns. - Validate it with the Open Graph preview & checker, then re-scrape on each platform so caches refresh.
Common mistakes to avoid
- Relative image URLs. Always absolute, always
https://. - Tags injected by JavaScript. Most crawlers read the raw HTML only — put the tags in the server response.
- Forgetting to re-scrape. Platforms cache aggressively; new tags won't show until you force a refresh.
- An image that isn't public. If a logged-out request can't load it, neither can the crawler.
For the exhaustive list of every tag platforms read, see the complete Open Graph meta tag reference.
Frequently asked questions
Where do I put these meta tags?
Inside the <head> of your page's HTML, before the closing </head>. They must be in the raw HTML the server sends, not added later by client-side JavaScript, because most social crawlers don't execute JS.
Do I need both og: and twitter: tags?
The og: tags do most of the work — X, LinkedIn, Slack, Discord, and others fall back to them. The twitter: tags let you opt into X's large-image card (twitter:card = summary_large_image) and set X-specific title/description. Including both is the safe default, and this generator outputs both.
Why must og:image be an absolute URL?
A crawler fetches your image out of the context of your page, so a relative path like /og/card.png can't be resolved. Always use the full absolute address, e.g. https://yourdomain.com/og/card.png. This is the single most common reason an image fails to appear.
What should og:type be?
Use 'website' for most pages and 'article' for blog posts and news. The article type also supports extra tags like article:published_time. When unset, platforms generally assume website.
I don't have an image yet — can this make one?
Yes. Pick a template in the generator and it produces the og:image for you (rendered by our own stateless API, nothing uploaded), then fills the og:image tag with it. Or design one from scratch in the editor and host the PNG yourself.