Crear Tabla de Contenidos en cualquier CMS

Hoy hablaremos de un «secreto a voces» que casi la mayoría de los Webmasters están implementando en las páginas de sus blog, hoy te explicaremos cómo crear las famosas Tablas de Contenidos así como de sus principales ventajas.

Ya en su momento, por Octubre de 2016, creé un post explicando esta técnica de tablas de contenidos conocida entonces como «Salto de Enlaces en una misma página» pero actualmente la llamamos «Tablas de Contenidos». Si no te defiendes con el HTML, ¡no te preocupes! En este post te explicaré paso por paso lo que tienes que hacer. ¡Manos a la obra!

 

 

Qué es una tabla de contenidos.

Una tabla o índice de contenidos, como su nombre indica, no es más que una lista de enlaces ancla que enlaza a cada parte del artículo y que normalmente se sitúa al principio de la página en forma de tabla facilitando la navegación por la misma (entre otras ventajas de las que hablaremos más adelante). Un claro ejemplo de Tabla de Contenidos lo podemos encontrar en la Wikipedia, veámoslo:

Tabla de Indice Wikipedia

 

¿Hacerlo de forma manual o mediante plugin?

Ambas opciones son válidas pero eso depende de ti, de cómo te sientas más cómodo trabajando, de si quieres librar peso de tu web evitando instalar otro plugin más, etc. Personalmente, yo prefiero la forma manual. Si no tienes conocimientos acerca de HTML sí que será más complicado hacerlo de esta forma, pero siempre tienes la opción del plugin.

