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.
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:
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.
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.
Imagine launching a marketing campaign, only to realize your links look terrible on social media. Here’s what could go wrong:
And if you’re running ads? A poorly formatted preview could cost you clicks and money.
Adding OG tags is easy if you know where to look. Here’s how:
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" />
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.
If you’re using Webflow, you can set OG tags directly from the Page Settings—no coding required. Here’s how:
This ensures that when someone shares your page, it looks exactly how you want it to on social media.
Before sharing a link, check if everything looks right:
These tools refresh the cache and show how your link will appear.
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?