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

Las vistas previas de los enlaces ofrecen a sus lectores un anticipo de lo que les espera al hacer clic.

Si la vista previa corresponde a un enlace interno y parece interesante, es más probable que los usuarios hagan clic y exploren su sitio web. Por otro lado, si el enlace no es lo que necesitan, pueden seguir buscando algo que les resulte más adecuado.

Muchos usuarios de WordPress buscan una forma sin código de mostrar vistas previas en directo de los enlaces de sus sitios.

Lo entendemos. Puede ser frustrante encontrar una solución que no requiera conocimientos técnicos o plugins arriesgados. Por eso hemos investigado y buscado la mejor solución sin código para usuarios de WordPress.

Tras numerosas pruebas, hemos encontrado un método sencillo para añadir vistas previas de enlaces a su sitio WordPress. Esta guía le mostrará cómo hacerlo.

Cuándo añadir una vista previa en directo de los enlaces en su sitio WordPress

En un sitio web típico de WordPress, los enlaces no muestran lo que contienen. Esto puede frustrar a los visitantes cuando hacen clic en un enlace y descubren que no es lo que esperaban. Aquí es donde resulta útil enlazar vistas previas en directo.

Las vistas previas de enlaces en directo suelen parecerse a información emergente. Aparecen cuando alguien pasa el ratón por encima de un enlace, mostrando un anticipo del contenido.

En el caso de las tiendas en línea, esto significa que puede enlazarlas para mostrar imágenes de los productos o detalles breves para aumentar las ofertas.

Si tiene un blog en WordPress, puede mostrar imágenes de entradas o texto breve para que los lectores quieran ver más. Y en el caso de los enlaces externos, estas vistas previas con información emergente ayudan a los usuarios a decidir si quieren salir de tu sitio.

Sin embargo, tenga cuidado al utilizar vistas previas en directo. Demasiadas pueden confundir a los visitantes. Es mejor utilizarlas solo para los enlaces importantes, donde serán de mayor ayuda.

Con esto en mente, veamos una forma sencilla de añadir vistas previas de enlaces en directo a tu sitio WordPress. Puede utilizar los enlaces rápidos a continuación para navegar a través de este tutorial:

Paso 1: Instalar el plugin Bright Link Previews

La forma más fácil de añadir una vista previa de información emergente a un enlace en WordPress es con el plugin Bright Link Previews. Cuando esté activado, este plugin de WordPress añadirá automáticamente una vista previa en directo de tus enlaces internos y externos en tus entradas y páginas.

En primer lugar, instala el plugin en tu área de administrador / administración. 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, vaya a Ajustes ” Bright Links. Aquí podrá establecer los ajustes del plugin.

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

En primer lugar, vamos a establecer el diseño de la vista previa en la pestaña Apariencia .

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

Sólo tienes que hacer clic en el cuadro de color y aparecerá una herramienta de selección de color.

También puede elegir los colores de la zona activa de precios, que aparecerán automáticamente para los enlaces de comercio electrónico de los sitios WooCommerce, Amazon y Shopify.

Al igual que con la información emergente, basta con elegir el color de fondo de la zona activa a la izquierda y el color del texto a la derecha.

Debajo está “Elegir tamaño”, donde puede hacer que la información emergente sea más pequeña o más grande arrastrando el punto de la barra de ajuste.

Cuanto más grande sea, más fácil será para los usuarios leer la información del enlace. Dicho esto, el tamaño de la información emergente también puede afectar a la experiencia del usuario, así que asegúrese de encontrar el tamaño adecuado para el diseño de su sitio web.

Si se desplaza hacia abajo, puede cambiar el estilo de la información emergente. Hay 3 opciones por defecto, y siempre se puede cambiar más tarde.

Cuando estés satisfecho con el aspecto de la información emergente, haz clic en “Guardar” en la parte inferior.

Paso 3: Establecer los ajustes de vista previa en directo del enlace

Ahora, cambia a la pestaña “Ajustes”.

Aquí puede configurar cómo se comportan las vistas previas en vivo de los enlaces.

Bright Links Preview le permite aplicar la vista previa de información emergente en sus entradas, páginas y comentarios de usuarios, así como a los enlaces que coinciden con un selector JavaScript o una imagen.

Decidimos añadirlos sólo para nuestras entradas y páginas porque añadirlos en todas partes podría perturbar nuestra experiencia de usuario.

Otra cosa que puedes configurar es si mostrar o no contadores de clics. Si cambia esta opción de “no” a “sí”, la información emergente indicará a los visitantes cuántos usuarios han hecho clic en el enlace sobre el que están enlazando.

Esto puede ser útil para los enlaces internos, ya que puede inspirar una sensación de FOMO y animar a los visitantes a explorar más a fondo su sitio web.

Dicho esto, no recomendamos activar esta característica si también desea añadir vistas previas en directo para enlaces externos. Puede ser contraproducente y hacer que la gente abandone su sitio.

A propósito, puedes elegir si quieres añadir las vistas previas en directo en los enlaces internos, en los externos o en ambos.

La elección depende del tipo de sitio web que tenga, pero generalmente sugerimos enlazar sólo páginas internas para aumentar las visitas y reducir la tasa de rebote.

A continuación, puede optar por almacenar en caché las vistas previas para acelerar el rendimiento de su sitio de WordPress.

Si añades vistas previas en directo a tus enlaces externos, también puedes forzar que esos enlaces tengan el atributo target blank para que esos enlaces se abran en una nueva pestaña. Le sugerimos activar esta característica para que los usuarios no abandonen accidentalmente su sitio web.

Por último, puede desactivar la información emergente en los móviles, ya que en las pantallas pequeñas la información emergente puede perjudicar al usuario. Te recomendamos que pruebes esta característica y veas qué funciona mejor para tu sitio web.

Para más información, puede marcar / comprobar nuestra guía sobre cómo ver su sitio web de WordPress en el móvil a través del escritorio.

Cuando estés satisfecho con los ajustes de la vista previa, haz clic en “Guardar”.

Paso 4: Vea la vista previa de la información emergente de su enlace en acción

En esta fase, puede obtener una vista previa de su sitio web para ver el aspecto de la información emergente.

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

Si elige añadir un contador de clics, aparecerá una pequeña nota que muestra el número de clics que el enlace ha enlazado hasta el momento.

Esa elección tendrá este aspecto:

Lo mejor de la vista previa de Bright Links es que tiene una característica de análisis gratuita que te muestra cuántos usuarios han enlazado o incluso han pasado el cursor sobre tus enlaces.

Esto puede ser útil para ver qué entradas interesan a la mayoría de los usuarios o para decidir qué entradas nuevas destacar.

Para ver estas cifras, sólo tiene que ir a Ajustes ” Enlaces Brillantes desde su administrador / administración de WordPress y cambiar a la pestaña ‘Estadísticas’.

Consejo adicional: Limpie sus vistas previas de enlaces de WordPress con el marcado de schema

Bright Links Preview funciona extrayendo automáticamente los metadatos de tus páginas y entradas para crear una vista previa en directo de tus enlaces. En otras palabras, la calidad de la vista previa de sus enlaces depende de lo bien que haya establecido sus metadatos.

Puedes añadir metadatos a tus artículos utilizando All in One SEO (AIOSEO), un potente plugin SEO para WordPress. Tiene una característica de esquema que te permite añadir fácilmente datos estructurados a tu contenido.

Además de ayudar a Bright Links Preview a crear mejores vistas previas, también puede dar a los motores de búsqueda más contexto acerca de su contenido, mejorando potencialmente su rendimiento SEO en WordPress.

Si desea añadir el marcado schema a su contenido, puede leer estos artículos:

• Cómo añadir Schema Markup en WordPress
• Cómo añadir correctamente el esquema “Cómo” en WordPress
• Cómo añadir metadatos Open Graph de Facebook en WordPress

Descubra más características de diseño de WordPress

¿Quieres que el diseño de tu sitio WordPress sea aún más interesante? Marca / comprueba estas útiles guías:

• Utilice notas a pie de página sencillas y elegantes en las entradas de su blog para añadir información adicional
• Enlazar migas de pan para ayudar a los visitantes a saber en qué parte del sitio se encuentran.
• Cree un teletipo de noticias con desplazamiento para compartir actualizaciones importantes con sus visitantes.
• Utiliza un widget temporizador de cuenta atrás para crear expectación ante eventos especiales
• Añade una barra de progreso de lectura a tus entradas para mantener la participación de los lectores
• Cree separadores de formas personalizados para hacer más interesante el diseño de su sitio web

Esperamos que este artículo te haya ayudado a aprender cómo mostrar vistas previas en vivo de tus enlazes en WordPress. También puedes comprobar nuestra lista de los mejores maquetadores de arrastrar y soltar en WordPress y nuestra guía práctica sobre cómo editar un sitio web en WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.