Cuando alguien comparte tu página de WordPress en X (antes Twitter), la plataforma busca etiquetas meta Twitter Card para generar una vista previa enriquecida con imagen, título y descripción. Sin estas etiquetas, los enlaces compartidos aparecen como URL de texto plano, lo que reduce drásticamente las tasas de clic y la interacción global. Las Twitter Cards son una de las formas más sencillas de hacer que tu contenido destaque en los feeds sociales y solo llevan unos minutos de configuración.
Tipos de Twitter Card y su impacto
Antes de pasar a la implementación, conviene entender qué tipos de Twitter Card existen y cuándo usar cada uno:
- Summary Card: muestra una pequeña miniatura cuadrada junto al título y la descripción. Funciona bien para páginas de inicio, páginas de categoría y contenido en el que la imagen es secundaria respecto al texto.
- Summary Card with Large Image: muestra una imagen grande y destacada sobre el título y la descripción. Es la mejor opción para entradas de blog, artículos, páginas de producto y cualquier contenido en el que una vista previa visual aumente la interacción.
- Player Card: incrusta un reproductor de vídeo o audio directamente en el tuit. Requiere aprobación de X y la usan plataformas multimedia como YouTube o SoundCloud.
- App Card: diseñada para promocionar aplicaciones móviles con un enlace directo de descarga. También requiere aprobación de X.
Para la mayoría de los sitios WordPress, la Summary Card with Large Image es la mejor opción por defecto. Los estudios muestran de forma consistente que los tuits con tarjetas de imagen grande reciben de 2 a 3 veces más interacción que los tuits solo con texto. El elemento visual capta la atención mientras los usuarios deslizan por su feed, haciéndoles más propensos a detenerse y hacer clic.
Etiquetas meta Twitter Card requeridas, explicadas
Cada Twitter Card necesita un conjunto específico de etiquetas meta en la sección <head> de tu página. Esto es lo que hace cada etiqueta:
twitter:card: define el tipo de tarjeta. Configúrala comosummaryosummary_large_image.twitter:title: el título mostrado en la tarjeta. Mantenlo por debajo de 70 caracteres para evitar truncados.twitter:description: un resumen breve del contenido. Mantenlo por debajo de 200 caracteres. Este texto aparece debajo del título en la vista previa de la tarjeta.twitter:image: la URL de la imagen mostrada en la tarjeta. Para tarjetas summary_large_image, usa imágenes de al menos 1200 x 628 píxeles. Para tarjetas summary, las imágenes deben tener al menos 144 x 144 píxeles. El tamaño máximo de archivo es de 5 MB.twitter:image:alt: texto alternativo de la imagen, importante para la accesibilidad. Describe el contenido de la imagen en menos de 420 caracteres.twitter:site: el nombre de usuario de X de tu sitio (por ejemplo,@TuSitio). Es opcional pero ayuda con la atribución.twitter:creator: el nombre de usuario de X del autor del contenido. Útil para blogs con varios autores.
X también admite un mecanismo de respaldo. Si faltan las etiquetas Twitter Card, la plataforma intentará usar las etiquetas Open Graph (og:title, og:description, og:image) en su lugar. Esto significa que, si ya tienes etiquetas Open Graph configuradas, tus enlaces tendrán vistas previas básicas incluso sin etiquetas Twitter Card específicas. No obstante, añadir etiquetas Twitter Card explícitas te da más control sobre cómo aparece tu contenido en X concretamente.
Añadir Twitter Cards con Yoast SEO
Yoast SEO es el plugin SEO más popular de WordPress e incluye soporte integrado para Twitter Cards. Si ya usas Yoast, habilitar las Twitter Cards lleva solo unos clics:
- Ve a SEO > Social en el panel de administración de WordPress.
- Haz clic en la pestaña X (Twitter).
- Activa "Añadir metadatos Twitter Card".
- Selecciona el tipo de tarjeta por defecto. Elige Summary con imagen grande para la mayoría de los sitios.
- Guarda los cambios.
A partir de ese momento, Yoast genera automáticamente etiquetas Twitter Card para cada entrada y página de tu sitio, tomando el título, la descripción y la imagen destacada de tu contenido.
Para personalizar la Twitter Card de una entrada concreta, abre el editor de la entrada y desplázate hasta la metabox de Yoast. Haz clic en la pestaña Social (el icono de compartir) y luego selecciona la pestaña X. Allí puedes sobrescribir el título, la descripción y la imagen por defecto para esa página en concreto. Es útil cuando quieres que la vista previa social difiera del título SEO de la página, por ejemplo usando un titular más llamativo para la difusión social.
Añadir Twitter Cards con Rank Math
Rank Math es otro plugin SEO popular con una integración de redes sociales completa:
- Ve a Rank Math > Titles & Meta > Global Meta.
- Desplázate hasta la sección Social Meta.
- Habilita Twitter Card Type y selecciona el formato de tarjeta que prefieras.
- Opcionalmente, introduce tu nombre de usuario de X por defecto en los campos de Twitter.
- Guarda los cambios.
Para personalizar por entrada, abre cualquier entrada o página en el editor. Haz clic en el icono de Rank Math en la barra de herramientas superior y navega hasta la pestaña Social. Cambia a la sección de X para definir títulos, descripciones e imágenes personalizados para esa pieza de contenido en concreto.
Rank Math también te permite definir imágenes sociales distintas por entrada, lo que resulta útil cuando tu imagen destacada no tiene la proporción adecuada para Twitter Cards. Puedes subir una imagen separada de 1200 x 628 píxeles optimizada específicamente para la difusión social.
Añadir Twitter Cards con All in One SEO (AIOSEO)
All in One SEO también ofrece funcionalidad de Twitter Card:
- Navega hasta All in One SEO > Redes Sociales.
- Haz clic en la pestaña X (Twitter).
- Habilita Twitter Card y elige tu tipo de tarjeta por defecto.
- Introduce el nombre de usuario de X de tu sitio.
- Configura los ajustes por defecto para entradas y páginas.
- Guarda los cambios.
AIOSEO también ofrece ajustes de Twitter Card por entrada en el editor, en el panel AIOSEO Settings, pestaña Social.
Implementación manual de Twitter Cards sin plugin
Si prefieres no usar un plugin SEO o necesitas un control total sobre la salida, puedes añadir las etiquetas Twitter Card manualmente a través del archivo functions.php de tu tema o un plugin específico para tu sitio:
function custom_twitter_cards() {
if (is_singular()) {
global $post;
$title = get_the_title();
$url = get_permalink();
// Generar descripción a partir del extracto o del contenido
$excerpt = has_excerpt()
? wp_strip_all_tags(get_the_excerpt())
: wp_trim_words(wp_strip_all_tags($post->post_content), 30);
// Obtener imagen destacada
$image = get_the_post_thumbnail_url($post->ID, 'large');
// Obtener el handle de Twitter del autor desde los metadatos de usuario
$author_twitter = get_the_author_meta('twitter', $post->post_author);
echo '<meta name="twitter:card" content="summary_large_image" />' . "
";
echo '<meta name="twitter:title" content="' . esc_attr($title) . '" />' . "
";
echo '<meta name="twitter:description" content="' . esc_attr($excerpt) . '" />' . "
";
echo '<meta name="twitter:url" content="' . esc_url($url) . '" />' . "
";
if ($image) {
echo '<meta name="twitter:image" content="' . esc_url($image) . '" />' . "
";
// Añadir texto alternativo de la imagen destacada
$thumbnail_id = get_post_thumbnail_id($post->ID);
$alt_text = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
if ($alt_text) {
echo '<meta name="twitter:image:alt" content="' . esc_attr($alt_text) . '" />' . "
";
}
}
// Handle de Twitter del sitio
echo '<meta name="twitter:site" content="@YourSiteHandle" />' . "
";
// Handle de Twitter del autor (si está definido)
if ($author_twitter) {
echo '<meta name="twitter:creator" content="@' . esc_attr($author_twitter) . '" />' . "
";
}
} elseif (is_front_page()) {
echo '<meta name="twitter:card" content="summary_large_image" />' . "
";
echo '<meta name="twitter:title" content="' . esc_attr(get_bloginfo('name')) . '" />' . "
";
echo '<meta name="twitter:description" content="' . esc_attr(get_bloginfo('description')) . '" />' . "
";
echo '<meta name="twitter:site" content="@YourSiteHandle" />' . "
";
}
}
add_action('wp_head', 'custom_twitter_cards');Sustituye @YourSiteHandle por tu nombre de usuario real de X. Para almacenar los handles de Twitter de los autores, puedes añadir un campo meta de usuario personalizado llamado twitter a cada perfil de usuario, o usar un plugin como "Extra User Details" para añadir el campo a la pantalla de edición del perfil.
Buenas prácticas y especificaciones de imagen para Twitter Card
La imagen es el elemento más importante de una Twitter Card. Acertar con ella marca una diferencia significativa en la interacción:
- Summary Card with Large Image: usa imágenes con una proporción 2:1. El tamaño recomendado es 1200 x 628 píxeles. El mínimo es 300 x 157 píxeles, pero las imágenes más grandes se ven notablemente mejor, especialmente en pantallas de alta densidad.
- Summary Card: usa imágenes cuadradas con una proporción 1:1. El tamaño recomendado es 400 x 400 píxeles. El mínimo es 144 x 144 píxeles.
- Formato de archivo: se admiten JPG, PNG, WEBP y GIF. JPG es la opción más segura para fotografías. PNG funciona mejor para imágenes con texto o áreas transparentes (aunque la transparencia se compondrá sobre fondo blanco).
- Tamaño de archivo: mantén las imágenes por debajo de 5 MB. Los archivos más grandes pueden no cargarse o ser ignorados por el procesador de tarjetas.
- Evita imágenes con mucho texto: X recorta las imágenes de forma distinta en móvil y en escritorio. El texto en los bordes de una imagen puede quedar cortado. Mantén el contenido importante centrado.
- Usa imágenes únicas por entrada: no reutilices la misma imagen para todas las entradas. Las imágenes únicas ayudan a que tu contenido destaque y evitan que tus tuits parezcan repetitivos.
Cómo interactúan las Twitter Cards con las etiquetas Open Graph
X usa una jerarquía de respaldo concreta al decidir qué mostrar en una vista previa de tarjeta:
- Primero, busca etiquetas meta
twitter:*explícitas. - Si falta alguna etiqueta
twitter:*, recurre a la etiqueta Open Graph equivalente (og:title,og:description,og:image). - Si faltan ambas, utiliza la etiqueta
<title>de la página e intenta extraer una descripción del contenido.
Esto significa que, estrictamente, no necesitas ambos conjuntos de etiquetas. Si tus etiquetas Open Graph ya están configuradas (para compartir en Facebook, por ejemplo), las vistas previas básicas de Twitter Card funcionarán. Sin embargo, hay casos en los que querrás contenido distinto en plataformas distintas. Por ejemplo, podrías usar una imagen apaisada para X y una imagen cuadrada para Facebook. En ese escenario, configurar og:image y twitter:image con URL diferentes te da control específico por plataforma.
La etiqueta twitter:card no tiene equivalente en Open Graph, así que siempre debes incluirla explícitamente para definir el tipo de tarjeta. Sin ella, X no renderizará ninguna tarjeta, aunque estén presentes el resto de etiquetas.
Probar y depurar tus Twitter Cards
Después de añadir las etiquetas, verifica que todo funciona correctamente:
- Comprueba las etiquetas meta con InspectWP: pasa tu URL por InspectWP para verificar que todas las etiquetas meta Twitter Card están presentes en el código fuente de la página. InspectWP listará cada etiqueta meta que encuentre, para que puedas confirmar que se están emitiendo los valores correctos.
- Pruébalo directamente en X: publica un enlace en un tuit (puedes borrarlo justo después). La vista previa de la tarjeta en el redactor de tuits te muestra exactamente cómo aparecerá tu enlace. Si la tarjeta no se muestra, espera un minuto y vuelve a intentarlo. X puede tardar un poco en obtener y cachear los datos de la tarjeta para URL nuevas.
- Forzar el refresco de la caché: X cachea los datos de las tarjetas de forma agresiva. Si has actualizado tus etiquetas pero sigues viendo datos antiguos, añade un parámetro de consulta como
?v=2a tu URL. Esto fuerza a X a tratarla como una URL nueva y a volver a obtener la información de la tarjeta. - Comprueba problemas de HTTPS: todas las URL de imagen en las etiquetas Twitter Card deben usar HTTPS. Las URL de imagen HTTP serán bloqueadas y la tarjeta se renderizará sin imagen.
- Valida las dimensiones de la imagen: si tu tarjeta muestra una miniatura diminuta en lugar de la vista previa de imagen grande, probablemente tu imagen es más pequeña que las dimensiones mínimas. Comprueba la proporción y el tamaño en píxeles.
Problemas habituales de Twitter Card y soluciones
- La tarjeta no aparece: asegúrate de que la etiqueta meta
twitter:cardestá presente. Esta etiqueta es obligatoria. Sin ella, X ignora todas las demás etiquetas meta de twitter. Comprueba también que tu página es accesible públicamente y no está bloqueada por un muro de inicio de sesión, protección por contraseña o robots.txt. - Imagen incorrecta: X cachea los datos de la tarjeta, por lo que las imágenes cambiadas recientemente pueden no actualizarse de inmediato. Usa un parámetro de consulta para invalidar la caché en la URL y forzar un refresco. Verifica también que la etiqueta
twitter:imageapunta a la URL correcta y públicamente accesible. - Imagen demasiado pequeña o mal recortada: usa imágenes que cumplan los requisitos mínimos de tamaño. Para tarjetas summary_large_image, mantente en 1200 x 628 píxeles o por encima. Evita colocar contenido importante cerca de los bordes.
- Etiquetas meta duplicadas: si usas un plugin SEO y además tienes código manual añadiendo etiquetas Twitter Card, acabarás con etiquetas duplicadas. X normalmente usa la primera que encuentra, pero los duplicados pueden provocar comportamientos impredecibles. Elimina el código manual si lo gestiona un plugin, o viceversa.
- Interferencia de plugins de caché: si usas un plugin de caché de páginas, vacía la caché tras actualizar tu configuración de Twitter Card. De lo contrario, la versión cacheada de tus páginas puede seguir conteniendo las etiquetas meta antiguas (o ausentes).
Buenas prácticas para optimizar Twitter Cards en WordPress
- Usa summary_large_image por defecto: el formato de imagen grande supera de forma constante al formato de miniatura pequeña en métricas de interacción. Úsalo para todas las entradas de blog y artículos.
- Redacta descripciones convincentes: el texto de twitter:description es tu gancho. Escríbelo como un mini titular que invite a hacer clic. Mantenlo por debajo de 200 caracteres y coloca al principio la información más importante.
- Configura tanto etiquetas OG como Twitter: aunque X recurra a las etiquetas OG como respaldo, tener ambos conjuntos garantiza vistas previas consistentes en todas las plataformas sociales, incluidas Facebook, LinkedIn, Slack y aplicaciones de mensajería.
- Prueba tras actualizaciones de tema o plugin: las actualizaciones de temas o plugins pueden romper la salida de etiquetas meta. Tras actualizaciones importantes, ejecuta un análisis rápido con InspectWP para verificar que tus Twitter Cards siguen funcionando correctamente.
- Usa una imagen de respaldo por defecto: configura una imagen por defecto para todo el sitio en los ajustes de tu plugin SEO. Esto garantiza que incluso las páginas sin imagen destacada muestren un visual con tu marca en la Twitter Card, como tu logotipo o un gráfico genérico de marca.