What is Open Graph?
The Open Graph (OG) protocol was created by Facebook to standardize how web page metadata is interpreted when shared. Before it, social networks tried to "guess" which image or text to use, often choosing incorrectly.
With OG tags, you explicitly define:
- Which image should appear (thumbnail).
- Which title should be displayed (can be different from the
<title>tag). - Which description should accompany the link.
Recommended Image Dimensions
| Social Network | Ideal Dimension | Aspect Ratio | Note |
|---|---|---|---|
| Facebook / LinkedIn | 1200 x 630 px | 1.91:1 | Globally accepted standard. |
| Twitter (Large Card) | 1200 x 628 px | ~1.91:1 | Very similar to Facebook standard. |
| Twitter (Summary) | 144 x 144 px | 1:1 | Square, small image next to text. |
| 300 x 300 px | 1:1 | Recommended square and < 300KB. |
Official Validators (Debuggers)
After adding tags to your site, use these official tools to clear social media cache and verify everything is correct:
Frequently Asked Questions (FAQ)
The essential ones are
og:title, og:type, og:image and og:url. Without them, sharing might look broken or lack an image. Twitter tags (twitter:card, etc.) are optional if you already have Open Graph ones, as Twitter usually uses OG tags as fallback, but it's good practice to include them for full control.
WhatsApp is more restrictive. The image must be under 300KB and have minimum dimensions (recommended 300x300px or larger). If the image is too heavy or too large in pixels, WhatsApp might ignore it.
Social networks cache (save a copy of) your tags. If you changed the image but the old one still appears, use the "Official Validators" listed above. By entering your URL there, you force the social network to visit your site again and update the information.