Cómo mostrar vista previa en vivo de enlaces en WordPress (2 formas fáciles)

Si has notado que los visitantes pasan por encima de tus enlaces sin hacer clic, no estás solo. En mi experiencia, los enlaces de texto plano a menudo son demasiado sutiles para captar la atención, lo que significa que los lectores se pierden los recursos y herramientas útiles que recomiendas.

Ahí es donde las previsualizaciones de enlaces en vivo pueden ayudar. En lugar de mostrar solo una URL, puedes mostrar una vista previa con una imagen, título y una breve descripción, similar a cómo aparecen los enlaces en las plataformas de redes sociales.

En esta guía, te mostraré cómo mostrar previsualizaciones en vivo de enlaces en WordPress, paso a paso.

Al final de este tutorial, podrás convertir enlaces simples en previsualizaciones atractivas que capten la atención y animen a hacer más clics.

¿Por qué mostrar previsualizaciones de enlaces en vivo en WordPress?

Las previsualizaciones de enlaces en vivo hacen que los enlaces sean más útiles, más visibles y más fáciles de hacer clic.

En lugar de mostrar una URL simple, brindan a los visitantes un contexto útil antes de que decidan abrir un enlace.

Aquí te explico por qué recomiendo usar previsualizaciones de enlaces en vivo en un sitio de WordPress:

• Captar la atención: Una vista previa del enlace con una imagen y un título destaca más que el texto plano, especialmente en publicaciones de blog más largas.
• Ayuda a conseguir más clics: Cuando los lectores pueden ver de qué trata un enlace, es más probable que hagan clic en él.
• Mejora la experiencia de lectura: Los visitantes no tienen que adivinar a dónde lleva un enlace. La vista previa establece expectativas claras.
• Ideal para compartir herramientas y recursos: Las vistas previas de enlaces funcionan especialmente bien al recomendar productos, plugins o contenido externo útil.
• Hace que el contenido se vea más moderno: Descubrí que agregar vistas previas de enlaces le da a tu sitio una sensación pulida y profesional. Hace que tu contenido se vea similar a lo que la gente ve al compartir enlaces en las redes sociales.

Si compartes enlaces a menudo en tutoriales, publicaciones de blog o páginas de destino, las vistas previas de enlaces en vivo pueden ayudar a mantener a los lectores interesados y animarlos a explorar más.

Ahora, te mostraremos cómo agregar fácilmente vistas previas de enlaces en vivo en WordPress usando 2 métodos sencillos.

¿Qué método deberías elegir?🤔

Antes de sumergirme en los tutoriales paso a paso, es útil elegir el método que se adapte a tu sitio web y objetivos.

Algunos plugins muestran automáticamente vistas previas cuando los visitantes pasan el cursor sobre los enlaces, mientras que otros te permiten crear tarjetas de vista previa con estilo para enlaces específicos.

La siguiente tabla facilita ver qué opción funciona mejor para ti:

Plugin / Método	Mejor para	Cuándo usar
Linkz.ai (Método 1)	Vistas previas de enlaces en vivo automáticas al pasar el cursor	Blogs, tutoriales, sitios web con muchos recursos, sitios con muchos enlaces externos
Visual Link Preview (Método 2)	Tarjetas de vista previa de enlaces estilo Facebook	Sitios de afiliados, tiendas de WooCommerce, secciones de enlaces curados, páginas donde quieras destacar enlaces específicos

Ahora que sabes qué método se adapta a tus necesidades, vamos a los tutoriales y a configurar tus vistas previas de enlaces en vivo:

Método 1: Mostrar vistas previas de enlaces en vivo al pasar el cursor con Linkz.ai

Recomiendo usar Linkz.ai si quieres que las vistas previas de enlaces en vivo aparezcan automáticamente cuando los visitantes pasen el cursor sobre los enlaces en tu sitio web.

Este método funciona especialmente bien para blogs, tutoriales y sitios con mucho contenido donde compartes muchos enlaces internos y externos.

Linkz.ai extrae y muestra automáticamente el contenido enlazado, incluyendo artículos, publicaciones de blog, videos, presentaciones, PDFs y más de 1000 otros elementos incrustados en la web. Utiliza un script de carga bajo demanda, lo que significa que la vista previa solo se carga cuando un usuario interactúa con el enlace para mantener el peso inicial de tu página ligero.

