Crear tabla de contenidos para entradas web

Crear una tabla de contenidos o índice permite mostrar a los usuarios que contenido hay en una página y acceder directamente a dicho contenido. Las tablas de contenido funcionan con enlaces ancla, enlazando directamente a los apartados de nuestra página o entrada.

Además, en páginas o entradas con cierta relevancia, pueden ayudar a que Google o cualquier otro motor de búsqueda muestren resultados enriquecidos en el Snippet, mostrando el indice de contenidos en la misma página de Google.

¿Cómo funciona una tabla de contenidos?

Una tabla de contenidos no es más que un código cuya función es localizar las cabeceras en una página o entrada y mostrar unos resultados en función de la configuración que hayamos definido.

Por tanto, para que una tabla de contenidos funcione correctamente debemos tener nuestros textos bien estructurados, utilizando cabeceras h1, h2, h3,...

Las cabeceras, si no las hemos utilizado, las insertaremos fácilmente con el editor de texto visual, o con los codigos HTML en el siguiente formato:

<h1> Texto o título de la sección </h1>.

Crear una tabla de contenidos

Una tabla de contenidos puede crearse de dos formas distintas.

Podemos crear una tabla de contenidos de forma manual, creando nosotros mismos la tabla y los textos de la tabla, añadiendo enlaces ancla para enlazarlos a las distintas secciones.

Mucho más fácil para páginas web creadas con WordPress, podemos utilizar un plugin que nos creará las tablas automáticamente y al que podremos configurar que headers o cabeceras mostrar, en que categorías o páginas queremos que se active automáticamente, diseños y muchos otros ajustes.

Crear una tabla de contenidos en WordPress con Easy Table of Contents

Si trabajamos con WordPress, como para casi todas las funciones, disponemos de un excelente plugin para crear tablas de contenido.

Vamos a instalar el plugin Easy Table of Contents y lo vamos a activar.

Este plugin nos va a permitir configurar donde y como queremos insertar nuestras tablas de contenido, ya sea manual o automáticamente.

Configurar Easy Table of Contents

Este plugin consta de tres bloques de configuración, los ajustes generales, los visuales y los avanzados:

Ajustes Generales

En los ajustes generales podemos definir si queremos que se inserten las tablas automáticamente, y donde y como queremos que se inserten nuestras tablas.

Las opciones son bastante claras y no debe haber ningún problema para configurar esta parte.

Las tablas de contenido, como veremos, también podemos insertarlas solo en las entradas que queramos, desde el editor de cada entrada o página. Por tanto, no es necesario activar ninguna inserción automática.

Apariencia

Aquí encontraremos los estilos visuales. Podemos editar practicamente todo lo relacionado con el diseño de la tabla de contenido, desde la fuente hasta el ancho o los colores.

También contamos con varios diseños o temas prediseñados para nuestra tabla de contenidos.

Ajustes avanzados

Aquí en principio no debemos tocar nada para que nuestra tabla de contenidos funcione correctamente.

En Encabezado podemos desactivar algunos encabezados para que no se muestren en nuestras tablas de contenidos, por ejemplo podemos desactivar los h4 y h5 si no queremos mostrar tanta profundidad en nuestra tabla.

Hay que tener en cuenta que cualquier modificación se aplicará a todas las tablas de contenido de nuestra web.

Insertar tablas de contenido de forma manual con Easy Table of Contents

Si no queremos activar las inserciones automáticas de tablas de contenido, podemos optar por añadirlas a las entradas o páginas que queramos de forma muy sencilla.

Simplemente, en el editor backend de entradas o páginas nos dirigimos a la parte inferior de la página.

Debajo de los ajustes de Yoast SEO encontraremos Table of Contents.

Ahí podemos activar y seleccionar los encabezados que queremos mostrar. Si no seleccionamos ninguno, no se mostrará la tabla de contenidos.

Si tenemos la inserción automática activada, en lugar de activar la tabla de contenidos, nos dará la opción de desactivarla.

Crear una tabla de contenidos manual

Para crear una tabla de contenidos manual vamos a utilizar enlaces ancla. Esto no tiene mucho sentido en WordPress, pero sí lo vamos a utilizar si nuestra web no esta creada con WordPress y no disponemos de algún plugin para crear tablas de contenido.

Además, es interesante aprender como funciona y como podemos utilizar los enlaces ancla, ya que a parte de para crear tablas de contenido, podemos utilizarlos para otros fines, como enlazar urls personalizadas en el menú a ciertas partes de una entrada, página o de nuestra página principal. Podemos también, crear un menú en una barra lateral que nos sirva para navegar dentro de una misma página gracias a estos enlaces ancla.

Un clarisimo ejemplo del uso de enlaces ancla en el menú principal, es el que utilizamos en su día para la página web editorfoto.com, y que funciona realmente bien.

Para crear la tabla de contenidos de forma manual, lo primero que necesitamos es crear un bloque, con un formato y un texto. Este bloque va a ser nuestra tabla, y sus textos van a enlazarse a nuestras secciones o cabeceras.

En la pestaña Estilo del bloque, podemos darle un diseño acorde a nuestra página web, por ejemplo un borde y un color de fondo.

Con nuestra tabla creada, vamos  a ver como enlazamos a las distintas secciones o cabeceras:

Como ejemplo vamos a tomar esta misma sección:

<h3>Crear una tabla de contenidos manual</h3>.

Lo único que vamos a hacer es añadirle un campo id con la url que vamos a utilizar:

<h3 id="crear-una-tabla-de-contenidos-manual">Crear una tabla de contenidos manual</h3>

Nos dirigimos a la tabla y enlazamos el texto que corresponde a este apartado con el enlace utilizando la almohadilla #. El enlace debería quedar de la siguiente forma:

https://www.comocrearweb.com/crear-tabla-de-contenidos-para-entradas-web/#crear-una-tabla-de-contenidos-manual

Como podemos ver, al enlace de la página en la cual nos encontramos, añadimos con la almohadilla la parte para dirigirnos a esta misma cabecera h3.

Vamos a ir identificando todas las cabeceras que queremos enlazar y las vamos a ir enlazando desde nuestra tabla de contenidos.

Este método es bastante más costoso que el uso del plugin, pero el conocer como funciona puede venirnos muy bien en algunos casos

Artículos relacionados

Deja un comentario