O que são Twitter (X) Cards?
Twitter Cards, hoje discutidas no contexto do X, controlam como uma URL é exibida quando alguém publica seu link na plataforma. Em vez de mostrar apenas o endereço, uma página bem configurada pode exibir título, descrição, domínio e imagem dentro do post.
Profissionais de marketing, desenvolvedores, SEO e publishers usam esses metadados para proteger a taxa de cliques em artigos, páginas de produto e landing pages compartilhadas. Uma og:image ausente ou uma URL de imagem em HTTP costuma gerar preview simples que o usuário ignora no feed.
O validador acima busca o HTML público de qualquer URL informada, interpreta tags Open Graph e Twitter Card, sinaliza problemas comuns e renderiza um mockup aproximado de post no X. Você vê os mesmos campos centrais que o crawler considera antes do link ir ao ar em campanha ou post orgânico.
Como validar meta tags de Twitter Card
- Cole uma URL pública no campo de entrada. A página precisa retornar HTML sem login para a busca funcionar.
- Clique em Visualizar para solicitar a página e extrair as meta tags da resposta.
- Revise o mockup de post no X, incluindo layout de imagem grande quando
summary_large_imagefor detectado. - Leia as mensagens de validação por severidade: erros para título ou imagem ausentes, avisos para HTTPS ou tamanho de texto.
- Inspecione a lista completa de tags com todos os valores
twitter:*eog:*retornados do código-fonte. - Corrija os metadados no site, faça deploy se necessário e execute Visualizar novamente até os avisos sumirem.
Use o botão de site de demonstração para carregar uma URL de notícias de exemplo e comparar um card funcional com a página que você está depurando. URLs de staging só funcionam se forem acessíveis publicamente na internet, sem autenticação.
Como o X escolhe título, descrição e imagem
O X aceita tags dedicadas de Twitter Card, mas também lê Open Graph e fallbacks HTML padrão. Quando os dois conjuntos existem, valores específicos do Twitter costumam ter prioridade nos campos próprios, enquanto Open Graph preenche lacunas.
A lógica de leitura desta ferramenta segue essa ordem:
title = og:title → twitter:title → HTML <title>
description = og:description → twitter:description → meta name="description"
image = og:image → twitter:image (resolvida para URL HTTPS absoluta)
card type = twitter:card → og:type → tende a summary_large_image
URLs absolutas importam. Caminhos relativos como /images/hero.jpg precisam resolver contra a URL da página ou o crawler pode falhar ao carregar o asset. O validador resolve caminhos relativos da mesma forma e avisa quando a URL final da imagem não usa HTTPS.
Tipos de Twitter Card comparados
A maioria das páginas de marketing usa summary ou summary_large_image. Cards de app e player exigem tags extras para aplicativos móveis ou mídia embutida.
| Tipo de card | Layout | Uso típico | Orientação mínima de imagem |
|---|---|---|---|
| summary | Miniatura quadrada ao lado do texto | Documentação, posts simples | Mínimo 144×144 px |
| summary_large_image | Imagem larga acima de título e descrição | Artigos, lançamentos, landing pages | Mínimo 300×157 px, proporção 2:1 recomendada |
| app | Nome do app, ícone e links de loja | Campanhas de instalação | Ícone via twitter:image:src |
| player | Player de vídeo ou áudio embutido | Páginas de mídia com iframe | Exige twitter:player e URL de stream |
Se twitter:card estiver ausente mas og:image existir, o X ainda pode renderizar card com imagem grande. O validador marca a tag twitter:card ausente como aviso para você defini-la explicitamente em vez de depender do fallback.
Limites recomendados de texto e imagem
As regras de truncamento nem sempre são publicadas com precisão pixel a pixel, mas estes limites correspondem ao que o validador aplica e ao que a maioria dos templates de produção usa.
| Campo | Máximo recomendado | O que acontece ao ultrapassar |
|---|---|---|
| Título | 70 caracteres | O texto pode truncar no preview do card |
| Descrição | 200 caracteres | O copy extra pode ser cortado |
| Largura da imagem (card grande) | 1200 px em proporção 2:1 | Tamanho comum para telas retina nítidas |
| Formato de arquivo | JPG, PNG, WEBP, GIF (sem animação) | Formatos não suportados podem falhar |
| Protocolo da URL da imagem | HTTPS | URLs HTTP geram aviso nesta ferramenta |
Cards com imagem grande usam proporção 1.91:1 no mockup de preview, alinhada ao frame aproximado que o X exibe acima do bloco de título.
O que este validador verifica
Após interpretar as tags, a ferramenta executa verificações fixas alinhadas a erros comuns de deploy:
- Título ausente em
twitter:titleeog:title - Descrição ausente (apenas aviso, mas prejudica o apelo do clique)
- Imagem ausente para previews ricos
- Valor de
twitter:cardnão reconhecido - Título com mais de 70 caracteres
- Descrição com mais de 200 caracteres
- URL de imagem sem HTTPS
Quando todas as verificações centrais passam, você ainda vê uma mensagem informativa lembrando que o X mantém cache separado. Uma página pode validar aqui e parecer ligeiramente diferente na plataforma até o cache atualizar.
Exemplo mínimo de tags para página de marketing
A maioria dos plugins de CMS grava essas tags automaticamente. Se você mantém HTML manual ou stack customizada, um card com imagem grande costuma começar assim:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Título da sua página" />
<meta name="twitter:description" content="Proposta de valor em uma frase." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
<meta property="og:title" content="Título da sua página" />
<meta property="og:description" content="Proposta de valor em uma frase." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/pagina" />
Tags Open Graph duplicadas ajudam Facebook, LinkedIn, Slack e outros crawlers a ler os mesmos valores. Se você publica a mesma URL em várias redes, combine esta verificação com o Preview de Post no LinkedIn para confirmar truncamento no feed profissional também.
Perguntas frequentes
Por que o X mostra um preview diferente desta ferramenta?
O X armazena dados de card em cache por URL. O primeiro rastreamento após mudança de metadados pode atrasar em relação ao deploy. Use o depurador de cards da plataforma ou republique após expirar o cache se o preview ao vivo continuar desatualizado.
Preciso de tags Open Graph e Twitter Card?
Open Graph sozinha pode funcionar porque o X recorre a og:title, og:description e og:image. Tags twitter:* explícitas reduzem ambiguidade e deixam clara a intenção entre summary e summary_large_image.
Posso validar URLs protegidas por senha ou localhost?
Não. O validador busca a URL a partir de um ambiente de servidor. Localhost, staging em VPN e páginas com login retornam erro porque o HTML não é publicamente acessível.
Por que minha imagem some mesmo com a tag presente?
Causas comuns incluem URLs relativas sem base correta, redirecionamentos para páginas de login, bloqueio por hotlink ou arquivos acima do limite do crawler. Confirme se a URL da imagem abre em uma aba anônima do navegador.
Corrigir cards melhora o SEO diretamente?
Tags de card afetam principalmente cliques sociais e apresentação da marca, não fórmulas de ranking do Google. Ainda assim importam para tráfego vindo do X, newsletters que embutem links e compartilhamentos manuais da equipe.
Qual tipo de card devo usar em posts de blog?
summary_large_image é a escolha padrão para artigos e landing pages porque a imagem larga chama atenção na timeline. Use summary apenas quando não houver imagem adequada.
Valide seu card no X antes de cada link ir ao ar
Cole a URL de produção acima antes de e-mails, anúncios ou compartilhamentos públicos da equipe. Resolva cada erro e aviso de HTTPS primeiro, depois confira o tamanho de título e descrição para o card ler bem em larguras mobile, onde a maior parte das sessões no X acontece.
Execute o validador novamente após cada deploy que altere a seção <head>, especialmente mudanças de template em CMS que regeneram meta tags globalmente. Quando a mesma página também vai para LinkedIn ou Slack, compare previews entre redes para uma plataforma não herdar tags quebradas enquanto outra parece correta.
Metadados de card são só uma camada de distribuição no X. Outras ferramentas de publicação no Twitter e X cobrirão fluxos adicionais de links, perfil e conteúdo conforme a categoria crescer.