What are Open Graph Meta Tags in SEO? Complete Guide

Published: 8 Oct 2025

Have you ever noticed this? When you share your website link on WhatsApp or Facebook, sometimes it looks plain, with no image and no proper title. But other links appear well-designed with a large image, a bold title, and a short description.

That difference comes from how your site’s data is managed. Behind every polished preview, there’s a small set of code that tells platforms how to display your link. These are called Open Graph meta tags.

Table of Content

What Are Open Graph Meta Tags?
How Open Graph Meta Tags Work
Why Open Graph Meta Tags Matter in SEO
Key Open Graph Meta Tags You Should Use
How To Add Open Graph Tags (Step-By-Step)
How to Check If Your Website Has Open Graph Tags
1. Method 1: Using Browser Tools
2. Method 2: Using Online Checkers
How to Fix Common Open Graph Meta Tag Issues
Open Graph vs. Twitter Cards
Best Practices for Using Open Graph Meta Tags in SEO
Do Open Graph Meta Tags Affect SEO Rankings?
Conclusion
FAQs

If you want your shared links to look neat and clickable, understanding these tags is essential. So, in this guide, we will cover what are open graph meta tags in SEO.

What Are Open Graph Meta Tags?

Open Graph meta tags are small pieces of HTML code placed inside a webpage’s head section. They tell social platforms what to show when someone shares your page.

They define the title, image, description, and even the URL preview that appears on platforms like Facebook, WhatsApp, and LinkedIn.

You may also hear them called OG tags or social meta tags; both mean the same thing. Their main goal is simple: to control how your content looks when shared anywhere online.

How Open Graph Meta Tags Work

When someone shares your webpage on Facebook, WhatsApp, or LinkedIn, these platforms first look at your site’s code. Inside the <head> section of your webpage, they search for Open Graph (OG) meta tags.

If OG tags are found, the platform reads them to know exactly what title, image, and description to show in the shared link preview. This ensures your content appears neat, clickable, and visually appealing.

If your page doesn’t have OG tags, social media platforms try to pull random information — usually the page title and a random image or no image at all. This can make your link look dull or incomplete.

So, OG tags act like a guide for social media systems. They tell them, “Here’s the right image, this is the main title, and this is how I want my link to appear.”

Why Open Graph Meta Tags Matter in SEO

While OG tags don’t directly boost rankings, they strongly influence how users interact with your links. A clean, rich preview encourages clicks, which can increase your traffic and indirectly support SEO.

Here’s why they matter:

Better presentation: They make your shared links look attractive and professional.
Higher engagement: A clear preview increases curiosity and click-through rates.
Consistent branding: Every share reflects your site’s design and tone properly.
Platform understanding: Social media systems read your OG tags to display accurate details.

Together, these points help your content perform better on social platforms, leading to more visitors and stronger online visibility.

Key Open Graph Meta Tags You Should Use

Open Graph meta tags tell social platforms what to show when your link is shared. Each tag has a clear role. It defines how your title, image, and description appear in previews.

Below are the most useful tags you should always include.

1. og:title – Page Title

This tag sets the title that appears on your shared post. It should be clear, short, and easy to read.

Syntax: <meta property=”og:title” content=”Your Page Title”>

Tip: Keep it under 60 characters to display well on all devices.

2. og:description – Page Summary

This tag shows a short description below your title. It helps people understand what your page is about before clicking.

Syntax: <meta property=”og:description” content=”A short summary of your page.”>

Tip: Stay below 150 characters for best results.

3. og:image – Featured Image

This tag selects the image shown with your shared link. A clear and bright image grabs more attention on social media.

Syntax: <meta property=”og:image” content=”https://example.com/image.jpg”>

Tip: Use an image of 1200×630 pixels for the best clarity. You can also define image size for better display:

<meta property=”og:image:width” content=”1200″>
<meta property=”og:image:height” content=”630″>

4. og:url – Canonical Page URL

This tag shows the main link for your shared page.
It helps social networks avoid duplicate URLs.

Syntax: <meta property=”og:url” content=”https://example.com/your-page”>

Tip: Match this with your canonical link to keep shares consistent.

5. og:type – Page Type

