Validador de Twitter Cards

Quando alguém compartilha seu link no X (Twitter), a plataforma lê as meta tags twitter: da página para montar o card de prévia: seu formato, título, descrição, imagem e atribuição. Se essas tags estiverem faltando, o link é publicado como uma URL simples, sem card. Cole o HTML da sua página abaixo e este validador verifica se as três tags obrigatórias, twitter:card, twitter:title e twitter:description, estão presentes, mostrando o valor que lê de cada uma para você corrigir uma prévia quebrada antes de publicar.

Como validar seu card

  1. 1

    Cole o HTML da sua página

    Você pode colar só a seção `<head>` ou o documento inteiro. O validador inspeciona apenas as tags `<meta>`, então qualquer outra marcação é ignorada.

  2. 2

    Ele procura as três tags obrigatórias

    `twitter:card`, `twitter:title` e `twitter:description`, o mínimo que qualquer tipo de card precisa. Outras tags como `twitter:image` não são verificadas aqui.

  3. 3

    Veja o que foi encontrado

    Cada tag correspondente aparece com o valor lido do seu atributo `content`, para você conferir o texto num relance.

  4. 4

    Corrija o que estiver faltando

    Qualquer uma das três que esteja ausente é marcada como faltante. Adicione-a ao seu `<head>` e cole o HTML de novo para verificar outra vez.

Os quatro tipos de card do X (Twitter)

O formato é definido pelo valor de twitter:card. Este validador lê o valor que você informar; os quatro que o X aceita são:

Tipo de card Valor de twitter:card Uso típico
Resumo summary Artigos e páginas de conteúdo padrão
Resumo com imagem grande summary_large_image Posts de blog com uma imagem de destaque
Player player Áudio ou vídeo incorporado
App app Links de instalação de apps com metadados da loja

Tags obrigatórias e recomendadas

Esta ferramenta verifica apenas o primeiro grupo, as três tags que o X precisa para qualquer card.

Obrigatórias (verificadas aqui):

  • twitter:card, o formato a usar
  • twitter:title, o título (o X mostra cerca dos primeiros 70 caracteres)
  • twitter:description, o resumo (o X mostra cerca dos primeiros 200 caracteres)

Recomendadas (não verificadas aqui, mas vale a pena adicionar):

  • twitter:image, uma URL absoluta https:// para um PNG, JPG ou GIF; ao menos 300 x 157 px para um card de resumo e 800 x 418 px para summary_large_image
  • twitter:site, o @handle da sua marca
  • twitter:creator, o @handle do autor
  • twitter:image:alt, texto alternativo para acessibilidade

Erros comuns

  • Só tags Open Graph. O X recorre a og:title, og:description e og:image, então o link ainda aparece, mas sem twitter:card o formato padrão é um resumo pequeno. Envie os dois conjuntos quando puder.
  • Imagem pequena demais. Abaixo de 300 x 157 px o card pode virar só texto.
  • URL de imagem relativa. twitter:image precisa ser absoluta (https://...); um caminho relativo é ignorado.
  • property= em vez de name=. O X, e este validador, leem as tags do Twitter a partir de name="twitter:...". Escrever property="twitter:..." funciona para Open Graph, mas não para estas.
  • Descrição longa demais. A partir de cerca de 200 caracteres o X corta, geralmente no meio de uma palavra.

Como ver o card de verdade

O X aposentou seu validador de cards oficial (cards-dev.twitter.com/validator) em 2023, então não existe mais uma página oficial que mostre uma prévia ao vivo. Esta ferramenta confirma que as tags obrigatórias estão presentes e legíveis; para ver o card de verdade, compartilhe o link em um rascunho de post ou em uma mensagem direta para você mesmo, ou use um verificador de prévia de links de terceiros. Se o X continuar mostrando uma imagem antiga depois de você corrigir as tags, adicione uma string de consulta como ?v=2 à URL da imagem para driblar o cache dele.

Perguntas frequentes

Não. Ela lê o HTML que você cola e confirma que as três tags twitter: obrigatórias estão presentes, mostrando o valor de cada uma. Ela não desenha o card nem acessa sua página no ar. O X encerrou seu próprio validador de cards em 2023, então o jeito confiável de ver o card de verdade é compartilhar o link em um rascunho de post ou em uma mensagem direta para você mesmo.

O X recorre a og:title, og:description e og:image, então o link ainda aparece, mas sem twitter:card o formato padrão é um resumo pequeno. Para um card com imagem grande, você precisa definir twitter:card como summary_large_image explicitamente. Note que este validador verifica apenas as tags twitter:, não as suas tags og:.

Ele procura por name="twitter:..." com o atributo content escrito depois do nome, entre aspas simples ou duplas. Se a sua tag usa property="twitter:..." em vez de name=, ou coloca content antes de name, o padrão não vai bater mesmo que o HTML seja válido. Reordene para name="..." content="..." e verifique de novo.

Este validador reconhece o nome sem se importar com maiúsculas ou minúsculas, então twitter:Card também é detectado aqui. Mesmo assim, mantenha em minúsculas (twitter:card), porque é a forma que o X documenta e espera.

Brevemente, sim. A verificação roda no nosso servidor, então o HTML que você cola é enviado para lá, analisado e descartado. Guardamos apenas um registro anônimo de que a ferramenta foi usada, nunca a sua marcação, e não é uma ferramenta offline que funciona no navegador.

Ferramentas relacionadas

Ferramenta disponível em outros idiomas