Si tienes alguna base de HTML, al principio te resultará un poco más difícil acordarte de cómo realizar los saltos en enlace pero a la cuarta tabla de contenidos, ya todo es coser y cantar. Te animo a que pruebes a hacerlo de forma manual, sobre todo por aligerar peso de tu web que también es un factor muy importante respecto a la experiencia de usuario además de ser un factor valorado por Google para rankear.

  1. Mediante plugin

    Table of Contents Plus
    Table of Content Plus es el plugin por autonomasia. Fácil de usar, cumple al 100% su función y ¡gratuito!, más no podemos pedir ;P . Para instarlo, puedes descargarlo directamente aquí o dirigirte a Plugins > Añadir nuevo y teclea en la caja de búsqueda “Table of Contents Plus“. Haz clic en Instalar y Activar.

    Una de las ventajas de este plugin es que no tendrás que redefinir la configuración antes de comenzar a escribir un nuevo post. Una vez que lo instales y definas los parámetros, éstos se mantendrán en cuanto a cuándo y dónde aparecerá.

    La configuración es sencilla. En primer lugar,  selecciona la posición  donde quieras colocar tu Tabla de Contenidos (antes del primer heading, arriba…). En nuestro caso lo hemos colocado en la posición «Arriba».  Y selecciona cuando mostrarla .

    En mi caso he ordenado que se muestre cuando haya 3 elementos o más, puesto que si sólo hay dos o un elemento, la tabla de contenidos no tendría sentido en ese caso.

    Posteriormente,  indica en qué tipo de artículos  te gustaría que se mostrase. Yo he seleccionado «post». A continuación te preguntará si te gustaría mostrar el título de la tabla de contenidos  y qué título te gustaría ponerle . También la podrás organizar de forma jerárquica u organizarla numéricamente. Además, podrás elegir el ancho, tamaño de la fuente o el estilo del background.

     

    Con HTML

    Imagina que quieres escribir un texto sobre cómo perder peso saludablemente y quieres dividir tu texto en tres partes hablando de 3 factores importantes como: La dieta, el ejercicio y la importancia de dormir bien. Pues bien, vamos a crear una tabla de contenidos donde pondremos estos tres factores para desarrollar estos puntos posteriormente. ¿Cómo lo hacemos?

    En primer lugar,   abre en tu editor la ventana HTML  . No importa que tu CMS sea WordPress o Joomla o cualquier otro, vamos a escribir nuestro código en HTML. A continuación   nos iremos a la parte superior de nuestro documento y escribiremos los tres puntos que queremos desarrollar  para hablar sobre cómo perder peso. Normalmente las tablas de contenidos se sitúan en la parte superior para que desarrollen su función. Pero obviamente, tú puedes colocarla en cualquier parte de tu post. Y así quedaría:

    Parte 1: Definir nuestro título, entradilla y los 3 elementos de nuestra tabla
    Título: Cómo perder peso saludablemente
    Entradilla: Hoy os traigo unos tips saludables que todos deberíamos saber antes de comenzar una dieta… Lorem ipsum bla bla bla…

    1. La dieta.
    2. El ejercicio
    3. La importancia de dormir bien.

    A grandes rasgos este podría ser el comienzo de una entrada donde podríamos colocar nuestra tabla. No he escrito todo, pero sí que mediante estas pinceladas podéis haceros una idea. Es importante recordar de que estamos escribiendo en HTML, por lo que debemos dar el formato.

    Así debemos hacerlo:

    <h1> Cómo perder peso saludablemente</h1>

    <p> Hoy os traigo unos tips saludables que todos deberíamos saber antes de comenzar una dieta... </p>

    <ol>

    <li> La dieta </li>

    <li> El ejercicio </li>

    <li> La importancia de dormir bien </li>

    </ol>

    </p>


    Ahora bien, vamos con la parte 2: Redacción de nuestro texto dividido en nuestro caso en 3 puntos

    Aquí vamos a comezar a redactar los 3 puntos que hemos seleccionado previamente.

    Parte 2: Desarrolla tus puntos (Recuerda hacerlo en HTML)
    Título: Cómo perder peso saludablemente
    Entradilla: Hoy os traigo unos tips saludables que todos deberíamos saber antes de comenzar una dieta… Lorem ipsum bla bla bla…

    1. La dieta.
    2. El ejercicio
    3. La importancia de dormir bien.

    Porque la salud es lo más importante, a la hora de comenzar una dieta hipocalórica o una dieta para perder peso, lo que primero debemos de saber es que por nó comer no vamos a perder más peso, al contrario, perjudicas tu salud. Hoy te mostramos diferentes tips que te ayudarán para lograr tus objetivos. Bla bla bla…

    A continuación te explicamos cómo:

    1. La dieta
    Desarrolla tu texto…

    2. El ejercicio.
    Escribe el desarrollo…

    3. La importancia de dormir bien.


    Parte 3: Asigna un ID.
    En el paso 3 para crear el salto de enlace o el enlace interno en nuestro propio post debemos de asignar un identificador (ID) que lo asociaceremos con nuestro índice definido en la parte superior.

    En resumen, en este paso añadiremos la etiqueta [id=”nombrequelequeramosponer”] a cada uno de nuestros puntos que acabamos de desarrollar.

    <p>Porque la salud es lo más importante, a la hora de comenzar una dieta hipocalórica o una dieta para perder peso, lo que primero debemos de saber es que por nó comer no vamos a perder más peso, al contrario, perjudicas tu salud. Hoy te mostramos diferentes tips que te ayudarán para lograr tus objetivos. Bla bla bla… </p>

    <p> A continuación te explicamos cómo:</p>

    <h2 id=»ladieta»> La dieta </h2>
    <p> Desarrolla tu texto… </p>

    <h2 id=»elejercicio»> El ejercicio.</h2>
    <p> Escribe el desarrollo… </p>

    <h2 id=»dormir»> La importancia de dormir bien.</h2>


    Parte 4: Vincula el ID con nuestra lista en la parte superior
    En este paso tendremos que volver a la parte superior donde definimos nuestros tres puntos y ahí crearemos el enlace que nos llevará al lugar en nuestro post donde hemos desarrollado el tema.

    Colócate en el primer índice y e inserta un enlace. En esta ocasión no vamos a poner una dirección web puesto que no queremos ir a otra página. Y es aquí donde colocaremos los «ids» que hemos declarado anteriormente en lugar de una dirección web.

    <h1> Cómo perder peso saludablemente</h1>
    <p> Hoy os traigo unos tips saludables que todos deberíamos saber antes de comenzar una dieta… </p>

    <ol>
    <li> <a href=»#ladieta» > La dieta </li>
    <li> <a href=»#elejercico» El ejercicio </li>
    <li> <a href=»#dormir» La importancia de dormir bien </li>
    </ol>

    ¡Así de simple! ¡Ahora comprueba que todo funciona de maravilla! :)

 

Ventajas de las Tablas de contenidos

Se pueden hablar de muchas ventajas cuando introducimos las Tablas de Contenidos en nuestros posts. Por ejemplo:

  1. Mejora la experiencia de usuario al ofrecer una información más clara u organizada. Facilitando la tarea del usuario de hacer scroll y buscar entre toda la info.
  2. Incremento de enlaces internos, los cuáles Google los valora positivamente.
  3. Mayor visibilidad en la SERP. ¿Por qué? Debido a que éstos enlaces aparecen en la SERP y te permite además de ocupar más espacio en los resultados de búsqueda, diferenciarte del resto si éstos no lo tienen ;).

  4. Contenido organizado y acceso directo al contenido. Eso dar lugar a un descenso de la tasa de rebotes y por ende, una mejora en nuestro CTR.

Espero que te haya ayudado este post. ¡Nos leemos!
 

Periodista y SEO. Autora de éste blog donde comparto mis conocimientos y curiosidades sobre SEO y Márketing Digital. Actualmente, entrepeneur en The Conservas.

Noelia

Periodista y SEO. Autora de éste blog donde comparto mis conocimientos y curiosidades sobre SEO y Márketing Digital. Actualmente, entrepeneur en The Conservas.

Artículos recomendados

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *