O que é twitter:card?
A meta tag twitter:card informa ao X (antigo Twitter) que tipo de pré-visualização exibir quando o seu link é compartilhado. Sem ela, o X recorre a uma pré-visualização mínima de link, com bem menos engajamento.
Tipos de card
summary_large_image (Recomendado)
- Imagem grande acima do título e da descrição
- Melhor para: Posts de blog, artigos, landing pages, a maior parte do conteúdo
- Imagem em proporção 2:1 (por exemplo, 1200x600px)
- Obtém mais cliques e engajamento
summary
- Thumbnail quadrado pequeno ao lado do título e da descrição
- Melhor para: Homepage, páginas de perfil, conteúdo sem imagem forte
- Imagem em proporção 1:1 (mínimo 144x144px)
player
- Incorpora um player de vídeo ou áudio diretamente no tweet
- Melhor para: Conteúdo de vídeo, podcasts, música
- Exige tags adicionais e aprovação do Twitter
app
- Mostra um card de instalação de app com botão de download
- Melhor para: Promoção de app mobile
Por que isso importa?
Tweets com cards summary_large_image obtêm até 40% mais cliques do que tweets com links simples. O formato de imagem grande domina o timeline e atrai atenção.
Como corrigir
<meta name="twitter:card" content="summary_large_image" />Configuração completa de Twitter card
Para melhores resultados, inclua todas as tags Twitter relevantes:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description of your page" />
<meta name="twitter:image" content="https://yoursite.com/twitter-image.jpg" />
<meta name="twitter:site" content="@yourbrand" />
<meta name="twitter:creator" content="@authorhandle" />Comportamento de fallback do Twitter
O X/Twitter verifica as tags nesta ordem:
- Tags
twitter:*(maior prioridade) - Tags
og:*(fallback) <title>da página e conteúdo (último recurso)
Assim, se você tiver og:title definido, o X vai usá-lo mesmo sem twitter:title. Mas twitter:card não tem equivalente OG, então precisa ser definido de forma explícita.
Testando o seu card
Use o Card Validator do X para pré-visualizar como o link vai aparecer antes de compartilhar.