Mejor tabla de contenidos que mejora posicionamiento SEO y experiencia de usuario

¡CON UN 20% DE DESCUENTO!Alojamiento WordPress con WebEmpresa

¿Por qué incluir tablas de contenidos en las páginas?

Desde hace tiempo, Google valora positivamente que las páginas tengan tablas de contenidos con enlaces ancla a sus secciones y subsecciones. La razón salta a la vista, nunca mejor dicho: mejoran la experiencia de usuario, puesto que puede “saltar” directamente a la información que busca.



Tablas de contenido para mejorar SEO y experiencia de usuario
La tabla de contenidos facilita el acceso directo a la información buscada

Pero en vez de utilizar plugins para crear la tabla de contenidos, crearla manualmente puede resultar bastante más efectivo si lo organizamos bien.

Antes de entrar en faena, veamos qué ventajas obtendríamos:

  • No tener activado un plugin adicional. Puede parecer banal, pero este plugin se ejecutaría cada vez que se recarga la página.
  • Independiente de la plataforma. Si cambias de gestor de contenidos, no hace falta modificar la tabla de contenidos.
  • Siempre “compatible”. La tabla de contenidos no resulta afectada por cambios de versiones del gestor de contenidos.
  • Total control sobre su apariencia. En cambio, si quieres una característica que el plugin no dispone, o cambias de plugin o esperas que el autor la añada.
  • No te “atas” a un plugin. Cambiar de plugin significaría revisar cada post para recolocar la tabla de contenidos (por ejemplo, shortcodes).

El único inconveniente es que requiere crear la tabla de contenidos para cada entrada, lo que puede resultar tedioso, además del tiempo que conlleva. Sin embargo, con una adecuada plantilla HTML y un sencillo procedimiento, podemos crear la tabla de contenidos al mismo tiempo que estructuramos el post.


Guía de hosting WordPress y mejores optimizaciones

Crear la plantilla HTML para cada entrada solo requiere conocimientos básicos de HTML y, si queremos estilos de visualización personalizados, de CSS. A continuación podéis descargar varias muestras de plantillas HTML, con diferentes disposiciones:

Estos son algunos ejemplos, pero podéis combinar distintos tipos de listas para adaptarla a la organización de vuestro post. Por ejemplo, combinar listas ordenadas con no numeradas o utilizar distintos esquemas de numeración. Ningún plugin será tan versátil.

En las plantillas, cada etiqueta HTML (<p>, <ul>, <li>, etc.) incluye una clase CSS (he procurado utilizados nombres autoexplicativos) para definir su estilo de visualización. Sin embargo, no es imprescindible incluirlas; en tal caso, cada elemento se mostraría con el estilo heredado del tema del sitio web.

La única excepción sería la etiqueta <div>, que actúa como contenedor de la tabla de contenidos (class=”tdc_contenedor”). Esta etiqueta se utilizaría para poner algún marco, efecto o color de fondo a la tabla de contenidos. En caso de no querer ningún efecto, no haría falta incluirlo.

Y éste sería el procedimiento para “rellenar” la plantilla y crear la tabla de contenidos:

  1. Seleccionar la plantilla HTML adecuada para la estructura de nuestro post.
  2. Cada encabezado de sección y subsección, que tendrán etiquetas H2 a H6, debe incluir un identificador con el nombre del ancla: <h2 id=”primero”>Título de la primera sección</h2>
  3. En la tabla de contenidos, para cada encabezado copiar el ancla del enlace y el título de ese encabezado: <a class=”tdc_titulo” href=» #primero»>Título de la primera sección</a>
  4. Colocar el código HTML de la tabla de contenidos en el lugar del post donde queremos que aparezca.

Este proceso se puede realizar paralelamente mientras redactamos el post o, mejor, al terminar de redactarlo, pues siempre habrá cambios durante la revisión. En este caso, tan solo habrá que copiar los títulos de los encabezados en su lugar correspondiente de la tabla de contenidos.


La idea de este post surgió a partir de una conversación con Yi Min Shum Xie, que me preguntó al respecto, y le agradezco desde aquí la inspiración 🙂 . Por lo demás, ¿qué opináis de utilizar plantillas HTML en vez de plugins? ¿Qué sistema o mecanismo utilizáis para crear vuestras tablas de contenidos? ¿Habéis tenido oportunidad de comprobar sus efectos en el SEO?

Imágenes: lifeofpix, freepix, elaboración propia.

 

¿El post te ha resultado útil? ¡Ayúdame a mejorar y puntúalo!
[ Hasta ahora habéis votado 18, con nota media 4.7 ]

Otros posts del SEO de los Anillos que pueden interesarte

Cómo crear tablas de contenidos para el SEO (y sin plugins)
Etiquetas: blogging    copywriting    HTML    SEO
Sobre el autor,
Consultor SEO Freelance, Ingeniero Superior de Informática y Experto Universitario de Social Media Marketing, con más de 20 años de experiencia en gestión de Proyectos Web y Nuevas Tecnologías.

