Open Graph (OG) tags are snippets of HTML code that control how your web content is displayed when shared on social media platforms such as Facebook, LinkedIn, Slack, and WhatsApp.
When a user shares your page, OG tags tell the platform which title, image, description, and URL to display — ensuring that your shared links look polished and professional.
Without OG tags, your links might appear with random text or missing visuals — reducing clicks, shares, and engagement.
💡 Why Open Graph Tags Matter
💡 Why Open Graph Tags Matter
While OG tags aren’t a direct Google ranking factor, they play a major role in clickability and link appeal across social media.
Here’s why they’re important:
✅ Make your content stand out visually on social platforms
✅ Reinforce your brand with consistent titles, descriptions, and imagery
✅ Encourage more clicks and shares (higher CTR)
✅ Improve your chance of earning backlinks when shared by other webmasters
Even though OG tags don’t directly boost rankings, the secondary SEO benefits — brand visibility, referral traffic, and backlinks — are substantial.
🧩 Key Open Graph Tags (and Best Practices)
🧩 Key Open Graph Tags (and Best Practices)
Below are the essential OG tags to include on every shareable web page:
1. og:title
1. og:title
Controls the title that appears in social posts.
HTML Example:
<meta property="og:title" content="10 Proven SEO Strategies for 2025" />
Best Practices:
Keep between 40–60 characters
Accurately describe the content
Make it engaging and clickable
2. og:description
2. og:description
Provides a short, compelling summary of the page content.
HTML Example:
<meta property="og:description" content="Learn how to boost organic traffic with these 10 proven SEO techniques that drive measurable results." />
Best Practices:
Keep between 120–160 characters
Reinforce the topic and value
Pair with a strong CTA or benefit statement
3. og:image
3. og:image
Defines the featured image used in the social post.
HTML Example:
<meta property="og:image" content="https://example.com/images/seo-strategy-guide.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />
Best Practices:
Maintain a 1.91:1 ratio (e.g. 1200x630px)
Use high-resolution, branded images
Always include width and height tags for faster load times
4. og:url
4. og:url
Specifies the canonical URL of the page.
HTML Example:
<meta property="og:url" content="https://example.com/seo-strategy-guide" />
Best Practices:
Use your canonical version of the page
Ensure URLs are SEO-friendly and consistent
5. og:type
5. og:type
Indicates the type of content on the page.
HTML Example:
<meta property="og:type" content="article" />
Best Practices:
Use “article” for blogs and guides
Use “website” for homepages and general content
Only define one type per page
6. og:locale
6. og:locale
Defines the language or region of your content.
HTML Example:
<meta property="og:locale" content="en_US" />
Best Practices:
Use correct country and language codes
Only include for non-English or multilingual websites
⚠️ Common Open Graph Mistakes (and How to Fix Them)
⚠️ Common Open Graph Mistakes (and How to Fix Them)
Missing OG tags → Add missing properties in the
<head>section of your HTML or via a plugin like Yoast SEO.Incorrect character counts → Keep within recommended ranges for title and description.
Wrong or broken image URLs → Double-check that your image links are absolute (include full URL).
Duplicate or conflicting OG data → Ensure only one set of OG tags per page.
Use a Site Audit Tool or Open Graph Checker to verify implementation and catch errors.
⚙️ How to Add Open Graph Tags
⚙️ How to Add Open Graph Tags
Option 1: Use a Plugin (Recommended for CMS Users)
Option 1: Use a Plugin (Recommended for CMS Users)
For platforms like WordPress, Shopify, or Wix, plugins such as Yoast SEO, All in One SEO Pack, or RankMath make adding OG tags simple.
Just fill in the fields for title, description, and featured image — and the plugin will handle the HTML code for you.
Option 2: Add Them Manually
Option 2: Add Them Manually
Manually insert your OG tags in the <head> section of your HTML pages:
<head> <meta property="og:title" content="Your Page Title" /> <meta property="og:description" content="Your Page Description" /> <meta property="og:image" content="https://example.com/image.jpg" /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:type" content="article" /> </head>
🧠 Bonus: Twitter Cards
🧠 Bonus: Twitter Cards
Twitter uses a similar system called Twitter Cards, which function like OG tags but with twitter: prefixes.
🚀 Conclusion
Open Graph tags might not directly impact your rankings, but they dramatically improve click-through rates, shareability, and engagement across social media.
If your content doesn’t display properly when shared, users are far less likely to click it. Implementing OG tags ensures your pages always look professional, branded, and worth sharing.