Meta tag generator

A free meta tag generator for Open Graph and Twitter tags. Edit the fields, watch Facebook / X / LinkedIn / WhatsApp layout sketches update, then copy HTML, Next.js metadata or an Astro head snippet — all in your browser.

Page basics
Open Graph & Twitter
Fill from my page (optional)

Calls the existing link preview API only when you click the button. A shared?url= link can prefill this field and focus the button — it never fetches on its own.

Generated tags

Live preview
Layout sketches — not the real Facebook, X, LinkedIn or WhatsApp clients.
Facebook-style card · layout sketch, not the real client
Need this in bulk later?
Planned features only — nothing to buy. Join the list for launch updates. No payment is taken. Details on the Pro waitlist page.
How to
How to generate meta tags
  1. Step 1
    Fill the page fields
    Start with title, description and an absolute canonical URL. Add site name, locale and og:type so Open Graph cards have a complete identity.
  2. Step 2
    Attach a real share image
    Paste an absolute https og:image URL and alt text. Prefer a 1200×630 PNG or JPG from the OG Image Generator — avoid relative paths and http://.
  3. Step 3
    Choose Twitter card layout
    summary_large_image is the usual landscape card; summary is the smaller square style. X still wants twitter:card even when it falls back to Open Graph for title and image.
  4. Step 4
    Copy the snippet you need
    Switch between plain HTML, a Next.js App Router metadata object, or an Astro head fragment. Review the soft character guidelines and the warning list before you publish.
Tags
Required vs optional tags
Required for a usable share card: title,meta name="description", absolutelink rel="canonical",og:title,og:description,og:image,og:type andtwitter:card. Optional but useful:og:site_name,og:locale,og:image:alt,twitter:site, theme color and robots.
Title and description soft guidelines sit around 60 and 155 characters. Platforms truncate at different widths, so treat those numbers as editorial targets — put the important words first, then let the counter show when you are past the guideline. Robots is optional for public pages that should be indexed; use noindex only when the URL must stay out of search.
Fallbacks
Open Graph vs Twitter behaviour
Open Graph is the shared baseline. Facebook, LinkedIn and WhatsApp lean onog:* tags from the first HTML response. X prefers its own twitter:* fields when present and falls back to og:title, og:description and og:image when they are missing — except the card type, which still comes from twitter:card. That is why this generator always offers summary and summary_large_image, and why a missing card type shows a warning even if the rest of the form looks complete.
WhatsApp is picky about absolute https images and file weight. LinkedIn often caches aggressively, so renaming the image path after a redesign matters as much as the tags. After you paste the snippet, verify a live URL with theLink Preview Checkerand clear platform caches when a card stays stale.
Pitfalls
Common mistakes
  • Relative og:image paths — crawlers need a full https URL, not /og.png.
  • Client-only tags injected after load — Facebook, LinkedIn and WhatsApp read the first HTML response, not a late SPA update.
  • Duplicate title or description tags from a theme plus an SEO plugin — keep exactly one of each in the head.
  • Reusing one image URL after you redesign the card — rename the file or change the path so caches pick up the new art.
  • Shipping http:// image URLs on an https site — mixed content and crawler rules often drop the image.
Create artwork in theOG Image Generator, verify a live URL with theLink Preview Checker, and readog:image not showingwhen a card stays blank after publish. For platform-specific cache issues, seeFacebook link preview not updatingandLinkedIn link preview not updating.
Workflow
From draft tags to a live card
A practical loop: draft title and description here, generate a 1200×630 PNG in the OG Image Generator, host that file at a stable https path, paste the absolute URL into this form, copy the HTML or Next.js metadata into your layout, deploy, then run the Link Preview Checker. If Fill from my page is useful, click it only after the page is public — it uses the same /api/preview fetch as the checker and never runs on its own.
Escape matters when you hand-edit snippets: quotes and ampersands in titles break attribute markup if they are left raw. This tool escapes generated HTML for you. In Next.js App Router, the metadata object uses JavaScript string escaping instead; paste it into a layout or page module rather than into raw HTML.
Frequently asked questions
Short answers about meta tags, Open Graph and this generator.
Which meta tags are required?
At minimum set a unique title, a meta description, a canonical https URL, og:title, og:description, og:image (absolute https), og:type and twitter:card. Site name, locale, image alt, theme color and a Twitter handle are strongly recommended.
Do I need both Open Graph and Twitter tags?
Open Graph covers Facebook, LinkedIn, WhatsApp and many others. X falls back to og:title, og:description and og:image when twitter:* is missing, but twitter:card still controls layout. Keeping both is the safest default.
Why warn about title length around 60 characters?
Search snippets and many share UIs truncate long titles. About 60 characters for the title and about 155 for the description are guidelines, not hard vendor limits — keep the meaning in the first half of the string.
Does Fill from my page upload my content?
No. The button calls the same public /api/preview endpoint as the Link Preview Checker, and only when you click it. It fetches the HTML of the URL you typed so the form can suggest tags. Your draft fields stay in the browser until you copy them.
Can I use WebP for og:image?
PNG or JPG is the safe default for og:image across platforms. WebP can work in some crawlers but is inconsistent, so avoid it for the tagged share file.
Related pages