DEV Community: Pikzor

Why Your Link Preview Looks Ugly on Twitter (And How to Fix It)

Pikzor — Fri, 10 Apr 2026 01:57:47 +0000

You just published a blog post you're proud of. You share it on Twitter. And then you see it — a tiny logo, no description, or worse, a completely blank card with just the URL. Meanwhile, every other link in your feed has a clean, full-width preview image with a title and description.

What went wrong?

The answer is almost always one of five things. Let's go through each one and fix it.

How Twitter link previews actually work

When you paste a URL into a tweet, Twitter sends a bot (called "Twitterbot") to crawl your page. This bot reads your HTML and looks for specific meta tags called Open Graph tags and Twitter Card tags. These tags tell Twitter: "Here's the title to display, here's the description, and here's the image."

If the bot can't find these tags, or finds them but something is wrong, your link preview either looks broken or doesn't show up at all.

Here's what a properly configured set of tags looks like:

<head>
  <!-- Open Graph tags (used by LinkedIn, Facebook, Slack, Discord) -->
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="A short description of what this page is about." />
  <meta property="og:image" content="https://yoursite.com/images/og-card.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:url" content="https://yoursite.com/your-page" />

  <!-- Twitter-specific tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Your Page Title" />
  <meta name="twitter:description" content="A short description of what this page is about." />
  <meta name="twitter:image" content="https://yoursite.com/images/og-card.png" />
</head>

If any of these are missing or misconfigured, things break. Here are the five most common reasons.

Problem 1: You have no og:image tag at all

This is the most common issue. You wrote a blog post, hit publish, and never added an OG image meta tag. Twitter has nothing to show, so you get either a blank card or a tiny link with just text.

The fix:

Add an og:image meta tag pointing to an image URL. At minimum:

<meta property="og:image" content="https://yoursite.com/images/my-image.png" />
<meta name="twitter:image" content="https://yoursite.com/images/my-image.png" />

If you're using WordPress, install the Yoast SEO plugin or RankMath — both let you set OG images through the editor without touching code.

If you're using a static site generator like Next.js, Astro, or Hugo, you'll need to add these tags to your page template or layout file.

Problem 2: Your image is too small

Twitter has minimum size requirements for the large card preview. If your image is smaller than 300x157 pixels, Twitter may not show it at all. If it's between 300px and 600px wide, Twitter will show a small thumbnail instead of the full-width card.

The fix:

Use an image that is exactly 1200 x 630 pixels. This is the standard OG image size that works across all platforms — Twitter, LinkedIn, Facebook, Discord, Slack, and WhatsApp.

Also include the width and height meta tags — some platforms use these to pre-allocate space for the image before it loads:

<meta property="og:image" content="https://yoursite.com/images/og-card.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Problem 3: You're missing the twitter:card tag

This is the sneaky one. You might have og:image set up perfectly, but your Twitter preview still shows a tiny square thumbnail instead of a big full-width card.

The reason: Twitter defaults to summary card type, which shows a small square image on the left with text on the right. To get the big, beautiful full-width preview, you need to explicitly set the card type to summary_large_image.

The fix:

<meta name="twitter:card" content="summary_large_image" />

That single line is the difference between this:

[tiny square] Title
              Description
              yoursite.com

And this:

┌─────────────────────────────────┐
│      [BIG FULL-WIDTH IMAGE]     │
├─────────────────────────────────┤
│ Title                           │
│ Description                     │
│ yoursite.com                    │
└─────────────────────────────────┘

Always use summary_large_image. There's virtually no reason to use the small card format.

Problem 4: You're using a relative URL instead of an absolute URL

This one trips up a lot of developers. Your OG image tag looks fine in your code:

<!-- This DOES NOT work -->
<meta property="og:image" content="/images/og-card.png" />

But Twitter's bot sees /images/og-card.png and has no idea what domain that belongs to. It can't resolve it, so no image shows up.

The fix:

Always use the full, absolute URL starting with https://:

<!-- This works -->
<meta property="og:image" content="https://yoursite.com/images/og-card.png" />

If you're building the URL dynamically in JavaScript or a framework, make sure you're prepending your domain:

// Wrong
const ogImage = `/images/og/${post.slug}.png`;

// Right
const ogImage = `https://yoursite.com/images/og/${post.slug}.png`;

This is especially common in Next.js and Astro projects where developers forget to add the NEXT_PUBLIC_SITE_URL or equivalent base URL to their image paths.

Problem 5: Twitter is showing a cached old version

You fixed all the tags, tested locally, everything looks perfect. But when you share the link on Twitter, it still shows the old broken preview.

This happens because Twitter aggressively caches link previews. Once it crawls your page and stores the preview, it doesn't re-crawl for a while — sometimes hours, sometimes days.

