What is Open Graph Protocol?
In 2010, Facebook introduced the Open Graph (OG) protocol. Before this, when you shared a link on social media, the platform would randomly guess which image and text to display. Often, it would pick a sidebar ad or the wrong headline, making the link look spammy.
Open Graph tags allow you to control exactly what is displayed when your page is shared on Facebook, LinkedIn, WhatsApp, Slack, and Discord. By defining a specific Title, Description, and (most importantly) a high-quality Image, you can significantly increase your click-through rates from social media.
The Essential Tags Explained
- og:title: The headline of your article or page. Keep it punchy and under 60 characters.
- og:description: A 1-2 sentence summary. This entices the user to click. Unlike SEO meta descriptions, you can be a bit more "click-baity" here.
- og:image: The most critical tag. This image dominates the news feed. The recommended size is 1200 x 630 pixels. If this is missing, engagement drops by up to 50%.
- og:url: The canonical URL of the page. This ensures that likes and shares are attributed to the correct link.
What about Twitter Cards?
While Twitter (now X) supports Open Graph tags, they also have their own proprietary tags called "Twitter Cards."
<meta name="twitter:card" content="summary_large_image">
Adding this specific tag ensures your image is displayed as a large, full-width banner in the Twitter feed, rather than a tiny square thumbnail. Our generator automatically includes both OG and Twitter tags for maximum compatibility.
How to Debug Your Tags
After you paste the code from this tool into your website's header, you should test it. Because social networks cache (save) your links, updates might not show immediately.
Use these official debuggers to clear the cache and see your changes:
- Facebook Sharing Debugger: Allows you to "Scrape Again" to refresh your image.
- Twitter Card Validator: Previews how your card looks on X.
- LinkedIn Post Inspector: Shows exactly what LinkedIn sees when you share a URL.
Frequently Asked Questions
Where do I put this code?
Just like standard SEO meta tags, these go in the <head> section of your HTML document. Paste them right after your standard Title and Description tags.
Why is my image not showing on WhatsApp?
WhatsApp is strict about image size. If your OG image is too large (over 300KB) or the dimensions are weird, WhatsApp might fail to load it. Stick to 1200x630px and keep the file size reasonable (use our Image Compressor).
Do these tags help with Google Rankings?
Directly? No. Google does not use OG tags for search ranking. Indirectly? Yes. Better social tags lead to more social shares and clicks, which drives traffic signals that can influence SEO.