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:
<a href="url">Enlace de texto u objeto</a>.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:
<a href="https://www.es.semrush.com/">¡Visita Semrush!</a>¿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
<a href="https://www.es.semrush.com/"target=_self">
¡Visita Semrush!</a> 2. _blank = abre el documento/página en una nueva ventana
<a href="https://www.es.semrush.com/"target=_blank">
¡Visita Semrush!</a> 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:
<a href="blog/hrefland-attribute-101/">hreflang attribute 101</a>. Sin embargo, un enlace absoluto utiliza el enlace web completo, incluido el nombre de dominio de la web:
<a href=" https://www.es.semrush.com/">¡Visita Semrush!</a>. 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).
Aquí tienes un ejemplo de una web con enlaces. Las palabras azules resaltadas contienen enlaces:
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:
<a href="https://www.semrush.com/" style="color:#SS000;">¡Este es el enlace modificado!</a>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:"
<a href="https://www.es.semrush.com/" style="color:red;">Enlace rojo</a>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:
<a href="/default.html">
<img src="semrush.jpg" alt="semrush logo" style="width:100px;height:100px;">
</a>- Enlaces de correo y teléfono: se usan para que el usuario se ponga en contacto directo contigo. En el móvil, estos enlaces dirigen a los usuarios a la aplicación de llamadas o a la aplicación de correo. Para una dirección de correo, debes añadir mailto: dentro de tu atributo href, así:
<a href="mailto:hello@semrush.com">correo de Semrush</a>Para un número de teléfono, añades tel: dentro del atributo href:
<a href="tel:+34 (900) 868 - 532">+34 (900) 868 - 532</a>- Enlaces de botón: los botones con enlaces son de gran utilidad en diseño web, ya que puedes añadir una llamada a la acción (CTA). Estas CTA le indican al usuario lo que debe hacer: “contacta con nosotros”, “descarga el folleto”, “consulta más”, etc.
Una forma de añadir un enlace a un botón es envolver el elemento en un enlace, así:
<a href='https://www.es.semrush.com/'><button>Enlazado a es.semrush.com</button></a>Atributos hreflang
Los atributos hreflang indican a los motores de búsqueda la relación entre las páginas de tu web en diferentes idiomas. Si te estás dirigiendo a una audiencia multilingüe, deberás añadir los atributos hreflang.
Aquí tienes algunos ejemplos:
<link rel="alternate" hreflang="en-us" href="http://www.ejemplo.com/usa/" />
<link rel="alternate" hreflang="en-ca" href="http://www.ejemplo.com/ca/" />Cómo identificar problemas de enlaces con Semrush
Cuando los robots de Google intenten escanear tu web, es probable que dejen de avanzar si encuentran enlaces rotos. Como resultado, será más difícil y llevará mucho más tiempo indexar tu web, si es que Google sigue adelante.
La herramienta Auditoría del sitio puede ayudarte a identificar cualquier error relacionado con los enlaces de tu web. Incluye más de 120 comprobaciones técnicas y on page que detectan errores comunes.
Necesitarás crear un proyecto para tu domino antes de usar la herramienta Auditoría del sitio.
Paso 1: una vez creado tu proyecto, inicia la herramienta Autoría del sitio desde el panel de control de tu proyecto:
Utiliza el panel para configurar el alcance del rastreo de la herramienta y el acceso a la web.
Una vez finalizada la auditoría, haz clic en la pestaña de problemas:
Filtra los problemas para ver si hay algún error de enlace. Si no estás seguro de lo que significan los errores, la herramienta incluye una explicación y sugerencias sobre cómo resolver el problema ("Por qué y cómo solucionarlo").
Para finalizar
Unos buenos enlaces facilitan la navegación y el rastreo de tu web. Sea cual sea tu estructura de enlaces, es importante detectar y actualizar los enlaces rotos lo antes posible.
Utiliza la herramienta Autoría del sitio para descubrir enlaces rotos o defectuosos y para estar al tanto de posibles errores técnicos.