Cuando los usuarios pasan el cursor sobre un enlace, aparece una ventana emergente con un resumen del contenido, lo que da a los visitantes contexto sin salir de tu sitio.

Necesitarás crear una cuenta de Linkz.ai para usar el plugin. El plan gratuito te permite agregar vistas previas al pasar el cursor de inmediato tanto para enlaces internos como externos, lo cual es suficiente para la mayoría de los blogs y sitios pequeños.

Para aquellos que necesiten más funciones como análisis, temas adicionales y contenido más enriquecido, el plan premium 'Blog' comienza en $60 por año ($5 por mes).

En general, creo que es una gran solución porque es automática, fácil de usar para principiantes y mantiene a los lectores interesados con una configuración mínima.

Paso 1: Instala Linkz.ai y crea una cuenta

Primero, necesitas instalar y activar el plugin Linkz.ai. Si no estás seguro de cómo hacerlo, no te preocupes porque te tengo cubierto.

Simplemente sigue nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activado, verás una pestaña de menú Linkz.ai en tu panel de administración de WordPress. Haz clic en ella y luego haz clic en el botón ‘Registrarse’.

Esto te dirigirá al sitio web de Linkz.ai, donde necesitas crear una cuenta ingresando tu dirección de correo electrónico y eligiendo una contraseña.

Después de eso, haz clic en el botón 'Continuar'.

Ahora has creado exitosamente tu cuenta de Linkz.ai. Por defecto, estarás en el plan Gratuito, que te permite agregar hasta 2,500 previsualizaciones de enlaces por mes en un sitio web.

Muestra automáticamente previsualizaciones cuando los usuarios pasan el cursor sobre los enlaces y puede mostrar previsualizaciones enriquecidas al hacer clic, con la marca Linkz.ai incluida.

Este plan es perfecto para empezar, y siempre puedes actualizar más tarde si deseas funciones adicionales como análisis, temas adicionales o más previsualizaciones de enlaces por mes.

Paso 2: Conecta Linkz.ai a tu sitio de WordPress

Ahora que has creado tu cuenta de Linkz.ai, es hora de conectarla a tu sitio de WordPress. Después de registrarte, Linkz.ai abrirá automáticamente un asistente de instalación en su panel.

La URL de tu sitio web ya estará agregada, así que todo lo que necesitas hacer es hacer clic en el botón ‘Agregar’ para conectar tu sitio a Linkz.ai.

A continuación, el asistente te preguntará qué hipervínculos deben mostrar previsualizaciones de enlaces. Si solo deseas previsualizaciones para enlaces externos, puedes seleccionar esa opción.

Personalmente recomiendo elegir tanto enlaces externos como internos si deseas que todo tu contenido se sienta más interactivo y atractivo para los visitantes.

Una vez que hagas tu selección, haz clic en el botón ‘Siguiente’.

Después de eso, tienes que elegir un tema y estilo para las tarjetas de vista previa de tu enlace.

En el plan gratuito, solo puedes usar el tema ‘Clásico’, que muestra una imagen destacada grande junto con un extracto de la publicación. Los usuarios Premium tienen acceso a temas adicionales y más opciones de personalización.

Para el estilo, deberás elegir entre el modo claro y el modo oscuro.

Personalmente recomiendo la opción ‘Automático claro/oscuro’ porque se ajusta automáticamente para coincidir con el modo del sitio de tu visitante, aunque esta función solo está disponible con el plan premium.

Una vez que hayas hecho tus selecciones, haz clic en el botón ‘Siguiente’.

Esto te dirigirá al último paso, donde deberás hacer clic en el botón ‘Activar Linkz.ai’.

Luego regresarás a tu panel de WordPress. Aquí, tu sitio web aparecerá listado bajo la configuración de Linkz.ai con el interruptor activado.

Esto significa que tus tarjetas de vista previa de enlaces ahora están activas y se mostrarán por defecto en tu sitio.

Paso 3: Prueba tus primeras vistas previas de enlaces en vivo

