Redes sociales

Cómo conseguir una vista previa real al compartir un enlace en X (Twitter)

X usa su propia etiqueta independiente para las vistas previas de enlaces — las etiquetas Open Graph por sí solas no siempre bastan.

Qué es

Una "Twitter Card" (el nombre que la propia plataforma le dio a esta función, anterior a su cambio de nombre a X) es la vista previa enriquecida que se muestra cuando se comparte un enlace en X — normalmente incluye una imagen, un título y una descripción, en lugar de un simple enlace de texto sin adornos. Se controla mediante una etiqueta meta concreta, en su forma más sencilla <meta name="twitter:card" content="summary_large_image">, que le indica a X que construya específicamente este formato de vista previa más grande y centrado en la imagen.

X sí recurre a leer las etiquetas Open Graph estándar (og:title, og:description, og:image) para el contenido real de la vista previa en muchos casos — pero sin esta etiqueta twitter:card concreta presente, puede que no construya ninguna vista previa enriquecida, y en su lugar muestre un enlace desnudo por defecto.

En qué afecta

Los enlaces compartidos en X sin una tarjeta que funcione aparecen como texto plano y poco llamativo en un feed lleno de otras publicaciones compitiendo por la atención — fáciles de pasar de largo sin fijarse. Una tarjeta que sí funciona, con imagen y titular, es considerablemente más llamativa y le da a la gente con la que se comparte una idea real e inmediata de a qué estarían accediendo, antes incluso de leer una sola palabra del comentario que la rodea.

Esta es una adición muy pequeña, de una sola línea, sobre las etiquetas Open Graph que quizá ya tengas configuradas para Facebook y LinkedIn — básicamente no hay ninguna razón para saltártela una vez que esas ya están en su sitio.

Cómo solucionarlo

  1. Confirma que ya tienes configuradas las etiquetas Open Graph (og:title, og:description, og:image) en la página, ya que X lee gran parte del contenido de la vista previa a partir de ellas.
  2. Añade <meta name="twitter:card" content="summary_large_image"> a la sección <head> de la página, lo que solicita el estilo de vista previa más grande y centrado en la imagen.
  3. Si usas un creador de webs o un plugin SEO, esto suele incluirse automáticamente junto con tus otros ajustes de compartición social — revísalo ahí antes de añadirlo a mano.
  4. Prueba el resultado con la herramienta Card Validator de X (o compartiendo el enlace en un borrador de publicación privado) para confirmar que la vista previa se muestra como esperas.
  5. Vuelve a ejecutar tu análisis de Launch Readiness para confirmar que la etiqueta ya se detecta.

Comprueba si tu propia web tiene este problema

Launch Readiness analiza tu web en busca de esto y ~50 problemas más antes del lanzamiento, en segundos — gratis, sin registro.

Hacer un análisis gratis