Meta Tag Generator
Fill in your page details and get a complete, copy-ready set of SEO, Open Graph, Twitter Card and JSON-LD tags — with live Google, X and Facebook previews.
Everything your page needs to be shared well
SEO basics
Title, description, canonical URL and robots directives — the tags search engines read first.
Open Graph
Rich link previews on Facebook, LinkedIn, Slack, Discord and most messaging apps.
Twitter Cards
Large summary cards on X, with the correct card type, title, description and image.
JSON-LD
Structured data so Google can understand your page as a WebSite or Article.
Fill the form, watch the previews
Enter your page's title, description, URL and image once, and the generator assembles every tag variant the modern web expects — the SEO basics, Open Graph for link unfurls, the Twitter Card set, and JSON-LD structured data. The three live previews are the point: you see your snippet the way Google will render it, your card the way X will crop it, and your unfurl the way Facebook or LinkedIn will lay it out — before you deploy anything. When the previews look right, Copy all and paste the block into your page's <head>.
Getting titles and descriptions right
Search engines truncate what doesn't fit, so length discipline beats cleverness. Keep titles under roughly 60 characters and put the distinctive words first — trailing brand names survive truncation better than leading ones. Descriptions get about 155 characters before the ellipsis; write them as the one-sentence pitch for the click, not a keyword list, because Google bolds the words that match the query either way. The canonical URL matters more than it looks: it tells crawlers which address is the real one when the same page is reachable with tracking parameters, trailing slashes or www variants, protecting you from splitting your own ranking signal.
Why the social image is worth five minutes
Links with a proper 1200 × 630 image get dramatically more attention in feeds and chat apps than bare-domain unfurls. Use a real image per page rather than one generic logo — the preview panes here make the difference obvious immediately. If the image or title you see in a real share is stale after you update your tags, the platform has cached the old unfurl; both Facebook and LinkedIn offer public "debugger"/"post inspector" tools that force a re-scrape.
Step-by-step: field by field
The form on the left has nine inputs, and each one drives a specific set of tags. Page title becomes the <title>, og:title and twitter:title; watch the Google preview — it shows where truncation starts. Description fills the meta description plus the OG and Twitter equivalents. Canonical URL sets both <link rel="canonical"> and og:url, so enter the final, absolute, https address without tracking parameters. Site name becomes og:site_name, the small label platforms show above the title. Preview image URL must be absolute — crawlers do not resolve relative paths — and the X and Facebook panes load it live, so a broken link shows as an empty card immediately. X / Twitter @handle populates twitter:site, which attributes the card to your account. Open Graph type switches between website and article and also changes the JSON-LD @type between WebSite and Article. Twitter card type selects summary (small square thumbnail) or summary_large_image (full-width image). Theme color emits the <meta name="theme-color"> that tints the browser chrome on mobile. When the three previews look right, Copy all takes the full head block; paste it before any other <meta> tags so nothing conflicts.
Common mistakes and how to avoid them
- A relative or http image URL.
/og.pngandhttp://images are ignored by Facebook and X on https pages; always paste the fullhttps://example.com/og.png. - One generic image for every page. Article pages sharing the home page's OG image get indistinguishable unfurls; set the image per page, even if it is just the article title rendered on brand colours.
- Canonical pointing at a redirect or a staging host. Search engines follow the canonical, so a leftover
staging.or a URL that 301s elsewhere throws away the page's ranking signals. - Duplicate tags from a framework. Next.js, Nuxt, WordPress SEO plugins and static-site themes often inject their own title and OG tags; paste the generated block into the framework's metadata config instead of the template, or you will ship two conflicting
og:titlevalues and platforms pick unpredictably. - Forgetting
og:image:widthandheight. Without them Facebook renders the first share of a new URL as a small card until it has fetched and measured the image; the generator includes them so the large layout appears on the very first share.
How link unfurls work under the hood
When someone pastes your URL into a chat or feed, the platform's crawler — facebookexternalhit, Twitterbot, Slackbot-LinkExpanding, LinkedInBot — fetches the raw HTML with a short timeout and reads the <head>. None of them execute JavaScript, so tags injected client-side by a single-page app are invisible; the tags must be present in the server-rendered or static HTML, which is precisely what this generator produces. The crawler then fetches the og:image separately, checks its type and dimensions, and stores the whole result in a cache keyed by URL, typically for days — which is why updating tags does not change an already-shared link until you use the platform's debugger to re-scrape. Facebook and LinkedIn read only Open Graph; X reads its own twitter:* names first and falls back to OG for anything missing; Slack and Discord read OG and also honour theme-color for the card's accent stripe. Search engines read the <title>, description and canonical, and parse the JSON-LD block into the Knowledge Graph vocabulary that powers rich results — but Google may rewrite the displayed title and snippet if it judges them a poor match for the query, which is one more reason to keep them specific.
Further reading
The Open Graph meta tags guide documents every property, platform quirks and debugging tools in detail, and WebP vs AVIF vs PNG vs JPG explains why your OG image should still be JPG or PNG. Browse all guides.
Frequently asked questions
Which tags does the generator output?
Title and meta description, canonical link, robots directive, the Open Graph set (og:title, og:description, og:url, og:image and friends), the Twitter Card set with the right card type, and a JSON-LD block describing the page — everything in one copy-ready snippet.
Do I need both Open Graph and Twitter Card tags?
Yes, ideally. X falls back to Open Graph when its own tags are missing, but declaring twitter:card explicitly gets you the large summary layout reliably, and other platforms (Slack, Discord, LinkedIn) read Open Graph. The generator emits both so every unfurl looks intentional.
What size and format should the preview image be?
1200 × 630 pixels is the safe universal size for large cards, as JPG or PNG under ~1 MB. Keep critical text away from the edges — platforms crop differently, which the X and Facebook preview panes let you anticipate.
Why doesn't my updated preview show when I share the link?
Social platforms cache unfurls aggressively. After deploying new tags, run the URL through Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a refresh; X refreshes its cards on a shorter cycle automatically.
What does the JSON-LD block do for SEO?
It describes your page to search engines in schema.org vocabulary, which is what makes rich results (sitelinks, article metadata) possible. It doesn't boost ranking by itself, but it removes ambiguity about what your page is.
Can I use the generated tags on any framework?
Yes — the output is plain HTML that belongs in the document head, whether that's an .html file, a Next.js metadata config you transcribe values into, or a CMS template's head slot.