La experiencia del usuario (UX) se ha convertido en una señal crítica para posicionar en Google, por lo que es más importante que nunca asegurarse de que tu web está a la altura. Cuando un usuario puede navegar con fluidez por tu web, mejora su experiencia de usuario, por lo que estar al día de los enlaces, es siempre una buena idea.
Los enlaces permiten a los usuarios «viajar» de una página a otra. Sabes que los enlaces están activos cuando el cursor del ratón cambia de una flecha a una mano al pasar por encima del enlace. Puedes añadir enlaces HTML a varios elementos de la página, como texto, imágenes y más.
En esta guía, te contaremos cómo funcionan los enlaces (conocidos como «enlaces HTML» o «a href link»), por qué es fundamental estar tener tus enlaces actualizados y cómo encontrar y corregir aquellos que sean defectuosos con la herramienta Autoría del sitio.
¿Por qué son importantes los enlaces HTML?
Los usuarios acuden a Internet con un objetivo: buscan respuestas, productos, consejo y mucho más. Gracias a tus esfuerzos de SEO, Google te ha colocado en su camino.
Una vez que has conseguido una visita de un usuario, necesitas guiarlo a través de tu web con facilidad de forma que su experiencia de usuario sea placentera. Tus enlaces HTML son vitales para guiar al usuario de una página a otra.
Los buenos enlaces HTML incrementa además, el tiempo de permanencia del usuario, que puede dar lugar a más páginas por sesión, dos métricas importantes en analítica web.
¿Qué aspecto tiene una etiqueta <a> HTML?
La etiqueta de anclaje (o etiqueta “a hred” o “enlace”) incluye una etiqueta de apertura, cualquier atributo de etiqueta, el texto de anclaje u objeto y una etiqueta de cierre. Por ejemplo:
El “href” es un atributo esencial del elemento <a>, determina el destino del enlace.
¿Qué es un enlace de atributo HREF?
El atributo href de un enlace (abreviatura de “Hypertext REFerence”) indica la relación entre páginas a los motores de búsqueda.
href es un atributo de la etiqueta anchor y contiene dos componentes:
- La URL (el enlace) y
- El texto u objeto clicable que los usuarios verán en la página (conocido como «texto de anclaje»).
Por ejemplo:
¿Dónde se abre el enlace HTML <a> una vez que se hace clic?
Cuando un usuario hace clic en tu enlace HTML, es probable que la página del enlace se abra en la misma ventana o pestaña del navegador. Es la opción predeterminada, a menos que especifiques con código cómo debe mostrarse el enlace.
Sin embargo, si se trata de una descarga o quieres que la página se abra en una ventana o pestaña diferente, puedes utilizar atributos como «blank».
Los valores más comunes de los atributos de destino son:
1. _self: la página/documento se abre en la misma ventana.
2. _blank = abre el documento/página en una nueva ventana.
URL relativa vs. absoluta
La estructura de tu URL puede contribuir a que Google rastree eficazmente tu web. Es probable que utilices uno de los dos tipos comunes de estructura de URL: relativa y absoluta.
Los enlaces relativos utilizan parte de la URL, y se reservan principalmente para enlaces internos en los que el enlace se encuentra en la misma web y, por tanto, forma parte del mismo dominio raíz. Tienen un aspecto parecido a este:
Sin embargo, un enlace absoluto utiliza el enlace web completo, incluido el nombre de dominio de la web:
Cuándo utilizar URL relativas
Utilizas URL relativas cuando quieres enlazar a una página de tu web. Usarás el «slug» de tu URL en el enlace.
Estas son algunas ventajas de utilizar URL relativas:
- Transferencia rápida a un nuevo dominio (no tendrás que actualizar cada URL).
- Velocidad de carga de página mayor (uno de los factores de posicionamiento de Google).
Cuándo utilizar URL absolutas
Si envías a tu usuario a una página externa (es decir, fuera de tu web), debes utilizar una URL absoluta.
Estas son algunas ventajas de utilizar URL absolutas:
- El enlace apunta siempre a la URL correcta (Google siempre sabrá dónde ir).
- Las arañas de Google pueden escanear las URL con facilidad (un factor importante para la indexación).
¿Qué aspecto tienen los <a> href link?
Encontrarás enlaces HTML en una página cuando pases el ratón por encima de un texto de anclaje, imágenes, botones, etc., y el puntero del ratón se convierta en una mano.
Por defecto, los enlaces aparecen como:
- Subrayados y en azul (si aún no has visitado el enlace).
- Subrayados y en morado (si ya has visitado el enlace).
- Subrayados y en rojo (si son un enlace activo).
Ten en cuenta que si el color de los enlaces de tu web es demasiado parecido al color de fondo de la web, es conveniente que lo cambies para que destaquen.
Si tu empresa tiene definidos los colores corporativos, es probable que conozcas qué es el código hexadecimal. Puedes modificar tu etiqueta <a> HTML (la etiqueta de anclaje) con el código hexadecimal de tu color corporativo como se indica a continuación:
Si no tienes un código hexadecimal definido, hay unos 140 colores entre los que puedes elegir. En lugar del código hexadecimal, puedes añadir el color, como «azul» o «rojo:»
Tipos de enlaces
Puedes utilizar los enlaces para generar una experiencia de navegación sencilla en tu web de varias formas. Piensa en ellos como conexiones entre recursos, independientemente de si son páginas, documentos, formularios, etc.
Vamos a echarle un vistazo a los tipos de enlaces más comunes que puedes encontrar en una web:
- Enlaces de imagen: puedes enlazar una imagen a otro recurso. Por ejemplo, puedes enlazar una imagen de producto a su página.
Es probable que utilices una estructura de enlaces similar a esta:
