¿Te preguntas cómo mejorar tus post? Hoy te voy a contar cómo instalar una tabla de contenidos en tus post, las famosas TOC, tanto si utilizas WordPress como si no. Además, debes conocer, si no lo sabes ya, todas las ventajas que tiene poner un índice en los artículos. Si quieres tener una tabla de contenidos como la que ves a continuación, sigue los pasos que te doy, ¡merece la pena! ?
En este post podrás leer:
¿Qué es un índice o tabla de contenidos en un post?
Seguro que lo has visto en más de un blog o web, de hecho si te fijas puedes verlo en este mismo post, justo antes de este apartado. Así es, no es más que una lista de los contenidos que se pueden encontrar en un artículo, de forma ordenada, por apartados y con la posibilidad de acceder al punto que quieras con solo pulsar en él, ahorrándote el scroll, sobre todo el post muy largos o con mucha información. Estos índices suelen estar antes del primer título, aunque lo puedes poner donde quieras, piensa en la comodidad de tus lectores y la utilidad del elemento. Además una tabla de contenidos contribuye al SEO On Page de tu blog.
¿Para qué sirve?
Como he mencionado antes, sirve para ordenar los contenidos de tus post, haciendo más accesible sus distintas partes, de forma que mejoras la experiencia del usuario, dándole la opción de ir a un contenido concreto de forma rápida, además puede saltarse aquellas partes que no quiere leer. Por ejemplo, si cuando has entrado a este post, ya sabías lo que era una tabla de contenido, pero sin embargo querías saber cómo se pone o para qué sirve, puedes ir directamente al punto donde hablo de ello, más abajo, con solo hacer click en el apartado en cuestión en la tabla de contenidos.
¿Qué ventajas tiene?
-
Posicionamiento SEO
Las tablas de contenido mejoran la experiencia del usuario, eso está genial, y los motores de búsqueda como Google lo saben. La araña de Google es consciente de que un artículo con una tabla de contenido tiene mejor y más ordenada la información, de esta forma dará prioridad a tus post, incrementando la posibilidad de que mejore su posicionamiento en las SERPs. Piensa que todo lo que puedas hacer para optimizar tus post de cara a experiencia del usuario, te permitirá competir contra otros resultados similares. Seguro que has entrado en Wikipedia, ¿te has fijado que en todos los resultados tienen implementada una tabla? Esa es una de las muchas razones por las que Wikipedia está tan bien posicionada en buscadores, por la buena organización de la información que practica.
Si te fijas en la siguiente foto, verás que al tener implementada una tabla de contenidos en un post concreto, el resultado en Google tiene una característica distinta. Te da la posibilidad de ir a ese apartado del artículo directamente, es decir,➡️ aquí.
-
User Experience
Está bien tener muy presente el SEO a la hora de escribir un post, de hecho es muy importante optimizar un post de cara al posicionamiento, incluso se puede hacer sin tener muchos conocimientos técnicos. Pero no hay que olvidarse de ofrecer al lector una experiencia muy buena y una forma de hacerlo es con una tabla de contenidos, para que sepa en todo momento qué cuentas y que le permita acceder a la información que desee.
-
Ordena tu mente
Utilizar un índice te permitirá escribir los artículos con más auto-organización, es decir, estas tabla de contenido cogen los H2, H3, H4… para formarse, de modo que tendrás que estructurar a conciencia cada parte de tus artículos para que el índice sea útil y tenga sentido. Puede que sin una tabla de contenidos, esta optimización de tus post no llegase a un nivel tan avanzado.
Consideraciones
Esta consideración sirve solo si vas a implementar la tabla de contenidos mediante un plugin de WordPress (te explico cómo hacerlo en el punto 5).
Al instalar y configurar el plugin, las tablas de contenidos aparecerán de forma automática en tus nuevos post, pero también en los antiguos. ¿Qué problema hay? Muy sencillo, si hasta ahora no has llevado un orden similar en todos tus artículos en cuanto a H2, H3, H4, etc, puede que en tus post pasados la tabla de contenidos quede algo rara, mostrando una organización confusa. Tras instalar el plugin conviene que te des una vuelta por tus post antiguos para comprobar que no hay ningún despropósito, sobre todo en los post que más visitas atraen. Dentro de lo malo, si necesitas modificar algún post puedes hacerlo de forma rápida, ? ¡pero no lo dejes pasar! ?
Cómo implementar una tabla de contenidos en WordPress
Si utilizas WordPress estás de enhorabuena, existe una forma muy sencilla de colocar una tabla de contenidos en los post de tu blog, con el plugin Table of Contents Plus. ¿Quieres más plugins WordPress útiles? ↪️ Mira estos 18 plugins que utilizamos 10 bloggers.
A continuación te voy a explicar cómo configurar el plugin Table of Contents Plus para tu blog en WordPress:
Paso 1. Instala el plugin Table of Contents Plus.
Probablemente ya lo sepas, pero por si eres novato en el universo WP, puedes instalar el plugin de dos formas, descargando el archivo y subiéndolo a tu WordPress a través de Plugins > Añadir nuevo > Subir plugin o desde Plugins > Añadir nuevo > Buscar plugins > Instalar ahora.
Si te decantas por la primera opción, descárgalo desde aquí, si prefieres la segunda en el buscador de plugins simplemente busca ‘Table of Contents Plus’.
[/vc_column_text][/vc_column][/vc_row]
Paso 2. Configuración Table of Contents Plus.
Una vez has instalado y activado el plugin, ve a Plugins Instalados, y búscalo. Pulsa en Editar y configura la tabla de contenidos a tu gusto. Tienes que saber que prácticamente con las opciones que vienen por defecto ya puede funcionar sin ningún problema.
En Opciones generales encontrarás la mayoría de elementos que debes configurar para dotar de personalidad a tu tabla de contenidos y elegir todos los parámetros que quieras. No te agobies, es muy fácil y tampoco hay mucho donde elegir.
Puedes elegir hasta cuatro lugares donde aparezca tu tabla de contenidos: al principio del post, al final, antes del primer encabezado o después del primer encabezado. En mi caso he elegido, antes del primer encabezado, algo que para mi es lo más lógico.
La siguiente opción te permite mostrar el índice en función del número de encabezados, es decir, en mi caso en los artículos con menos de 4 encabezados (H2, H3, H4, etc) no aparecerá.
En el siguiente parámetro decide donde quieres que aparezca la tabla: en los post, en las páginas, categorías, etc.
Personaliza en el siguiente paso el texto que vas a mostrar en el inicio de la tabla. En mi caso es «En este post podrás leer:». Puedes poner lo que quieras. También configura el texto que muestras en las opciones de mostrar u ocultar, esto es que el usuario puede ocultar o mostrar la tabla de contenidos. También puedes decidir tú mismo que de inicio, la tabla de contenidos permanezca plegada.
Más abajo podrás personalizar el aspecto, como ancho, color, fondo, fuentes, etc.
Si lo prefieres, también puedes hacer que el usuario, al clickar en uno de los apartados de la tabla, sea dirigido al apartado en cuestión con un scroll suave o de un salto, esto ya es decisión tuya.
En Opciones generales también podrás configurar las opciones avanzadas, como por ejemplo el tipo de encabezamiento tiene en cuenta el índice.
Ya tienes configurada tu tabla de contenidos en WordPress, ahora recuerda: si tienes post antiguos comprueba que todo está en orden.
Cómo implementar una tabla de contenidos si no tienes WordPress
Si no tienes WordPress y no puedes instalar el plugin quieres que la tabla de contenidos se muestre solo en un post concreto, ¡también puedes! ??. Es una forma algo más tediosa y lleva más tiempo, debes tocar el HTML del post, pero tranquilo, aunque no tengas conocimientos de código podrás hacerlo, estoy seguro.
1.Creamos el índice
En la pestaña del editor de entradas que te permita modificar el código, ve al lugar donde quieres que aparezca el índice e introduce este código. Aquí es donde aparecerá la tabla, con cada uno de los contenidos.
<a href=»#Hola1«>El nombre del título 1</a>
<a href=»#Hola2«>El nombre del título 2</a>
2. Creamos el título
En el nombre del título deberás indicar el anchor text del título al que vas a dirigir. Es importante que el texto que vaya después del # sea exactamente igual que el que vas a utilizar en el <a name= >
Una vez has creado la estructura de tu índice, debes poner la etiqueta <a> con el atributo name en el lugar donde quieras que apunten los títulos del índice, es decir:
<a name=»Hola1«></a> El texto al que quieres que apunte el título 1 del índice.
<a name=»Hola1«></a> El texto al que quieres que apunte el título 2 del índice.
El texto que ves en verde no es visible en el post, y es el que debe ser exactamente igual que el que se encuentra después el # en el href.
Te recomiendo que comiences haciendo la prueba solo con un título, compruebes que funciona perfectamente, que al clickar dirige a donde debe y a continuación, configures el siguiente. Es muy sencillo y en cuanto hagas el primero, el resto serán pan comido.
¿Te ha sido útil este post? ¡Espero que hayas podido instalar tu tabla de contenidos!
Creador del blog que estás leyendo. Podcastser en SEO desde Cero. Profesor de SEO en AulaCM y en Nuclio Digital School. Formador para empresas.
muy interesante, muchas gracias 🙂
Gracias Steven. Me alegro que te parezca útil. ¿Has pensado en ponerlo en tu blog? Saludos.
Muy bien explicado Álex, tan y tan bien las ventajas y beneficios que casi que me convences para empezar a usarlas.
Ahora en serio, son una estupenda opción, ahora bien, veo en esto más una moda y tendencia artificial mal usada que otra cosa. Me explico, la mayoría de posts no superan las mil palabras y con esa cantidad de palabras parece floja la necesidad de implementar una tabla de contenidos. Una vez más estaremos escribiendo para SEO pero no para un usuario al que en un artículo de esa longitud poco o nada le aporta. Es mi opinión claro.
En tu caso, ese post, nada que objetar, perfectamente justificado su uso.
Saludos
Hola Ramgon, estoy contigo en lo que dices. Puede ser una moda y puede que no se llegue a usar del todo bien. Ojalá yo pudiera escribir todos los artículos de 2.000 palabras, pero no me da la vida xD Un inconveniente de este plugin es que sale por defecto en todas las entradas, aunque imagino que teniendo conocimientos avanzados de HTML puedes dar la orden que no aparezca en determinados post.
Bien utilizado creo que escribimos tanto para el SEO como para los lectores, pues en un texto largo con muchos apartados y fases, te permite ir a lo que te interesa rápidamente.
Gracias por tu comentario, ¡un abrazo, compañero!
Ala pues desconocía esa puntualización que haces respecto a que aparezca en todas y cada una de las entradas, eso sí que lo veo un fallo gordo.
Ah y se me olvidó en el anterior comentario agradecerte la mención, ¡gracias!
Hay un plugin que permite indicar que plugins quieres o no quieres se cargue por entradas o páginas. Quizás con ese se solucionaría
Anda, un plugin lara desactivar o activar otros plugins, el metaplugin jaja. Te suena el nombre? No estaría mal probarlo. Gracias!!
Hola Alex, gracias por el apunte. Entiendo que es mejor decir tabla de contenidos, puse ‘índice’ para que sonara. Pues siempre se ha utilizado esa palabra para hablar de una lista de materiales que se pueden encontrar en un libro o artículo, bien al principio o bien al final. ¡Saludos!
Buenos días Alex,
Muy interesante, no lo conocía y lo implante ayer, a ver que tal funciona.
Tengo un par de problemas por eso, en la tabla el h1 el punto me sale fuera del cuadro y los enlaces directos no me funciona. Sabes por que puedes er?
Hola Marc, la verdad no tengo ni idea por qué puede ser, ¿será problema de la plantilla quizás? ¡Un saludo y gracias por tu comentario, Marc!
en blogger no es posible poner estas tablas de contenido?¿ he buscado mucho pero no hay mucho al respecto
Hola Zary, como comento al final del post, se pueden poner las tabla de contenidos en blogger, pero de forma manual. Lleva un tiempo ponerlo pero tiene ventajas como ponerlo solo en el post que quieras. Además, no es muy difícil hacerlo. ¡Saludos!
Genial estimado Alex! Es un recurso super interesante para blogs con contenidos extensos como el mío. Pensé que debería tocar el código y todo eso pero al mencionar el plugin de wordpress me brindaste una solución en tiempo y practicidad, GRACIAS!
¡Hola Germán! Qué bien que te sea de ayuda. Eso es, con el plugin es muy fácil de implementar. Te animo a que lo pruebes y me digas qué tal te ha quedado. ¡Saludos!
Hola Alex,
Muchas gracias por la información.
Lo he intentado muchas veces aplicar en Blogger y no me sale. Podrías por favor hacer un post «para no expertos en html» aplicándolo a Blogfger?
Desde ya muchas gracias!.
Hola Carlos, gracias a ti por el comentario.
La explicación que doy es para no expertos en html, yo no lo soy y antes de utilizar el plugin lo conseguí poner con las líneas de código que explico en el post. Ve paso por paso, solo es necesaria un poco de paciencia. ¡Ánimo! 😀
Hola, yo lo tengo instalado desde hace meses y funciona muy bién. Ahora quiero actualizar a PHP7 pero no se si es compatible porque hace 1 año que no se actualiza. Alguien lo tiene con PHP7?
gracias
Hola Manuel, pues la verdad, no sabría decirte. ¿Has probado a ver si te funciona? ¡Saludos!
Hola Alex.
Tengo un problema con el plugin tabla de contenido plus.
Lo tuve que desinstalar porque los subtitulos de todo el post se veían de color gris y su color original es negro.
Me puedes ayudar para saber que pasa. Gracias
Hola Alex!
a ver si me puedes ayudar… me instale el pluglin y todo funciona bien menos: el texto esta centrado y no a la izquierda, por lo que queda un poco confuso… estoy intentando de todo, hasta probando con codigo (aunque no tengo ni idea…) pero no funciona… sabrias ayudarme?
muchas gracias!!
Hola Andrea, me parece raro, suele alinearlo a la izquierda. ¿Lo tienes activo ahora? ¿Puedes decirme cuál es tu web?
¡Un saludo!
Hola Alex! esta aun en construcción… ami tambien me parecio raro… deberia de desinstalarlo y volver a probar? no se me ocurre que puede ser… muchas gracias!!!
Quizás con código se pueda arreglar, puede que sea por la plantilla que utilizas. ¿Cuál es?
es una plantilla de Bridge… busque por internet como modificarla con codigo pero no encontre nada… Gracias!
¡Excelente post! Me ayudó de forma rápida a conocer cómo usarlo ya que tenía problemas configurando el plugin.
Qué bien! Me alegro 😀
Pues gracias a este artículo logré insertar muy fácilmente mi tabla de contenidos en mis entradas. La tengo que ir revisando en las demás, porque la tengo mediante plugin. Hay cosas que quiero que no me aparezcan en ella (como los «me gusta» y «compartir») y no se aún por qué aparecen, pero miraré con calma la configuración… ¡Gracias por el aporte!
¿Te aparecen dentro de la tabla los me gusta y los compartir? Es raro… ¿qué web es?
Pues no se si fue la manera más adecuada, pero los quité omitiendo headings exactos con el mismo plugin. Pero sí, aí me aparecían. Estoy con ToC+ en WordPress
Tengo una duda, creo que la estructura de código con el cual fue diseñado el plugin TOC+ no está bien, o por lo menos es mi parecer. Ya que cuando hago un test de velocidad con el PSI tengo una calificación de optimización favorable, pero cuando activo el plugin dicha calificación desciende significativamente. ¿Qué puedo hacer, o qué otro plugin recomiendas? Otra pregunta: ¿Cómo configurar la tabla de contenido en la home page, veo que sólo está permitido para entradas) De antemano gracias.
Hola Jhonny, a mi nunca me ha dado ningún problema a nivel de velocidad, ¿puede ser incompatibilidad con algñun plugin o tu plantilla? De todos modos siempre puedes escribirles a los desarrolladores del plugin. Para ponerlo en la Home, el plugin te permite ponerlo en las páginas, o bien puedes incluir un shortcode allí donde quieras que se vea.
¡Saludos y disculpa la demora en contestarte!
¡Hola Alex!
Enhorabuena por el post. Me surge una duda y creo que eres el más indicado para resolverla porque creo que tu también usas la plantilla Salient no? El caso es que me ocurre algo rarisimo. Cuando en un post le doy a vista previa, me carga el índice de contenidos (gracias al plugin de table of contents plus) pero una vez que le doy a publicar…¡desaparece! y me ocurre en todos los posts. Ya he comprobado que haya el mínimo número de h’s en el post, que se auto inserte (me he repasado bien repasado los settings). ¿Qué puede ser?¿Alguna incompatibilidad con algún plugin?
Como no me salía con el plugin, intenté hacerlo a mano y el tema es que cuando voy a probarlo, cuando clico en el enlace que debe llevarme al ancla, me saca a la página de inicio (dominio.es/#hola1) el hola1 es para que case con tu ejemplo pero puse otro anchor.
Nada Alex, a ver si puedes sacarme de dudas 🙂
¡Un saludo!
Muy buena la explicación. Me sirvió de mucho.
Hola Quisoma, me alegro que te haya sido de utilidad. Saludos!
Hola al tratar de descargar el plug in sale este mensaje «Este plugin no se ha probado con las últimas 3 versiones mayores de WordPress. Puede que ya no tenga soporte ni lo mantenga nadie, o puede que tenga problemas de compatibilidad cuando se usa con las versiones más recientes de WordPress.» recomiendas su uso de todas maneras ?
Hola Francisco, sí, tienes razón. Lleva mucho tiempo sin actualizarse. A pesar de no ser lo más recomendable, nunca me ha dado ningún problema. No obstante, si necesitas otros plugins similares, aquí tienes un listado: https://www.sourcewp.com/be…
Hola alex, soy ana de https://depiladoras.es estoy intentando poner este plugin en mi blog, pero me sale en todos los sitios menos en las categorias cómo https://depiladoras.es/depi… sabes si puedo hacer algo mal o simplemente no se puede poner ahi? gracias! y un muy buen articulo.
Hola Ana, esa página que me pones como ejemplo qué tipo es? Categoría? Página? En la configuración del plugin puedes elegir dónde quieres que aparezca la tabla. De todos modos, puedes utilizar el shortcode «[toc]» en aquellas páginas donde quieres que aparezca. ¡Saludos!
Hola Alex. grácias por responder tan rápido. Pues te comento, la pagina que comento de depiladoras eléctricas es la página de una categoría. Según he intentado configurarlo en el toc+ no sale opción a «categoria» y también había probado de poner el shortcode [toc] pero tampoco lo muestra. Incluso encontré en algun blog de ponerlo de este modo.
echo ‘
‘.toc_get_index( $content_post->post_content ).’
‘;
y si que mostraba los h2,h3,h4… pero no funcionaba nada.. ya no se que más probar. muchas grácias.
Hola Alex, muy interesante el post. Me bajé hace tiempo este pluggin leyendo este mismo post, pero ahora me surge la duda de cómo puedo poner un fondo en la tabla de contenidos, siempre me sale en blanco y eso queda realmente mal, no destaca, lo he intentado poner con los fondos que tiene el pluggin y no me lo permite. Alguna cosa que yo pueda hacer al respecto??