Open Graph Tags

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, WhatsApp, Pinterest, X (Twitter), and others.

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

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)

Below are the essential OG tags to include on every shareable web page:

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:

• Aim for under 60 characters to avoid truncation across all platforms (Facebook supports up to 60–90 characters, LinkedIn renders up to ~70)
• Accurately describe the content
• Make it engaging and clickable

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

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:

• Use a minimum size of 1200×630 px with a 1.91:1 ratio for best results on Facebook, LinkedIn, and WhatsApp
• Keep file size under ~8 MB (Facebook’s limit); smaller is better for faster previews
• Use supported formats: JPG, PNG, or GIF
• Always use absolute URLs (full https:// path), not relative paths
• Use high-resolution, branded images
• Always include width and height tags for faster load times

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

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

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)

1. Missing OG tags → Add missing properties in the <head> section of your HTML or via a plugin like Yoast SEO.
2. Incorrect character counts → Keep within recommended ranges for title and description.
3. Wrong or broken image URLs → Double-check that your image links are absolute (include full URL).
4. 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

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

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>

🔎 Auditing OG Tags in Search Atlas

Search Atlas surfaces OG tag issues directly inside OTTO SEO → Site Audit → Issues. To check and fix missing or misconfigured OG tags on your site:

1. Open OTTO SEO → Site Audit in Search Atlas and select the project for your domain.
2. Run a crawl (or open the most recent crawl) and navigate to the Issues report.
3. Filter for issues related to Open Graph — common warnings include missing og:title, missing og:description, and missing or broken og:image.
4. Click any flagged URL to see the specific OG tag warnings for that page, then update the tags in your CMS or HTML <head>.
5. Re-run the audit to confirm the warnings are resolved.

🧠 Bonus: Twitter / X Cards

Twitter (X) uses a similar system called Twitter Cards, which function like OG tags but with twitter: prefixes (e.g. twitter:title, twitter:description, twitter:image, twitter:card).

If twitter: tags are not present, Twitter/X will fall back to your Open Graph tags, so OG tags alone are often sufficient. For maximum control over how previews render on X (for example, choosing between summary and summary_large_image card types), you can implement both sets together — they don’t conflict.

🚀 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.