About the Meta & Open Graph
This meta tag generator builds the SEO and social-sharing tags for a page from a short form: title, description, canonical URL, share image, site name and Twitter Card type. It outputs the standard SEO meta tags plus Open Graph and Twitter Card markup, alongside a live preview card approximating how the link will look when it is shared.
It earns its keep at the point where a new page ships, or an existing link shares badly on Facebook, LinkedIn, Slack or X: wrong title, stale description, missing or oddly cropped image. Rather than hand-writing each og: and twitter: property and guessing at correctness, fill in the form once and copy the whole block.
The live preview updates as you type, and you can switch between the summary and summary_large_image Twitter Card layouts to see how each renders before committing. The card's image area uses the same 1.91:1 aspect ratio recommended for Open Graph images, so what you see roughly matches what platforms will show.
Most of the form runs entirely client-side and nothing is uploaded to a server. The one exception is the preview image itself: your browser fetches it directly from the URL you enter to render the preview, exactly as a social platform's crawler would, so that URL needs to be a real, publicly reachable address for the preview (and the real share) to work.
How to use it
- Fill in the page title and meta description.
- Enter the canonical URL and the share image URL.
- Add a site name and choose a Twitter Card type, summary or summary_large_image.
- Check the live preview card, which shows the domain, title and description roughly as a shared link would appear.
- Adjust the wording or swap the image URL until the preview looks right.
- Click copy <head> tags to copy the full generated block.
- Paste the tags into the <head> section of your HTML, before the closing </head> tag.
Examples
- Enter a blog post's title, a roughly 160-character description and a 1200x630 image URL, then copy the Open Graph block straight into the post's <head>.
- Set the Twitter Card type to summary_large_image so a link shared on X shows a large banner image instead of a small square thumbnail.
- Fill in the site name field to add an og:site_name tag, so Facebook and LinkedIn display your brand name under the preview.
- Leave the site name field blank when you don't need it: the generator omits the og:site_name tag entirely rather than outputting an empty one.
- Generate tags for a product page and confirm in the preview that the domain shown (with any www. Stripped) matches your canonical URL.
Which tags this generates
- <title> and <meta name="description"> - the two classic SEO tags used for the browser tab title and the search-result snippet.
- og:type (always set to website), og:title, og:description, og:url, og:image, and og:site_name, the last one only when a site name is entered.
- twitter:card (either summary or summary_large_image), twitter:title, twitter:description and twitter:image.
What it deliberately does not generate
Being precise about scope avoids confusion later, since some of these are commonly expected alongside meta tags.
- No <link rel="canonical"> tag: the URL you enter is only used inside og:url, not as a separate canonical link.
- No og:image:width or og:image:height dimensions, so the receiving platform fetches the image itself to determine its aspect ratio.
- No twitter:site or twitter:creator (the @handle fields) - only the card type and title/description/image content.
- No structured data or JSON-LD: this tool covers head meta tags and social cards only, not schema markup.
Image sizing for social previews
- 1200x630px, a 1.91:1 ratio, is the safe default for both Open Graph and Twitter's summary_large_image card, and matches this tool's own preview aspect ratio.
- summary_large_image (used on X) renders a large banner-style image above the text; summary renders a small, roughly square thumbnail beside it.
- Host the image at a public, direct URL with no login wall: the preview here fetches it exactly as Facebook, LinkedIn, Slack and X's own crawlers will.
Common mistakes
- Omitting og:url: some platforms then fall back to whatever URL their crawler actually fetched, which may not be the canonical one you intended, especially after a redirect.
- Using a relative image path such as /og.png instead of a full https:// address: social crawlers need an absolute URL to fetch the image at all.
- Writing a description well over 160 characters: most platforms truncate it in the preview, so check the length with a word counter before publishing.
- Not accounting for cached previews: several platforms cache a link's preview after first crawling it, so changing the tags later may need a manual re-scrape via that platform's own sharing debugger before the new version shows up.
Frequently asked questions
What meta tags does this generator create?
It generates the standard <title> and meta description tags, Open Graph tags (og:type, og:title, og:description, og:url, og:image and og:site_name when set) for platforms like Facebook and LinkedIn, and Twitter Card tags for X, all ready to paste into your page's <head>.
What are Open Graph and Twitter Card tags?
They are meta tags that control how a link looks when shared: the title, description and preview image shown in the card. Open Graph is read by most social platforms including Facebook, LinkedIn and Slack; Twitter Card tags are read specifically by X.
Where do I put the generated tags?
Paste them inside the <head> section of your HTML document, before the closing </head> tag, so crawlers and social platforms can read them when they fetch the page.
Is my input sent anywhere?
The form fields and generated tags are handled entirely in your browser. The one exception is the image URL: your browser fetches it directly to render the live preview, exactly as a social platform's crawler eventually will, so that address needs to be publicly reachable.
What image size should I use for social previews?
1200 by 630 pixels (a 1.91:1 ratio) is a safe default that works well for both Open Graph and Twitter's summary_large_image card, and matches the aspect ratio used in this tool's own preview.
Can I preview how my link will look before publishing?
Yes, the live preview card shows an approximation of the share card, domain, title, description and image, updating as you edit the form fields.
Does this generate a canonical link tag?
No. The URL you enter is used only for og:url. If you need a canonical URL for SEO purposes, add a separate <link rel="canonical"> tag yourself.
What's the difference between the summary and summary_large_image Twitter Card types?
summary_large_image displays a large banner-style image above the title and description; summary displays a smaller, roughly square thumbnail beside the text instead.
Why is og:site_name missing from my generated tags?
The site name field was left empty. The generator only outputs og:site_name when you fill that field in; otherwise it is skipped rather than output blank.
Does this tool check whether my description is the right length for SEO?
No, it does not count characters itself. Pair it with a word counter to check your description against the roughly 150-160 character guideline before you publish.