Meta tags de cartão do Twitter

O Twitter (X) definiu seu próprio protocolo de cartões de pré-visualização antes da existência do OpenGraph e ainda o mantém. Embora o Twitter moderno recorra aos marcadores OG quando os marcadores twitter:* estão ausentes, declarar twitter:card explicitamente proporciona o layout de cartão mais previsível.

Quatro tipos de cartão: summary (miniatura pequena ao lado do título e da descrição), summary_large_image (imagem principal em toda a largura), app (instalação de aplicativo móvel) e player (vídeo ou áudio incorporado). Escolha summary_large_image para artigos com muito conteúdo.

Quando presentes, esses marcadores substituem og:title e og:description no Twitter. Utilize-os quando quiser um título diferente para o público do Twitter em relação aos consumidores gerais do OpenGraph; caso contrário, deixe o Twitter recorrer aos valores OG.

Para cartões summary, utilize um quadrado de proporção 1:1 com pelo menos 144x144. Para summary_large_image, utilize uma imagem de proporção 2:1, idealmente de 1200x600 ou maior. O Twitter rejeita imagens com mais de 5 MB. Use uma URL absoluta, assim como em og:image — caminhos relativos não funcionam.

Texto alternativo da imagem do cartão, com até 420 caracteres. Ele melhora a acessibilidade para usuários de leitores de tela que navegam no Twitter e fornece uma descrição alternativa quando as imagens não conseguem carregar. Sempre o forneça — é uma forma rápida de promover a inclusão.

twitter:site é o identificador do Twitter do seu site (com o @). twitter:creator é o identificador do autor individual. Preencher esses campos permite que o Twitter mostre "de @yoursite" e vincule a autoria a uma conta real.

O OpenGraph utiliza property="og:..."; o Twitter utiliza name="twitter:...". A diferença é histórica (RDFa versus HTML5 meta). Ambos são tecnicamente válidos; usar o atributo correto para cada protocolo evita casos extremos com validadores rigorosos.

twitter:card="app" permite divulgar um aplicativo para iOS/Android com twitter:app:id:iphone, twitter:app:id:ipad, twitter:app:id:googleplay e links profundos twitter:app:url:*. Tocar no cartão abre a App Store/Play Store ou o aplicativo diretamente quando ele está instalado.

twitter:card="player" incorpora um reprodutor de vídeo ou áudio diretamente no tuíte. Requer twitter:player (URL de um iframe HTTPS), twitter:player:width e twitter:player:height. O Twitter aprova manualmente os cartões de reprodução para evitar abusos — envie a solicitação por developer.twitter.com.

O Twitter encerrou a interface pública do Card Validator, mas os cartões ainda são pré-visualizados em um tuíte em rascunho. Cole sua URL em um rascunho privado para ver exatamente qual tipo de cartão e qual imagem serão renderizados antes de publicar o tuíte.

Sempre inclua twitter:card e o conjunto completo de marcadores OG. A maioria das plataformas que não são o Twitter ignora os marcadores twitter:*, e a maioria dos clientes modernos do Twitter recorre aos marcadores OG; assim, a combinação produz uma pré-visualização correta em todos os lugares com pouca duplicação.

Os cartões do Twitter (declarados por meio de name="twitter:card") oferecem uma pré-visualização previsível das páginas no X. Escolha summary_large_image para conteúdo editorial, adicione twitter:image com URL absoluta e twitter:image:alt, atribua o site e o criador usando identificadores e permita que os valores OG preencham os marcadores que não forem substituídos.