Cómo agregar un ícono de enlace externo a tu sitio de WordPress

Una navegación clara es la base de una excelente experiencia en un sitio web. Cuando los visitantes pueden entender fácilmente a dónde los llevará cada enlace, se sienten más seguros al explorar su contenido.

Los íconos de enlaces externos hacen esto posible al proporcionar retroalimentación visual instantánea sobre los enlaces salientes.

Estos pequeños indicadores ayudan a los visitantes a tomar decisiones informadas sobre su viaje de navegación, creando una experiencia más fluida y profesional.

Después de observar a innumerables propietarios de sitios de WordPress agregar esta función, hemos visto cómo estos pequeños detalles pueden marcar una gran diferencia en la satisfacción del usuario.

¿Listo para mejorar la navegación de tu sitio? Te guiaremos a través de nuestro método probado para agregar íconos de enlaces externos a tu sitio de WordPress.

¿Por qué agregar íconos de enlaces externos en WordPress?

Un ícono de enlace externo es una pequeña imagen que aparece junto a un enlace que llevará al usuario a un sitio web diferente.

Por ejemplo, puedes desplazarte hasta el final de cualquier publicación de Wikipedia y ver que la mayoría de los enlaces en la sección de Referencias tienen un ícono de enlace externo.

Al agregar enlaces con íconos a tu blog de WordPress, tus visitantes podrán distinguir fácilmente entre enlaces salientes y enlaces internos. Muchos sitios también usan íconos de enlaces externos para dejar claro que el enlace se abrirá en una nueva ventana o pestaña.

Estos íconos pueden hacer que los visitantes permanezcan más tiempo en tu sitio y aumentar tus visitas a la página, ya que hay menos riesgo de que hagan clic en un enlace externo y abandonen tu sitio web por accidente.

Dicho esto, veamos cómo puedes personalizar tus enlaces externos y agregarles íconos en tu sitio de WordPress.

Cómo agregar íconos de enlaces externos en WordPress

La forma más fácil de agregar íconos de enlaces en tu sitio web es usando WP External Links.

Puedes usar este plugin para agregar automáticamente diferentes imágenes, Dashicons e íconos de Font Awesome a tus enlaces externos.

Primero, necesitarás instalar y activar el plugin WP External Links. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Después de eso, simplemente haz clic en la nueva configuración de WP External Links en el menú de la izquierda.

Si aparece una ventana emergente pidiéndote que actualices, puedes hacer clic en cualquier lugar fuera de la ventana emergente para cerrarla.

Como puedes ver, el plugin puede hacer mucho más que solo agregar un ícono de enlace externo a tu sitio. Por ejemplo, puede convertir automáticamente todos tus enlaces externos en enlaces nofollow en WordPress.

WP External Links también puede mantener a la gente en tu sitio abriendo todos los enlaces externos en una nueva ventana o pestaña.

Recomendamos habilitar esta función, ya que muchos usuarios asumen que los enlaces con un ícono de enlace externo se abrirán en una nueva ventana o pestaña de todos modos.

Para abrir todas las URL externas en una nueva ventana o pestaña, abre el menú desplegable ‘Abrir enlaces externos’ y haz clic en ‘cada uno en una ventana o pestaña nueva separada’.

Por defecto, WP External Links aplicará esta regla a cada nuevo enlace externo que crees.

Sin embargo, también puede escanear tu sitio y cambiar cualquier URL externa que hayas agregado previamente a tu sitio web.

Esto proporcionará una experiencia más consistente para tus usuarios, así que es una buena idea hacer clic en la casilla ‘Sobrescribir valores existentes’.

Una vez que hayas hecho eso, estarás listo para crear un ícono para tus enlaces externos. Para empezar, desplázate hasta la sección ‘Elegir tipo de ícono’.

Ahora puedes hacer clic donde dice ‘sin ícono’ para abrir el menú desplegable.

Tus opciones son Imagen, Font Awesome o Dashicon.

Tanto Font Awesome como Dashicon vienen con un solo ícono de caja con flecha que puedes usar como ícono de enlace externo.

Este ícono siempre aparecerá en azul en tu sitio, como puedes ver en la siguiente imagen.

Este es el ícono exacto que muchos sitios web usan para sus enlaces externos, por lo que la mayoría de los visitantes entenderán qué significa el ícono de caja con flecha.

Sin embargo, ‘Imagen’ te permite elegir entre varios íconos de caja con flecha, incluyendo algunos que tienen un estilo y color ligeramente diferentes.

En la siguiente imagen, puedes ver un ejemplo de cómo se verá un ícono de caja con flecha colorido en tu sitio de WordPress.

Si deseas agregar un botón de enlace colorido a tu sitio, deberás seleccionar ‘Imagen’ en el menú desplegable ‘Elegir tipo de ícono’.

Luego puedes hacer clic en el que deseas usar para tus enlaces externos. Asegúrate de que el ícono se vea bien con tu tema de WordPress.

Una vez que hayas hecho eso, abre el menú desplegable ‘Posición del ícono’.

Aquí, elige si el ícono aparecerá en el ‘Lado derecho del enlace’ o en el ‘Lado izquierdo del enlace’. La mayoría de los sitios web muestran el ícono externo a la derecha del enlace.

