Open Graph
Twitter / X
Social Preview β Facebook
Page Title
Generate Meta HTML
<meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" />
<head> <!-- Open Graph (for Facebook, LinkedIn, Slackβ¦) --> <meta property="og:title" content="Your Page Title" /> <meta property="og:description" content="A concise page description" /> <meta property="og:image" content="https://example.com/image.jpg" /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="My Site" /> <!-- Twitter Cards (also used by X / formerly Twitter) --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Your Page Title" /> <meta name="twitter:description" content="A concise page description" /> <meta name="twitter:image" content="https://example.com/image.jpg" /> </head>
| Platform | Recommended Size | Min Size | Aspect Ratio |
|---|---|---|---|
| 1200Γ630 px | 600Γ315 px | 1.91:1 | |
| Twitter / X | 1200Γ628 px | 300Γ157 px | ~1.91:1 |
| 1200Γ627 px | 200Γ200 px | 1.91:1 | |
| Slack | 1200Γ628 px | β | ~1.91:1 |
Keep under 60 characters. Match the page <title> for consistency.
150β160 characters. Write a compelling summary, not just keywords.
Use HTTPS. Minimum 1200Γ630 px. Avoid text-heavy images.
Use the canonical URL. Avoids duplicate content issues when pages share images.
Paste a public page URL into the import field and fetch its metadata, or enter the title, description, and image URL manually. Compare the resulting cards to see which content each preview uses. The example below uses manual Open Graph fields so you can check the displayed title without depending on a remote website changing. Inspect your actual page's metadata after editing the preview; changing this form does not publish tags to that site.
URL import sends the address to the server, which fetches bounded public HTML. Private addresses and unsuitable responses are rejected. The preview is an approximation rather than a guarantee of another platform's rendering or cache state. Use publicly reachable image URLs when testing a real share, and remember that a platform may retain old metadata until it refreshes its cache.
Manual title: Ada Notes
Manual description: Build notes for the team
Preview title: Ada Notes
Preview description: Build notes for the team
Open Graph (OG) meta tags are HTML metadata tags that control how your content appears when shared on social media platforms like Facebook, LinkedIn, and Slack. Created by Facebook in 2010, they let you specify title, description, image, and other properties for social sharing cards.
The recommended Open Graph image size is 1200Γ630 pixels with an aspect ratio of 1.91:1. Twitter/X recommends 800Γ418 for summary_large_image. Images should be under 8MB (Facebook) or 5MB (Twitter). PNG or JPG formats work best.
Yes. Twitter uses its own twitter: prefixed tags (twitter:card, twitter:title, twitter:description, twitter:image), but Twitter will fall back to og: tags if twitter: tags are missing. It's recommended to set both for maximum compatibility across all platforms.
Platforms cache OG data. Facebook may take 24 hours to refresh; use the Facebook Sharing Debugger to force a cache clear. LinkedIn typically updates within minutes. Twitter refreshes on each new share link detection. Slack refreshes immediately on paste.