WordPress

Tabla de contenidos en WordPress: cómo crear una

Jefferson Maldonado
Por Jefferson Maldonado 5 Ago 2021 9 min de lectura

Si alguna vez has leído un artículo largo en WordPress y deseaste poder saltar directamente a la sección que te interesa, sabes exactamente el valor de una tabla de contenidos en WordPress. Este recurso, que parece un detalle menor, tiene un impacto real en la experiencia del usuario y en el posicionamiento SEO de tus publicaciones. En esta guía aprenderás a implementarla en minutos usando el plugin gratuito Easy Table of Contents, sin escribir una sola línea de código.

¿Por qué necesitas una tabla de contenidos en tu sitio WordPress?

Antes de entrar en la configuración técnica, vale la pena entender por qué este elemento tiene tanto peso. Una tabla de contenidos cumple tres funciones simultáneas que difícilmente consigues de otra forma:

  • Mejora la experiencia del usuario: el lector puede escanear el índice y saltar a la sección relevante, reduciendo la fricción y aumentando el tiempo de permanencia en la página.
  • Beneficio SEO directo: Google puede leer la estructura del documento y mostrar sitelinks o enlaces ancla directamente en los resultados de búsqueda (esos resultados expandidos con enlaces adicionales debajo del título principal). Esto incrementa tu CTR sin necesidad de subir posiciones.
  • Estructura editorial más sólida: si tu artículo necesita un índice, significa que está bien organizado en secciones. Esa misma claridad beneficia a los rastreadores de Google.

Instalación del plugin Easy Table of Contents

El plugin que vas a usar se llama Easy Table of Contents y es completamente gratuito. Lo encuentras directamente desde el repositorio oficial de WordPress:

  1. Ve a Plugins > Añadir nuevo en tu panel de administración.
  2. Busca «Easy Table of Contents».
  3. Instala y activa el plugin del desarrollador Magazine3 (es el más descargado y actualizado).

Una vez activado, encontrarás su configuración en Configuración > Tabla de contenidos.

Configuración paso a paso

Paso 1: Seleccionar los tipos de contenido

La primera decisión que tienes que tomar es en qué tipos de publicaciones quieres que aparezca la tabla. El plugin te permite activarla para:

  • Entradas (posts de blog)
  • Páginas
  • Custom Post Types (tipos de contenido personalizados, como los cursos de LearnDash)

Para la mayoría de sitios enfocados en contenido editorial, activarla solo en Entradas es suficiente. Si tienes una academia online o vendes recursos digitales, considera activarla también en tus Custom Post Types.

Paso 2: Definir cuándo aparece automáticamente

Por defecto, Easy Table of Contents muestra el índice cuando el artículo tiene más de 4 títulos (encabezados H2 o H3). Puedes ajustar ese umbral. Si tus artículos suelen ser cortos con 2 o 3 secciones, bajar el umbral a 2 tiene sentido. Si publicas guías largas con 8 o 10 secciones, mantenerlo en 4 o subirlo a 5 evita que aparezca en artículos medianos donde no aporta tanto.

Paso 3: Posición dentro del artículo

Tienes cuatro opciones de posicionamiento:

  • Antes del primer encabezado (recomendado para la mayoría de casos)
  • Después del primer párrafo
  • Al inicio del contenido
  • Al final del contenido

La posición «antes del primer encabezado» es la que mejor replica el patrón de Wikipedia y la que Google interpreta más naturalmente como índice de navegación.

Paso 4: Personalización visual

Easy Table of Contents incluye varios estilos prediseñados. Desde el panel de configuración puedes elegir entre temas como Light, Dark, Bullets, entre otros. Además puedes personalizar:

  • Color del encabezado del widget
  • Color de los enlaces
  • Tamaño de fuente
  • Ancho del contenedor (porcentaje del área de contenido o flotado a la derecha)
  • Opción de contraer/expandir el índice con un clic

Si usas Divi con un esquema de colores personalizado, ajusta los colores del índice para que coincidan con tu paleta. Un índice que contrasta visualmente con el resto del diseño distrae en lugar de ayudar.

Compatibilidad con Divi Theme Builder

