Large card
- Input
- card=summary_large_image
- Expected output
- <meta name="twitter:card" content="summary_large_image" />
Prepare a wide image (~1200×630) so it is not shown cropped.
twitter card generator
The Twitter Card controls how a link looks on X: a small image beside the text (summary) or a large image above (summary_large_image). This page explains each tag and generates the block with a preview, inheriting from Open Graph where it makes sense.
Prepare a wide image (~1200×630) so it is not shown cropped.
twitter:creator should be @author, not just author.
The <title> lives in the <head> and sets the browser tab text and the search snippet title; it is a whole-page signal. The <h1> is the visible heading inside the content. They can have different text: the title is usually more concise and tuned for the SERP, while the h1 speaks directly to someone already on the page. Do not conflate them or repeat the exact same text without reason.
No. X falls back to og:title and og:description when the matching twitter: tags are missing. Set only twitter:card and add the other twitter: tags only when you want different copy or image for X.
Platforms cache the first read of the link. After changing the tags, use the official card validator/debugger to force a re-scrape and clear the URL cache.

<title>Guia completo de SSR no Next.js</title> <meta name="description" content="Aprenda quando usar renderização no servidor, streaming e cache no Next.js, com exemplos práticos e armadilhas comuns de performance." /> <link rel="canonical" href="https://exemplo.com.br/blog/ssr-next-js" /> <meta name="robots" content="index, follow" /> <meta property="og:title" content="Guia completo de SSR no Next.js" /> <meta property="og:description" content="Aprenda quando usar renderização no servidor, streaming e cache no Next.js, com exemplos práticos e armadilhas comuns de performance." /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://exemplo.com.br/blog/ssr-next-js" /> <meta property="og:image" content="https://exemplo.com.br/og/ssr-next-js.png" /> <meta property="og:image:alt" content="Diagrama de renderização no servidor com Next.js" /> <meta property="og:site_name" content="Exemplo" /> <meta property="og:locale" content="pt_BR" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@exemplo" /> <meta name="twitter:creator" content="@exemplo" /> <meta name="twitter:title" content="Guia completo de SSR no Next.js" /> <meta name="twitter:description" content="Aprenda quando usar renderização no servidor, streaming e cache no Next.js, com exemplos práticos e armadilhas comuns de performance." /> <meta name="twitter:image" content="https://exemplo.com.br/og/ssr-next-js.png" />
Everything runs in the browser. Nothing you type is sent to any server, stored in logs or used in analytics.