OpenGraph Generator — Generate OG + Twitter Card Meta Tags
Generate Open Graph and Twitter Card meta tags from a URL. Preview how the link will render on social platforms — in your browser, no upload.
OpenGraph Generator
Generate Open Graph and Twitter Card meta tags. Enter title, description, URL, and image on separate lines. Works entirely in your browser.
The Open Graph protocol is the invisible scaffolding that turns a URL into a rich preview when someone pastes it into a social feed, a messaging app, or a Slack channel. Without OG tags, a shared link shows nothing but the URL itself — no title, no image, no description. With OG tags, the same URL expands into a card with a hero image, a formatted title, and a one-line summary that makes people want to click. The difference in click-through rate between a link with OG tags and one without is measured in multiples, not percentages. The generator assembles the complete tag set from six input fields and shows how the result renders on every major platform.
The subtlety that trips up most manual OG implementations is the Twitter Card dual-tag requirement. Twitter reads twitter:card, twitter:title, twitter:description, and twitter:image as a first choice, and falls back to og:title, og:description, and og:image only when they are absent. The fallback behaviour is not consistent across Twitter clients: the web client falls back gracefully, the iOS app sometimes ignores the OG image dimensions, and TweetDeck occasionally shows the OG fallback with no image at all. The generator emits both tag sets with identical values so the rendering is predictable on every surface.
The image dimension requirements are the other thing that causes avoidable mistakes. Facebook recommends 1200×630 pixels, but it also accepts images as small as 200×200 and as large as 8 MB. Twitter’s large-image card requires a minimum of 300×157 and a maximum of 4096×4096. LinkedIn requires 1200×627. Discord crops to a 1.91:1 ratio. The generator’s preview panel simulates the crop for all six platforms, which surfaces dimension mismatches before the page goes live and the link is shared for the first time.
How to use
Enter page details
Fill in the title, description, image URL, canonical URL, site name, and locale. The generator assembles the complete set of OG and Twitter Card tags, updating the preview in real time.
Preview the social card
The preview panel simulates how the link will render on Facebook, Twitter, LinkedIn, Discord, Slack, and iMessage. Each platform crops the image slightly differently — the preview shows all six.
Copy the meta tags
Copy the full `<meta>` tag block to your clipboard and paste it into the `<head>` of your HTML. The tags follow the Open Graph protocol specification with Twitter Card fallbacks.
Frequently asked
Do I need both OG and Twitter Card tags?
Twitter uses OG tags as a fallback if Twitter Card tags are absent, but the fallback behaviour varies by Twitter client version. For reliable rendering across all Twitter surfaces (web, iOS, Android, TweetDeck), include both sets. The generator emits the complete dual set so you never miss a platform.
What image size should I use?
The recommended OG image is 1200×630 pixels at a 1.91:1 aspect ratio. Facebook crops this to a square in some contexts and a rectangle in others. The tool's preview panel simulates the crop for each platform so you can test your image before deploying.
How does the locale tag affect rendering?
The og:locale tag tells Facebook which language the page is written in. It affects which users see the link in their feed (the Facebook algorithm prioritises locale-matched content) and which locale-specific metadata Facebook fetches. The default is en_US; change it if your page targets a different language.
Can I generate tags for a page that doesn't exist yet?
Yes. The generator is an offline tag builder — it does not scrape the URL you enter. Fill in the fields manually and the tags are assembled from your input. This is the workflow for generating tags before a page goes live.
What happens if I omit the Twitter Card tags?
Twitter falls back to the OG tags and renders a summary card (small image, title, description). Without explicit twitter:card set to summary_large_image, the image renders as a small thumbnail. Explicitly setting both tag sets guarantees a large-image card on every platform.
Limitations
- No live URL scrapingThe generator builds tags from your input, not from scraping an existing page. For extracting OG tags from a published page, use the URL Parser tool instead.
- No image hostingThe og:image tag needs a publicly accessible HTTPS URL. The generator does not host images. Upload your OG image to your own CDN or hosting service before referencing it in the tags.
- Standard OG properties onlyThe generator covers the standard OG properties and Twitter Card types. Platform-specific extensions (og:video, og:audio, og:product, og:profile) are not included in the default output. Add those by hand for video or product pages.
Platform notes
- macOS
- Safari's sharing preview uses OG tags. The browser tool is the right pick for testing how a link renders in iMessage before pushing the page live.
- Web
- Runs entirely client-side. The preview panel simulates all six major social platforms.