Twitter / X Cards: Como Configurar e Testar
Twitter Cards (agora X Cards) transformam links simples em previews ricos com imagem, título e descrição. Quando bem configurados, duplicam o engajamento em tweets com links do seu site. Veja tipos, meta tags, implementação por stack e como debugar.
Por Vitor Morais
Fundador do MochaLabz ·
Gere todas as meta tags de uma vez
Open Graph + Twitter Card + SEO em segundos, prontas para colar no <head>.
Twitter Cards (renomeados para X Cards após a mudança de marca, mas as meta tags continuam usando o prefixo twitter:) transformam links nus em previews visuais com imagem, título e descrição no feed. Quando bem configurados, geram 2 a 3× mais cliques que links sem card. Este guia cobre os quatro tipos de card, meta tags obrigatórias e opcionais, dimensões corretas, fallback via Open Graph, implementação em Next.js e WordPress e diagnóstico com o Card Validator oficial.
Os 4 tipos de Twitter Card
| Critério | Como aparece | Quando usar |
|---|---|---|
| summary | Card pequeno, imagem quadrada à esquerda, texto à direita | Artigos curtos, perfis, páginas sem imagem forte |
| summary_large_image | Card grande, imagem 1200×628 em destaque acima do texto | Padrão moderno — 90% dos casos |
| app | Card com link direto para App Store/Google Play | Apps móveis promovendo install |
| player | Vídeo ou áudio que toca inline no tweet | Vídeos curtos, podcasts, streaming |
Configuração básica: summary_large_image
Este é o tipo recomendado para 90% dos casos. Gera cards grandes e clicáveis:
<head>
<!-- Obrigatórias -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Título do Artigo (até 70 chars)" />
<meta name="twitter:description" content="Descrição que vende o clique (até 200 chars)." />
<meta name="twitter:image" content="https://exemplo.com/og/artigo.jpg" />
<!-- Fortemente recomendadas -->
<meta name="twitter:site" content="@mochalabz" />
<meta name="twitter:creator" content="@autorhandle" />
<meta name="twitter:image:alt" content="Descrição da imagem para acessibilidade" />
</head>Tags e limites
| Critério | Limite | Observação |
|---|---|---|
| twitter:title | Máx 70 chars | Trunca com reticências acima disso |
| twitter:description | Máx 200 chars | Em summary_large_image aparece truncada em ~120 |
| twitter:image (summary_large_image) | 1200×628 ideal | JPG ou PNG, até 5 MB, ratio 1.91:1 |
| twitter:image (summary) | 800×800 ideal | Quadrado; 300×157 mínimo |
| twitter:image:alt | Máx 420 chars | Descrição para screen readers |
| twitter:site | Handle válido | Com ou sem @ |
| twitter:creator | Handle válido | Autor individual do conteúdo |
Fallback para Open Graph
X lê tags Open Graph quando as equivalentes twitter: não estão presentes. Você pode:
- Configurar apenas OG — X exibe card decente via fallback, mas sem controle específico.
- Configurar OG + twitter:card explícito — X usa OG para título/description/image, mas você define o tipo de card (recomendado).
- Configurar OG + tags twitter: completas — controle total em cada plataforma.
<head>
<!-- Open Graph (Facebook, LinkedIn, WhatsApp, Slack, Discord) -->
<meta property="og:title" content="Título" />
<meta property="og:description" content="Descrição até 200 chars" />
<meta property="og:image" content="https://exemplo.com/og.jpg" />
<meta property="og:url" content="https://exemplo.com/artigo" />
<meta property="og:type" content="article" />
<!-- Twitter específico (mínimo para forçar card grande) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@mochalabz" />
<!-- Sobrescrever OG só quando quer diferente em X -->
<meta name="twitter:title" content="Título mais curto para X" />
</head>Configuração avançada por tipo
summary (card compacto)
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Título do Conteúdo" />
<meta name="twitter:description" content="Descrição curta" />
<meta name="twitter:image" content="https://exemplo.com/thumb-square.jpg" />
<meta name="twitter:site" content="@mochalabz" />
<!-- Imagem: 300×157 mín, quadrada (1:1) preferida, 4096×4096 máx -->app card (apps mobile)
<meta name="twitter:card" content="app" />
<meta name="twitter:site" content="@mochalabz" />
<meta name="twitter:description" content="Descrição do app" />
<!-- iOS App Store -->
<meta name="twitter:app:id:iphone" content="284882215" />
<meta name="twitter:app:name:iphone" content="Nome do App" />
<meta name="twitter:app:url:iphone" content="meuapp://deep-link" />
<!-- iPad -->
<meta name="twitter:app:id:ipad" content="284882215" />
<!-- Google Play -->
<meta name="twitter:app:id:googleplay" content="com.exemplo.app" />
<meta name="twitter:app:name:googleplay" content="Nome do App" />
<meta name="twitter:app:url:googleplay" content="meuapp://deep-link" />player card (vídeo/áudio inline)
<meta name="twitter:card" content="player" />
<meta name="twitter:title" content="Título do Vídeo" />
<meta name="twitter:description" content="Descrição" />
<meta name="twitter:image" content="https://exemplo.com/thumb.jpg" />
<meta name="twitter:player" content="https://exemplo.com/player?id=123" />
<meta name="twitter:player:width" content="1280" />
<meta name="twitter:player:height" content="720" />
<meta name="twitter:site" content="@mochalabz" />
<!-- ATENÇÃO: player card exige aprovação do X.
Precisa se registrar e passar por revisão manual.
Na prática, raramente disponível para sites novos. -->Dimensões corretas por tipo de card
| Critério | Ideal | Mínimo | Máximo |
|---|---|---|---|
| summary | 800×800 (1:1) | 300×157 | 4096×4096, 5 MB |
| summary_large_image | 1200×628 (1.91:1) | 300×157 | 4096×4096, 5 MB |
| player | 1280×720 (16:9) | — | 5 MB |
Uma imagem, dois usos
A mesma imagem og:image (1200×630) funciona perfeitamente para twitter:image em summary_large_image. Simplifica implementação sem perda de qualidade visual.
Implementação em Next.js (App Router)
// app/artigos/[slug]/page.tsx
import type { Metadata } from "next";
export async function generateMetadata({ params }): Promise<Metadata> {
const article = await getArticle(params.slug);
return {
title: article.title,
description: article.description,
openGraph: {
title: article.title,
description: article.description,
url: `https://mochalabz.com/artigos/${article.slug}`,
siteName: 'MochaLabz',
locale: 'pt_BR',
type: 'article',
images: [{
url: `https://mochalabz.com/og/${article.slug}.jpg`,
width: 1200,
height: 630,
alt: article.title,
}],
},
twitter: {
card: 'summary_large_image',
site: '@mochalabz',
creator: article.authorHandle ?? '@mochalabz',
title: article.title,
description: article.description,
images: [`https://mochalabz.com/og/${article.slug}.jpg`],
},
};
}Implementação em WordPress
Plugins geram automaticamente: Yoast SEO, Rank Math, All in One SEO. Para tema custom sem plugin:
<?php if (is_singular()) : the_post(); ?>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@mochalabz" />
<meta name="twitter:title" content="<?php echo esc_attr(get_the_title()); ?>" />
<meta name="twitter:description" content="<?php echo esc_attr(wp_trim_words(get_the_excerpt(), 30)); ?>" />
<?php $thumb = get_the_post_thumbnail_url(null, 'large'); ?>
<?php if ($thumb): ?>
<meta name="twitter:image" content="<?php echo esc_url($thumb); ?>" />
<?php endif; ?>
<?php $author = get_the_author_meta('twitter'); ?>
<?php if ($author): ?>
<meta name="twitter:creator" content="@<?php echo esc_attr($author); ?>" />
<?php endif; ?>
<?php endif; ?>HTML puro
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Meu Artigo</title>
<meta name="description" content="Descrição SEO" />
<!-- Open Graph -->
<meta property="og:title" content="Meu Artigo" />
<meta property="og:description" content="Descrição para redes sociais" />
<meta property="og:image" content="https://exemplo.com/og.jpg" />
<meta property="og:url" content="https://exemplo.com/artigo" />
<meta property="og:type" content="article" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@mochalabz" />
<meta name="twitter:creator" content="@autorhandle" />
<meta name="twitter:title" content="Meu Artigo" />
<meta name="twitter:description" content="Descrição curta" />
<meta name="twitter:image" content="https://exemplo.com/og.jpg" />
<meta name="twitter:image:alt" content="Imagem descritiva do artigo" />
</head>Como testar: Card Validator
A ferramenta oficial do X para validar e pré-visualizar cards:
- Acesse
cards-dev.twitter.com/validator(requer login em conta X). - Cole a URL da página que você quer testar.
- Clique em Preview Card — mostra como aparecerá no feed.
- Log de tags detectadas na parte inferior mostra o que o X leu e eventuais warnings.
- Se houver mudança no card após alteração, cole de novo — o validator invalida o cache.
Cache de ~7 dias
Após um tweet com o link ser feito, X cacheia o card por dias. Para forçar refresh em link já compartilhado, adicione query string aleatória (?v=2) ao URL — X trata como nova e re-renderiza.
Handle do site: o que preencher em twitter:site
twitter:site deve ser o handle oficial da marca/site no X. twitter:creator é o handle do autor individual do conteúdo (quando diferente):
<!-- Artigo do blog, escrito pela equipe -->
<meta name="twitter:site" content="@mochalabz" />
<meta name="twitter:creator" content="@mochalabz" />
<!-- Artigo escrito por autor específico -->
<meta name="twitter:site" content="@mochalabz" />
<meta name="twitter:creator" content="@anasilva" />
<!-- Site corporativo genérico -->
<meta name="twitter:site" content="@empresa" />
<!-- twitter:creator pode ser omitido -->Twitter Card em e-mail newsletter
Quando alguém compartilha seu e-mail newsletter com um link no X, o card gerado é do LINK interno do e-mail (ex: URL da hospedagem). Para controlar o card das páginas “permanentes” do boletim (arquivo público), configure tags twitter: em cada edição HTML arquivada publicamente.
Erros comuns
Anti-padrões frequentes
- twitter:image com URL relativa: precisa ser absoluta com https://.
- twitter:image em SVG: X não renderiza SVG como preview. Use PNG ou JPG.
- Imagem < 300×157: X não exibe o card grande; cai para summary.
- Título ou description acima dos limites: trunca com reticências e pode afastar cliques.
- Handle errado em twitter:site: conta inexistente ou com @ duplicado.
- Cache do Card Validator desatualizado: use “Preview Card” novamente após mudança.
- Tentar player card sem aprovação: X exige aprovação manual — não funciona para a maioria dos sites.
- Twitter:image com URL protegida por auth: X não consegue baixar, card fica sem imagem.
Boas práticas para cards que convertem
- Imagem forte: rosto, produto, gráfico — não screenshot de texto.
- Título diferente para X se o tom do seu twitter:title couber uma variação mais punchy/informal.
- Handle consistente: o mesmo @ do seu perfil principal para todos os cards do site.
- summary_large_image como padrão, summary apenas em casos muito específicos.
- Alt text descritivo:
twitter:image:altpara acessibilidade e indica conteúdo quando a imagem não carrega. - Teste em mobile: ~80% do X é consumido em mobile; imagem com texto pequeno fica ilegível.
Combinando com Open Graph para cobertura total
Para ter preview rico em todas as plataformas (X, Facebook, LinkedIn, WhatsApp, Slack, Discord, iMessage), combine Open Graph + Twitter Card:
Veja o guia completo de Open Graph Protocol para detalhes em cada rede social. O padrão 2026: Open Graph como base + tags twitter: específicas só para o que você quer diferente.
Checklist do Twitter Card pronto
- ✅ twitter:card definido (summary_large_image na maioria).
- ✅ twitter:title até 70 chars.
- ✅ twitter:description até 200 chars.
- ✅ twitter:image em JPG/PNG, 1200×628, URL absoluta.
- ✅ twitter:image:alt com descrição real da imagem.
- ✅ twitter:site com handle da marca.
- ✅ twitter:creator quando diferente do site.
- ✅ Open Graph também configurado (fallback + outras redes).
- ✅ Testado no Card Validator oficial.
- ✅ Imagem acessível publicamente (sem auth, sem bloqueio).
- ✅ Responsive — testado em mobile.
- ✅ Integração automática em Next.js / CMS para todas as páginas.
Perguntas frequentes
Twitter mudou para X, os cards continuam funcionando?+
Sim. Com a mudança de marca de Twitter para X em 2023, as meta tags continuaram as mesmas (twitter:card, twitter:title, etc.) por compatibilidade. X honra tanto tags twitter: quanto fallback para Open Graph. Para projetos novos, continue usando o prefixo twitter: por clareza e compatibilidade retroativa.
Preciso de meta tags Twitter se já tenho Open Graph?+
Depende do nível de controle que você quer. X/Twitter faz fallback inteligente para Open Graph quando as tags twitter: estão ausentes (funciona razoavelmente bem). Mas para controlar especificamente o tipo de card (summary vs summary_large_image), handle do site/autor e imagem dedicada, defina as tags twitter: explicitamente. O esforço é mínimo.
Qual o tamanho ideal de twitter:image?+
Para summary_large_image: 1200×628 pixels (ratio 1.91:1), JPG ou PNG, até 5 MB. Para summary: 300×157 mínimo, 4096×4096 máximo, preferencialmente quadrada. A mesma imagem do og:image (1200×630) funciona bem nos dois — simplifica a implementação sem perda de qualidade.
Qual a diferença entre summary e summary_large_image?+
summary exibe card pequeno com imagem quadrada à esquerda e texto à direita. summary_large_image exibe card com imagem grande em destaque acima do texto. O segundo gera significativamente mais cliques (estudos apontam 2-3× mais engajamento) e é o padrão recomendado em 2026 para quase todos os casos.
Como forçar X/Twitter a atualizar o card após mudança?+
X faz cache do card por ~7 dias. Para forçar refresh: acesse cards-dev.twitter.com/validator, cole a URL, clique em 'Preview Card'. Se ainda não atualizar, adicione query string aleatória (?v=2) no link ao compartilhar — X trata como URL nova. Card Validator precisa login no X.
twitter:site e twitter:creator são obrigatórios?+
Não são obrigatórios para o card aparecer, mas são fortemente recomendados. twitter:site é o handle do site/marca (ex: @mochalabz) e aparece no card. twitter:creator é do autor específico do conteúdo (se diferente). Ambos ajudam em analytics do X (atribuição de cliques) e criam caminho para o usuário seguir sua marca direto do card.
Twitter cards funcionam em LinkedIn e Slack?+
LinkedIn e Slack usam Open Graph primariamente, não twitter:. Configurar twitter: beneficia só X. Para cobrir todas as plataformas, configure Open Graph completo (funciona em Facebook, LinkedIn, WhatsApp, Slack, Discord) e adicione tags twitter: específicas para o que quer diferente no X.
Como verificar se meu card está configurado corretamente?+
Use o Card Validator oficial em cards-dev.twitter.com/validator (precisa login X). Cole a URL, clique em Preview Card. Mostra preview real + log de tags detectadas + warnings. Alternativa sem login: opengraph.xyz ou localhost testing com ngrok. Teste antes de compartilhar URLs importantes.
Continue lendo
Como Criar Meta Tags SEO (2026): Guia Completo com Exemplos Prontos
Guia definitivo de meta tags: title, description, Open Graph, Twitter Card, canonical, robots e viewport. Código pronto, implementação em Next.js, WordPress e HTML puro.
Open Graph Protocol: Guia Completo 2026 (Facebook, LinkedIn, WhatsApp)
Guia definitivo de Open Graph: tags essenciais, og:type por tipo de conteúdo, dimensões corretas de og:image por rede, implementação em Next.js/WordPress/HTML puro, debug por plataforma e os 7 erros que destroem o preview.
Meta Description: Como Escrever para Aumentar o CTR no Google (2026)
Aprenda tamanho ideal por device, fórmula que converte, gatilhos psicológicos comprovados, exemplos fraco vs forte e por que o Google reescreve sua description (e o que fazer).
SERP Snippet: Como Otimizar Title, Description e Rich Results (2026)
Anatomia completa do snippet, todos os tipos de rich results (FAQ, How-to, Product, Article), implementação JSON-LD passo a passo, featured snippets e o que mudou com SGE/AI Overviews.