¿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.
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.
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:
- Lista no numerada.
- Lista ordenada.
- Lista ordenada con estilos propios en los números (sin Contadores CSS).
- Lista no numerada anidada.
- Lista ordenada anidada (incluye comentarios explicativos, aplicables al resto).
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:
- Seleccionar la plantilla HTML adecuada para la estructura de nuestro post.
- 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>
- 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>
- 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.
Simplemente genial, en Blogger funciona brutal, como dices es un poco tedioso pero nunca esta de mas aprender a hacer de forma artesanal
Buen post. Gracias. Voy a probarlo ahora mismo.
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.
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!
Hola Antonio! Quizás llego un poco tarde al post jeje. Sabes si hay alguna forma de hacerlo en Blogger?
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.
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!
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!
¡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 😛
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.
Pingback: Bitacoras.com