Table of Contents Plus es uno de los plugins que yo utilizo en mi web y por el que muchas personas (sin saberlo) me preguntan cómo pueden ponerlo en marcha en su propia página.
Digo que esta pregunta me la hacen inconscientemente, porque no me preguntan por el nombre de este plugin como tal, sino algo como lo siguiente:
«Jose, ¿cómo haces para poner esa tabla de contenidos a modo de índice antes de tus artículos?»
Pues bien, hoy esa duda ya va a quedar resuelta para siempre.
Para ello, tengo el placer de contar como autor invitado en mi blog con Pablo Moreno, creador de Fuera Códigos, autor del libro «De mayor, Youtuber»,y profesional especializado en creación de contenidos orientados al SEO.
Pablo hoy va a contarte todo lo que tienes que hacer, paso por paso, para instalar y configurar Table of Content Plus en tu sitio web, de tal modo que como resultado consigas crear una tabla de contenidos para los artículos o páginas de tu WordPress a los que tú desees aplicar este elemento.
Te dejo con él. Que disfrutes del contenido y le saques mucho partido.
Pablo a los mandos:
De un tiempo a esta parte, te habrás dado cuenta de que muchos blogs incorporan un índice al principio de sus posts. Son tablas de contenidos, que se pueden crear manualmente o con un plugin como Table of Contents Plus.
¿Es una cuestión de moda? ¿Por qué lo hacen? ¿Es para hacerse los guays?
Si bien es cierto que está de moda, la cuestión de fondo no es seguir la corriente ni parecer súper cool, sino añadir tablas de contenidos en las páginas web tiene una razón de peso. Dos, para ser exactos.
Los índices de contenidos presentan ventajas tanto para la usabilidad como para el SEO. Es decir, facilitan la lectura y la interacción por parte del usuario al tiempo que mejoran el posicionamiento en buscadores.
Hasta hace poco no se utilizaban mucho porque eran complicados de insertar, ya que había que hacerlo de forma manual. De hecho, si no tienes WordPress o no quieres instalar un plugin, también puedes crear una tabla de contenidos de forma manual.
Con la popularización de los plugins Easy Table of Contents y, sobre todo, de Table of Contents Plus, los bloggers nos hemos empezado a dar cuenta de la utilidad de estos sencillos y prácticos índices interactivos. Funcionan igual que los de un libro, lo que pasa es que además puedes hacer clic en ellos.
En este caso, te voy a enseñar cómo usar Table of Content Plus, que es uno de los plugins más conocidos para añadir tablas de contenidos en WordPress y el que utiliza José Antonio, como nos contó en su post sobre los mejores plugins para WordPress.
Vamos con el tutorial.
Índice de contenidos
Instalar Table of Contents Plus (TOC+)
El primer paso para poder disfrutar de las funcionalidades de TOC+ es instalarlo. Para ello, vamos a nuestro Dashboard de WordPress y hacemos clic en Plugins/Añadir nuevo.
A continuación, ponemos “Table of Contents Plus” en la caja de búsqueda y hacemos scroll hasta encontrar el plugin de Michael Tran, que cuenta con más de 300.000 descargas.
Hacemos clic en “Instalar ahora” y, posteriormente, en “Activar”.
En el menú de Ajustes de WordPress nos ha añadido una opción llamada “TOC+”, que es el acrónimo del plugin.
La buscamos y accedemos a ella.
Configurar Table of Contents Plus
En primer lugar, hay que destacar que el plugin está totalmente traducido al español, cosa que siempre se agradece. En momentos puntuales, se puede notar alguna imprecisión, pero la tónica habitual es una buena comprensión de los menús.
El panel de configuración de este plugin cuenta con 3 pestañas:
- Ajustes principales: es la más extensa y la realmente importante, así que la dividiremos en 3 partes: ajustes principales, apariencia y ajustes avanzados.
- Mapa del sitio: sirve configura el mapa del sitio HTML.
- Ayuda: muestra la ayuda oficial del plugin.
Siguiendo estos pasos, aprenderás a configurar tu tabla de contenidos en un abrir y cerrar de ojos.
Ajustes principales de TOC+
En cuanto instalas y activas el plugin, ya empieza a funcionar. Aquí se encuentra la configuración más básica, como dónde quieres que se muestre tu índice de contenidos.
Voy a explicar con detalle cada una de las opciones que tiene. La configuración que aparece en las imágenes es la que yo utilizo.
Posición: dónde quieres insertar la tabla de contenidos. La opción por defecto es antes del primer titular. También es posible ponerla después del primer titular, al principio del contenido o al final.
Mostar cuando: elige el número de titulares que debe tener un contenido para que aparezca el índice. Yo suelo poner 3, ya que lo utilizo para mis posts y todos tienen al menos 3 encabezados.
Auto insertar para los siguientes tipos de contenido: tienes la opción de mostrar el índice de contenidos en tus posts, tus páginas y todos los otros tipos de contenido de tu página web.
Texto del encabezado: personaliza el texto que aparece en el título del encabezado. Por defecto, viene en inglés. También puedes ocultarlo y hacer que se muestre solo el titular (y no la tabla desplegada) si haces clic en “Ocultar la tabla de contenidos inicialmente”.
Mostar jerarquía: añade tabulaciones en el margen izquierdo para distinguir las diferentes categorías de los encabezados (h2, h3, h4, etc.).
Numerar la lista de elementos: añade un número a los elementos de la tabla (1, 2, 3…), incluyendo sus categorías (1.1, 1.2, 1.3…).
Habilitar el efecto de scroll suave: implementa un desplazamiento paulatino desde el titular en la tabla hasta el lugar en el que se encuentra el encabezado. Muy recomendable.
Apariencia de la tabla de contenidos en WordPress
Un apartado muy interesante en toda página web es el estético. TOC+ permite personalizar con detalle la apariencia de la tabla de contenidos.
Ancho: las opciones a tu disposición son ancho fijo, relativo o definido por el usuario. El ancho fijo son diversas longitudes en píxeles, el relativo en porcentajes y el último caso permite elegir el número que quieras y decir si son píxeles o es un porcentaje. Lo recomendable es elegir un porcentaje, ya que así nos aseguramos un correcto comportamiento responsive.
Envoltura: una opción un tanto extraña que en teoría rodea la tabla de contenidos con el texto del post. Se puede configurar en ninguna, izquierda o derecha. La he probado y la verdad es que no he visto su función.
Tamaño de fuente: puedes elegir entre puntos, porcentaje y em. Esta última es una unidad de medida escalable. 1 m responde a la anchura de la letra M. La opción más responsive es seleccionar el porcentaje.
Presentación: aquí están las opciones de diseño de la tabla de contenidos. Vienen 5 predeterminadas (gris, azul claro, blanco, negro y transparente). Si eliges la opción “Personalizado” podrás cambiar el color del fondo, del borde, título y enlaces para configurarlos en función de los colores de tu identidad corporativa.
Una vez realizados estos ajustes, ya tendrías tu índice de contenidos preparado para funcionar a tu gusto y con el especto que deseas.
Puedes ir a uno de tus posts (si los muestras ahí) para ver cómo queda.
Ajustes avanzados de Table of Contents Plus
Seguramente seas de los míos y te guste indagar al máximo en todas las opciones que tienes a tu alcance. Vamos a seguir viendo algunos extras que incorpora el plugin, aunque ya te adelanto que la mayoría no hacen falta.
Minúsculas: convierte a minúsculas el texto de anclaje al que enlaza cada encabezado. Realmente no es algo importante, ya que son enlaces dentro de la misma URL.
Usar guiones: otra opción curiosa. Cambia las barras bajas (_) por guiones (-) en los enlaces que se crean en los elementos del índice.
Incluir portada: añade la tabla de contenidos a tu página inicio. Absurdo.
Excluir archivo CSS: sirve para omitir los ajustes CSS del plugin, por lo que tus magníficos ajustes estéticos quedarán en el olvido. Solo tiene sentido si los ajustes de tu plantilla se ajustan con los que pondrías aquí.
Mantener los estilos de viñeta del tema: pone puntos para listar los encabezados de la tabla. Generalmente, da problemas con el espaciado, pudiendo llegar a aparecer fuera de la tabla.
Niveles de titulares: este apartado sí que es interesante. Puedes elegir que encabezados quieres que muestre en el índice de contenidos (h1, h2, h3, h4, h5 y h6). Yo solo muestro h2 y h3. El h1 es el del título y los otros le importan poco a Google. Si usas h4 en tus posts, inclúyelo también.
Excluir titulares: para introducir las palabras o expresiones que no quieres que se muestren en la tabla. Por ejemplo, si en un post pones unos agradecimientos, o algo similar, y no quieres que aparezcan en el índice.
Espacio superior para navegación suave: si tienes el menú de tu página configurado para que se quede fijo al hacer scroll, podría llegar a tapar la tabla de contenidos cuando llegue a su altura. Con esta opción puedes ajustar un margen para que esto nunca llegue a ocurrir.
Restringir ruta: aquí puedes añadir rutas de tu URL (a partir de la extensión de tu dominio) para que en ciertos contenidos no se muestre el índice de contenidos. Por ejemplo, si tienes una categoría de informes mensuales y no quieres que en esos posts salga el índice pues aquí pondrías “/informes mensuales”, sin las comillas.
Prefijo por defecto:
En resumen, las únicas opciones que recomiendo configurar son los niveles de titulares y el espacio superior para navegación suave. El resto son pijadas y ajustes muy específicos e incluso innecesarios.
IMPORTANTE: Después de hacer cualquier cambio en el plugin, recuerda hacer clic en “Actualizar ajustes”.
Mapa del sitio
Es curioso que aparezca en este plugin porque esto ya lo hacen los plugins de SEO cómo pueden ser Yoast o Rank Math. Ahora bien, el mapa del sitio de Table of Contents Plus no es para enviárselo a Google, sino que sirve como jerarquización dentro de nuestra página web.
El plugin crea un mapa HTML (los que se envían a Google suelen ser XML), por lo que no solo muestra la información, sino que le da un formato. Esto se debe a su naturaleza de uso interno.
La configuración del mapa del sitio es bastante sencilla. Se puede elegir que muestre las páginas (cosa que siempre recomiendo) y las categorías.
A continuación, se muestra el tipo de encabezado que van a ser los elementos del sitemap. Yo lo dejo en h3, para que no interfiera con la jerarquía del resto de contenidos, ya que lo normal es insertarlo en una página. También podría usarse h4 si ya hay algún h3.
En las etiquetas de páginas y de categorías se puede poner lo que más te guste.
Y en el uso avanzado aparecen los shortcodes o códigos abreviados para mostrar el mapa del sitio donde queramos.
Ayuda
Esta pestaña enlaza directamente a la página de soporte del plugin. El problema es que lo hace en la misma pestaña, por lo que nos saca de nuestro WordPress.
Estaría bien que se abriera en una nueva pestaña y todavía mejor que tuviera un mínimo de contenido dentro del propio plugin y no solo un mísero enlace a una web en inglés.
Como ves el plugin Table of Contents Plus es muy fácil de configurar. Además, crea las tablas de contenidos de forma automática que, aunque no parezcan gran cosa, tienen numerosas ventajas.
Para que puedas seguir todo el proceso de una forma más cómoda, he grabado un vídeo en el que te explico cómo crear una tabla de contenidos en WordPress con Table of Contents Plus.
Los shortcodes en Table of Contents Plus (TOC+)
Con el plugin Table of Content Plus podemos generar la tabla de contenidos automáticamente, pero también podemos usar un sencillo shortcode para insertarla en la parte que queramos de nuestra web.
OJO: voy a poner paréntesis en vez de corchetes porque como José utiliza este plugin, va a identificar el código y no se va a ver este sino la función que carga.
(toc): inserta la tabla de contenidos en la parte de la web que queramos.
(no_toc): desactiva el índice de contenidos allá donde lo pongas (sea página o post).
Para añadir el mapa del sitio, basta con añadir (sitemap).
También puedes crear mapas específicos con solo un tipo de contenido:
(sitemap_pages): solo muestra las páginas.
(sitemap_categories): crea un listado de categorías.
(sitemap_posts): muestra todos tus posts.
Con estos códigos abreviados podrás insertar tablas de contenidos a lo largo y ancho de tu web, en el lugar que más te plazca.
Ventajas SEO de utilizar una tabla de contenidos
Como hemos dicho al principio del post, utilizar tablas de contenidos en tu página web cuenta con una serie de ventajas. Hemos hablado de algunas de ellas, pero una vez que las conozcas todas estoy seguro de que te vas a enamorar de ellas.
Mejora la experiencia de usuario
En primer lugar, mejora la usabilidad. De un primer vistazo, el usuario ve las partes que componen un determinado contenido. Si quiere ir a una parte en concreto, solo tiene que hacer clic. Es especialmente útil en tutoriales y artículos extensos.
Si el visitante llega a un post, hace un poco de scroll, no ve un índice y se da cuenta de que es muy largo, es más probable que se marche. En cambio, con una información detallada de lo que se va a encontrar, es más probable que se quede.
Esto hace que se quede más tiempo y el tiempo de permanencia en página es uno de los factores de posicionamiento web más importantes, ya que indica a Google que el usuario tiene interés en una URL.
Facilita la indexación
Mostar al principio del post una estructura jerarquizada de lo que hay allí le facilita sobremanera el trabajo a Google, especialmente en posts largos.
Si tienes un post de 7.000 palabras (sí, tengo varios) y Google tiene que leerlo entero para entender la estructura le vas a hacer dedicar mucho tiempo y puede que no le quede para otros contenidos de tu web.
Google tiene un presupuesto de rastreo, es decir, una cantidad de tiempo que dedica a revisar tu web, a ver lo que hay, si has cambiado algo, etc. Suele ser de minutos, incluso segundos. Si bien es cierto que sus crawlers (arañas de búsqueda) son rápidas, también lo es que cuanto más fácil se lo pongas, más puntos tienes para aparecer en los primeros puestos.
Genera enlaces internos
Las tablas de contenidos generan una serie de enlaces internos, que es uno de los factores que más importancia están cobrando en el SEO on page con las últimas actualizaciones del algoritmo de Google.
Además, los textos desde los que enlazas (textos ancla o anchor text) son los nombres de los encabezados que, supuestamente, tienes optimizados para SEO.
Así que es una cadena de aciertos que favorece muy positivamente tu enlazado interno y, por ende, tu posicionamiento.
Fomenta la interacción y disminuye la tasa de rebote
Este elemento también promueve la interacción del usuario con la página porque le invita a hacer clic en uno de los enlaces internos y esto a Google le mola mucho.
Esto reduce la tasa de rebote, que es un concepto que cataloga a aquellos usuarios que entran a una web y en pocos segundos se van sin haber hecho absolutamente nada.
El problema es que Google Analytics interpreta como tasa de rebote a aquellos usuarios que no hacen clic en ningún enlace, independientemente del tiempo que pasen en la web. Rubén Alonso enseña a crear un comando para decirle a Analytics que cuando pase cierto tiempo, ya no lo contabilice como tasa de rebote.
Favorece la creación de los Rich Snippets
El hecho de tener una estructura del contenido de forma tan accesible invita a Google a crear los Rich Snippets, que son fragmentos de texto enriquecido que se muestran en los resultados de búsqueda (SERPs) con un formato más atractivo.
Además, como vemos en la imagen, añaden enlaces internos a nuestro sitio web. En este caso, es un tutorial sobre Zoom que posicioné para otras palabras clave importantes como lo es “como usar zoom”. Si pones esa búsqueda en Google, uno de los primeros resultados es mi post.
Si te fijas, el título es “Zoom, tutorial de la herramienta para webinars y conferencias” pero gracias a un H2 bien optimizado y a una tabla de contenidos, he conseguido que se posicione el post para esa búsqueda y que me enlace directamente a esa zona del artículo.
Consideraciones sobre Table of Contents Plus
Es un plugin muy sencillo con el que puedes crear tablas de contenidos en WordPress de forma automática. Además, su configuración es muy sencilla.
Table of Contents Plus (TOC+) tiene un pequeño hándicap y es que hace tiempo que no se actualiza. Hasta ahora no ha dado ningún problema ni de compatibilidad ni de seguridad, pero es bueno tenerlo en cuenta.
Algo que debes tener en cuenta al instalarlo es que va a aparecer inmediatamente en todos los tipos de contenidos que le digas, generalmente posts, así que tendrás que repasar los encabezados para ver si la tabla de contenidos queda bien o, por el contrario, los titulares no eran muy descriptivos y no se entiende la estructura.
Las ventajas de utilizar una tabla de contenidos son múltiples y de un peso específico considerable como para prescindir de ellas. Cuéntame, ¿las usas en tu blog? ¿con este plugin o con otro? Te espero en los comentarios y nos vemos en las SERPs 😉
Imagen de cabecera cedida por Shutterstock y realizada por weedezign
20 comentarios en «Table of Contents Plus: cómo crear una tabla de contenidos en WordPress»
Qué decirte Pablo????
Muy buen post, y con un vídeo muy clarificador (ya lo había visto en tu canal)
Me vas creando adicción.
Hasta el próximo.
Hola Jesús,
La verdad es que Pablo ha hecho un post de «muy crack». Vamos, lo que es él. 🙂
Gracias por tu comentario. Un abrazo.
¡¡¡Muy buenas, Jesús!!!
Gracias por estar siempre ahí siguiendo y valorando mis pasos 😉
Puedes unirte al club de fans, si quieres XD
Un abrazo.
José Antonio has conseguido crear un blog al que recurro como primera opción siempre que necesito algo de wordpress, o símplemente cuando quiero saber cómo trabaja el gremio de verdad, sin exceso de florituras.
Gracias por regalarnos tu sencilla y sabia manera de hacer las cosas y también gracias por tener en cuenta lo que te pedimos con todo el descaro del mundo (como si tuviésemos derecho), porque justo esta colaboración es a lo que me refería hace unos meses cuando te dije en las redes el tipo de emprendedor que me gustaría ver en tu blog y ¿sabes que has acertado de pleno? (al menos para mí).
Pablo, leerte y escucharte es un valor seguro. Tanto si tratas temas de expertos como si son herramientas más básicas como esta, pero que nos solucionan el trabajo y la vida.
Tienes la gran habilidad de situarte en el nivel que sólo da la excelencia en el trabajo y esto hace que todo lo que sale de ti sea útil y claro.
Mil gracias a los dos porque sois unos cracks y aunque trabajéis temas distintos me encanta vuestra forma de hacer marketing, tan honesta, tan clara y tan profesional que eso es precísamente lo que os hace cracks.
No se si esta forma vuestra de hacer marketing (y que a mí tanto me gusta) os hará ganar mucho dinero (¡ojalá que sí!); pero por favor, no la cambiéis que sois especie en peligro de extinción y éstas se deben preservar y proteger más allá de los intereses económicos.
Gracias por este post y por muchos más.
Hola Vero,
Me has dejado alucinado, sonrojado y orgulloso de haber recibido un comentario como el tuyo. Gracias, gracias y gracias!
De hecho, has definido perfectamente los valores que trato de aplicar en mi negocio y en los trabajos que realizo para mis clientes: honestidad, sencillez y efectividad sin perderse en lo innecesario. Me alegra leer que este post de Pablo te ha ayudado y te ha hecho la vida un poco más sencilla. Ahora a aplicarlo y a disfrutar de los beneficios que este Table of Contents Plus puede aportar a tu proyecto.
El dinero va y viene: unas veces se gana más, otras se gana menos… Pero que te dejen comentarios como el tuyo en el blog de uno no tiene precio.
Un fuerte abrazo.
¡¡¡Muy buenas, Vero!!!
Comparto contigo todo lo que dices sobre José. Un referente tiene que destacar por su trabajo, no por hacer promesas y lanzamientos espectaculares. Teniendo los pies en el suelo es como se llega lejos. Una vez que los despegas, puedes disfrutar del vuelo, hasta que te das cuenta de que no eres Superman y te das de bruces contra el suelo.
Lo que es seguro es que tus comentarios levantan el ánimo a cualquiera e invitan a seguir trabajando por crear contenidos que realmente ayuden a los demás. Muchas gracias 😉
Tengo claro que a corto plazo vende más decir que todo es rápido y fácil pero la audiencia no es tonta y, a la larga, valora a la gente que dice la verdad. Además, tampoco va conmigo (y con José tampoco) hacer promesas que no podemos cumplir. Lo nuestro es crear buenos contenidos. A partir de ahí se crea una comunidad que está agradecida y que confía en la profesionalidad que demuestras y luego responde con su feedback (redes, emails, comentarios) comprando tus cursos o contratando tus servicios.
Si algún día ves mucho humo, tírame un jarro de agua fría 🙂
Hola chicos ¿cómo estáis?
Antonio ya sabe de sobra lo que opino de él, un profesional como pocos en este sector del diseño con WordPress. Sobre el artículo comentaros que me ha parecido súper interesante. Hace tiempo instalé este pluggin con el objetivo de lograr ordenar un poco el contenido de mis artículos y hacerlos más SEOfriendly, pero no quedaban bien configurados y a veces eran un desastre visualmente hablando.
Voy a armarme de valor con este tutorial e intentarlo de nuevo.
Gracias Pablo por tus contenidos, siempre completos, didácticos y amenos.
Un abrazo a los dos y a seguir así.
Noelia
¡¡¡Muy buenas, Noelia!!! 🙂
A decir verdad, era un plugin del que llevaba tiempo oyendo hablar pero al que no daba mucha importancia. Cuando lo probé y vi los resultados, me di cuenta de que no se estaban explicando bien los beneficios. Parecía como si solo sirviera para mejorar la navegabilidad del usuario en el post, cuando hace mucho más.
En algunas ocasiones, las tablas de contenido pueden entrar en conflicto con otros elementos. Suele ser por alguna configuración de la plantilla o del CSS, pero se suele solventar rápidamente ajustando el ancho de la tabla.
Muchas gracias por tu comentario 😉
Hola, he instalado el plugin y va bien en PC. Pero en móvil no se visualiza la tabla. ¿Hay que habilitar alguna opción para ello?
Hola Jose,
En el plugin, debes especificar en qué tipo de páginas, posts, etc. quieres que se muestre la tabla, así como cuantos títulos y niveles como mínimo tiene que haber para que aparezca.
Si necesitas ayuda, recuerda que puedes contratar mi servicio de mantenimiento Web WordPress en su modalidad de presupuesto a medida de soporte técnico para ir más rápido y evitarte quebraderos de cabeza o problemas de este tipo.
Saludos.
Hola José,
En principio, no hay ninguna opción para ello, esto se realiza automáticamente. Revisa que ningún otro plugin esté causando este problema. Recuerda que, si necesitas ayuda, puedes contratar mi servicio de mantenimiento Web WordPress en su modalidad de presupuesto a medida de soporte técnico para ir más rápido y evitarte quebraderos de cabeza o problemas de este tipo.
Saludos.
Hola Jose Antonio,
Una pregunta, si coloco esta tabla de contenidos como flotante y hago scroll y navego por el contenido de la página, este plugin tiene la opción de marcar en la tabla de contenido la sección por la cual estoy?
gracias por su inforamcion me fue de mucha ayuda con unos trabajos que tenia pendiente para unas empresas , y algunos comentarios ayudaron a resolver mi duda.
Hola Pablo! Lo primero te agradezco mucho el post. Lo explicas de una manera muy sencilla y es muy fácil seguir los pasos para la configuración. A mi lo que me ha pasado al ponerlo es que me sale un recuadro rojo debajo de los formularios de contacto (contact form) y encima del formulario en el footer. No sé si esto es habitual y si me podrías ayudar a quitarlo. De antemano muchas gracias
De maravilla esta información suelo usarlo mucho las tablas son muy importante para mis proyectos existen muchos plugins que tienen esta aplicacion
De hecho, el propio Elementor Pro tiene su propio widget para crearlas, con lo que no te haría falta siquiera este plugin. Lo incorporan porque es importante en cuanto al enlazado interno de la web para optimizar / mejorar el SEO de la misma.
Tenía una duda sobre el plugin y la he encontrado en el artículo.
¡Muchas gracias!
Genial Francisco. Me alegro de ello.
Saludos.
Las tablas de contenido ayudan mucho para las paginas web yo en particular lo empleo en mis proyectos me ayudan mucho para el SEO.
Correcto. Por ayudar en temas de enlazado interno, estas tablas son muy favorables de cara al SEO. Saludos.