DEV Community

Narender singh
Narender singh

Posted on

The Lazy Developer's Guide to Perfect Social Media Previews

#webdev #seo #social #beginners

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>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

Social media crawlers don't know your domain. Use the full URL:

<!-- GOOD -->
<meta property="og:image" content="https://yoursite.com/images/preview.png" />
Enter fullscreen mode Exit fullscreen mode

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:

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" />
Enter fullscreen mode Exit fullscreen mode

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,
      }],
    },
  };
}
Enter fullscreen mode Exit fullscreen mode

Every blog post gets a unique, properly-sized preview image. Automatically.

Quick Checklist

Before you share any project link:

  • [ ] og:title is set and under 60 characters
  • [ ] og:description is set and under 155 characters
  • [ ] og:image uses an absolute URL and is 1200x630
  • [ ] twitter:card is set to summary_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.

Top comments (0)