Qual tamanho de imagem usar?

1200 × 630 pixels (1.91:1) é o padrão seguro — satisfaz Facebook, LinkedIn, Slack e o card `summary_large_image` do Twitter. O `summary` simples do Twitter usa 1:1, mas a maioria dos sites usa uma imagem só pra ambos.

Diferença entre `summary` e `summary_large_image`?

`summary` mostra miniatura quadrada pequena ao lado do título e descrição. `summary_large_image` mostra imagem banner de largura total acima do título. Use a grande pra posts com conteúdo pesado; a pequena quando a imagem é incidental.

O link canônico importa?

Sim. Crawlers usam pra de-duplicar variantes de URL (`?utm_source=…`, barras finais) e rotear engagement social (curtidas, comentários) pra uma única URL canônica.

Gerador Open Graph & Twitter Card

Desenvolvimento

Constrói o bloco padrão de metadados de cartão de preview que toda plataforma social e app de chat procura quando alguém compartilha sua URL. Título, descrição, imagem, tipo e a variante específica de Twitter Card são todos configuráveis. Uma pequena preview mostra aproximadamente como o link aparecerá num feed social. Copie o resultado direto pro `<head>` da sua página.

—

BásicoTítuloDescriçãoURL canônicaURL da imagemTexto alt da imagem

Open Graph

Nome do siteog:typeog:locale

Twitter Card

twitter:cardtwitter:site (@)twitter:creator (@)

Bloco <meta>

<title>Site Title — Page Title</title>
<meta name="description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph -->
<meta property="og:title" content="Site Title — Page Title" />
<meta property="og:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:alt" content="Cover image describing the page" />
<meta property="og:site_name" content="Example Site" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Site Title — Page Title" />
<meta name="twitter:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<meta name="twitter:image" content="https://example.com/og-image.png" />
<meta name="twitter:image:alt" content="Cover image describing the page" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />

Preview

Example Site

Site Title — Page Title

A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card.

Valide o resultado com Sharing Debugger do Facebook ou Card Validator do Twitter após deploy.

Como usar

Preencha título, descrição, URL canônica e URL da imagem de capa 1200×630.
Escolha o `og:type` do Open Graph (article, website, …) e um estilo Twitter Card (summary, summary_large_image, …).
Copie o bloco gerado pro `<head>` da sua página — funciona em HTML, Astro, Next.js, etc.

Perguntas frequentes

Qual tamanho de imagem usar?: 1200 × 630 pixels (1.91:1) é o padrão seguro — satisfaz Facebook, LinkedIn, Slack e o card `summary_large_image` do Twitter. O `summary` simples do Twitter usa 1:1, mas a maioria dos sites usa uma imagem só pra ambos.
Diferença entre `summary` e `summary_large_image`?: `summary` mostra miniatura quadrada pequena ao lado do título e descrição. `summary_large_image` mostra imagem banner de largura total acima do título. Use a grande pra posts com conteúdo pesado; a pequena quando a imagem é incidental.
O link canônico importa?: Sim. Crawlers usam pra de-duplicar variantes de URL (`?utm_source=…`, barras finais) e rotear engagement social (curtidas, comentários) pra uma única URL canônica.