Hay 11 comentarios acerca de:
    “Cómo crear tablas de contenidos para el SEO (y sin plugins)

  • 22/08/2017 a las 10:32
    Enlace permanente

    Muy bueno Antonio.

    Tengo pendiente empezar a usar estos anclas para mis post pero bastante tiempo les dedico y esto es otro ratito, pero sin duda es bueno no sólo para evitar el plugin si no para mejorar la experiencia del usuario.

    Abrazos fiera.

    Responder
    • 06/09/2017 a las 14:12
      Enlace permanente

      Gracias, José Manuel, me alegra que te guste el artículo. Así es, aunque no lleve mucho tiempo hacerlo prescindiendo de plugins, algo necesita. Sin embargo, una vez que lo utilizas habitualmente, se vuelve tan mecánico que se integra en el proceso de edición del artículo. Además, al menos en mi experiencia, con los plugins siempre hay que hacer una pequeña revisión, por si acaso no te hayas equivocado en alguna etiqueta.

      ¡Un abrazo!

      Responder
  • 30/12/2016 a las 20:51
    Enlace permanente

    Hola Antonio! Quizás llego un poco tarde al post jeje. Sabes si hay alguna forma de hacerlo en Blogger?

    Responder
    • 31/12/2016 a las 20:22
      Enlace permanente

      Hola, Lenis:

      Hace mucho, mucho que no uso Blogger, pero creo recordar que tenía un modo HTML, en que se podía editar el código HTML de la página, así que imagino que sí, que podrías insertarlo de esta forma.

      Gracias por comentar!!!

      Un saludo.

      Responder
  • 25/10/2016 a las 23:09
    Enlace permanente

    Qué bueno Antonio!!
    Sí señor, este post era necesario 100%.
    Justo en mi blog uso las 2 técnicas: con plugin y a mano como comentas aquí. Y debo decirte una cosa, no sé si será casual o no pero ahora mismo de los posts que tengo mejor posicionados con una tabla de contenido, la tiene creada con la forma manual…

    Molaría analizar si influye de alguna forma, aunque en principio el plugin lo que hace es autogenerar el código que se hace de forma manual, pero nunca se sabe… jeje.

    Un abrazo crack!

    Responder
    • 26/10/2016 a las 10:13
      Enlace permanente

      Hola, Rubén:

      Muchas gracias por tu comentario. Todo un honor tenerte entre estas líneas 🙂

      Muy interesante lo que planteas. Inicialmente, yo había optado por utilizar una plantilla HTML para evitar tener un plugin más rondando por detrás de WordPress que pudiera afectar su rendimiento. Sobre todo teniendo que se ejecutaría cada vez que una página es visitada y, si el plugin no lo gestiona bien, puede ser una sobrecarga importante, sobre todo en artículos largos (aunque un plugin de caché debería evitarlo en gran parte).

      Es significativo que tus páginas con tablas de contenido manuales posicionen mejor que las que usan el plugin. Al ser un comportamiento que se reproduce sistemáticamente en varias páginas, algo debe haber. Por el código no debería ser que, como dices, es muy parecido entre ambos métodos. La otra alternativa es que las páginas que usan el plugin sean algo más lentas que las de tabla de contenido manual y esa pequeña diferencia acabe favoreciendo el posicionamiento.

      En fin, que me has despertado la curiosidad y me lo apunto para investigarlo más a fondo. Dejaré caer por aquí mis conclusiones 🙂

      Gracias de nuevo por tu comentario y hasta la próxima!!

      ¡Un abrazo!

      Responder
  • 02/05/2016 a las 10:59
    Enlace permanente

    ¡Saludos Antonio!

    Tenía ganas desde hace tiempo de pasarme por tu blog, pero siempre uno anda liado con mil cosas.

    Estoy totalmente de acuerdo con la conveniencia del uso de las listas, no solo como un elemento SEO, sino también para mejorar la legibilidad y la usabilidad de la web.

    De hecho, estoy seguro que muchos lectores se echan atrás si ven párrafos interminables que no dan descanso a la vista y que propician una lectura demasiado superficial.

    Muy bien pensado el recurso para la gente que no conoce nada sobre HTML. Con un «copiar y pegar» lo tendrán arreglado 😛

    Responder
    • 02/05/2016 a las 12:35
      Enlace permanente

      Hola, Robert!!

      Gracias por la visita!! Te entiendo muy bien: me pasa exactamente lo mismo. Tu calendario de publicación es bastante uniforme (raro es que pase más de una semana sin que publiques algo) y tengo tu blog dentro de los de visita obligada. Pero, ¡ay!, se acumulan las tareas, los posts pendientes… 🙂

      Pues sí, muchas veces, precisamente por falta de tiempo, no utilizamos elementos bastantes sencillos, que no requieren conocimientos técnicos avanzados, creyendo que son más complicados de lo que realmente son. Con estas plantillas pretendo romper un poco esa barrera y mostrar que ni es tan difícil ni consume tanto tiempo, cumpliendo los requisitos básicos de forma muy sencilla.

      Eso sí, después, el que quiera, puede complicarlo todo lo que quiera (pero eso ya para los muy frikis 😉 ), que la versatilidad de la combinación de HTML y CSS puede ser casi infinita.

      Un saludo, Robert, y gracias por tu comentario.

      Responder
  • Pingback: Bitacoras.com

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.