Exit, de Kevin Wang

Escribir entradas de calidad no es sencillo. Es algo que ya hemos tratado con anterioridad en este blog: poner títulos atractivos, escribir introducciones interesantes, ilustrar la entrada con imágenes, etc. Pero crear contenido de nivel es esencial si queremos posicionar correctamente nuestro blog y atraer a muchísimos visitantes.

Una de las principales recomendaciones a la hora de generar contenido de calidad es enlazarlo correctamente. Esto incluye tanto enlaces a tu propio blog como enlaces a fuentes externas. Enlazar al propio blog es útil por razones obvias: consigues que el visitante se quede en tu web y salte de una página a otra. Pero, ¿por qué es interesante enlazar a contenido que se va de mi web? ¿A caso no contribuye eso a aumentar la tasa de rebote?

Existen numerosos motivos por los que enlazar a fuentes externas es positivo:

  • Los enlaces externos hacen que tu web sea más interesante, puesto que la gente va a encontrar lo que necesita en la propia web o en las fuentes que usas.
  • Los motores de búsqueda pueden identificar más fácilmente el nicho en el que estás si enlazas a fuentes externas, ya que les das un contexto más amplio.
  • Enlazar a otras fuentes promueve que otras fuentes te indexen a ti (el famoso «tú me sigues, yo te sigo»). Aunque no es garantía de nada, enlazando a los demás transmite la idea de que estás trabajando para una comunidad abierta e interconectada.

Ahora bien, enlazar a fuentes implica aceptar que los visitantes de tu web pueden interesarse por uno de esos enlaces e irse a otro sitio, en lugar de seguir interaccionando con tu sitio. ¿O quizás no?

Cómo mantener a un visitante en nuestra web cuando pulsa en un enlace externo

Si queremos mantener a nuestros visitantes en nuestra web, incluso cuando pulsan en un enlace que les llevará a una web externa, la solución es muy sencilla: haz que el enlace se abra en una pestaña nueva. De esta forma, el usuario podrá seguir el enlace y ampliar la información, pero nuestra web siempre estará ahí, en segundo plano, esperando a que nuestro visitante curioso cierre esa pestaña y vuelva a nosotros.

Definir enlaces externos en el editor de bloques es muy sencillo. Basta con pulsar en el enlace en cuestión, darle a los puntos suspensivos y activar la opción Abrir en una pestaña nueva:

Abrir enlace en una pestaña nueva
Cómo abrir un enlace externo en una pestaña nueva

Ahora bien, cuando tenemos una entrada llena de enlaces internos y externos, ¿cómo podemos saber cuáles son los enlaces externos? Y, aún más importante, ¿cómo podemos saber si hemos activado la opción de abrirlos en una pestaña nueva?

Identificando enlaces externos en el editor de WordPress

Identificar los enlaces externos en el editor de WordPress y diferenciarlos de los enlaces internos de un solo vistazo es extremadamente sencillo. Únicamente necesitamos usar una pequeña regla CSS que marque los enlaces que apunten a dominios diferentes al nuestro.

Por ejemplo, nuestra web es https://neliosoftware.com, así que cualquier enlace que apunte a una URL que no empiece con https://neliosoftware.com será un enlace externo. Usando esta información, podemos definir una regla como la siguiente:

que marcará todos los enlaces que apunten a webs diferentes a la nuestra de esta forma:

Link Externo correctamente identificado
Con una sencilla regla CSS podemos añadir un pequeño icono al final del link que lo marca como «externo».

Si complicamos un poquito más nuestro CSS, podemos colorear el icono de «enlace externo» de forma diferente en función de cómo esté definido el enlace. Es decir, si identificamos un enlace externo, podemos pintarlo con un rojo chillón si la opción para abrirlo en una nueva pestaña no está activada:

Link Externo identificado como tal y con error
Modifiando las reglas CSS que hemos definido, podemos incluso marcar cuándo un enlace externo no se va a abrir en una pestaña nueva, simplemente cambiando el color del icono que hemos añadido.

con una regla tan sencilla como esta:

Cómo añadir a WordPress las reglas CSS necesarias para identificar enlaces externos

Para añadir las reglas CSS que acabamos de ver en tu WordPress, simplemente añade este fragmento de código PHP:

en un plugin con tus personalizaciones.

Espero que te haya gustado el pequeño consejo de hoy. ¡Nos vemos la semana que viene!

Imagen destacada de Kevin Wang en Unsplash.

3 respuestas a «Cómo identificar rápidamente enlaces externos en el editor de WordPress»

  1. Avatar de Pablo Delgado
    Pablo Delgado

    Muy buenas, David.

    He llegado a este post tras mucho buscar en Google sobre el tema, ya que solo consigo mostrar ciertos iconos de FontAwesome. Me explico…

    He probado tu código y me muestra el icono correctamente, pero si lo cambio por este: «\f2f5», me muestra el típico cuadrado blanco.

    ¿Sabes a qué es debido este error?

    Gracias.

    1. Avatar de David Aguilera

      Eso es porque el tipo de letra que se usa para mostrar ese icono no tendrá definido el carácter «\f2f5». Tienes que usar una font-family que tenga los iconos que te interesen.

      1. Avatar de Pablo Delgado
        Pablo Delgado

        Buenas, David. Gracias por responder.

        Tras muchos intentos probando font-family distintos, he optado por cargar el .svg directamente así:

        content: url(‘https://api.iconify.design/fa-solid:sign-out-alt.svg?height=16’);

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.