Which Twitter card tag supplies image alternative text?

Definition: twitter:image:alt supplies the text description associated with a Twitter card image. In the Next.js Metadata API, the value comes from the alt field inside the twitter.images object and is emitted as the content value of that meta tag.

Key facts

• Next.js accepts either a metadata object or a generateMetadata function for defining page metadata, according to its Metadata API reference.
• In the reference's Twitter example, twitter.images contains a URL and an alt value of Next.js Logo; the generated head output contains twitter:image:alt with that same value.
• Next.js says that it resolves metadata and creates the relevant <head> tags, and that the metadata object and generateMetadata exports are supported in Server Components.
• The Open Graph protocol describes og:image:alt as a description of what is in the image and recommends it when a page specifies og:image.

How does Next.js map the image description?

The Metadata API has a twitter field. Its documented example uses an object for images, with url identifying the image and alt holding the image description. The reference then shows the corresponding HTML emitted in the document head.

export const metadata = {
  twitter: {
    card: 'app',
    images: {
      url: 'https://nextjs.org/og.png',
      alt: 'Next.js Logo',
    },
  },
}

<meta name="twitter:image" content="https://nextjs.org/og.png" />
<meta name="twitter:image:alt" content="Next.js Logo" />

The alt value is therefore the input field, while twitter:image:alt is the emitted HTML name. The example also places twitter:card beside the image fields, so the image URL and its description are part of the same Twitter metadata object. Next.js labels the Twitter section as a specification used for more than X, formerly known as Twitter.

What does the value describe?

The Open Graph protocol defines the related structured property og:image:alt as a description of what appears in the image. It distinguishes that description from a caption and says that a page specifying og:image should specify og:image:alt as well. That wording provides a useful reading of an image alternative-text value: it describes image content, rather than repeating the page title or a promotional message.

The protocol's complete example pairs an image URL with the description A shiny red apple with a bite taken out. The Next.js example uses Next.js Logo, showing that the value is ordinary text supplied by the site metadata and copied into the HTML attribute.

When is the tag present in the page?

Next.js supports static metadata exported from a layout.js or page.js file, and dynamic metadata returned by generateMetadata. The generateMetadata function is part of rendering. When the page can be prerendered and the function does not introduce dynamic behavior, Next.js includes the resulting metadata in the page's initial HTML. Otherwise, the documentation says that the resolved metadata can be streamed after the initial user interface.

The metadata exports are supported only in Server Components because the metadata must be resolved on the server before the page component is rendered. Next.js therefore treats the generated meta element as page metadata, not as an attribute added later to the visible image element.

How can the output be checked?

Inspect the rendered document head for both the image URL and its description. The relevant pair has this shape:

<meta name="twitter:image" content="https://example.com/image.jpg" />
<meta name="twitter:image:alt" content="Description of the image" />

The twitter:image:alt element should carry the same description supplied to the alt field of the Next.js Twitter image object. If the source is dynamic, the check needs the rendered HTML path used by the page because the documentation describes generateMetadata as part of rendering and allows its result to be streamed.

Related terms

• Structured data
• JSON-LD
• Semantic HTML
• JavaScript rendering and AI crawlers

FAQ

Is twitter:image:alt the image URL?

No. The URL is emitted in twitter:image; the description is emitted in twitter:image:alt, as shown in the Next.js example.

Which Next.js property supplies the tag?

Use the alt property inside the object assigned to twitter.images. Next.js shows that value becoming the content of twitter:image:alt.

Does the value belong on the HTML image element?

The documented Metadata API emits a <meta> element in the document head. It does not describe this value as an alt attribute on the page's visible <img> element.

Sources

1. Next.js, "generateMetadata", 19 August 2026
2. Open Graph protocol, "The Open Graph protocol", undated

---

Check how a page reads to answer engines. Open the GEO score analyzer