Cómo mostrar vista previa en vivo de enlaces en WordPress

¿Alguna vez te has dado cuenta de lo inseguros que pueden ser los lectores al hacer clic en los enlaces? Las vistas previas de enlaces resuelven esto al dar a tus visitantes un vistazo de lo que les espera al otro lado 💡

Hemos visto esta técnica mucho en sitios con mucho contenido como las wikis, donde las vistas previas visuales de los enlaces ayudan a los lectores a navegar por artículos interconectados de manera más eficiente.

Cuando los lectores pueden ver lo que hay dentro de un enlace antes de hacer clic, es más probable que exploren contenido relacionado que les interese. Además, les ayuda a evitar hacer clic en enlaces que no son relevantes para sus necesidades.

Muchos usuarios de WordPress nos preguntan cómo agregar hermosas vistas previas de enlaces sin tocar el código. Después de probar varias soluciones, hemos encontrado un método simple y sin código que funciona muy bien para principiantes.

¿Cuándo agregar una vista previa en vivo de los enlaces en tu sitio de WordPress? 🤔

En un sitio web de WordPress típico, los enlaces no muestran lo que hay dentro. Esto puede frustrar a los visitantes cuando hacen clic en un enlace y descubren que no es lo que esperaban. Ahí es donde las vistas previas de enlaces en vivo son útiles.

Las vistas previas de enlaces en vivo suelen parecer globos de ayuda. Este elemento de diseño de WordPress aparece cuando alguien mueve el ratón sobre un enlace, mostrando un vistazo del contenido.

Para tiendas en línea, eso significa que puedes hacer que tus enlaces muestren imágenes de productos o detalles cortos para aumentar las ventas.

Si tienes un blog de WordPress, puedes mostrar imágenes de vista previa de las publicaciones o texto corto para que los lectores quieran ver más. Y para los enlaces externos, estas vistas previas emergentes ayudan a las personas a decidir si quieren abandonar tu sitio.

Sin embargo, ten cuidado al usar vistas previas en vivo. Demasiadas pueden confundir a los visitantes. Lo mejor es usarlas solo para enlaces importantes donde serán de mayor ayuda.

Con esto en mente, veamos una forma fácil de agregar vistas previas de enlaces en vivo a tu sitio de WordPress. Este método funcionará si estás usando el editor de bloques de Gutenberg, el editor clásico, o incluso un constructor de temas. Puedes usar los enlaces rápidos a continuación para navegar por este tutorial:

• Paso 1: Instalar el plugin Bright Link Previews
• Paso 2: Personalizar el diseño de la vista previa emergente del enlace
• Paso 3: Configurar los ajustes de vista previa en vivo del enlace
• Paso 4: Ver tu vista previa emergente del enlace en acción
• Bonus Tip: Clean Up Your WordPress Link Previews With Schema Markup

Paso 1: Instalar el plugin Bright Link Previews

La forma más fácil de agregar una vista previa emergente a un enlace en WordPress es con el plugin Bright Link Previews. Cuando se activa, este plugin de vista previa de enlaces de WordPress agregará automáticamente una vista previa en vivo de tus enlaces internos y externos en tus publicaciones y páginas.

Primero, procede a instalar el plugin en tu área de administrador. Para obtener instrucciones paso a paso, puedes leer nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Una vez hecho esto, ve a Ajustes » Bright Links. Aquí es donde podrás configurar los ajustes del plugin.

Paso 2: Personalizar el diseño de la vista previa emergente del enlace

Primero, configuremos el diseño de la vista previa en vivo en la pestaña Apariencia.

En la parte superior, puede elegir el color de fondo (lado izquierdo) y el color del texto (lado derecho).

Simplemente haga clic en el cuadro de color y aparecerá una herramienta para seleccionar colores.

También puedes elegir los colores del punto de acceso hotspot, que aparecerán automáticamente para enlaces de comercio electrónico de sitios de WooCommerce, Amazon y Shopify.

Al igual que con la información sobre herramientas, simplemente elige el color de fondo del punto de acceso a la izquierda y el color del texto a la derecha.

Debajo de eso está 'Elegir tamaño', donde puedes hacer que la información sobre herramientas sea más pequeña o más grande arrastrando el punto en la barra de redimensionamiento.

Una información sobre herramientas más grande es más fácil de leer, pero querrás asegurarte de que no se superponga ni oculte partes importantes de tu página.

Recomendamos previsualizarla en tu sitio para encontrar el tamaño perfecto que se ajuste a tu diseño.

Desplazándote hacia abajo, puedes cambiar el estilo de la información sobre herramientas en sí. Hay 3 opciones predeterminadas, y siempre puedes cambiarlas más tarde.

Una vez que estés satisfecho con cómo se ve la información sobre herramientas, simplemente haz clic en 'Guardar' en la parte inferior.

Paso 3: Configurar los ajustes de vista previa en vivo del enlace

Ahora, cambia a la pestaña 'Ajustes'.

Aquí es donde puedes configurar cómo se comportan las vistas previas en vivo para los enlaces.

La vista previa de enlaces brillantes te permite aplicar las vistas previas de información sobre herramientas a los enlaces en tus publicaciones, páginas e incluso en la sección de comentarios.

Decidimos agregarlos solo para nuestras publicaciones y páginas porque agregarlos en todas partes podría interrumpir la experiencia de nuestros usuarios.

Otra cosa que podrías configurar es si mostrar o no los contadores de clics. Cambiar esta configuración de 'no' a 'sí' significa que la información sobre herramientas le dirá a los visitantes cuántos usuarios han hecho clic en el enlace sobre el que están pasando el cursor.

Esto puede ser útil para tus enlaces internos porque actúa como prueba social. Cuando los visitantes ven que un enlace es popular, los anima a explorar más de tu contenido.

Dicho esto, no recomendamos habilitar esta función si también deseas agregar vistas previas en vivo para enlaces externos. Podría ser contraproducente y hacer que la gente abandone tu sitio.

Hablando de eso, puedes elegir si agregar las vistas previas en vivo en enlaces internos, enlaces externos o ambos.

La elección depende del tipo de sitio web que estés ejecutando, pero generalmente sugerimos usar solo enlaces internos para aumentar tus visitas a la página y reducir tu tasa de rebote.

La elección depende de tus objetivos. Aquí tienes un resumen rápido:

• Enlaces Internos: Esto es excelente para aumentar la participación. Las vistas previas animan a los usuarios a descubrir más de tu propio contenido, lo que puede aumentar tus visitas a la página y reducir tu tasa de rebote.
• Enlaces Externos: Esto ayuda a generar confianza con tu audiencia. Al mostrar una vista previa de un sitio externo, tranquilizas a los usuarios de que el enlace es relevante y seguro, lo que los hace tener más confianza en tus recomendaciones.

Generalmente sugerimos usar solo enlaces internos para aumentar tus visitas a la página y reducir tu tasa de rebote.

A continuación, puedes elegir almacenar en caché las previsualizaciones para mejorar el rendimiento de tu sitio web. Recomendamos encarecidamente dejar esto habilitado.

El almacenamiento en caché guarda una copia temporal de las previsualizaciones de enlaces, lo que evita que tu sitio se ralentice y garantiza una experiencia rápida para tus visitantes.

Si muestras previsualizaciones de enlaces externos, puedes forzar que esos enlaces se abran en una nueva pestaña. Sugerimos habilitar esta función para que los usuarios no abandonen tu sitio web accidentalmente.

Finalmente, podrías optar por deshabilitar el tooltip en móvil, ya que los tooltips podrían ofrecer una mala experiencia de usuario en pantallas pequeñas. Recomendamos probar esta función y ver qué funciona mejor para tu sitio web.

Puedes consultar nuestra guía sobre cómo ver tu sitio web de WordPress en móvil desde el escritorio para más información.

Cuando estés satisfecho con la configuración de la vista previa en vivo, haz clic en 'Guardar'.

Paso 4: Ver tu vista previa emergente del enlace en acción

En esta etapa, puedes proceder a previsualizar tu sitio web para ver cómo se ve el tooltip.

Así es como se ve el nuestro sin el contador de clics:

Si eliges agregar un contador de clics, habrá una pequeña nota que muestra el número de clics que el enlace ha recibido hasta ahora.

Esa opción se verá así:

Lo genial de Bright Links Preview es que tiene una función de análisis gratuita para mostrarte cuántos usuarios han hecho clic o incluso han pasado el cursor sobre tus enlaces.

Esto puede ser útil para ver qué publicaciones interesan más a los usuarios o para decidir qué publicaciones nuevas destacar.

Para ver estos números, simplemente ve a Configuración » Bright Links desde tu administrador de WordPress y cambia a la pestaña 'Estadísticas'.

Consejo extra: Limpia las vistas previas de tus enlaces de WordPress con marcado Schema

Cuando alguien comparte tu contenido, WordPress a menudo extrae el título de la página, la descripción y la imagen para mostrar una vista previa. Pero si esa información no está configurada correctamente, el resultado puede verse poco profesional o roto.

El plugin Bright Links Preview ayuda generando automáticamente vistas previas de enlaces enriquecidas utilizando metadatos de tus páginas.

Para controlar esos metadatos y hacer que tus previsualizaciones brillen, te recomendamos usar All in One SEO.

Facilita la configuración de etiquetas meta de Open Graph (usadas por Facebook, LinkedIn, etc.) e incluso te permite establecer una imagen predeterminada de Open Graph, personalizar las etiquetas de título y descripción, y agregar marcado de esquema para un mejor SEO y contexto.

Al combinar Bright Links Preview con AIOSEO, no solo mejoras tu SEO en WordPress, sino que también te aseguras de que tus enlaces se vean limpios y sean clickeables en toda la web.

👉 Para saber más, 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
• Cómo agregar metadatos de Facebook Open Graph en WordPress

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

Esperamos que este artículo te haya ayudado a aprender cómo mostrar previsualizaciones en vivo de tus enlaces en WordPress. También te puede interesar 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.