Una vez que Linkz.ai esté conectado y activo en tu sitio, es hora de verlo en acción. Abre una publicación o página en tu sitio de WordPress que contenga enlaces.

Pasa el cursor sobre un enlace y deberías ver aparecer automáticamente una pequeña vista previa emergente. Esta vista previa mostrará un resumen del contenido enlazado, incluyendo el título, la imagen destacada y el extracto.

Si seleccionaste enlaces internos y externos en el Paso 2, intenta pasar el cursor sobre un enlace interno para ver cómo se ve. Esta es una excelente manera de hacer que tu propio contenido sea más interactivo y mantener a los visitantes interesados en tu sitio.

Si la vista previa no aparece, asegúrate de que el interruptor de Linkz.ai esté activado en el panel de WordPress, en la configuración de Linkz.ai.

También podrías querer limpiar la caché de tu sitio si estás usando un plugin de caché, ya que las páginas cacheadas a veces pueden impedir que las nuevas funciones se muestren de inmediato.

Después de confirmar que todo funciona, puedes empezar a publicar entradas con la confianza de saber que tus enlaces ahora son más atractivos.

Método 2: Crea tarjetas de vista previa de enlaces usando Vista previa visual de enlaces

Si deseas un mayor control sobre cómo aparecen tus enlaces, entonces Visual Link Preview es una excelente opción. Este plugin te permite crear tarjetas de vista previa de enlaces al estilo de Facebook para cualquier enlace en tu sitio web, de modo que puedas elegir la imagen, el título y la descripción que se muestran.

Incluso puedes crear tu propia plantilla personalizada o estilizar la plantilla predeterminada para que coincida con el diseño de tu sitio.

Recomiendo este método si deseas resaltar enlaces específicos, como promociones de afiliados, productos de WooCommerce, publicaciones relacionadas o listas curadas de sitios web útiles.

Como guarda los datos de vista previa localmente en tu sitio, no necesita obtener datos del sitio web externo cada vez que se carga una página. Esto reduce las solicitudes HTTP externas, lo que ayuda a mantener tus Core Web Vitals y la velocidad general del sitio.

Visual Link Preview funciona tanto con el Editor Clásico como con Gutenberg, permitiéndote agregar vistas previas usando bloques o códigos cortos. Esto lo hace flexible para cualquier tipo de contenido, ya sea que administres un blog, una tienda en línea o una página de recursos.

Paso 1: Instalar y Activar Visual Link Preview

Para comenzar, primero necesitas instalar y activar el plugin Visual Link Preview. La mejor parte es que es completamente gratuito, por lo que puedes agregar tarjetas de vista previa de enlaces personalizadas a tu sitio sin gastar nada.

Para instalarlo, ve a tu panel de WordPress, navega a Plugins » Añadir Nuevo y busca 'Visual Link Preview'.

Una vez que lo encuentres, haz clic en ‘Instalar ahora’ y luego en ‘Activar’. Para más información, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Paso 2: Elige y personaliza una plantilla para tus tarjetas de vista previa de enlaces

Una vez que el plugin esté activado, ve a la página Ajustes » Vista previa de enlaces visuales desde tu panel de WordPress. Aquí es donde decidirás cómo se verán tus tarjetas de vista previa de enlaces.

El plugin ofrece dos tipos de plantillas: dinámicas y estáticas.

Las plantillas dinámicas son totalmente editables usando el Editor de Plantillas, lo que te da control total sobre el diseño, los colores y la apariencia de tus tarjetas. Las plantillas estáticas están pre-codificadas y solo permiten pequeños cambios de estilo, por lo que son más sencillas pero menos flexibles.

Para crear una plantilla dinámica, tienes que abrir el ‘Editor de Plantillas’.

Recomiendo esta opción porque te permite personalizar tus tarjetas exactamente como quieres y ver los cambios en tiempo real.

Primero, eliges un estilo de plantilla predeterminado y lo previsualizas. Luego, haz clic en el botón ‘Clonar y editar plantilla’ para comenzar a personalizar.

Tienes que darle un nombre a tu plantilla antes de poder guardarla.

Normalmente elijo algo descriptivo que facilite su identificación más tarde.

