Open Graph Tag Generator
Build the Open Graph and Twitter Card tags that control how your link looks when it is shared — with a live preview of the resulting card.
0 characters — under 60 is safest
0 characters — under 110 shows in full on most platforms
Share card preview
About the Open Graph Tag Generator
When a link is pasted into a social platform, a messaging app or a chat client, the receiving system fetches the page and looks for Open Graph tags to build a preview card. Without them it guesses: a title scraped from somewhere, no image or a random one from the page, and often no description at all. The difference between a proper card and a guessed one is large and immediate — link previews with a correct image get substantially more engagement than a bare URL.
Open Graph began at Facebook and became the de facto standard everywhere. LinkedIn, WhatsApp, Slack, Discord, Signal, iMessage and most others read the same og: tags. X uses Twitter Card tags where present and falls back to Open Graph where they are not, which is why generating both is the reliable approach.
The image is where most implementations fail. It must be an absolute URL, not a relative path. It should be 1200 × 630 pixels — the 1.91:1 ratio every major platform crops to. It must be publicly reachable without a login. And because platforms cache aggressively, fixing a bad image usually means asking the platform to re-scrape the page rather than just editing the tag and waiting.
How to use it
- Enter the page detailsThe canonical URL, the title you want on the card, and a description written for social rather than search.
- Add an image URLAn absolute URL to a 1200 × 630 image that is publicly accessible without a login.
- Choose the content typewebsite for most pages, article for blog posts, which unlocks author and publication date fields.
- Set the Twitter Card typesummary_large_image for a full-width image, or summary for a small square thumbnail.
- Check the live previewSee how the card will look before publishing, at roughly the proportions platforms use.
- Copy the tagsPaste the generated block into your page's alongside your existing meta tags.
Features
- Open Graph and Twitter togetherBoth tag families generated from one set of inputs, with no duplicated typing.
- Live card previewA realistic render of the resulting share card, updating as you type.
- Article metadataAuthor, published time, modified time and section tags for blog posts and news.
- Image guidanceDimension and ratio recommendations, with a warning when a relative URL is used.
- Locale and site nameog:locale and og:site_name included, which several platforms use for attribution.
- Valid escaped markupAttribute values are escaped correctly so quotes and ampersands in titles do not break the tags.
Who uses this tool
- Content marketersMake sure a campaign page shares with the right image and headline before it is promoted anywhere.
- BloggersGive each post a deliberate share card instead of whatever image the theme happens to pick first.
- DevelopersAdd complete social metadata to a landing page or static site without looking up the specification.
- Community managersEnsure links shared into Slack, Discord and WhatsApp render as proper cards rather than bare URLs.
Tips worth knowing
- 1200 × 630 is the size to use. It satisfies the 1.91:1 ratio every major platform crops to and stays sharp on high-density screens.
- og:image must be an absolute URL including the protocol. A relative path is the single most common reason a card shows no image.
- After changing tags, run the page through the platform's own debugger to clear its cache — otherwise the old card can persist for days.
Frequently asked questions
What size should an og:image be?
1200 × 630 pixels, a 1.91:1 ratio, ideally under about 5 MB. That size is displayed well by Facebook, LinkedIn, X, WhatsApp, Slack and Discord alike, and it stays crisp on high-density displays.
Do I need both Open Graph and Twitter Card tags?
Generating both is safest. X reads Twitter Card tags when they exist and falls back to Open Graph when they do not, so at minimum you need Open Graph. Adding twitter:card gives you explicit control over whether the image is large or a small thumbnail.
Why is my link preview showing the wrong image?
Almost always caching. Platforms store the card the first time a link is shared and do not re-fetch on their own. Use Facebook's Sharing Debugger, LinkedIn's Post Inspector or X's card tools to force a re-scrape after you change the tags.
Can og:title be different from my page title?
Yes, and it often should be. The title tag is written for search results and carries keywords; og:title is written for a person scrolling a feed. Shorter, more direct social titles usually perform better.
Does Open Graph affect SEO?
Not directly — it is not a ranking factor. Indirectly it matters a great deal, because links that preview well are shared and clicked more, and that engagement produces the traffic and links that do influence rankings.
Where do these tags go?
In the
of your page. If your CMS has social sharing fields — most SEO plugins do — use those instead of pasting raw tags, or you will end up with two competing sets and unpredictable results.