Si usas el Theme Builder de Divi para construir plantillas de tus entradas o páginas, tienes buenas noticias: la tabla de contenidos aparece automáticamente dentro del módulo «Publicar contenido» (o «Post Content» en inglés). No necesitas hacer nada adicional. El plugin detecta el hook correcto y se inserta en el flujo natural del contenido del post.

Esto es especialmente útil si tienes plantillas de Divi con diseños personalizados para tus artículos del blog. La tabla respeta el estilo del template y se muestra en la posición que configuraste globalmente, sin conflictos.

Si quieres profundizar en la creación de plantillas para el blog con Divi, puedes revisar el tutorial de cómo crear un blog con Divi donde se explica el Theme Builder en detalle.

Inserción manual con shortcode

Si prefieres controlar exactamente dónde aparece la tabla en un artículo específico (sin depender de la inserción automática), puedes usar el shortcode:

[ez-toc]

Coloca ese shortcode en el cuerpo del artículo, en el lugar exacto donde quieres que aparezca el índice. Esto es útil cuando tienes una introducción larga antes del primer encabezado y quieres que el índice aparezca después de esa introducción.

Comparativa: tabla de contenidos automática vs. manual con HTML

MétodoEsfuerzo de implementaciónMantenimientoEscalabilidadSEO
Easy Table of Contents (plugin)Bajo (configuración única)Automático (se actualiza con el contenido)Alta (funciona en todos los posts)Óptimo
HTML manual con anchor linksAlto (hay que escribir cada enlace)Manual (si cambias un título, hay que actualizar el enlace)Baja (post por post)Funciona, pero propenso a errores
Sin tabla de contenidosNingunoSin mantenimientoNo aplicaSe pierden los sitelinks de Google

La variante manual con HTML de anchor links técnicamente funciona, pero en la práctica genera deuda de mantenimiento. Cada vez que editas un título del artículo, tienes que actualizar el texto del enlace en el índice manualmente. Con artículos que evolucionan con el tiempo, ese proceso se vuelve frágil. El plugin elimina ese problema completamente: el índice se regenera dinámicamente a partir de los encabezados reales del contenido.

Si te interesa explorar cómo funcionan los anchor links en Divi de forma más detallada, el tutorial de cómo usar enlaces ancla en Divi cubre ese tema con profundidad.

Errores comunes al configurar la tabla de contenidos

Error 1: Activarla para todos los tipos de contenido sin filtrar

Si activas la tabla para páginas, entradas y todos los CPT al mismo tiempo, vas a ver índices en lugares donde no tienen sentido: páginas de aterrizaje, páginas de contacto o páginas de ventas. El resultado es contraproducente. Configura la inserción automática solo para los tipos de contenido donde realmente aporta valor editorial.

Error 2: Umbral de encabezados demasiado bajo

Configurar el umbral en 1 o 2 hace que aparezca una tabla con solo dos ítems. Eso no es un índice útil, es ruido visual. Un índice tiene sentido a partir de 3 o 4 secciones, cuando el lector genuinamente necesita orientarse dentro del documento.

Error 3: No verificar la compatibilidad con el caché

Si tienes un plugin de caché activo (como LiteSpeed Cache, WP Rocket o W3 Total Cache), verifica que la tabla de contenidos se muestre correctamente después de limpiar el caché. En algunos casos, el caché agresivo puede servir una versión del HTML sin la tabla si el plugin de caché procesó la página antes de que Easy Table of Contents tuviera oportunidad de insertarla.

Error 4: Ignorar el ancho en móvil

Por defecto, la tabla puede estar configurada para flotar a la derecha con un ancho del 50%. En pantallas pequeñas, eso puede verse apretado o romper el layout. Revisa el comportamiento en móvil y considera cambiar el ancho a 100% para pantallas pequeñas. El plugin incluye opciones para esto directamente en la configuración.

Consejos avanzados para sacar más partido al plugin

Excluir encabezados específicos del índice

Easy Table of Contents permite excluir encabezados concretos del índice usando la opción «Excluir encabezados» en la configuración de cada post individualmente. Esto es útil si tienes un H2 de «Referencias» o «Fuentes» al final del artículo que no quieres que aparezca en el índice.

Controlar el nivel de encabezados que se indexan

