Social card preview
Preview wide and compact sharing cards, write Open Graph metadata, and export safe HTML tags.
How it works & useful details
How this tool works
Exports the website Open Graph type with title, description, canonical URL and required image URL; optional site name and image alt text are included. Add tags to the head and declare the og prefix on the html element as shown in the Open Graph specification. Both preview layouts use identical tags. Remote images are never fetched; the placeholder is not an image preview. Platforms decide rendering and caching. Titles: 200 characters; descriptions: 1,000; URLs: 8,192 each.
About this tool
Social card preview shows how a link is likely to appear in wide and compact sharing cards while you write the Open Graph metadata behind it. It catches missing or weak titles, descriptions, and images before you publish.
The preview is an illustration based on your inputs, not a live check of any platform. The exported HTML tags are escaped and ready to paste into your page head.
How to use it
- Enter the page URL, title, description, and image.
- Check the wide and compact card previews.
- Adjust the metadata until the cards look right.
- Copy the Open Graph tags into your template.
Worked example
<meta property="og:type" content="website">
<meta property="og:title" content="Small rituals. Better mornings.">
<meta property="og:description" content="A fresh perspective on your daily cup. Explore our latest collection.">
<meta property="og:url" content="https://example.com/coffee">
<meta property="og:image" content="https://example.com/images/coffee.jpg">
<meta property="og:site_name" content="Everyday Studio">
<meta property="og:image:alt" content="A warm cup of coffee beside a notebook">Facebook, LinkedIn, Slack, Discord, WhatsApp, and many other apps read these Open Graph tags when someone shares the URL, and build the link preview card from them.
Getting the card right
- Use an absolute HTTPS image URL. 1200 × 630 pixels (1.91:1) works well for large cards on most platforms. Keep important content away from the edges, because some apps crop to a square.
- Keep titles short. Long titles are truncated differently on every platform.
- Add og:image:alt for accessibility.
- X (Twitter) falls back to Open Graph tags but uses its own twitter:card tag to choose between a small and a large card.
Platforms cache previews aggressively. After changing tags, use each platform's debugger (Facebook Sharing Debugger, LinkedIn Post Inspector) to refresh the cached card. The preview here is illustrative. The image is not fetched, and each platform applies its own layout.
Frequently asked questions
Does it fetch my page or image?
No. You provide the values, and the preview is composed locally; nothing is crawled.
Why does a platform show a different card?
Each platform applies its own truncation, aspect-ratio, and caching rules, so treat the preview as a guide.
Which tags are generated?
Standard Open Graph title, description, URL, and image tags, plus a Twitter card type where relevant.
Why does my old image still show when I share the link?
The platform cached the previous tags. Re-scrape the URL in the platform's sharing debugger, or add a version parameter to the image URL.