Next.js Course
Next.js
/
Beginner

Twitter Cards

Definition

A proprietary subset of metadata tags used specifically by X (formerly Twitter) to generate rich media previews.

Explain Like I'm New

Very similar to Open Graph, but specifically for Twitter. If you don't include them, Twitter will try to fall back to Open Graph tags, but explicitly defining them ensures your links look perfect on the platform.

Real World Example

Using the `summary_large_image` Twitter card type so your blog post takes up the entire vertical height of a user's Twitter feed.

Common Use Cases

  • •Social media optimization (SMO)

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • What is the difference between a `summary` card and a `summary_large_image` card on Twitter?

intermediate

  • Inside the Next.js `metadata` object, what key holds the Twitter configuration?

Flash Cards

Question

Difference?

Click to reveal answer
Answer

A `summary` card puts a tiny square thumbnail next to the text. `summary_large_image` puts a massive, full-width billboard image above the text.

Question

Which key?

Click to reveal answer
Answer

The `twitter` object.