Open Graph & Twitter Card Generator

Open Graph & Twitter Card Generator: Build Social Preview Tags, Free, Right in Your Browser

When a link is shared on Facebook, LinkedIn, Slack, or X, the platform does not read your page's visible content to build the preview card. It reads a handful of hidden og: and twitter: meta tags in your page's <head>. If those tags are missing, the preview falls back to whatever the platform can scrape on its own: often the wrong image, a truncated title, or no preview at all. This tool builds the correct tags from the details you type in, and shows you a live preview of the result before you ever publish anything.

The tags this generator produces follow the Open Graph protocol and X's own Card documentation, the same specifications search engines, link unfurlers, and chat apps already read. Nothing here is guesswork: every field maps to a documented, named meta tag, and the live preview mirrors the card layout those platforms actually render.

1What Open Graph and Twitter Card Tags Actually Do

og:title, og:description, og:image, and og:url are the four tags almost every platform looks for first. og:type tells the platform what kind of content the page is: website, article, or product, which can change how some platforms format the card. Pro Mode adds two more Open Graph tags, og:site_name (the brand name shown next to the domain) and og:locale (the content's language and region), plus article:author and article:published_time when the page type is article. Twitter Card tags are a separate set X reads first, checking its own twitter:card, twitter:title, twitter:description, and twitter:image tags before falling back to the Open Graph tags above, which is why Pro Mode lets you reuse your Open Graph content for Twitter or write it separately.

2The Image Size That Actually Matters

A commonly recommended size for og:image is 1200x630 pixels, an aspect ratio of roughly 1.91:1, matching how Facebook and LinkedIn crop the image into their card. For Twitter's summary_large_image card, a commonly recommended size is 1200x675 pixels, with a documented minimum of 300x157 pixels below which X will not reliably show a large image at all. An image that is too small, too square, or served over a relative path instead of a full https:// URL is the single most common reason a link preview shows no image, a cropped image, or a broken image icon. Pro Mode's Image Dimension Validator takes the width and height you plan to use and checks both of these targets directly, so you find out before you publish instead of after sharing a broken link.

3Simple vs Pro

Simple Mode covers what most single pages need: a correct, complete Open Graph tag block and a preview to confirm it looks right. Pro Mode, currently free to use, is built for anyone managing tags across many pages or platforms at once: it adds the Twitter specific tags X checks before anything else, the fields larger sites and publications use, and a way to save a reusable profile instead of retyping the same site name and locale every time.

4Common Reasons People Use a Social Meta Tag Generator

None of these need a developer tool, a browser extension, or a paid SEO platform subscription: a title, a description, an image URL, and a couple of minutes are enough to get a correct, complete tag block.

5Why Link Previews Break, and How This Tool Prevents It

A broken link preview is almost always one of three problems: a tag that is missing entirely, an og:image URL that is relative instead of absolute (platforms will not resolve a path like /images/cover.jpg on their own), or an image whose dimensions fall outside what the platform expects. Because this tool renders a live preview from the exact tags it is about to generate, you see the same title, description, and image crop a platform would show, before you publish, rather than discovering the problem after sharing a link and waiting for a cached preview to clear.

6Frequently Asked Questions