Adiciona tags Twitter / X Card - Docs do MetricSpot

O que esta verificação faz

Procura no <head> da página por <meta name="twitter:card" content="…"> e (quando aplicável) twitter:image, twitter:title, twitter:description e twitter:site. A verificação falha quando não existe twitter:card e o X tem de recorrer a um tipo de pré-visualização menor — ou a nenhuma pré-visualização.

Porque é importante

O X (anteriormente Twitter) mostra URLs publicados num de três formatos de pré-visualização:

summary_large_image — um cartão com imagem em largura total e título e descrição por baixo. O formato de alta conversão que todas as marcas querem.
summary — um cartão com miniatura pequena. O padrão se não houver twitter:card mas existirem tags Open Graph.
Nenhum cartão — um URL nu, sem pré-visualização. O que acontece quando não há nem OG nem tags Twitter.

Um cartão summary_large_image consegue taxas de partilha e cliques significativamente superiores a um summary; ambos esmagam um URL nu. A diferença é uma única meta tag.

Como corrigir

Coloca quatro meta tags no <head>. Três delas podem espelhar as tuas tags Open Graph — o X recorre aos valores OG se as equivalentes Twitter faltarem, mas tags Twitter explícitas permitem-te definir uma imagem diferente para o X se quiseres:

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@metricspot">
  <meta name="twitter:title" content="Auditoria SEO grátis em 60 segundos — MetricSpot">
  <meta name="twitter:description" content="Vê o que os agentes de IA e o Google veem no teu site. 91 verificações, sem registo.">
  <meta name="twitter:image" content="https://metricspot.com/og/home.png">
</head>

O mínimo de que precisas é twitter:card. Se a tua página já tem Open Graph tags principais, o X lê essas para título/descrição/imagem. A tag twitter:card sozinha é o que diz ao X para mostrar o layout de imagem grande em vez de uma miniatura.

Regras de imagem (iguais às regras da imagem OG):

1200×630 (2:1) ou mais larga — mínimo 300×157, máximo 5 MB.
PNG ou JPG. WEBP funciona na maioria das plataformas, mas o renderizador do X tem sido inconsistente — fica-te por PNG/JPG.
Vê a página dedicada Open Graph imagem para tamanhos e detalhes de geração dinâmica.

Astro / Next.js — gera a partir do frontmatter junto com OG:

---
const { title, description, ogImage, twitterHandle = "@metricspot" } = Astro.props;
---
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content={twitterHandle} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={new URL(ogImage, Astro.site).href} />

WordPress — o Yoast SEO, Rank Math e SEOPress emitem todos tags Twitter Card automaticamente. No Yoast: SEO → Social → Twitter → “Adicionar metadados Twitter card” → On.

Tipos de card a conhecer.

summary_large_image — o que queres em 95% dos casos.
summary — miniatura pequena + texto. Útil para posts muito textuais em que a imagem não é o foco.
player — player de vídeo/áudio embebido. Nicho; requer whitelist pelo X.
app — promove a instalação de uma app móvel. Usa os campos de App Store ID.

O antigo Card Validator foi descontinuado em 2023. Para verificar, publica o URL num rascunho (sem publicar) e o X mostra o cartão renderizado — ou usa uma ferramenta de terceiros como opengraph.xyz, que renderiza previews Twitter e OG.

Perguntas frequentes

Preciso de tags Open Graph e Twitter Card?

O X recorre ao Open Graph se não houver tags Twitter, pelo que só com OG já tens cartão — mas apenas um cartão pequeno. Para forçar o layout de imagem grande precisas, no mínimo, de <meta name="twitter:card" content="summary_large_image">. Tudo o resto pode recorrer ao OG.

A pré-visualização do meu cartão está partida — como a atualizo?

O X coloca em cache os scrapes de pré-visualização até 7 dias. A cache renova quando mudas o URL canónico ou quando a entrada em cache expira. Já não há ferramenta pública de “refresh” — a solução é acrescentar um parâmetro de cache-busting (?v=2) ao URL uma vez, publicar o URL alterado uma vez e depois voltar ao URL limpo.

E o Mastodon, Bluesky, LinkedIn?

Todos usam Open Graph, não Twitter Cards. Faz o OG bem feito e estes renderizam corretamente em automático. Vê Open Graph tags principais e Open Graph imagem.