#og image not propogating on X

1 messages · Page 1 of 1 (latest)

solid comet
#

I added this metadata code but its not showing on X

    card: "summary_large_image",
    title: "Spectra,
    description: "Track posts, verify deliverables, and capture screenshots across all platforms.",
    images: ["/spectraOG.png"],
    creator: "@spectra", // Update with your Twitter handle
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
wintry palmBOT
#

Hi @solid comet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

It looks like your OG image is not showing on X (formerly Twitter) despite setting the metadata. Based on the knowledge sources, here are some key points and possible issues to check:

  1. Absolute URL Required for Images
    Twitter (and other social platforms) require the image URL to be absolute, not relative. In your code, you have:

    images: ["/spectraOG.png"]

    This should be:

    images: ["<https://yourdomain.com/spectraOG.png"]>

    Replace yourdomain.com with your actual domain. The documentation explicitly states that image URLs must be absolute for both Open Graph and Twitter metadata to work correctly generateMetadata > twitter.

  2. Correct Metadata Structure
    Your metadata structure is correct, but ensure all fields are properly closed and formatted. For example, your title is missing a closing quote.

  3. File-based Metadata
    If you want to ensure OG images are picked up reliably, you can use the file-based metadata API by placing a twitter-image.png or opengraph-image.png in the relevant route segment. This will automatically generate the correct meta tags opengraph-image and twitter-image.

  4. Check Deployment and Caching
    Make sure your deployment is up-to-date and that the image is accessible publicly. Sometimes, X caches previews, so use the Twitter Card Validator to debug and refresh the cache.

#
  1. Example Metadata Block
    Here’s a corrected example:
    export const metadata = {
  twitter: {
    card: "summary_large_image",
    title: "Spectra",
    description: "Track posts, verify deliverables, and capture screenshots across all platforms.",
    images: ["<https://yourdomain.com/spectraOG.png"],>
    creator: "@spectra",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
}
    Make sure to replace the image URL and creator handle as needed.

Summary:
The most likely reason your OG image is not showing on X is because the image URL is relative instead of absolute. Update it to an absolute URL and test again using the Twitter Card Validator generateMetadata > twitter.

If you continue to have issues, check that your Next.js version is not affected by any recent metadata rendering bugs, as some versions have had issues with metadata not being rendered in the <head> as expected [Bug] Static metadata rendered in <body> instead of <head>.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: