Saltar al contenido principal

¿Qué es Twitter Card?

image

Definición​

Twitter Card es un sistema de metadatos para proporcionar experiencias multimedia enriquecidas al compartir enlaces en Twitter (ahora renombrado a X). Normalmente, incluir una URL en un tweet muestra solo un enlace simple, pero con Twitter Cards configuradas, aparece como un formato de tarjeta visualmente atractivo con imágenes, títulos y descripciones.

Las Twitter Cards se implementan con etiquetas en formato <meta name="twitter:xxx"> en la sección <head> de documentos HTML. Similar a Open Graph, proporcionan características específicas de la plataforma Twitter. Twitter admite cuatro tipos principales de tarjetas, cada una con diferentes propósitos y diseños: Summary Card, Summary Card with Large Image, App Card y Player Card.

Las Twitter Cards correctamente configuradas mejoran significativamente las tasas de clics de enlaces. Las investigaciones muestran que los tweets con imágenes tienen hasta un 150% más de tasas de retweet que los tweets solo de texto. Las Twitter Cards se han convertido en una herramienta de marketing esencial, especialmente para medios de noticias, blogs y sitios de e-commerce. Sin Twitter Cards, tus enlaces pueden ser fácilmente ignorados en la línea de tiempo.

Características​

  • Varios Tipos de Tarjetas: Elige tarjetas apropiadas para tu tipo de contenido entre Summary, Summary with Large Image, App y Player. Cada tipo proporciona diferentes diseños y funcionalidad.
  • Alto Compromiso: Los enlaces con Twitter Cards tienen tasas de clics y retweet 2-3 veces más altas que los enlaces normales. Los elementos visuales atraen la atención del usuario.
  • Compatible con Open Graph: Si faltan las etiquetas de Twitter Card, Twitter usa etiquetas Open Graph como alternativa. Sin embargo, se recomienda usar etiquetas específicas de Twitter Card para obtener resultados óptimos.
  • Herramienta de Validación Proporcionada: Twitter proporciona una herramienta oficial llamada Card Validator para previsualizar cómo se mostrarán las tarjetas.
  • Soporte de Medios Enriquecidos: Las Player Cards permiten reproducir videos y audio directamente en la línea de tiempo de Twitter, mejorando enormemente la experiencia del usuario.

Cómo Usar​

Así es como implementar y utilizar Twitter Cards de manera efectiva.

Paso 1: Elegir Tipo de Tarjeta Selecciona el tipo de Twitter Card que coincida con la naturaleza de tu contenido. Para publicaciones de blog o artículos, Summary Card with Large Image es lo más efectivo. Las tarjetas de imagen grande también funcionan bien para páginas de productos o portafolios. Usa Player Cards para contenido de video y App Cards para promoción de aplicaciones móviles.

Paso 2: Agregar Etiquetas Básicas de Twitter Card Agrega etiquetas meta de Twitter Card a la sección <head> de tu página web. Como mínimo, debes incluir cuatro etiquetas: twitter:card, twitter:title, twitter:description y twitter:image.

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Guía Completa de SEO de Blog">
  <meta name="twitter:description" content="Estrategias SEO prácticas para impulsar las clasificaciones de búsqueda">
  <meta name="twitter:image" content="https://example.com/seo-guide.jpg">
</head>

Paso 3: Incluir Etiquetas de Información Adicional Agregar la cuenta de Twitter de tu sitio o del autor la muestra en la tarjeta, ayudando a ganar seguidores. twitter:site es la cuenta de Twitter del sitio web, y twitter:creator es la cuenta del autor del contenido.

<meta name="twitter:site" content="@zerocoke">
<meta name="twitter:creator" content="@juanperez">

Paso 4: Optimización de Imagen Las imágenes de Twitter Card son muy importantes. Summary Card requiere un mínimo de 120x120px (relación 1:1), y Summary with Large Image requiere un mínimo de 300x157px (relación 2:1). El tamaño óptimo es 1200x628px, y el tamaño del archivo debe ser menor de 5MB. Admite formatos JPG, PNG y WEBP.

Paso 5: Probar con Card Validator Ingresa tu URL en Twitter Card Validator (https://cards-dev.twitter.com/validator) para verificar si las tarjetas se muestran correctamente. Corrige cualquier error inmediatamente y vuelve a probar. La vista previa muestra cómo aparecerá en Twitter real.

Paso 6: Usar con Open Graph Aunque Twitter prioriza las etiquetas de Twitter Card, usa etiquetas Open Graph si están ausentes. Implementa Open Graph también para la optimización de otras plataformas sociales. Usar ambas está bien y se recomienda como mejor práctica.

Ejemplos​

Ejemplo 1: Summary Card with Large Image (Más Común)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Guía de Estrategia de Construcción de Backlinks</title>

  <!-- Etiquetas Básicas de Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@zerocoke">
  <meta name="twitter:creator" content="@juanperez">
  <meta name="twitter:title" content="Estrategia de Construcción de Backlinks: Alcanzar Clasificaciones de Página 1">
  <meta name="twitter:description" content="Aprende métodos efectivos de construcción de backlinks y errores a evitar con estudios de caso reales.">
  <meta name="twitter:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta name="twitter:image:alt" content="Infografía de Estrategia de Construcción de Backlinks">

  <!-- Open Graph Juntos (para Otras Plataformas) -->
  <meta property="og:title" content="Estrategia de Construcción de Backlinks: Alcanzar Clasificaciones de Página 1">
  <meta property="og:description" content="Aprende métodos efectivos de construcción de backlinks y errores a evitar con estudios de caso reales.">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta property="og:url" content="https://zero-coke.com/blog/backlink-strategy">
  <meta property="og:type" content="article">
</head>
<body>
  <!-- Contenido de la Página -->
</body>
</html>

Ejemplo 2: Summary Card (Imagen Pequeña)

<head>
  <!-- Contenido Adecuado para Miniatura Pequeña -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@mynewssite">
  <meta name="twitter:title" content="Resumen de Noticias SEO de Hoy">
  <meta name="twitter:description" content="Actualizaciones de algoritmo de Google, tendencias de búsqueda, noticias de la industria de un vistazo">
  <meta name="twitter:image" content="https://example.com/logo-square.jpg">
  <meta name="twitter:image:alt" content="Logo del Sitio de Noticias">
</head>

Ejemplo 3: Player Card (Contenido de Video)

<head>
  <!-- Tarjeta con Reproducción de Video Directa -->
  <meta name="twitter:card" content="player">
  <meta name="twitter:site" content="@videosite">
  <meta name="twitter:title" content="Guía Completa de Monetización de Blog (15 min)">
  <meta name="twitter:description" content="Gana 1000€/mes con tu blog. Desde AdSense hasta marketing de afiliados">
  <meta name="twitter:image" content="https://example.com/video-thumbnail.jpg">
  <meta name="twitter:player" content="https://example.com/embed/player?video=123">
  <meta name="twitter:player:width" content="1280">
  <meta name="twitter:player:height" content="720">
  <meta name="twitter:player:stream" content="https://example.com/video-123.mp4">
  <meta name="twitter:player:stream:content_type" content="video/mp4">
</head>

Ejemplo 4: App Card (Promoción de Aplicación Móvil)

<head>
  <!-- Promoción de Descarga de Aplicación Móvil -->
  <meta name="twitter:card" content="app">
  <meta name="twitter:site" content="@myappcompany">
  <meta name="twitter:title" content="Gestor de Blog - Ver Estadísticas de Blog de un Vistazo">
  <meta name="twitter:description" content="Verifica el rendimiento de tu blog en tiempo real en el móvil">
  <meta name="twitter:image" content="https://example.com/app-icon.png">

  <!-- Información de Aplicación iOS -->
  <meta name="twitter:app:name:iphone" content="Gestor de Blog">
  <meta name="twitter:app:id:iphone" content="123456789">
  <meta name="twitter:app:url:iphone" content="blogmanager://open">

  <!-- Información de Aplicación Android -->
  <meta name="twitter:app:name:googleplay" content="Gestor de Blog">
  <meta name="twitter:app:id:googleplay" content="com.example.blogmanager">
  <meta name="twitter:app:url:googleplay" content="blogmanager://open">
</head>

Ejemplo 5: Página de Producto de E-commerce

<head>
  <!-- Optimización de Página de Producto -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@myshop">
  <meta name="twitter:title" content="Auriculares Inalámbricos Premium XYZ-2000 - 50% de Descuento Especial">
  <meta name="twitter:description" content="Cancelación de ruido, reproducción de 30h. Solo hoy 129€ → 64,50€">
  <meta name="twitter:image" content="https://shop.example.com/products/xyz-2000-promo.jpg">
  <meta name="twitter:image:alt" content="Foto de Producto Auriculares Inalámbricos XYZ-2000">

  <!-- Etiquetas de Producto (Opcional) -->
  <meta name="twitter:label1" content="Precio">
  <meta name="twitter:data1" content="64,50€">
  <meta name="twitter:label2" content="Stock">
  <meta name="twitter:data2" content="Cantidad Limitada">
</head>

Ejemplo 6: Artículo de Noticias

<head>
  <!-- Tarjeta Optimizada para Artículo de Noticias -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@newsmedia">
  <meta name="twitter:creator" content="@journalist_kim">
  <meta name="twitter:title" content="Tendencias SEO 2024: La Búsqueda IA Cambia el Juego">
  <meta name="twitter:description" content="SGE de Google y el chat IA de Bing están cambiando fundamentalmente el panorama de búsqueda. Las estrategias SEO también deben evolucionar.">
  <meta name="twitter:image" content="https://news.example.com/2024/ai-seo-trends.jpg">
  <meta name="twitter:image:alt" content="Interfaz de Motor de Búsqueda IA">

  <!-- Etiquetas de Artículo Open Graph Juntos -->
  <meta property="og:type" content="article">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:author" content="Reportero Kim">
  <meta property="article:section" content="Tecnología">
</head>

Ejemplo 7: Promoción de Evento/Webinar

<head>
  <!-- Página de Promoción de Evento -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@eventorganizer">
  <meta name="twitter:title" content="Conferencia SEO 2024 | 15 Sept COEX">
  <meta name="twitter:description" content="Know-how práctico de 20 expertos SEO nacionales e internacionales. ¡50% de descuento para madrugadores!">
  <meta name="twitter:image" content="https://event.example.com/seo-conference-2024.jpg">
  <meta name="twitter:image:alt" content="Visual Principal Conferencia SEO 2024">

  <!-- Enfatizar Información Clave con Etiquetas -->
  <meta name="twitter:label1" content="Fecha">
  <meta name="twitter:data1" content="15 de septiembre de 2024">
  <meta name="twitter:label2" content="Lugar">
  <meta name="twitter:data2" content="Centro de Convenciones COEX">
</head>

Ventajas y Desventajas​

Ventajas​

  • Tasas de Clics Dramáticamente Aumentadas: Los enlaces con Twitter Cards muestran tasas de clics 2-3 veces más altas que los enlaces normales. Las tarjetas visualmente atractivas atraen la atención del usuario en la línea de tiempo.

  • Reconocimiento de Marca Mejorado: Expresión profesional de marca con imágenes y mensajes consistentes. La información de cuenta de Twitter se muestra en las tarjetas, ayudando a aumentar seguidores.

  • Experiencia de Medios Enriquecidos: Las Player Cards permiten la reproducción de video directamente en Twitter, permitiendo que los usuarios consuman contenido sin visitar tu sitio. Esto aumenta enormemente el compromiso.

Desventajas​

  • Trabajo Adicional Requerido: Agregar etiquetas de Twitter Card separadas más allá de Open Graph aumenta la carga de trabajo. Optimizar todas las plataformas sociales resulta en muchas etiquetas meta.

  • Dependencia de Plataforma: Las Twitter Cards solo funcionan en Twitter (X). Otras plataformas requieren Open Graph o sus propias etiquetas únicas.

  • Carga de Creación de Imágenes: Las imágenes de alta calidad son esenciales para Twitter Cards efectivas. Crear o seleccionar imágenes apropiadas para cada contenido requiere tiempo y recursos.

FAQ​

P: ¿Debo usar Twitter Cards u Open Graph? R: Es mejor usar ambos. Twitter prioriza las etiquetas de Twitter Card y usa etiquetas Open Graph como alternativa si están ausentes. Sin embargo, Open Graph es usado por Facebook, LinkedIn, KakaoTalk y otras plataformas, así que implementa ambos. Las etiquetas de Twitter Card son para optimización de Twitter, mientras que Open Graph es para optimización universal de redes sociales.

P: Mis Twitter Cards no se muestran. ¿Por qué? R: Varias causas son posibles: 1) Errores de sintaxis de etiquetas meta - verificar con Card Validator. 2) Problemas de tamaño de imagen - verificar que se cumplan los requisitos de tamaño mínimo. 3) Acceso a imagen bloqueado - asegurar que robots.txt no bloquee imágenes. 4) Problemas HTTPS - usar URLs HTTPS cuando sea posible. 5) Problemas de caché - volver a rastrear la URL en Card Validator puede resolverlo.

P: ¿Cuál es la diferencia entre Summary Card y Summary Large Image Card? R: Summary Card es un formato compacto con una miniatura cuadrada pequeña (120x120px+) mostrada junto al texto. Principalmente adecuado para logos o iconos. Summary Large Image Card muestra una imagen rectangular grande (1200x628px recomendado) prominentemente en la parte superior de la tarjeta. Para la mayoría de los casos, incluidas publicaciones de blog, artículos y páginas de productos, Summary Large Image es más efectiva. Tiene mayor impacto visual y tasas de clics mucho más altas.

P: Cambié las Twitter Cards pero los cambios no se reflejan. R: Twitter almacena en caché la información de tarjetas, por lo que los cambios pueden no reflejarse de inmediato. Ingresa la URL en Card Validator (https://cards-dev.twitter.com/validator) y haz clic en "Preview card" para volver a rastrear con la información más reciente. Las tarjetas en enlaces ya tuiteados no se actualizarán, por lo que los cambios importantes deben compartirse con nuevos tweets. El caché de Twitter normalmente persiste durante aproximadamente 7 días.