**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:**
``
**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:**
``
**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:**
` `
**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:**
``
**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:**
``
**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:**
``
**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 `` 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 `` section of your HTML pages:
` `
## 🔎 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 ``.
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.