En el editor, el lado izquierdo te permite ajustar las propiedades de la plantilla como el fondo, los bordes, el relleno y los márgenes. También puedes editar elementos individuales como el título, el texto y la imagen.

En el lado derecho, verás una vista previa en vivo de tu tarjeta de vista previa de enlace mientras realizas cambios. Una vez que estés satisfecho con el diseño, haz clic en ‘Guardar cambios’ en la parte superior.

De vuelta en la página de configuración, tu nueva plantilla aparecerá ahora en el menú desplegable de plantillas dinámicas.

Desde aquí, simplemente selecciónala para empezar a usarla de inmediato.

Si deseas una configuración más rápida, puedes elegir una plantilla estática en su lugar activando el interruptor ‘Usar estilo personalizado’.

Luego, realiza ajustes básicos como el ancho del contenedor, el color de fondo, el relleno, los bordes y los estilos de texto.

Es una opción más rápida, pero personalmente prefiero las plantillas dinámicas porque me dan más control y crean una apariencia más pulida y profesional para mis tarjetas de vista previa de enlaces.

Una vez que hayas terminado, simplemente haz clic en el botón ‘Guardar Cambios’ para almacenar tu configuración.

Paso 3: Agrega tu primera tarjeta de vista previa de enlace

Ahora es el momento de agregar una tarjeta de vista previa de enlace a una de tus publicaciones. Ve a Publicaciones » Todas las publicaciones y haz clic en ‘Editar’ en la publicación donde deseas incluir la tarjeta de vista previa.

Una vez que se abra el editor de bloques, haz clic en el botón ‘Agregar bloque’ para abrir el menú de bloques. Desde allí, busca el bloque ‘Vista previa de enlace visual’ y arrástralo a un lugar de tu elección.

Si deseas agregar una vista previa para un enlace externo, simplemente pega la URL y haz clic en el botón ‘Usar esta URL’. Si deseas agregar una vista previa para una publicación o página interna, haz clic en el botón ‘Buscar publicación’.

Aparecerá una ventana emergente donde puedes escribir el título de la publicación que deseas.

Una vez que el plugin cargue los resultados, haz clic en ‘Usar esta publicación’ junto a la que deseas destacar en la tarjeta de vista previa.

Después de que cargue la tarjeta de vista previa, puedes personalizarla desde el panel de bloques a la izquierda.

Puedes editar la descripción para hacerla más atractiva y reemplazar la imagen en miniatura si deseas usar una diferente.

También puedes activar opciones para abrir el enlace en una nueva pestaña o agregar un atributo nofollow.

Si estás usando un enlace externo, recomiendo activar la opción nofollow.

He descubierto que usar nofollow para enlaces externos ayuda a proteger el SEO de tu propio sitio. Te permite compartir recursos útiles con tus lectores sin ceder tu propia autoridad en motores de búsqueda.

Una vez que estés satisfecho con cómo se ve, haz clic en 'Actualizar' o 'Publicar' para guardar tus cambios.

Ahora tu tarjeta de vista previa de enlace está activa, brindando a los lectores una forma visual e interactiva de explorar contenido sin salir de la página.

Extra: Haz que tus vistas previas de enlaces de WordPress se vean perfectas

Los métodos anteriores te ayudan a mostrar vistas previas de enlaces en tu sitio web, pero también quieres que tus enlaces se vean bien cuando se comparten en redes sociales. Una imagen, título y descripción adecuados crean una tarjeta de vista previa de aspecto profesional y hacen que las personas sean más propensas a hacer clic.

Si esta información no está configurada correctamente, tus enlaces pueden verse descuidados o rotos. Recomiendo usar All in One SEO (AIOSEO), el mejor plugin de SEO para WordPress, para controlar fácilmente estos metadatos y asegurarte de que tus enlaces siempre luzcan lo mejor posible.

Usamos AIOSEO en WPBeginner para SEO. Para leer más sobre nuestra experiencia, consulta nuestra reseña completa de AIOSEO.

Con AIOSEO, puedes configurar fácilmente metaetiquetas Open Graph para Facebook, LinkedIn y otras plataformas, personalizar el título y la descripción, e incluso establecer una imagen Open Graph predeterminada.

También puedes agregar marcado schema para dar a los motores de búsqueda más contexto sobre tu contenido.

