Créez une table des matières sur votre page de blog

Pourquoi la table des matières est importante

L'ajout d'une table des matières (TDM) aide vos lecteurs et les moteurs de recherche à mieux comprendre la structure de votre contenu.

• Améliore la lisibilité : Les lecteurs peuvent parcourir rapidement votre article et accéder directement à la section qui les intéresse le plus.
• Améliore l'expérience utilisateur : Surtout pour les articles de blog longs, une table des matières permet de garder votre mise en page organisée et facile à naviguer.
• Améliore les performances SEO : Les moteurs de recherche utilisent les liens d'ancrage dans une table des matières pour comprendre la hiérarchie de vos pages, ce qui peut améliorer vos chances d'apparaître dans les extraits enrichis.
• Réduit le taux de rebond : Les visiteurs sont plus enclins à rester plus longtemps lorsqu'ils peuvent facilement trouver les informations dont ils ont besoin.

Comment créer une table des matières dans GemPages ?

Dans cet article, nous allons passer en revue les étapes permettant de créer une table des matières déroulante avec des titres H2 pour votre page de blog.

Étape 1 : Accéder à l'éditeur GemPages

• Depuis votre interface administrateur Shopify, accédez à la Générateur de pages GemPages > Pages > Blog poste.

• Cliquez sur l'article de blog cible auquel vous souhaitez ajouter une table des matières.

Si vous n'avez créé aucun article de blog, cliquez Créer une nouvelle page pour en construire un.

Choisissez le Case Study à Article de Blog. Ensuite, vous pouvez partir de zéro (un modèle d'article de blog vierge) pour une personnalisation complète ou opter pour le modèle prédéfini de GemPages pour gagner du temps.

Vous serez redirigé vers l'éditeur GemPages.

Étape 2 : Ajoutez un élément accordéon à votre page de blog

Une fois saisi dans l'éditeur, utilisez la barre de recherche pour localiser le Élément d'accordéon.

Faites glisser l'élément et déposez-le à l'emplacement souhaité sur votre article de blog.

Cliquez sur l'élément pour ouvrir son onglet de paramètres. Sous le Gestion des articles Dans cette section, survolez « Accordéon 2 » et « Accordéon 3 », puis cliquez sur coffre icône pour les supprimer.

Localisez l'Arccode 1 et renommez-le « Table des matières ».

En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Paramètres Dans l'onglet correspondant, personnalisez la visibilité de la « Table des matières » pour l'adapter à votre image de marque.

Étape 3 : Ajouter des éléments de bloc de texte à l’intérieur de l’accordéon

Glissez et déposez le Élément de bloc de texte sous l'accordéon « Table des matières ».

Ensuite, modifiez le texte pour qu'il corresponde au titre.

En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Paramètres Dans l'onglet correspondant, modifiez le style du texte, sa taille, son arrière-plan, etc., selon vos préférences.

Une fois satisfait, cliquez sur l'élément et dupliquez-le pour gagner du temps. Chaque bloc de texte sera lié à un titre de niveau 2.

Par exemple, si nous avons 5 titres de niveau 2, nous aurons alors 5 blocs de texte.

Maintenant, modifiez chaque texte un par un pour qu'il corresponde au titre de chaque en-tête.

Étape 4 : Créer des interactions pour chaque titre 2

Cliquez sur chaque élément de bloc de texte, naviguez jusqu'à Onglet Avancé, et faites défiler jusqu'au Interaction .

Cliquez à nouveau sur Créer ouvrir le Paramètre d'interaction panneau dans la barre latérale gauche. Sous le «1. Commencez par…section, ensemble Lorsque l’option à Cliquez sur l'élément.

Sous le "2. Ensuite, faites ceci :", Cliquez sur Sélectionnez la cible sur la pageEnsuite, sélectionnez le cap cible dans la zone de conception et choisissez le Changer à Faites défiler jusqu'à.

Répétez les mêmes étapes pour les blocs de texte restants afin que chaque bloc de texte soit lié à son titre correspondant.

Étape 5 : Prévisualisez, enregistrez et publiez votre page de blog

Cliquez à nouveau sur Aperçu de l'interaction pour prévisualiser votre table des matières.

Une fois satisfait, vous pouvez enregistrer les mises à jour et appuyer sur Publier pour republier votre article de blog avec une table des matières.

Résultats: