Open Graph: Why Your Shared Links Look Bad (And How to Fix Them)

Ever shared a link, expecting a sleek preview, only to see a plain, uninviting URL instead? No image, no description—just a chunk of text that looks, well… disappointing?

That’s where Open Graph (OG) meta tags come in.

What Are Open Graph Tags?

OG tags are snippets of code in your website’s HTML that tell social media platforms how to display your content when someone shares a link. They define elements like:

Title (What’s this page about?)
Description (A short, compelling summary)
Image (A thumbnail that grabs attention)
URL (Ensures the correct link is shared)

When you post a link on Facebook, LinkedIn, X (Twitter), or even in a messaging app, these platforms automatically pull data from OG tags. If they’re missing, the platform guesses what to show—sometimes grabbing the wrong image, cutting off text, or displaying nothing at all.

Why Does Open Graph Matter?

First impressions count. A well-formatted preview can make the difference between someone clicking your link—or scrolling past it. Here’s why OG tags are essential:

✅ Higher Click-Through Rates (CTR): A compelling title and image increase the chances of engagement. Facebook posts with images get 2.3x more engagement than those without.

✅ Consistent Branding: You control how your content appears across different platforms, ensuring a professional look.

✅ Better Social Media Performance: The right preview can increase shares, comments, and overall visibility. A random or broken preview? Not so much.

What Happens Without OG Tags?

Imagine launching a marketing campaign, only to realize your links look terrible on social media. Here’s what could go wrong:

Wrong images (or none at all) make your post unappealing
Cut-off titles fail to communicate your message
Random text excerpts confuse your audience
Less engagement because your post doesn’t stand out

And if you’re running ads? A poorly formatted preview could cost you clicks and money.

How to Set Up Open Graph Tags

Adding OG tags is easy if you know where to look. Here’s how:

1. Add OG Meta Tags to Your Website

Place these meta tags inside the <head> section of your HTML:

<meta property="og:title" content="Your Page Title Here" /> <meta property="og:description" content="A short and engaging description of your page." /> <meta property="og:image" content="https://yourwebsite.com/image.jpg" /> <meta property="og:url" content="https://yourwebsite.com/page" /> <meta property="og:type" content="website" />

2. Use a CMS or Plugin (For WordPress, Shopify, etc.)

If you’re using WordPress, plugins like Yoast SEO or Rank Math let you set OG tags without touching code. Shopify, Webflow, and other platforms often have built-in options for adding them.

3. Add Open Graph Tags in Webflow

If you’re using Webflow, you can set OG tags directly from the Page Settings—no coding required. Here’s how:

Open your Webflow project and go to the Pages panel.
Click the gear icon next to the page you want to optimize.
Scroll down to the Open Graph Settings section.
Fill in the OG Title, Description, and Image URL fields.
Save and publish your site.

This ensures that when someone shares your page, it looks exactly how you want it to on social media.

4. Test Your OG Tags

Before sharing a link, check if everything looks right:

Facebook Debugger: https://developers.facebook.com/tools/debug/
LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/

These tools refresh the cache and show how your link will appear.

Final Thoughts

If you want your content to stand out, don’t let social media platforms decide how your links appear. Set up Open Graph tags properly, and you’ll ensure better engagement, higher click-through rates, and a stronger brand presence online.

Take a few minutes to optimize your OG tags—it’s a small step that makes a huge difference in how people interact with your content.

Now, go test one of your links. Does it look as good as it should?

‍