Al configurar Open Graph y schema con AIOSEO, tus enlaces se verán limpios y clicables en toda la web, y además te ayudarán a mejorar tu SEO en WordPress.

👉 Para obtener más información, consulta nuestras guías:

• Cómo agregar marcado de esquema en WordPress
• Cómo Agregar Correctamente el Esquema 'Cómo Hacer' Amigable para SEO en WordPress
• Guía para principiantes para agregar metadatos de Open Graph de Facebook en WordPress

Preguntas frecuentes sobre cómo mostrar vistas previas de enlaces en vivo en WordPress

Si todavía tienes preguntas sobre cómo agregar vistas previas de enlaces en vivo a tu sitio de WordPress, no estás solo. A continuación, he respondido las preguntas más comunes para ayudarte a solucionar problemas y hacer que tus enlaces se vean de la mejor manera.

¿Cómo rastreo los clics de enlaces en WordPress?

Puedes rastrear los clics de enlaces utilizando complementos como MonsterInsights, el mejor plugin de Google Analytics para WordPress, o Pretty Links, el mejor complemento acortador de enlaces para WordPress. Estas herramientas registran datos específicos como las tasas de clics (CTR) y las estadísticas de conversión sin necesidad de código personalizado.

Para empezar, consulta nuestra guía sobre cómo rastrear clics de enlaces en WordPress.

¿WordPress muestra vistas previas de enlaces por defecto?

No, WordPress muestra los enlaces como texto plano por defecto. Sin embargo, WordPress sí incrusta automáticamente contenido de sitios específicos (como YouTube o Twitter) si pegas la URL en su propia línea. Para enlaces de texto estándar, necesitas un complemento como los mencionados anteriormente.

¿Cuál es el mejor rastreador de enlaces gratuito?

Para una opción gratuita, Pretty Links Lite es una opción popular. Te permite acortar, rastrear y administrar enlaces directamente desde tu panel de WordPress sin ningún costo.

¿Cómo veo todos los enlaces en WordPress?

Puedes ver todos los enlaces instalando un plugin de gestión de enlaces como Pretty Links o usando el editor de WordPress para revisar tus publicaciones y páginas. Algunos plugins de SEO también ofrecen una vista general de enlaces en sus paneles.

¿Son buenos los acortadores de URL para el SEO?

Sí, pero con cierta precaución. Las URL acortadas pueden verse más limpias y ser más fáciles de compartir, pero asegúrate de que redirijan correctamente a la página final. Plugins como Pretty Links y ThirstyAffiliates manejan esto de forma segura para WordPress.

¿Cuál es la diferencia entre una URL y un hipervínculo?

Una URL es la dirección web de una página, mientras que un hipervínculo es el texto o imagen clickeable que apunta a esa URL. En términos sencillos, la URL es el destino y el hipervínculo es lo que los usuarios hacen clic para llegar allí.

¿Cómo cambio una URL sin perder SEO?

Usa una redirección 301 siempre que cambies una URL. Esto le dice a los motores de búsqueda que la página se ha movido permanentemente y conserva tus rankings de SEO mientras envía a los visitantes al nuevo enlace.

Descubre más funciones de diseño de WordPress

¿Quieres hacer que el diseño de tu sitio de WordPress sea aún más interesante? Echa un vistazo a estas útiles guías:

• Usa notas al pie de página simples y elegantes en tus publicaciones de blog para agregar información adicional
• Muestra enlaces de navegación de migas de pan para ayudar a los visitantes a entender dónde se encuentran en tu sitio
• Crea un reproductor de noticias en desplazamiento para compartir actualizaciones importantes con tus visitantes
• Usa un widget de cuenta regresiva para generar expectación para eventos especiales
• Agrega una barra de progreso de lectura a tus publicaciones para mantener a los lectores interesados
• Crea divisores de forma personalizados para hacer que el diseño de tu sitio web sea más interesante

Espero que este artículo te haya ayudado a aprender cómo mostrar previsualizaciones en vivo de tus enlaces en WordPress. También podrías querer revisar nuestra lista de los mejores constructores de páginas de arrastrar y soltar en WordPress y nuestra guía sobre cómo editar un sitio web de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.