Los artículos largos pueden ser difíciles de navegar. Por eso añadimos una tabla de contenidos a muchas de nuestras guías en WPBeginner. Proporciona una hoja de ruta del artículo que facilita a los lectores saltar a las secciones que más les interesan.
Añadir una tabla de contenidos a tus entradas y páginas de WordPress no solo facilita la navegación, sino que también puede dar un empujoncito al SEO de tu sitio web. A los motores de búsqueda les encanta el contenido organizado, y un índice les muestra exactamente de qué trata tu artículo.
Crear un índice de contenidos puede parecer complicado al principio, pero en realidad es mucho más fácil de lo que crees. Te guiaremos a través de algunos métodos sencillos que incluso los principiantes pueden dominar.
Así que, si estás listo para hacer que tu contenido en WordPress sea más organizado, fácil de usar y amigable con los motores de búsqueda, sigue leyendo. Te ayudaremos a crear increíbles tablas de contenido en un abrir y cerrar de ojos.
¿Por qué añadir una tabla de contenidos a entradas y páginas en WordPress?
Es posible que hayas visto la tabla de contenidos en sitios web como Wikipedia. También los utilizamos en WPBeginner para nuestros artículos largos, como nuestra guía definitiva para aumentar la velocidad y el rendimiento de WordPress.
Puede añadir una tabla de contenidos a las entradas de su sitio web en WordPress para facilitar el salto entre las secciones de un artículo largo.
No solo mejoran la experiencia del usuario, sino que también ayudan al SEO de WordPress. Esto se debe a que Google puede utilizar la tabla de contenidos para añadir automáticamente enlaces de “saltar a la sección” en los resultados de búsqueda.
Un índice de contenidos también puede ayudar a que su entrada aparezca como fragmento de código destacado en la parte superior de la página de resultados del motor de búsqueda.
Esto le ayudará a conseguir el máximo tráfico SEO.
Dicho esto, echemos un vistazo a cómo crear fácilmente una tabla de contenidos en entradas y páginas de WordPress. Te mostraremos cómo hacerlo automáticamente con un plugin, manualmente usando enlaces de anclaje y con código:
Método 1: Añadir una tabla de contenidos automáticamente en WordPress
AIOSEO, también conocido como All in One SEO, es el mejor plugin SEO para WordPress, y viene con un bloque de tabla de contenidos integrado para WordPress.
Recomendamos este método porque le ahorra tiempo al generar automáticamente el índice de contenidos basándose en sus subtítulos, al tiempo que lo hace completamente personalizable con enlaces editables.
Para más información, consulte nuestra reseña / valoración completa de AIOSEO.
Lo primero que debe hacer es instalar el plugin gratuito All in One SEO Lite. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Sólo necesita la versión gratuita para añadir fácilmente un índice de contenidos, pero AIOSEO Pro ofrece aún más características que le ayudarán a posicionarse mejor en las páginas de resultados de los motores de búsqueda.
Una vez activado, deberá configurar el plugin mediante el asistente de configuración de AIOSEO. Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo establecer All in One SEO para WordPress correctamente.
Añadir una tabla de contenidos con All in One SEO
Tendrás que crear o editar la entrada o página en la que deseas añadir el índice de contenidos. A continuación, haz clic en el icono azul “+” del editor de bloques y busca el bloque “AIOSEO – Tabla de contenidos”.
Simplemente arrastre el bloque a la entrada o página en la que desea que aparezca el índice de contenidos.
Nota: Una vez que añada un índice de contenidos, puede que note que el bloque “AIOSEO – Índice de contenidos” aparece en gris. Esto se debe a que solo puedes tener un índice por entrada o página.
El plugin identificará automáticamente los encabezados de la página y los añadirá a su tabla de contenidos. Si utiliza diferentes niveles de encabezados (por ejemplo, H2 y H3), los encabezados de nivel inferior se sangrarán para mostrar la estructura de su contenido.
Si todavía está escribiendo el contenido de su entrada o página, los encabezados que añada al documento se añadirán automáticamente al índice.
Personalización del índice de contenidos con SEO All in One
Hay varias formas de personalizar el índice para adaptarlo a sus necesidades. Por ejemplo, puede hacer clic en un encabezado para cambiarle el nombre. Esto renombrará el encabezado en la tabla de contenidos pero no el artículo.
AIOSEO creará automáticamente enlaces de anclaje para cada encabezado. Puede hacer clic en el icono Enlazar para editar el texto de anclaje, y éste se modifica tanto en el índice como en el encabezado en el contenido de la entrada.
También puede hacer clic en el icono del ojo situado al lado de cualquiera de los encabezados para ocultarlo. Los usuarios de AIOSEO Pro pueden reordenar los encabezados en el bloque del índice de contenidos. Al hacerlo, se reordenarán los encabezados en el índice de contenidos, pero no en el artículo.
También encontrará un ajuste para el bloque de la barra lateral. Aquí puede elegir un estilo de lista numerada o con viñetas para el índice de contenidos.
Por último, cuando haya terminado de personalizar su tabla de contenidos de WordPress, deberá hacer clic en el botón “Hecho” para guardar los cambios.
Ahora podrá ver qué aspecto tendrá el índice para sus visitantes.
Es una buena idea añadir un encabezado o un párrafo encima del índice. De este modo, los lectores tendrán claro que se trata de un índice.
Cuando sus visitantes hagan clic en un enlace del índice de contenidos, irán inmediatamente a ese encabezado del artículo. Esto permite a los usuarios saltar a la sección que más les interesa.
La razón por la que nos gusta la característica de tabla de contenidos de AIOSEO es que le permite personalizar los encabezados y ocultar selectivamente los encabezados según sea necesario.
Esta es una característica crítica que la mayoría de los otros plugins de tabla de contenidos simplemente no tienen.
Método 2: Añadir una tabla de contenidos manualmente en WordPress
También puede crear una tabla de contenidos manualmente utilizando enlaces de anclaje sin necesidad de un plugin. Sin embargo, esto le llevará más tiempo y esfuerzo.
Puede obtener más información acerca de los enlaces de anclaje en nuestra guía sobre cómo añadir enlaces de anclaje en WordPress.
Introducir el índice de contenidos
En primer lugar, debe añadir un bloque “Lista” en el que podrá añadir los encabezados del índice. Puede escribir los encabezados en la lista o copiarlos y pegarlos uno a uno desde el contenido de su artículo.
Cómo añadir texto de anclaje a los bloques encabezados
A continuación, tendrá que añadir un atributo de anclaje a cada encabezado al que desee hacer referencia en la tabla de contenidos. Esto permitirá a WordPress saber dónde saltar cuando un visitante haga clic en el encabezado de la tabla de contenidos.
Primero debe hacer clic en el encabezado, como H2 o H3. A continuación, debe hacer clic en la flecha “Avanzado” del panel de ajustes del bloque para mostrar los ajustes avanzados.
A continuación, introduzca una palabra o frase única sin espacios en el campo “Anclaje HTML”. Si lo desea, puede utilizar guiones para separar cada palabra.
A continuación, repita esta operación para todos los demás encabezados que se incluirán en el índice.
Sugerencia: Si pega el encabezado en este campo, se añadirán guiones automáticamente. Esta es una forma sencilla de crear un ID único que también represente vaciamente el encabezado.
Añadir enlaces de anclaje al índice de contenidos
El último paso consiste en enlazar los encabezados del índice con los anclajes HTML que ha creado.
Marque la primera entrada del bloque de su lista y haga clic en el icono “Enlazar” de la barra de herramientas.
A continuación, debe escribir un hashtag (#) y luego escribir o pegar el texto de anclaje de ese encabezado.
El # indica a WordPress que salte a esa sección de la entrada actual. No añade el nombre de dominio u otros parámetros URL.
Una vez hecho esto, pulse “Intro” o haga clic en el icono “Enviar” para enlazar.
El enlace de anclaje se añadirá a su tabla de contenidos. Cuando sus visitantes hagan clic en este enlazar, serán llevados inmediatamente a ese encabezado en los contenidos de la entrada o página.
Puede repetir estos pasos para añadir enlaces de anclaje a los demás encabezados del índice.
Método 3: Añadir una tabla de contenidos en WordPress usando código
También puede añadir una tabla de contenidos en WordPress mediante un fragmento de código utilizando el plugin WPCode.
WPCode le permite añadir fácilmente código personalizado en WordPress sin tener que editar los archivos de su tema. Además, viene con una biblioteca de fragmentos de código listos para usar, incluyendo uno que añade automáticamente una tabla de contenidos basada en los encabezados de tus entradas.
No es tan flexible como los otros métodos y puede no funcionar para todos los sitios web, pero es una buena opción para los usuarios que están familiarizados con el uso de código para hacer personalizaciones de WordPress.
Primero, necesitas instalar y activar el plugin gratuito WPCode. Si necesitas ayuda, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress para obtener instrucciones paso a paso.
Una vez activado, vaya a Fragmentos de código ” Biblioteca desde el escritorio de administración de WordPress.
A continuación, busque el fragmento de código “Índice simple”. Cuando lo encuentres, pasa el cursor por encima y haz clic en el botón “Usar fragmento de código”.
A continuación, WPCode añadirá automáticamente el código por ti y seleccionará el método de inserción adecuado para mostrar la tabla de contenidos.
Después, basta con conmutar el interruptor de “Inactivo” a “Activo” y hacer clic en el botón “Actualizar” de la parte superior de la página.
Ya está. Ahora puedes visitar tus entradas para ver que se ha añadido una tabla de contenidos básica.
Los usuarios pueden enlazar para saltar directamente a una sección específica del artículo.
Esperamos que este tutorial te haya ayudado a aprender cómo crear una tabla de contenidos en entradas y páginas de WordPress. Puede que también quieras ver nuestra guía sobre cómo aumentar el tráfico de tu blog o nuestra selección experta de los mejores plugins de FAQ para WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Sam Smith
I am in word press post editor and I do not see the blue plus button or the advanced block. How do I see those features?
WPBeginner Support
If you re using the block editor then you may want to try disabling distraction free editing in the top-right and that should allow you to see the plus again.
Administrador
Ahmed Omar
I am already using the first method, and it help my site to appear first in some search results and of course bringing more visitors
Thank you
WPBeginner Support
You’re welcome!
Administrador
Thank you so much
Can you please tell how to change the font color in TOC?
WPBeginner Support
For that, you would need to use CSS to change the color of the text. You can see how to change the text color in our article below!
https://www.wpbeginner.com/wp-tutorials/how-to-change-the-text-color-in-wordpress-easy-methods/
Administrador
ario
I tried to create table of content manually like the way you taught us and it worked well, until I added page break and separated the points into different parts or pages. Is there a solution for this?
WPBeginner Support
If you separate the page then you would need to include the entire URL before the # as well as the anchor to link correctly.
Administrador
Mark
Back in the day, when websites were new, we used to call this a Site Map. But yeah, it was kind of expected for the search engines to find a site map on your website.
Thanks for the reminder and the info.
WPBeginner Support
Sitemaps are slightly different, we have our guide below for sitemaps specifically. The Table of contents is to allow your visitors to jump to a specific section of a post
https://www.wpbeginner.com/beginners-guide/what-is-a-wordpress-sitemap-how-to-create-a-sitemap-in-wordpress/
Administrador
samarth
Which one is better for SEO? Adding TOC manually by HTML or using a Plugin?
WPBeginner Support
If the information added is the same, then there is no difference. The plugin is there to help make the process easier and help ensure any markup is properly added.
Administrador
Tay
How can I manually place the TOC on specific pages? It seems I can only disable auto-insertion but I can’t then decide where I want to put the table on the page. Is this possible?
WPBeginner Support
The table of contents would need to be enabled for pages and then there should be an option when editing the specific page you want to add it to.
Administrador
Muhammad Arslan Sharif
What a tutorial and very helpful for me and other who want to add new features in their websites and in blogs. In very short words you explain exceptionally.
WPBeginner Support
Glad you found our guide helpful
Administrador
Rianne
Brilliant! What I thought would take me hours took me 20 minutes instead
WPBeginner Support
Glad our guide was helpful
Administrador
Claudia
Thank you for all your helpful articles!
WPBeginner Support
You’re welcome
Administrador
Kim Balchios
My developer created a Table of Contents on a really long blog I wrote. I edited one of the entries and the link fell off.
When I try to create a new entry it says “Paste URL or type to search.” If I add the URL, it will take the reader to the top of the blog not the exact place inside the blog.
WPBeginner Support
You would want to create an anchor link following our guide below:
https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/
Administrador
David Ellin
this video shows me how to create a table of contents within a post. I want to create a table of contents for my entire blog so that the title of each article appears in the TOC. How do I do that?
WPBeginner Support
You would want to take a look at our article below for how to create a blog page as a ToC would get far too long for what you’re wanting to do.
https://www.wpbeginner.com/wp-tutorials/how-to-create-a-separate-page-for-blog-posts-in-wordpress/
Administrador
jean
Hi thank you for this informative post!
Only a small question, what is “override the global settings for this specific post / page.”
I chose to insert the table of content manually, and when i check only for h2 & h3, the table of content just doesn’t show up at all.
Thank you!
WPBeginner Support
That would mean you are telling it to ignore your default settings for the plugin for that specific post/page. If you have no H2 or H3s on the page then there wouldn’t be anything for the plugin to add to the table.
Administrador
Ahmad Zeeshan
In setting there is no “Table of Content”. Where to find it?
WPBeginner Support
You would want to ensure you activated the plugin after installing it.
Administrador
Dheeraj soni
Thanks for sharing an informative article, your content always helps me to go next level.
WPBeginner Support
You’re welcome, glad you found our content helpful
Administrador
Asthen
Why wpbeginner don’t recommend using TOC unless it’s really long ?
How long is too long ?
WPBeginner Support
If the page is too short to scroll then there wouldn’t be a reason to have a table of contents. It is a personal preference for the length of a post.
Administrador
SAHIL DHIMAAN
Hi, very helpful article
But….
Table of content isn’t showing in Mobile, what to do…
i use AMP plugin also…
WPBeginner Support
Your AMP plugin would be removing the plugin’s additions. If you reach out to the table of contents plugin’s support they can let you know if they have AMP support.
Administrador
Bee Lian Low
Thank you, I have waited so long before I decided to install this Table Of ontent!
WPBeginner Support
You’re welcome
Administrador
Cecilia
Thanks. Easy to use.
WPBeginner Support
You’re welcome
Administrador
Lucimar
Good afternoon!
Congratulations on the article, it helped me a lot
However, it just didn’t work on amp pages.
Note: I use the “Accelerated Mobile Pages” plugin.
How can I solve?
Thank you!
WPBeginner Support
You would want to reach out to the plugin’s support for if there is a recommendation for AMP.
Administrador
Džangir Kolar
Hi!
How those this plugin affect the speed of the page itself?
WPBeginner Support
It shouldn’t affect your page’s speed.
Administrador
Luke Richardson
Using easy table of contents, is there an option to create hyperlinks to jump to that particular section when you click on one of the headings in the table.
Not sure if I’m missing something with the plugin, but when I click on the headings it doesn’t jump to that section at all.
thanks
WPBeginner Support
The plugin should be allowing that, you may want to ensure there is enough room between your content and you don’t have any browser addons that would prevent scrolling to a certain section of your page.
Administrador
Tosh Lubek
I’ve checked “Initially hide the table of contents” but the TOC shows every time I open a post with a TOC. Is there something else I need to do?
WPBeginner Support
You would want to reach out to the plugin’s support to ensure this is not a conflict between the plugin and your theme
Administrador
Oulimata
As usual, amazingly detailed and helpful. You guys have definitely become my go-to resource for anything blogging related.
WPBeginner Support
Thank you, glad we can continue to be helpful
Administrador
Raaz shrestha
The plugin is really great. Thanks for sharing wpbeginner team.
WPBeginner Support
Glad you liked our recommendation
Administrador
Akamps
Hey is there a way i can put this table of contents in my sidebar
WPBeginner Support
The plugin does have a widget you can use
Administrador
Nic
Is there anyway to centre the table?
WPBeginner Support
You would need to enable custom CSS and depending on your theme would determine the CSS needed
Administrador
KM
How use the plugin “manually” just one lost at a time? Instructions not clear
WPBeginner Support
You would enable support for the post type you want to have the table of contents in and when you edit one of the types where it is activated, it will have the option at the bottom of the editor to add the table of contents
Administrador
Kelvin
NO it’s POSTS again – not pages!
How do I get a table into a page?
WPBeginner Support
In the plugin’s settings you would enable support for pages and you should be able to follow the same procedure for pages that you do for posts.
Administrador
Rishi
nice
WPBeginner Support
Glad you like our article
Administrador
Abhishek
Hi, is this possible to show/hide individual headings, just by clicking on it, like on Wikipedia?
I have too many subheadings under each h3 so I want it to be easier to navigate.
WPBeginner Support
Hi Abhishek,
Please see our article on how to show hide text in WordPress using toggle effect.
Administrador
Alex
Thanks for article!
Prince Gabriel Okocha
I have installed this plugin on my blog following the guideline in this post. But it’s not showing up on my posts. Is there anything I’m doing wrong? I really need this to ASAP
WPBeginner Support
Hello,
Please review plugin settings, you need to enable support for the posts and pages. After that edit the post and page and below the post editor you will find TOC settings. From here, you need to check the box ‘Insert table of contents’ to add it in that particular post.
Administrador
Srinu
Thanks for the article it’s working for me, But I am getting with bullets and numbers, in TOC_Box how to change it. I already numbered with h2 tags.
so its repeated the numbers twice.
Mae
Thank you so much! I used this for my Exclusives Library and I love it! Now my subscribers won’t have a difficult time looking for their printables.
XOXO,
Mae
Jan Peter Aursnes
A fine plugin, but is there any way I can exclude pages? Writing in headings and using * and ⎮ does not work, for me anyway. I am not a tech guy so it could be I just need a bit of explanation.
Thanks in advance.
Raushan
This is best plugin but when i created table of content from this plugin then showing multiple H1 tag which is not good at seo point of view.
How to solve this ?
Thanks
Sunil Suresh
Thanks. Your article came at the right time for me! I was just now looking for something like this for a client of mine.