Índice de contenidos
Contenido
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 en una barra lateral
Con este mismo plugin y la ayuda de otros dos plugin que nos permitirán configurar algunas opciones podemos crear una tabla de contenidos en la barra lateral, darle un diseño y si queremos, hacerla fija.
Para hacer esto desactivaremos las inserciones automáticas del plugin table of contents.
Vamos a instalar estos dos plugin:
En primer lugar, desde el menú Apariencia -> Widgets vamos a añadir el widget de Table of contents a la barra lateral derecha:
Si ya hemos instalado los dos plugins Q2W3 y widget options, vamos a configurar las siguientes opciones:
- En primer lugar, marcaremos widget fijo.
- En segundo lugar, vamos a desactivar este widget en versiones para smartphones (y podemos hacer lo mismo en tablets), ya que en este caso el widget se mostrará en la parte inferior de la página, y eso no nos interesa.
Mostrar tabla de contenidos en la parte superior para móviles y tablets
Para mostrar la tabla de contenidos en la parte superior en versiones para móvil lo vamos a hacer desde la misma edición de la entrada en dos sencillos pasos:
Creamos un bloque de texto en la parte superior de la entrada, con el titulo y el shortcote [ toc ] (quitandole los espacios). Esto hará que en la parte superior ya se muestre la tabla de contenidos en todos los dispositivos, tal y como podemos ver en la siguiente imágen:
Ahora lo que nos interesa, es que este bloque solo se muestre en dispositivos móviles. Para ello desde ajustes avanzados seleccionaremos la opción que se muestra en la siguiente imágen:
De este modo, en móviles se mostrará la tabla de contenidos en la parte superior, mientras que en pantallas más grandes se mostrará en la barra lateral derecha tal y como emos configurado en el plugin widget options.
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