This tag tells platforms what kind of content you are sharing. It helps them show the right layout for your page.

Syntax: <meta property=”og:type” content=”article”>

Common types:

article for blog posts
website for homepages or general pages
product for store items
video for video pages

6. og:site_name – Website Name

This tag adds your site name to the shared preview. It helps people recognize your brand easily.

Syntax: <meta property=”og:site_name” content=”Your Website Name”>

Tip: Use your actual site name, not a slogan or tagline.

7. og:locale – Language

This tag defines the language and region of your content. It helps platforms show the correct version of your page.

Syntax: <meta property=”og:locale” content=”en_US”>

Tip: Use other locale values for different languages, such as en_GB or fr_FR.

8. og:image:alt – Image Description

This optional tag describes your image for better accessibility. It helps users who use screen readers and supports SEO clarity.

Syntax: <meta property=”og:image:alt” content=”Short image description.”>

Tip: Keep it short and related to your image content.

How To Add Open Graph Tags (Step-By-Step)

Adding Open Graph tags ensures your shared links look professional and clickable on social media. You can do this on most platforms easily without touching code. Here’s how for different websites.

1. WordPress (with Yoast or Rank Math)

Most WordPress SEO plugins automatically handle OG tags.

Steps:

Install Yoast SEO or Rank Math plugin.
Open the post or page you want to share.
Scroll to the plugin’s SEO settings section.
Go to the Social or Facebook tab.
Add a custom title, description, and image.
Save or update your post.

The plugin will automatically add all required Open Graph meta tags for your page, including image sizes and URL.

2. Shopify

Shopify themes usually generate OG tags from your page’s title and featured image. You can also customize some tags manually.

Steps:

Go to Online Store > Themes > Customize.
Find Theme Settings > Social Media (name may vary).
Upload a default OG image for your site.
Optional: Edit code under Actions > Edit Code > Snippets > social-meta-tags.liquid to customize further.

This ensures your Shopify pages display the right OG title, image, and description when shared.

3. Wix / Squarespace

Both Wix and Squarespace let you edit OG tags without coding.

Wix:

Go to Settings > Social Share.
Set a custom OG title, description, and image for each page.

Squarespace:

Open Page Settings > Social Image.
Upload the image you want to appear when shared.
For advanced customization, use Page Header Code Injection to add other OG tags manually.

4. Manual HTML Method (For Developers)

If you prefer full control, you can add OG tags directly in your page’s HTML.

Steps:

Open the page’s <head> section.

Add tags like:

<meta property=”og:title” content=”Your Page Title”>
<meta property=”og:description” content=”Short summary of your page”>
<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”>

Save the changes and test the page using social media preview tools. This method is useful for custom sites or when plugins are not available.

How to Check If Your Website Has Open Graph Tags

You can easily check if your webpage already includes OG tags using a few simple methods.

Method 1: Using Browser Tools

Open your website in Chrome.
Right-click and select View Page Source.
Press Ctrl + F (or Command + F on Mac) and type og:.
If you see tags like <meta property=”og:title” …>, it means OG tags are already there.

Method 2: Using Online Checkers

You can use free tools that quickly show all OG data found on your page:

Meta for Developers Sharing Debugger (by Facebook): https://developers.facebook.com/tools/debug/ → Shows what Facebook detects and allows you to refresh cached previews.
LinkedIn Post Inspector:
https://www.linkedin.com/post-inspector/ → Displays how your content will appear when shared on LinkedIn.
Meta Tags Analyzer:
https://metatags.io/ → Lets you preview how your link looks across multiple social platforms.

Using these tools helps ensure your OG tags are present, correct, and displaying as expected.

How to Fix Common Open Graph Meta Tag Issues

Sometimes your OG tags may not work properly, even if they’re added. Here’s how to identify and fix common problems, especially for WordPress users.

1. Wrong Image Size

If your image looks cropped or doesn’t appear, check the dimensions. Fix: Use an image that’s 1200×630 pixels. Update the image in your SEO plugin and recheck it using the Facebook Debugger tool.

2. Missing Title or Description

If no text appears with your shared link, the OG title or description might be missing. Fix: In your WordPress SEO plugin (Yoast, Rank Math, etc.), fill in the Social Title and Social Description fields under each post’s SEO settings.

3. Incorrect URL or Type

If the preview shows an old or wrong URL, your OG URL may not match your canonical link. Fix: Make sure the tag <meta property=”og:url”> points to the exact live page URL. Also, use the right type; for example, use “article” for posts or “website” for homepages.

4. Cached Previews Not Updating

Social platforms often save (cache) your old preview. Fix: Use the Meta Debugger’s “Scrape Again” button to refresh your link preview. For LinkedIn, use the Post Inspector’s refresh option.

Open Graph vs. Twitter Cards

Both Open Graph meta tags and Twitter Cards serve the same purpose, they control how your links look when shared.

Open Graph (OG): Works mainly for Facebook, WhatsApp, LinkedIn, and most platforms that follow the OG standard.
Twitter Cards: Designed specifically for Twitter (X). They use a different set of tags, such as twitter:title, twitter:description, and twitter:image.

Most SEO plugins in WordPress automatically add both OG and Twitter Card tags for you. So, you don’t need to manage them separately.

In short, OG tags and Twitter Cards work hand in hand to make your content look professional everywhere it’s shared.

Best Practices for Using Open Graph Meta Tags in SEO

Follow these quick best practices to ensure your OG setup works well and follows major SEO guidelines (including Google’s recommendations):

Keep titles and descriptions short and clear.
Use high-quality, relevant images that match your content.
Always make sure OG tags reflect your actual page content.
Avoid using clickbait titles or misleading visuals.
Include one OG image per page to prevent confusion.
Regularly test your tags after updates or redesigns.
Use SEO plugins to manage OG data easily and avoid code errors.

These steps help your content look reliable, consistent, and engaging on all social platforms.

Do Open Graph Meta Tags Affect SEO Rankings?

Open Graph tags don’t directly improve your Google rankings because they don’t affect how search engines read your site. However, they indirectly boost SEO by improving user engagement.

When your links look attractive on social media, people are more likely to click and share them. This can bring more traffic, better brand visibility, and stronger user signals, all of which support SEO performance over time.

So, while OG tags don’t change rankings instantly, they play a big role in making your content clickable and share-worthy.

Conclusion

In this guide, we explored what are Open Graph meta tags in SEO, how they work, and why they matter. You learned how tags like og:title, og:description, and og:image help your links appear clean and clickable on social media. We also covered how to add them in WordPress, fix common errors, and test your previews before sharing.

If you manage a website or blog, I personally recommend enabling Open Graph meta tags through an SEO plugin like Rank Math or Yoast SEO. It saves time, keeps your branding consistent, and ensures your posts always look perfect when shared anywhere.

That’s all for now; I hope this guide helped you understand and use Open Graph tags with confidence. Thanks for reading, and see you in the next one!

FAQs

Here are some of the most commonly asked questions related to OG meta tags:

Do I need to add OG tags on every page of my website?

Yes, it’s better to have OG tags on every page you want people to share. Each page can have its own Open Graph tag, title, and image. This helps social sites read your open graph metadata correctly and show the right preview every time. Without it, your shared links may look incomplete or confusing.

Can I use Open Graph meta tags and SEO meta tags together?

Yes, you can use both. SEO meta tags help search engines understand your page, while Open Graph meta tags help social media platforms display it properly. They work side by side and don’t conflict. It’s a good idea to match your OG title and description with your SEO ones for a clean and consistent look.

What happens if my website has no OG meta tag?

If your page has no OG meta tag, social platforms will try to guess what to show; sometimes the result looks messy or wrong. You might see a random image or a broken title. Adding simple og tags fixes this problem and makes your posts look neat and professional everywhere.

What is the best size for an Open Graph image?

The best Open Graph image size is 1200×630 pixels. This size keeps your image sharp and clear on Facebook, WhatsApp, and LinkedIn. Using the right size helps your open graph meta work better, as platforms can load and display your image without cutting or stretching it.

Is Open Graph good for SEO or just for social media?

Open Graph meta tags are mainly for social media, not direct SEO ranking. But they make your shared links look better and attract more clicks. More engagement means more visitors, which still supports your SEO goals. So, even if they don’t boost ranking, they do improve performance.