¿Quieres usar el ícono estándar de caja con flecha azul en su lugar?

Entonces puedes abrir el menú desplegable ‘Elegir tipo de ícono’ y hacer clic en ‘Font Awesome’ o ‘Dashicon’ en su lugar.

A continuación, abre el menú desplegable junto a ‘Elegir Dashicon’ o ‘Elegir FA’, y luego haz clic en el ícono de caja con flecha.

Nota: Tanto Font Awesome como Dashicons te dan acceso a docenas de otros iconos. Sin embargo, recomendamos usar el icono de caja con flecha, ya que más personas lo reconocerán como un icono de enlace externo.

Después de hacer clic en el icono de Font Awesome o Dashicon que deseas usar, puedes especificar si debe aparecer a la derecha o a la izquierda del enlace, siguiendo exactamente el mismo proceso descrito anteriormente.

Cuando estés satisfecho con el icono de enlace externo que has elegido, simplemente haz clic en 'Guardar cambios'.

El plugin agregará automáticamente los iconos de enlace a todas las URL externas de tu sitio.

Aprende más consejos y trucos para personalizar tu sitio de WordPress

Si te gustó este artículo sobre cómo personalizar los iconos de enlaces externos, entonces podrías encontrar útiles los siguientes consejos.

Por ejemplo, las notas al pie son una excelente manera de proporcionar información adicional o citas sin interrumpir el flujo de tu texto. Tenemos una guía útil sobre cómo agregar notas al pie simples y elegantes en WordPress para mostrarte cómo.

Aparte de eso, ¿has considerado personalizar la apariencia de tus enlaces? Cambiar el color de tus enlaces puede ayudar a que destaquen del texto circundante y hacerlos más atractivos visualmente.

Además, resaltar texto es una excelente manera de captar la atención de tus lectores hacia información importante. Tenemos una guía útil sobre cómo resaltar texto en WordPress para mostrarte diferentes métodos que puedes usar.

¿Buscas añadir un toque de elegancia a tus publicaciones de blog? Las letras capitales son letras grandes y decorativas que se usan al principio de un párrafo. Pueden añadir un aspecto único y elegante a tu contenido.

Finalmente, mejorar la navegación de tu sitio web puede mejorar significativamente la experiencia del usuario. La navegación de migas de pan muestra la ubicación de un usuario dentro de la jerarquía de tu sitio web, facilitando que encuentren su camino.

Preguntas frecuentes: Añadir iconos de enlaces externos en WordPress

Aquí tienes algunas preguntas frecuentes que nos hacen nuestros lectores sobre cómo añadir un icono de enlace externo a tu sitio de WordPress:

¿Los iconos de enlaces externos afectan al SEO?

No, los íconos de enlaces externos en sí mismos no afectan tu SEO directamente. Son simplemente una mejora visual que mejora la experiencia del usuario.

Sin embargo, la forma en que manejas los enlaces externos puede impactar significativamente el SEO. Por ejemplo:

• Abrir enlaces en una nueva pestaña (target="_blank") evita que los usuarios naveguen fuera de tu sitio.
• Agregar atributos rel="nofollow" o rel="sponsored" puede ayudar a administrar la equidad de los enlaces, especialmente para enlaces de afiliados.
• Usar íconos facilita a los usuarios la identificación de enlaces de terceros, lo que puede reducir las tasas de rebote si tu sitio se siente más confiable.

Así que, si bien los íconos no son un factor de clasificación, el comportamiento del usuario que respaldan puede contribuir a un mejor compromiso.

¿Agregar un ícono a los enlaces externos ralentizará mi sitio web?

No necesariamente. Si estás utilizando un plugin ligero como WP External Links o agregando el ícono con CSS, el impacto en el rendimiento es mínimo. Solo ten en cuenta algunas cosas:

• Evita usar íconos de imágenes grandes o no optimizadas. Usa SVGs o fuentes de íconos como Font Awesome en su lugar.
• No cargues una biblioteca de íconos completa solo para un solo ícono de enlace externo; eso es excesivo.
• Los plugins con múltiples funciones (como monitoreo de enlaces, redirección, etc.) pueden ser más pesados, así que elige uno enfocado solo en íconos de enlaces si la velocidad es una preocupación.

Todos estos consejos ayudarán a asegurar que los íconos de enlaces externos no afecten la velocidad de tu sitio.

¿Debo mostrar íconos de enlaces externos en todos los enlaces externos?

No siempre. Es posible que desees omitir el ícono en algunos casos, como:

• En menús o pies de página, donde el espacio es limitado
• En íconos de redes sociales, donde ya es obvio
• Si el ícono no coincide con el diseño de tu sitio

Muchos plugins te permiten excluir ciertos enlaces usando clases o por nombre de dominio. Por ejemplo, puedes excluir enlaces a YouTube o a tus propios socios de marca mientras muestras íconos para el resto. Todo se trata de contexto: usa íconos donde ayuden a aclarar la experiencia del usuario.

Esperamos que este artículo te haya ayudado a aprender cómo agregar un ícono de enlace externo a tu sitio de WordPress. También puedes consultar nuestra guía completa sobre los elementos de diseño más efectivos para un sitio de WordPress y nuestras selecciones expertas de los mejores constructores de páginas de arrastrar y soltar para 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.