twitter | x.com don't show "summary_large_image"

[TheLoloS]

Summary

Hey!
I'm having an issue with Next.js generateMetadata in several of my applications. Suddenly, the "summary_large_image" preview stopped working on X.com (formerly Twitter). On Facebook, for example, everything displays correctly. Just six months ago, everything worked perfectly across all platforms — both via widgets and direct links on X.

I’ve been trying to fix this for 3 days now, but no luck.
I’m starting to think it might be because X now requires the twitter:url tag, which can't be defined using Next.js metadata.

For comparison, Facebook renders it correctly (see attached screenshots), and LinkedIn also shows the preview as expected.

Image details:

Size: 1200x630 px

Format: PNG

I'd really appreciate any help, as I’ve been struggling with this and don’t think it’s something I broke — it used to work just fine.
I’m using Next.js 14.2.28.

and here is something wird event when on my site i have this:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@thls">
<meta name="twitter:creator" content="@thelolos">
<meta name="twitter:title" content="Strony internetowe, które inspirują i generują zyski">
<meta name="twitter:description" content="Zbuduj swoją obecność w sieci z profesjonalną stroną internetową od Thls. Nasze strony są nie tylko estetyczne, ale także funkcjonalne i zoptymalizowane pod kątem SEO. Dzięki naszym usługom Tw...">
<meta name="twitter:image" content="https://thls.pl/opengraph4.png">

on sites i get this?

i even try to give image in format 1024x1024 and still...

Additional information

type Locale = "pl" | "en" | "uk" | "es" | "de" | "fr" | "it";

type Params = {
  params: Promise<{
    locale: Locale;
  }>;
};

export async function generateMetadata(
  { params }: Params,
  // parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const { locale } = await params;
  const t = i18n[locale];

  return {
    title: t.title0,
    description: t.desc0,
    authors: [{ name: "TheLoloS", url: "https://thls.pl/" }],
    creator: "TheLoloS",
    alternates: {
      canonical: `https://thls.pl/${locale}/services/website-create`,
    },
    publisher: "TheLoloS",
    openGraph: {
      type: "website",
      title: t.title0,
      description: t.desc0,
      siteName: t.title0,
      locale: locale,
      url: isProduction
        ? `https://thls.pl/${locale}/services/website-create`
        : `http://localhost:3000/${locale}/services/website-create`,
      images: ["/opengraph4.png"],
    },
    twitter: {
      card: "summary_large_image",
      site: "@thls",
      title: t.title0,
      description: t.desc0,
      creator: "@thelolos",
      images: isProduction
        ? "https://thls.pl/opengraph4.png"
        : "http://localhost:3000/opengraph4.png",
    },
  };
}

Example

No response

[VasylPosmit]

i had the same issue, but twitter:description WAS NOT confirmed as the reason.

Solved by correctly including (and making sure it is SSR provided in initial document): following properties of Metadata.twitter.images
type: 'image/jpeg', width: 1280, height: 720

I suggest to close issue#78511

PS: Next 15.3.4

[VasylPosmit]

@TheLoloS try to use TwitterImageDescriptor instead of string and provide TwitterImageDescriptor : type, width, height.
If still do not work, make sure that file-generated twitter-image is set up correctly (if you use App Router): https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image

NOTE

ts
type TwitterMetadata = {
    site?: string | undefined;
    siteId?: string | undefined;
    creator?: string | undefined;
    creatorId?: string | undefined;
    description?: string | undefined;
    title?: string | TemplateString | undefined;
    images?: TwitterImage | Array<TwitterImage> | undefined;
}

type TwitterImage = string | TwitterImageDescriptor | URL;
type TwitterImageDescriptor = {
    url: string | URL;
    alt?: string | undefined;
    secureUrl?: string | URL | undefined;
    type?: string | undefined;
    width?: string | number | undefined;
    height?: string | number | undefined;
};

[TheLoloS]

Yeep its work! for the future:

twitter: {
      card: "summary_large_image",
      site: "@thls",
      title: t.title,
      description: t.desc,
      creator: "@thelolos",
      images: {
        type: "image/png",
        alt: t.title,
        secureUrl: isProduction
          ? "https://thls.pl/opengraph4.png"
          : "http://localhost:3000/opengraph4.png",
        width: 1200,
        height: 630,
        url: isProduction
          ? "https://thls.pl/opengraph4.png"
          : "http://localhost:3000/opengraph4.png",
      },
    }

Thank you <3