The fix:

Force Twitter to re-crawl your page using the Twitter Card Validator:

Go to cards-dev.twitter.com/validator (or search "Twitter Card Validator")
Paste your URL
Click "Preview card"

This forces Twitter to fetch the page fresh and update its cache. You should see your new preview image appear immediately. If it still shows the old version, wait 5 minutes and try again.

For Facebook and LinkedIn, they have their own cache-clearing tools:

Facebook: developers.facebook.com/tools/debug — paste your URL, click "Scrape Again"
LinkedIn: linkedin.com/post-inspector — paste your URL

Pro tip: if you're actively developing and testing OG images, add a cache-busting query parameter to your image URL:

<meta property="og:image" content="https://yoursite.com/images/og-card.png?v=2" />

Change v=2 to v=3 each time you update the image. This forces every platform to treat it as a new URL and fetch the fresh version.

Quick debugging checklist

Before you share any important link, run through this:

Open your page in a browser and view the page source (Ctrl+U or Cmd+U). Search for og:image. Is it there? Is it an absolute URL?
Open the og:image URL directly in your browser. Does the image load? Is it the right image?
Is the image at least 1200x630? Check the dimensions.
Do you have twitter:card set to summary_large_image?
Run the URL through a debugger tool. Try opengraph.xyz — it shows all your OG tags in one place and flags issues.

You can also check from the command line:

curl -s https://yoursite.com/your-page | grep -i "og:image\|twitter:image\|twitter:card"

This shows you exactly what the crawlers will see.

The lazy way to fix all of this

If you have a site with dozens or hundreds of pages and you don't want to manually create and maintain OG images for each one, tools like Pikzor generate dynamic OG images automatically — you pick a template, drop one URL into your meta tag, and every page gets a unique preview card.

Whatever you do, don't leave your links looking broken. Every time someone shares your content with a missing or ugly preview, you're losing clicks. It takes 5 minutes to fix, and once it's set up, you never have to think about it again.

How to Add Dynamic OG Images to Any Website in 5 Minutes

Pikzor — Fri, 10 Apr 2026 01:55:36 +0000

Ever shared a link on Twitter and watched it show up as a sad little URL with no preview? Or worse — a tiny stretched logo that makes your site look like it was built in 2004?

That preview card you see when someone shares a link — the one with the image, title, and description — is controlled by something called an Open Graph image (or OG image). And if you're not setting it up properly, you're leaving clicks on the table.

Let's fix that in 5 minutes.

What's an OG image, exactly?

When you paste a URL into Twitter, LinkedIn, Slack, Discord, or pretty much any messaging app, the platform crawls your page and looks for specific HTML meta tags. These tags tell the platform: "Here's the title. Here's the description. And here's the image to show."

That image is your OG image. It's the first thing people see before deciding whether to click your link.

A good OG image can be the difference between someone scrolling past your link and actually clicking it. Think about your own behavior — when you see a link with a clean, branded preview card versus one with a gray box or a pixelated logo, which one are you more likely to click?

The meta tags you need

Open Graph images work through HTML meta tags in the <head> section of your page. Here's the minimum set you need:

<head>
  <meta property="og:title" content="How We Grew to 10K Users in 6 Months" />
  <meta property="og:description" content="The exact playbook we used to go from zero to 10,000 users without spending a dollar on ads." />
  <meta property="og:image" content="https://yoursite.com/images/og-grow-10k.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:url" content="https://yoursite.com/blog/grow-to-10k" />
  <meta property="og:type" content="article" />
</head>

For Twitter specifically, you also want these:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How We Grew to 10K Users in 6 Months" />
<meta name="twitter:description" content="The exact playbook we used..." />
<meta name="twitter:image" content="https://yoursite.com/images/og-grow-10k.png" />

The summary_large_image card type is what gives you that big, full-width preview image on Twitter instead of a tiny square thumbnail.

What size should your OG image be?

The recommended size is 1200 x 630 pixels with a 1.91:1 aspect ratio. This works well across all major platforms: Twitter, LinkedIn, Facebook, Discord, Slack, and WhatsApp.

A few things to keep in mind:

