Open Graph Generator
Generate the Open Graph and Twitter Card tags that control how your links look when shared on social media — title, image, description, and type.
What is the Open Graph Generator?
When someone shares your link on Facebook, LinkedIn, Slack, or X, the platform builds that preview card — title, image, snippet — from Open Graph meta tags in your page's head. This generator creates the full set from a form: og:title, og:type, og:url, og:image, and og:description, plus the matching twitter:card, twitter:title, twitter:description, and twitter:image tags.
The og:type dropdown covers the common cases — website, article, profile, video, product — and the output is one copy-paste HTML block with both tag families included, since X reads its own twitter:* tags before falling back to Open Graph.
Everything is generated in your browser as you type.
Why are Open Graph Tags Important?
Without OG tags, platforms guess. The 'preview' becomes a random image scraped from your page (or none), a truncated URL for a title, and whatever text the crawler grabbed first. Shares with broken previews get measurably fewer clicks — the card is the ad, and an unstyled card looks broken.
The image is the highest-impact tag. The recommended size is 1200×630 pixels (a 1.91:1 ratio); smaller images get cropped or dropped by some platforms, and pages without og:image often render as plain text links.
One warning from experience: platforms cache previews aggressively. After changing your tags, run the URL through the platform's debugger (Facebook's Sharing Debugger, LinkedIn's Post Inspector) to force a refresh — otherwise you'll keep seeing the stale card and think the tags failed.
How to Use the Open Graph Generator
1. Enter your page's title, canonical URL, description, and image URL.
2. Pick the og:type that matches the content — 'article' for posts, 'website' for most other pages.
3. Copy the generated block of OG and Twitter Card tags into your page's <head>.
4. Validate with Facebook's Sharing Debugger or LinkedIn's Post Inspector to refresh the platform's cache.
Example
Input: Title 'Summer Sale', image https://example.com/cover.jpg
Output (excerpt):
<meta property="og:title" content="Summer Sale"> <meta property="og:image" content="https://example.com/cover.jpg"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Summer Sale">
Frequently Asked Questions
Everything you need to know about the Open Graph Generator.