Your link previews look broken. Here's a one-line fix.

#webdev #tutorial #seo #nextjs

Your link previews on Twitter and LinkedIn probably look broken. Or they show your favicon at 50x50 pixels. Or there's no image at all and the link gets scrolled past.

This happens because you either don't have an og:image meta tag, or it points to something that wasn't designed for 1200x630.

I fixed this for my own projects by building an API that generates the image from URL parameters. No Figma, no uploading files, no manual work per page.

How it works

Your meta tag looks like this:

<meta property="og:image" content="https://ogpix-pi.vercel.app/api/og?title=My+Blog+Post&theme=dark" />

When someone shares your link, the platform hits that URL, gets back a 1200x630 PNG, and your preview looks good. The image is generated on the fly from the query parameters.

You can set the title, description, and pick from 10 themes. The images get cached at the CDN edge, so after the first request it's basically instant.

Next.js example

If you're using Next.js with the app router, you can generate unique OG images per page automatically:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  const ogUrl = \`https://ogpix-pi.vercel.app/api/og?title=\${encodeURIComponent(post.title)}&theme=minimal\`;

  return {
    openGraph: {
      images: [{ url: ogUrl, width: 1200, height: 630 }],
    },
  };
}

Every blog post gets its own OG image with the correct title. Zero manual work.

What about Vercel's built-in OG?

Vercel has @vercel/og which uses Satori to render React components as images. It works, but you have to write JSX for your image layout, deal with font loading, handle edge cases with CSS support, and deploy it as part of your app.

With an external API you just set a URL. Works with any framework, any hosting provider, any static site. One line of HTML.

The free tools

While building this I also made a bunch of free developer tools that run in the browser:

OG Tag Checker - see how your links look on social media
Hash Generator - SHA-256, MD5, etc.
JWT Decoder - decode tokens without sending them to a server
Regex Tester - test patterns with live highlighting
Password Generator - cryptographically random passwords

All client-side, no tracking, no accounts needed. Full list at ogpix-pi.vercel.app/tools.

Try it

The playground lets you preview all themes and copy the URL: ogpix-pi.vercel.app/playground

Free tier is 100 images per month. If you're running a blog or side project, that's probably enough. Paid plans exist for higher volume.

If something doesn't work or you want a feature added, leave a comment.

DEV Community