Etiquetas meta de Twitter Card

Twitter (X) definió su propio protocolo de tarjetas de vista previa antes de que existiera OpenGraph y aún lo mantiene. Aunque el Twitter moderno recurre a las etiquetas OG cuando faltan las etiquetas twitter:*, declarar twitter:card explícitamente proporciona el diseño de tarjeta más predecible.

Hay cuatro tipos de tarjeta: summary (miniatura pequeña junto al título y la descripción), summary_large_image (imagen principal a todo lo ancho), app (instalación de una aplicación móvil) y player (vídeo o audio incrustado). Elija summary_large_image para artículos con mucho contenido.

Si están presentes, sustituyen a og:title y og:description en Twitter. Úselas cuando quiera un titular diferente para la audiencia de Twitter que para los consumidores generales de OpenGraph; de lo contrario, permita que Twitter use los valores de OG como alternativa.

Para las tarjetas summary, use una imagen cuadrada de proporción 1:1 y al menos 144x144 píxeles. Para summary_large_image, use una imagen de proporción 2:1, idealmente de 1200x600 o más. Twitter rechaza las imágenes de más de 5 MB. Use una URL absoluta, igual que con og:image: las rutas relativas no funcionan.

Texto alternativo para la imagen de la tarjeta, de hasta 420 caracteres. Mejora la accesibilidad para los usuarios de lectores de pantalla que navegan por Twitter y proporciona una descripción alternativa cuando las imágenes no se cargan. Inclúyalo siempre: es una mejora de 30 segundos en favor de la inclusión.

twitter:site es el nombre de usuario de Twitter de su sitio (con @). twitter:creator es el nombre de usuario del autor individual. Al completarlos, Twitter puede mostrar "from @yoursite" y enlazar la firma con una cuenta real.

OpenGraph utiliza property="og:..."; Twitter utiliza name="twitter:...". La diferencia es histórica (RDFa frente a HTML5). Ambos son técnicamente válidos; usar el atributo correcto para cada protocolo evita casos extremos con validadores estrictos.

twitter:card="app" permite promocionar una aplicación para iOS/Android mediante twitter:app:id:iphone, twitter:app:id:ipad, twitter:app:id:googleplay y los enlaces profundos twitter:app:url:*. Al tocar la tarjeta, se abre App Store, Play Store o la aplicación directamente si ya está instalada.

twitter:card="player" incrusta un reproductor de vídeo o audio directamente en el tuit. Requiere twitter:player (URL de un iframe HTTPS), twitter:player:width y twitter:player:height. Twitter aprueba manualmente las tarjetas de reproductor para evitar abusos; envíe la solicitud a developer.twitter.com.

Twitter cerró la interfaz pública de Card Validator, pero las tarjetas siguen mostrándose en la vista previa de un tuit en borrador. Pegue su URL en un borrador privado para ver exactamente qué tipo de tarjeta y qué imagen se mostrarán antes de publicar el tuit.

Incluya siempre tanto twitter:card como el conjunto completo de etiquetas OG. La mayoría de las plataformas que no son Twitter ignoran las etiquetas twitter:*, y la mayoría de los clientes modernos de Twitter recurren a OG, por lo que la combinación produce una vista previa correcta en todas partes con una duplicación mínima.

Las tarjetas de Twitter (declaradas mediante name="twitter:card") proporcionan una vista previa predecible de las páginas en X. Elija summary_large_image para contenido editorial, añada twitter:image con una URL absoluta y twitter:image:alt, atribuya el sitio y al autor mediante sus nombres de usuario, y permita que los valores OG completen las etiquetas que no sobrescriba.