Esta práctica es, muchas veces, importante e inevitable para determinadas estrategias, no obstante, es un factor que complica el acceso del sitio.
Teniendo esto en cuenta, es importante agilizar el ingreso a determinados elementos de tu página.
La buena noticia es que existe en el HTML un elemento que permite la creación de links para determinar posiciones de las páginas.
Los bookmarks HTML permite a los lectores saltar a partes específicas de una determinada página de la internet, facilitando la navegación de sus visitantes.
Esas marcas no son más que enlaces (o anclas) que, cuando se hace clic, hacen que la página del usuario muestre hasta el último punto en el que se aplicó el marcador.
En este artículo, enlistaremos un tutorial para cada una de las mejores opciones de creación de tablas de contenido para que puedas aplicar esas estrategias hoy mismo.
Todo es más fácil si tu sitio está hecho en la plataforma WordPress. Existe un plugin que crea automáticamente una lista de links que llevan a cada subtítulo de una página.
¿Vamos?
- Cómo crear un índice manualmente
- Cómo crear un índice a través de un plugin de WordPress
- Usando el anclaje para en enlace externo
Cómo crear un índice manualmente
En caso de que tu interés sea bastante específico, como por ejemplo, hacer una lista de subtítulos en tan solo un contenido de tu sitio o blog, el índice manual es una buena opción.
Son dos pasos bien simples. Primero, es necesario crear la lista de links (o anclas) con todos los subtítulos que deseas enlistar:
<a href="#nombre_del_ancla">Título del ancla</a>
En este caso, definimos cómo id, el elemento #nombre_del_ancla. Ese id debe ser único, precedido por un hashtag (#) y es muy importante que no uses espacios en él. Números, caracteres como el guion bajo ( _ ) y el guion medio (-) son permitidos.
Luego, será necesario insertar el código que demarcará el punto de la página en que el usuario será redireccionado al momento de hacer clic en el índice:
<a id="nombre_del_ancla"></a>
Título del ancla
En esta parte, percibe que el hashtag (#) no está presente. El id que usamos anteriormente regresa sin él.
¡Listo! Tu índice ya está funcionando. Para cada nuevo subtítulo que sea insertado, repite el proceso.
Por ejemplo, si tu texto cuenta con tres subtítulos, tu índice tendrá la siguiente composición:
<a href=”#introduccion”>Introducción</a>
<a href=”#capitulo_1″>Capítulo 1</a>
<a href=”#conclusion”>Conclusion</a>
A lo largo de tu contenido, las llamadas a cada sección aparecerá de la siguiente forma:
<a id=”introduccion”></a>
Introducción
…
<a id=”capitulo_1″></a>
Capítulo 1
…
<a id=”conclusion”></a>
Conclusion
Puedes combinar esos links con los títulos H2, por ejemplo. En este caso, el código podría ser del siguiente modo:
<h2><a name=”introduccion”></a>
Introducción</h2>
…
<h2><a name=”capitulo_1″></a>
Capítulo 1</h2>
…
<h2><a name=”conclusion”></a>
Conclusión</h2>
…
Cómo crear un índice a través de un plugin de WordPress
Algunos sitios como Wikipedia hacen uso de la automatización de índices. Cuando los subtítulo H1, H3, H4, H5 y H6 son activados, por ejemplo, el sistema de las páginas wiki crea una tabla de contenidos.
Tabla de contenidos o índice
Pensando en esta última lógica, el plugin para WordPress llamado Table of Contents Plus https://wordpress.org/plugins/table-of-contents-plus/ crea automáticamente un índice para tu sitio.
Además de eso, a través del panel de control del plugin es posible definir en cuáles páginas el índice personalizado aparecerá. Mira:
Usando el ancla para enlaces externos
Con el índice creado, ahora podrás compartir ese “salto” en la página con personas que todavía no están en tu sitio.
Por ejemplo, en el artículo “Marketing digital: todo lo que siempre quisiste saber sobre el asunto, está aquí” tenemos la siguiente URL:
En esta página tenemos un índice que cuenta con un tópico de conclusión, el cual usa el id #conclusion.
Para compartirlo, basta con un insertar una barra (/) al final de la URL, junto al hashtag (#) y el id conclusión.
Este sería el resultado final:
¿Te quedó alguna duda? Déjanos saber en los comentarios tus preguntas, en caso de que sea necesario.