Puedes configurar el plugin para que solo incluya H2 en el índice, o que incluya H2 y H3, o hasta H4. Para artículos con jerarquía de contenido compleja, incluir H3 enriquece el índice. Para artículos simples, quedarte solo con H2 genera un índice más limpio y fácil de escanear.

Efecto en el SEO a mediano plazo

Los beneficios SEO de la tabla de contenidos no son instantáneos. Google necesita volver a rastrear las páginas, procesar la estructura y decidir si muestra los sitelinks con enlaces ancla. En artículos bien posicionados, este proceso puede tomar desde algunos días hasta algunas semanas. Lo importante es implementarlo correctamente desde el inicio y ser consistente en todos los artículos largos de tu sitio.

Preguntas frecuentes

¿La tabla de contenidos afecta la velocidad de carga del sitio?
El impacto es mínimo. Easy Table of Contents es un plugin ligero que procesa los encabezados en PHP durante la generación del HTML y no agrega dependencias JavaScript pesadas. El CSS y el JS que incluye son pequeños. En un sitio bien optimizado, el efecto sobre el PageSpeed Score es prácticamente imperceptible. Si quieres asegurarte, puedes cargar los assets del plugin solo cuando sea necesario activando la opción correspondiente en su configuración.
¿Funciona la tabla de contenidos con el editor de bloques (Gutenberg)?
Sí, funciona perfectamente con Gutenberg. Los bloques de encabezado (Heading blocks) de Gutenberg son reconocidos automáticamente por el plugin. También es compatible con el editor clásico (TinyMCE) si todavía lo usas. En ambos casos, el plugin detecta los encabezados del contenido guardado en la base de datos, independientemente del editor que usaste para crearlos.
¿Puedo desactivar la tabla de contenidos en un artículo específico sin cambiar la configuración global?
Sí. En el editor de cada entrada o página verás un meta box del plugin con la opción «Insertar tabla de contenidos». Ahí puedes desactivarla para ese post en particular sin tocar la configuración global. Esto es útil para artículos cortos que no requieren índice o para páginas especiales donde el formato es diferente.
¿La tabla de contenidos funciona con CPT de LearnDash (lecciones, temas)?
Sí, puedes activarla para los Custom Post Types de LearnDash como sfwd-lessons o sfwd-topic desde la configuración del plugin. Sin embargo, evalúa si tiene sentido en tu caso: si las lecciones tienen un diseño muy específico dentro del LMS, el índice podría interferir con la experiencia de aprendizaje. Prueba primero en una lección y verifica que el resultado sea el esperado antes de activarlo globalmente para todo el CPT.

Siguiente paso: estructura tu contenido para que el índice brille

Una tabla de contenidos solo es tan buena como la estructura de encabezados que tienes debajo. Si tus artículos mezclan H2 y H3 sin una jerarquía clara, el índice reflejará ese desorden. Antes de instalar el plugin, revisa que tus publicaciones más importantes tengan una estructura de encabezados coherente: un H1 (el título del post), varios H2 para secciones principales y H3 para subsecciones dentro de cada sección. Con esa base, la tabla de contenidos se convierte en una herramienta poderosa tanto para tus lectores como para Google.

Si quieres seguir optimizando la navegación en tu sitio, el tutorial de enlaces ancla en Divi es un complemento natural a lo que aprendiste aquí. Y si estás construyendo tu blog con Divi desde cero, no te pierdas la guía completa de cómo crear un blog con Divi.

// ¿Te sirvió este tutorial?

Imagina lo que aprenderás
con los cursos completos

En UXDivi llevamos los tutoriales del blog al siguiente nivel: proyectos reales de principio a fin, recursos descargables y soporte directo conmigo. Todo por menos del costo de un curso individual en otra plataforma.

+44 cursos +1116 alumnos 4.7 en Trustpilot Garantía 7 días
Jefferson Maldonado
// Escrito por

Jefferson Maldonado

UX Director · Founder UXDivi, MUX Studio y UXDivi Templates

UX Director | fundador de UXDivi y MUX Studio

Comentarios

Para dejar un comentario, accede a tu cuenta de UXDivi.

Acceder a mi cuenta