Open Graph Meta Generator
How to use this Open Graph generator
- Fill in your page's title, description, image, and URL.
- Watch the live preview update to match what social platforms will show.
- Copy the generated HTML into your page's head.
What are Open Graph tags?
Open Graph meta tags control how your page appears when shared on Facebook, LinkedIn, and other platforms — the image, title, and description shown in the link preview card.
What image size should I use?
1200×630 pixels is the recommended standard for og:image, giving a good aspect ratio across most platforms' preview cards.
Do I need separate Twitter Card tags?
Twitter/X falls back to Open Graph tags if dedicated Twitter Card tags aren't present, but adding them (as this tool does) gives you more precise control over that specific preview.
Why crawlers, not browsers, actually read these tags
Open Graph tags never render visually on your own page — a visitor loading your site directly never sees them, since they live as hidden <meta> tags in the document head. What actually reads them is each platform's own link-preview crawler: when someone pastes your URL into Facebook, LinkedIn, Slack, or a messaging app, that platform's server fetches your page in the background, looks specifically for og:title, og:description, og:image and the rest, and builds the preview card from whatever it finds. This is why testing a share preview requires actually pasting the link somewhere (or using a platform's own debugging tool), not just looking at your page in a browser — the tags are metadata for machines, not content for human visitors.
Why a changed preview sometimes doesn't update
Most platforms cache the Open Graph data they scrape from a URL, often for a significant period, specifically so they don't have to re-fetch and re-parse a page every single time someone shares the same link. This means updating your og:title or og:image and testing the share preview again can show the old, cached version even though your page's actual HTML has already changed — the platform is showing you what it scraped last time, not what's live now. Most major platforms provide a dedicated tool to force a re-scrape (Facebook's Sharing Debugger and LinkedIn's Post Inspector are the two most commonly needed), and running your URL through the relevant one after making changes is usually necessary to see the update reflected, rather than waiting for the cache to expire on its own.
Image requirements go beyond just pixel dimensions
1200×630 is the standard recommended size for og:image, but a few other constraints matter just as much as getting that dimension right. The image URL must be an absolute URL (starting with https://), not a relative path, since the crawler fetching it has no concept of "relative to this page" the way a browser does. Most platforms also enforce a maximum file size for preview images (typically a few megabytes) and will silently fall back to no image, or a generic placeholder, if the image can't be fetched, is too large, or returns an error — so it's worth confirming the image URL actually loads correctly on its own before assuming the preview will work. Aspect ratio cropping also varies by platform: some crop to a square thumbnail, others preserve the full 1200×630 rectangle, so an image with important content near the edges can get cropped differently depending on where the link is shared.
og:type and why it matters beyond the default "website"
This tool defaults to the "website" type, which is a safe, generic choice, but Open Graph supports several other types that unlock additional structured fields some platforms use to enrich the preview further. An "article" type, for instance, supports additional properties like published time and author, which some platforms display alongside the standard preview card. A "product" type supports price and availability fields. Using a more specific type than "website" when your content genuinely fits one of these categories can result in a richer preview on platforms that specifically look for that type's extra fields, though the basic title/description/image preview will still work correctly even with the generic "website" type if you'd rather keep things simple.
Limitations of this tool
This tool generates syntactically correct Open Graph and Twitter Card HTML tags and renders an approximate preview of how they'll likely appear — but it can't confirm that your image URL is actually publicly reachable from outside your own browser, can't force any platform's cache to refresh once you've published the real tags, and can't perfectly replicate each platform's specific rendering quirks (exact crop behavior, character truncation limits for titles and descriptions, and card styling all vary slightly between Facebook, LinkedIn, Slack, and other platforms). Treat the preview here as a close approximation for building correct tags, and use each platform's own debugging tool for a definitive check once your page is actually live.