Crea una tabla de contenido en la página de tu blog.

Por qué es importante el índice

Agregar una tabla de contenido (TOC) ayuda tanto a sus lectores como a los motores de búsqueda a comprender mejor la estructura de su contenido.

• Mejora la legibilidad: Los lectores pueden ojear rápidamente tu artículo e ir directamente a la sección que más les interese.
• Mejora la experiencia del usuario: Especialmente para blogs de formato largo, una tabla de contenido mantiene el diseño organizado y facilita la navegación.
• Mejora el rendimiento SEO: Los motores de búsqueda utilizan los enlaces de anclaje en una tabla de contenido para comprender la jerarquía de su página, lo que puede mejorar sus posibilidades de aparecer en los fragmentos enriquecidos.
• Reduce la tasa de rebote: Los visitantes tienen más probabilidades de permanecer más tiempo cuando pueden encontrar fácilmente la información que necesitan.

¿Cómo crear una tabla de contenido en GemPages?

En este artículo, repasaremos los pasos para crear una tabla de contenido desplegable con encabezados H2 para la página de tu blog.

Paso 1: Acceda al Editor de GemPages

• Desde la Administración de Shopify, vaya a la aplicación GemPages > Páginas > Blog.

• Haz clic en la entrada del blog a la que deseas agregar una tabla de contenido.

Si no has creado ninguna entrada de blog, haz clic aquí. Crear nueva página para construir uno.

Elija el Caso de uso a Artículos del blog. Luego, puedes comenzar desde cero (una plantilla de publicación de blog en blanco) para una personalización completa o usar la plantilla prediseñada de GemPages para ahorrar tiempo.

Se le redirigirá al editor de GemPages.

Paso 2: Agrega un elemento de acordeón a tu página de blog

Una vez introducido en el editor, utilice la barra de búsqueda para localizar el Elemento Acordeón.

Arrastra y suelta el elemento en la posición deseada de tu entrada de blog.

Haz clic en el elemento para abrir su pestaña de configuración. Debajo de Gestión de elementos En esta sección, coloque el cursor sobre “Acordeón 2” y “Acordeón 3”, y haga clic en el papelera icono para eliminarlos.

Localice el Arccodion 1 y cambie su nombre a “Tabla de contenido”.

En la sección Configuración En la pestaña, personalice la visibilidad de la “Tabla de contenido” para que se ajuste a su marca.

Paso 3: Agregar elementos de bloque de texto dentro del acordeón

Arrastre y suelte el Elemento de Bloque de Texto bajo el acordeón “Índice”.

A continuación, cambie el texto para que coincida con el título.

En la sección Configuración En la pestaña, modifique el estilo del texto, el tamaño, el fondo, etc., según prefiera.

Una vez que esté satisfecho, haga clic en el elemento y duplíquelo para ahorrar tiempo y esfuerzo. Cada bloque de texto estará vinculado a un encabezado de nivel 2.

Por ejemplo, si tenemos 5 encabezados en el nivel 2, entonces tendremos 5 bloques de texto.

Ahora, cambia cada texto uno por uno para que coincida con el título de cada encabezado.

Paso 4: Crear interacciones para cada encabezado 2

Haz clic en cada elemento del bloque de texto, navega hasta el pestaña Avanzada, y desplácese hacia abajo a la Interacción .

Haga clic en Crear para abrir el panel Configuración de interacción panel en la barra lateral izquierda. Debajo del “1. Empieza por…sección ", conjunto Al a Haga clic en el elemento.

Bajo la "2. Luego, haz esto”, Haga clic en Seleccionar objetivo en la páginaA continuación, seleccione el encabezado de destino en el área de diseño y elija el CAMBIAR a Desplazarse a.

Repita los mismos pasos para los bloques de texto restantes, de modo que cada bloque de texto esté vinculado a su encabezado correspondiente.

Paso 5: Previsualiza, guarda y publica tu página de blog

Haga clic en Vista previa de la interacción Para obtener una vista previa de su tabla de contenido.

Una vez satisfecho, puede guardar las actualizaciones y pulsar Publicar Para republicar tu entrada de blog con una tabla de contenido.

Resultados: