I Never Paid Much Attention to Open Graph Tags Until My Links Looked Bad

For a long time, Open Graph tags were one of those things I knew about but didn’t really pay much attention to.

You build a page, set the title and description, make sure SEO looks okay, and deploy it.

Then you share the link somewhere and notice something is wrong.

**The image is missing.

The title looks weird.**

Or even worse, an old image is still showing after you already changed it.

That’s when Open Graph suddenly becomes important.

What actually controls the preview?

Most websites have a few meta tags inside the :

<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="Short description of the 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="website" />

Nothing complicated here.

But I’ve found that having the tags doesn’t necessarily mean the preview will look good.

A title might be technically correct but too long.

The description might make sense on Google but look awkward when someone shares the page.

And images are probably the easiest thing to get wrong.

I started previewing them before deployment

Instead of deploying the page and then testing the link, I wanted a quicker way to see roughly how the card would look.

I’ve been using this simple Open Graph preview:

https://mtkits.com/open-graph-preview

You just enter the title, description, image and URL and it gives you a quick preview.

Nothing fancy, but it saves me from repeatedly changing metadata and deploying just to see how it might look.

It’s also useful when the page isn’t live yet.

A few things I’ve learned

I try to keep the title fairly short. If I need to explain something more, that’s what the description is for.

For images, I normally use a proper social sharing image instead of just picking a random image from the page.

I also always use the full image URL:

https://example.com/images/post.jpg

rather than:

/images/post.jpg

Another thing that confused me before was caching.

Sometimes you fix everything correctly and Facebook or another platform still shows the previous title or image.

That doesn’t always mean your code is wrong. The old preview may simply be cached.

It’s a small thing, but worth checking

Open Graph tags aren’t exactly an exciting part of web development.

But if you’re building public pages, blogs, tools, or landing pages, people are going to share those URLs.

And in some cases, that little preview card is the first thing someone sees before visiting your website.

So now I treat it like one more small check before publishing:

Does the page work?

Does it look okay on mobile?
Is the SEO metadata there?
And does the shared link actually look decent?

It only takes a minute to check, and it can save you from finding out after the link has already been shared.