Open Graph Tag Generator: Control How Your Links Look When Shared
When a link gets pasted into Facebook, LinkedIn, or Slack, the resulting card — image, title, description — isn't guessed from the page content. It's read directly from a handful of og: meta tags in the page's head. This generator builds those tags and shows a live preview of the resulting card, so you're not guessing how a share will actually look.
og:image should be roughly 1200x630px (1.91:1 aspect ratio) for the sharpest rendering.
Why Social Cards Don't Just Use Your Page's Title
Without Open Graph tags, most platforms fall back to scraping a page's
Choosing the Right og:type
website is the safe default for most pages. article unlocks additional Open Graph article-specific tags (author, publish date, section) that some platforms use to render richer previews for blog content. Getting the type right matters more for platforms that build specialized UI around specific content types than for the basic link-card rendering most services use.
og:url and Share Analytics
Setting og:url to the canonical version of the page (not whatever URL variant was actually shared, tracking parameters included) ensures share counts and social analytics consolidate onto one URL instead of fragmenting across every tracked variant of the same link.
Practical Examples
Sharing a Blog Post
Article-type content with a featured image.
- 1.og:type: article
- 2.og:image: 1200x630 featured image
- 3.og:title: matches the post's headline
Sharing a Tool Page
Standard website-type sharing.
- 1.og:type: website
- 2.og:title: tool name + tagline
- 3.og:description: what the tool does in one sentence
Core Open Graph Tags
- og:title: headline shown in the card
- og:description: supporting text
- og:image: the preview thumbnail
- og:url: canonical URL for share analytics
- og:type: website, article, product, etc.
- og:site_name: your brand name
Testing Your Tags After Deploying
- Facebook's Sharing Debugger to force a re-scrape
- LinkedIn's Post Inspector
- Pasting the link into a private Slack channel to preview it
- Twitter/X's Card Validator for twitter: tags specifically
Frequently Asked Questions
What is Open Graph?
A protocol (originally created by Facebook) that lets any webpage become a rich object in a social graph — the og: meta tags in a page's head tell platforms like Facebook, LinkedIn, and Slack what title, description, and image to show when the link is shared.
What size should og:image be?
1200x630 pixels is the widely recommended size — it matches a roughly 1.91:1 aspect ratio that renders sharply on Facebook, LinkedIn, and most other platforms without being cropped awkwardly.
Do I need both Open Graph and Twitter Card tags?
Yes, for full coverage — Twitter/X primarily reads its own twitter: tags, though it falls back to og: tags if Twitter-specific ones are missing. Most sites include both to be safe and to fine-tune how the card looks on each platform.
Why does og:url matter?
It tells the platform the canonical URL to associate with the shared content, which matters for share counts and analytics — without it, a platform might use whatever URL was actually shared, including tracking parameters, fragmenting engagement metrics across variants.
What are the valid og:type values?
website is the default and most common. article is for blog posts and news content (and unlocks additional article: tags like published time). product, profile, video.*, and music.* are used for more specific content types on platforms that support the full Open Graph vocabulary.
Why doesn't the preview image load sometimes?
The preview fetches the image URL directly in your browser. If the URL is wrong, the image doesn't allow cross-origin loading, or it requires authentication, the preview will show a blank placeholder instead — worth testing the actual URL in a new tab if that happens.
