Open Graph Card Preview
Optimize your content's appearance when shared on social media platforms using Open Graph tags. Preview your OG card to ensure it looks great across various platforms.
Best Practices for Open Graph Cards
- Use high-quality images (minimum 1200x630 pixels for optimal display)
- Create compelling titles (recommended 60-90 characters)
- Write clear, concise descriptions (recommended 2-4 sentences)
- Include relevant OG tags for your content type (article, video, product, etc.)
- Ensure consistency between OG tags and your page content
- Test your OG cards across different platforms using this preview tool
Open Graph Card Types
- Website: General card for any web page
- Article: Detailed card for blog posts or news articles
- Product: Showcase products with price and availability
- Video: Embed video content directly in the card
- Profile: Display information about a person or organization
Why Open Graph Matters
Open Graph protocol enables any web page to become a rich object in a social graph. It enhances the way your content appears when shared on social media platforms, potentially increasing engagement and click-through rates. By implementing OG tags, you control how your content is represented across Facebook, LinkedIn, Slack, WhatsApp, Pinterest, and many other platforms that support the Open Graph protocol.
Open Graph Markup Tag Reference
| Property | Description | Example |
|---|---|---|
| og:title | The title of your object as it should appear in the graph | <meta property="og:title" content="Your Page Title" /> |
| og:type | The type of your object (e.g., website, article, video) | <meta property="og:type" content="website" /> |
| og:image | An image URL which should represent your object within the graph | <meta property="og:image" content="https://example.com/image.jpg" /> |
| og:url | The canonical URL of your object that will be used as its permanent ID in the graph | <meta property="og:url" content="https://www.example.com/page" /> |
| og:description | A one to two sentence description of your object | <meta property="og:description" content="Description of your page" /> |
| og:site_name | The name which should be displayed for the overall site | <meta property="og:site_name" content="Your Site Name" /> |
| og:locale | The locale of the resource. Defaults to en_US | <meta property="og:locale" content="en_GB" /> |
| article:published_time | When the article was first published | <meta property="article:published_time" content="2023-09-17T09:00:00+01:00" /> |
| og:video | A URL to a video file that complements this object | <meta property="og:video" content="https://example.com/video.mp4" /> |
| og:audio | A URL to an audio file to accompany this object | <meta property="og:audio" content="https://example.com/audio.mp3" /> |