Open Graph (OG) tags are HTML meta tags that control how your web pages appear when shared on social media platforms. Developed by Facebook in 2010 and now adopted by virtually every major platform, Open Graph tags are the invisible infrastructure behind every social media link preview.
What Are Open Graph Tags?
Open Graph tags are placed in the <head> section of your HTML. The four essential tags are: og:title (the title of your page), og:description (a brief description), og:image (the preview image URL), and og:url (the canonical URL of your page). When someone shares your URL on Facebook, Twitter, LinkedIn, or WhatsApp, these platforms read your OG tags to construct the preview card.
💡 Quick Check: Paste any URL into PreviewPro to instantly see how its Open Graph tags render across all major platforms. Missing tags will show as blank fields.
The Business Impact of Missing OG Tags
When OG tags are missing or misconfigured, social platforms fall back to guessing — often pulling the wrong image, a truncated page title, or no description at all. Research by Conductor found that pages with properly configured OG tags receive 3x more clicks from social media than pages without them.
Essential Open Graph Tags Every Page Needs
At minimum, every page should have: og:title (50-60 characters), og:description (120-160 characters), og:image (1200×630px, under 1MB), og:url (canonical URL), og:type (usually "website" or "article"), and og:site_name (your brand name). For articles, also add og:article:published_time and og:article:author.
How to Implement OG Tags
Add OG tags directly in your HTML <head> section. For dynamic websites, generate them server-side based on page content. Most CMS platforms (WordPress, Webflow, Shopify) have plugins or built-in settings for OG tags. For React/Next.js apps, use the next/head component or react-helmet to inject meta tags dynamically.
Key Takeaway
Open Graph tags are a small investment with a massive return. Spending 30 minutes properly configuring your OG tags can permanently improve the CTR of every link you share on social media. Use PreviewPro to generate, preview, and copy the exact HTML code you need — no technical knowledge required.
Tags
Priya Sharma
Priya is a full-stack developer and technical SEO specialist who writes about web performance, metadata, and developer tools.
Try PreviewPro Free
Generate and preview your social media link cards across Facebook, Twitter, LinkedIn, and WhatsApp — instantly.
Generate Preview Now