open graphseosocial mediameta tagsweb development
What is Open Graph and How to Set It Up
Learn how Open Graph meta tags control how your content appears when shared on social media - Facebook, Twitter, LinkedIn.
June 15, 2024·6 min read
What is Open Graph?
Open Graph is a protocol created by Facebook that enables web pages to become "rich objects" in social networks. When you share a URL on Facebook, LinkedIn, Twitter, or Slack, the platform reads your Open Graph tags to display a rich preview card.
Basic Open Graph Tags
<head>
<!-- Required -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<!-- Recommended -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="My Website">
</head>
Twitter Cards
Twitter uses its own system but falls back to OG tags:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/image.jpg">
OG Image Requirements
| Platform | Recommended Size | Min Size |
|---|---|---|
| 1200×630px | 600×315px | |
| 1200×600px | 300×157px | |
| 1200×627px | - |
Keep file size under 1MB. Use JPEG for photos, PNG for graphics.
Debugging OG Tags
- Facebook: Use the Facebook Sharing Debugger
- Twitter: Use the Twitter Card Validator
- Quick preview: Use our Open Graph Preview tool
Generate correct tags with our Meta Tag Generator.