What are Open Graph Tags?
Open Graph tags are HTML meta tags that control how your web pages appear when shared on social media platforms such as Facebook, LinkedIn, Pinterest, and messaging apps. Without them, platforms guess which title, image, and description to display, often producing poor, inconsistent previews that reduce click-through rates.
How to Add Open Graph Tags to Your Website
- Fill in the fields above to generate your tags.
- Paste the generated Open Graph and Twitter Card tags into the <head> section of your HTML.
- Test your page with the Facebook Sharing Debugger to confirm the preview renders correctly.
Open Graph vs Twitter Cards — What is the Difference?
Open Graph is the original protocol, created by Facebook and now used as the de facto standard by most platforms that generate link previews. Twitter has its own separate Twitter Card protocol with its own meta tags, but it automatically falls back to your Open Graph tags if Twitter-specific tags are absent — which is why including both gives you full coverage.
Open Graph Image Requirements by Platform
| Platform | Recommended Image Size |
|---|---|
| 1200x630px | |
| 1200x627px | |
| Twitter (large image) | 1200x628px |
| Twitter (summary) | 1:1, minimum 144x144px |
| Minimum 300x200px |
Frequently Asked Questions
What happens if I don't add Open Graph tags?
Without OG tags, social platforms scrape your page and guess the title, image, and description. This often results in wrong images, truncated titles, or no preview at all — significantly reducing engagement when links are shared.
Where do Open Graph tags go in HTML?
All Open Graph meta tags go inside the <head> section of your HTML document, before the closing </head> tag. They must be present when the page is first rendered — dynamic injection via JavaScript is not reliably read by social crawlers.
What size should my OG image be?
The recommended size is 1200x630 pixels with a 1.91:1 aspect ratio. Keep file size under 1MB. Use JPG or PNG format. Avoid text-heavy images as platforms may crop them differently.
How do I test my Open Graph tags?
Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), or Twitter Card Validator. These tools show exactly how your link will appear when shared and let you force-refresh cached previews.