Use PNG or JPG format. PNG looks sharper, JPG has smaller file sizes.
Keep important text and visuals away from the edges — some platforms crop slightly.
Keep the file size under 1MB. Large images load slowly and some platforms will skip them entirely.
Always use absolute URLs (starting with https://) for the image path, not relative ones. Relative URLs are the number one reason OG images don't show up.

Three ways to add OG images to your site

Approach 1: One static image for your entire site

This is the simplest approach. You create one OG image — usually your logo on a branded background — and use it everywhere.

<meta property="og:image" content="https://yoursite.com/images/default-og.png" />

Pros: Takes 2 minutes. Better than having no image at all.

Cons: Every page on your site shares the same preview image. When someone shares your blog post about pricing strategies, it looks identical to someone sharing your about page. People can't tell what the link is about from the preview.

This approach works for a personal portfolio or a simple landing page. For anything with multiple pages of content, you want something better.

Approach 2: Manually design an image for each page

Open Canva or Figma, create a 1200x630 image with the blog post title, your branding, maybe an icon. Save it. Upload it. Reference it in the meta tag.

<!-- blog/grow-to-10k.html -->
<meta property="og:image" content="https://yoursite.com/images/og/grow-to-10k.png" />

<!-- blog/pricing-strategy.html -->
<meta property="og:image" content="https://yoursite.com/images/og/pricing-strategy.png" />

Pros: Each page gets a unique, polished preview image.

Cons: It takes 10-15 minutes per image. If you have 50 blog posts, that's 8+ hours of design work. Nobody maintains this consistently. You'll do it for the first 5 posts and then stop.

Approach 3: Dynamic OG images via URL (the smart way)

Instead of creating images manually, you use a service that generates them on-the-fly from a URL. You pass your title, author, and brand color as URL parameters, and the service returns a PNG image.

The concept is simple. Instead of pointing your meta tag at a static file:

<meta property="og:image" content="https://yoursite.com/images/og/some-file.png" />

You point it at a URL that generates the image dynamically:

<meta property="og:image" content="https://pikzor.com/og?title=How+We+Grew+to+10K+Users&author=Sarah+Chen&theme=dark" />

When Twitter or LinkedIn hits that URL, the service renders a beautiful card image with your title and branding, and returns the PNG. The image is cached, so subsequent requests are instant.

Pros: Zero manual work per page. Every page gets a unique image. Add a new blog post and the OG image exists automatically. Change your branding once and all images update.

Cons: You depend on an external service (or need to host your own rendering engine).

How to implement dynamic OG images

In plain HTML

If you have a static HTML site, you set the meta tag manually per page — but the image URL is dynamic:

<head>
  <meta property="og:image" 
    content="https://pikzor.com/og?title=My+Blog+Post&author=John&color=3B82F6" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" 
    content="https://pikzor.com/og?title=My+Blog+Post&author=John&color=3B82F6" />
</head>

In Next.js (App Router)

With Next.js, you can set OG images dynamically using the metadata export in your page or layout files:

// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);

  const ogImageUrl = `https://pikzor.com/og?${new URLSearchParams({
    title: post.title,
    author: post.author,
    date: post.date,
    color: '3B82F6'
  })}`;

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [
        {
          url: ogImageUrl,
          width: 1200,
          height: 630,
        }
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [ogImageUrl],
    },
  };
}

This generates a unique OG image URL for every blog post automatically. When you publish a new post, the OG image just works — no extra steps.

In any JavaScript framework

If you're using Astro, Nuxt, SvelteKit, or any other framework, the pattern is the same. Build the URL with your dynamic data and inject it into the head:

// Generic approach — works anywhere
function getOGImageUrl(title, author) {
  const params = new URLSearchParams({
    title: title,
    author: author,
    color: '3B82F6',
    theme: 'dark'
  });
  return `https://pikzor.com/og?${params.toString()}`;
}

// Use it in your template/layout
const ogImage = getOGImageUrl(post.title, post.author);
// Then inject into <meta property="og:image" content="${ogImage}" />

How to test your OG images

After adding the meta tags, you need to verify they work. Social platforms cache aggressively, so if your old preview was broken, you need to force a refresh.

Use these free debuggers:

Twitter Card Validator: cards-dev.twitter.com/validator — paste your URL, see the preview
Facebook Sharing Debugger: developers.facebook.com/tools/debug — paste your URL, click "Scrape Again" to refresh the cache
LinkedIn Post Inspector: linkedin.com/post-inspector — paste your URL, see the preview
opengraph.xyz: paste any URL and see all OG tags at once

Common issues to check:

Is the og:image URL an absolute URL (starts with https://)?
Is the image actually accessible? Try opening the URL directly in your browser.
Is the image at least 1200x630? Smaller images may show as tiny thumbnails or not at all.
Did you include twitter:card set to summary_large_image? Without this, Twitter shows a tiny square instead of a large card.

Stop wasting time designing OG images

If you don't want to deal with building your own rendering pipeline, tools like Pikzor let you generate dynamic OG images by just picking a template and dropping a URL into your meta tags — no design work, no API code, done in 2 minutes.

Whatever approach you pick, just make sure every page on your site has an OG image. Your links will get more clicks, your content will look more professional, and you'll never have to stare at that ugly gray box again.