You finally ship your project. You share the link on Twitter. And the preview looks like... nothing. A blank card. Or worse, some random text fragment from your footer.
I've been there. Multiple times. And it's always the same problem: Open Graph tags.
What Are OG Tags?
Open Graph tags are meta tags in your HTML <head> that tell social platforms what to show when someone shares your link. Facebook invented the protocol, but Twitter, LinkedIn, Slack, Discord, and basically every platform uses them now.
Here are the important ones:
<head>
<meta property="og:title" content="My Awesome Project" />
<meta property="og:description" content="A short description of what this does" />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:url" content="https://example.com" />
<meta property="og:type" content="website" />
<!-- Twitter-specific (yes, they still need their own) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Project" />
<meta name="twitter:description" content="A short description" />
<meta name="twitter:image" content="https://example.com/preview.png" />
</head>
That's it. Six to eight meta tags and your links look professional everywhere.
The 5 Mistakes Everyone Makes
1. Forgetting the Image
No og:image? Most platforms will either show nothing or try to grab a random image from your page. Sometimes it's your logo. Sometimes it's an icon. Sometimes it's a tracking pixel. Fun.
2. Wrong Image Dimensions
The magic number is 1200x630 pixels. That's the size that looks good everywhere. Go smaller and platforms will crop it weird or add gray bars. Go too big and some platforms reject it entirely.
3. Using a Relative Image URL
This won't work:
<!-- BAD -->
<meta property="og:image" content="/images/preview.png" />
Social media crawlers don't know your domain. Use the full URL:
<!-- GOOD -->
<meta property="og:image" content="https://yoursite.com/images/preview.png" />
4. Not Setting twitter:card
Without twitter:card, Twitter defaults to a tiny thumbnail. Add summary_large_image to get the full-width preview card. One line of HTML makes a massive difference.
5. Caching Issues
You fixed your tags but the preview still looks wrong? Social platforms cache aggressively. Twitter caches for about 7 days. Facebook has its own timeline.
You can force a refresh:
Twitter: Use the Card Validator
Facebook: Use the Sharing Debugger
LinkedIn: Append a query parameter like?v=2to bust the cache
The Dynamic Image Problem
Static OG images work fine for your homepage. But what about blog posts? Product pages? User profiles? You can't manually create an image for every page.
This is where OGPix comes in. It generates OG images dynamically through URL parameters.
Instead of creating images in Figma, you construct a URL:
<meta property="og:image"
content="https://ogpix-pi.vercel.app/api/og?title=My+Blog+Post&theme=dark" />
Change the title parameter, get a different image. No design tools. No image hosting. No build step.
For a Next.js blog, it looks like this:
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
openGraph: {
title: post.title,
description: post.excerpt,
images: [{
url: \`https://ogpix-pi.vercel.app/api/og?title=\${encodeURIComponent(post.title)}\`,
width: 1200,
height: 630,
}],
},
};
}
Every blog post gets a unique, properly-sized preview image. Automatically.
Quick Checklist
Before you share any project link:
- [ ]
og:titleis set and under 60 characters - [ ]
og:descriptionis set and under 155 characters - [ ]
og:imageuses an absolute URL and is 1200x630 - [ ]
twitter:cardis set tosummary_large_image
- [ ] Test with Twitter Card Validator and Facebook Debugger
- [ ] Preview looks good on mobile (text isn't tiny)
Stop Shipping Blank Previews
Good OG tags take 5 minutes to add. Bad previews cost you clicks every single day. Your project deserves better than a blank card on Twitter.
Set up your meta tags. Use OGPix for dynamic images. Test before you share. That's it.
It's the laziest high-impact improvement you can make.