Un enlace ancla es un tipo de enlace html que, al pinchar sobre el, te lleva a una parte concreta de la página web ya sea propia o externa.
Son muy útiles para ayudar a los visitantes a encontrar directamente el contenido que les interesa dentro de tu página web. Hay que recordar que existen estudios que dicen que de media, un visitante invierte 20 segundos como máximo para encontrar el contenido que busca. Si en estos 20 segundos (o menos), abandonará tu web y probablemente no vuelva. Por esto (y por otras muchas cosas) es bueno usar los enlaces ancla.
Contenidos del post:
Qué son los enlaces ancla
Como hemos dicho los enlaces ancla (o anchor links en inglés) son enlaces que, al pinchar sobre ellos, te llevan al contenido al que están anclados. Este contenido anclado puede estar en la misma página, en la web o incluso en otra distinta.
Como se puede imaginar, no es un enlace HTML al uso y para que se cree esa interacción es necesario que se cumplan los siguientes requisitos:
1 Debemos dotar al texto al que se van a anclar los enlaces de un «id». Para esto usaremos siempre una estructura como esta:
<h2 id="texto-que-queramos">Ejemplo de Título</h2>
<p id="texto-que-queramos"> ejemplo de párrafo</p>
Como veis, es tan sencillo como poner en la etiqueta a la que queremos llevar nuestro enlace (la etiqueta que queremos que nos haga de ancla), el id o «nombre de ancla» que le queramos dar.
2 Una vez que el ancla está creado y tiene su id correspondiente, llega la segunda parte: crear los enlaces que vayan «anclados» a este id.
Para crear esto, sólo deberemos crear el hipervínculo y apuntarlo al ancla que hemos creado. Siguiendo con nuestro ejemplo: si le dimos a nuestra id «texto-que-queramos», el formato que le debemos dar a nuestro enlace es el siguiente:
<a href=»#texto-que-queramos»>Nombre del hiperenlace</a>. Como vemos, habría que añadir la almohadilla (#) que identifica los ids en las etiquetas <a>. Una vez hayamos terminado, quedaría tal que así Nombre del hiperenlace
Es importante recordar que no debemos saltarnos la estructura de carpetas que tenga nuestro wordpress, por esto cabe recordar que:
Si es destino del enlace está en la la misma página en donde está el ancla. podríamos poner:
<a href="#texto-que-queramos>Nombre del enlace</a>
Si está en otra página, habría que especificarlo en la dirección del enlace, quedando así:
<a href="https://www.suratica.es/nombre-de-la-pagina/#texto-que-queramos>Nombre del enlace</a>
Incluso si quieres que vaya a un container u otro elemento, puedes apuntarlo directamente al div
<div id="texto-que-queramos"> Estructura de nuestro div </div>
Este dato es importante, ya que muchas veces si se va con prisa (cosa muy habitual) se te puede olvidar este pequeño detalle. Si esto pasa, tendrás un 404 en la página, y esto es algo que no queremos.
Ventajas que ofrecen los enlaces ancla
Los enlaces ancla ofrecen muchas ventajas, ya que son una manera muy rápida de navegar por el post, la web y el contenido en general de tu web. Ofrecen ventajas como estas:
- Ayudan a que tu gente pueda navegar más fácilmente por tu web, y no perderse buscando lo que quieren. Hay que recordar que como no encuentren lo que quieren rápido, se irán.
- Hacen de enlaces, lo cual mejora sustanciosamente tu SEO on Page.
- Son muy socorridos para índices de contenidos, y esto es Google Frendly :)
- Permiten mejorar la estructura de tu contenido, ya que al hacerlos es inevitable estructurar el contenido.
¿Os parece interesante todo eso acerca de los enlaces ancla? ¿Sabíais esta información?
Esperamos que os haya gustado esta entrada.
Texto que queramos
