Control how your pages look when shared — Open Graph Generator.
Build Open Graph and Twitter Card meta tags instantly. Paste the generated HTML into your page's <head> and watch your links shine on Facebook, LinkedIn, and X (Twitter).
Fill in your page details and preview the social card live
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />What each Open Graph tag does
and how platforms use them.
Open Graph is a protocol developed by Facebook that lets any web page become a rich object in a social graph. Twitter Card tags extend the same idea specifically for X.
| Meta Tag | Purpose | Recommended Value | Used By |
|---|---|---|---|
| og:title | Title of the page shown in the preview card | 40–60 characters | Facebook, LinkedIn, Slack |
| og:description | Short summary displayed below the title | 100–200 characters | Facebook, LinkedIn |
| og:image | Thumbnail image shown in the card | 1200 × 630 px, JPEG/PNG | All platforms |
| og:url | Canonical URL of the page | Full absolute URL | Facebook, LinkedIn |
| og:type | Content type (website, article, product…) | website (most common) | |
| og:site_name | Name of the overall website | Your brand name | Facebook, LinkedIn |
| twitter:card | Card layout type for X (Twitter) | summary_large_image | X (Twitter) |
| twitter:title | Title shown on the Twitter card | 70 characters max | X (Twitter) |
| twitter:description | Description on the Twitter card | 200 characters max | X (Twitter) |
| twitter:image | Image for the Twitter card | 1200 × 600 px, < 5 MB | X (Twitter) |
Fill in your page details
Enter your page's title, description, URL, and image URL. Pick the OG type and Twitter card style that matches your content.
Preview the social card live
Switch between the Facebook/LinkedIn and Twitter/X preview tabs to see exactly how your link will appear when shared — image, title, description, and domain.
Copy & paste into your <head>
Click Copy HTML and paste the generated <meta> tags inside your page's <head> element. Done — your page now has rich social previews.
Everything you need to know about OG tags
What are Open Graph meta tags?
<head> section that control how the page appears when shared on social networks like Facebook, LinkedIn, and Slack. They define the title, description, image, and type of content shown in the link preview card.What image size should I use for og:image?
summary_large_image card works best at 1200 × 600 px. Keep the file under 8 MB and use JPEG or PNG for the broadest compatibility.Do Twitter Card tags override Open Graph tags?
og:title, og:description, and og:image if the twitter: equivalents are absent. However, it's best practice to include dedicated twitter: tags so you can tailor the copy and card type independently for X (Twitter).