Créer automatiquement une table des matières (Divi)

Pour un éditeur de site internet ou un rédacteur, créer automatiquement une table des matières dans un article s’avère bénéfique. En plus de garantir une optimisation SEO du contenu de la page, cette action permet d’améliorer l’expérience utilisateur. S’il fallait autrefois avoir des compétences en HTML pour la réussir, aujourd’hui, l’insertion d’un sommaire dans un article devient un jeu d’enfant grâce à des outils comme Divi. Un jeu d’enfant soumis cependant à des codes. Vous voulez découvrir ces codes ? On vous fait le point dans cet article.

Quels sont les avantages de créer automatiquement une table des matières ?

Dans la majorité des cas, les rédacteurs et les éditeurs du site n’introduisent un sommaire ou une table des matières dans leurs contenus que lorsque ceux-ci sont particulièrement longs et complexes. Mais il ne faut s’y tromper, cette action s’avère très importante, même pour des articles dont le nombre de mots n’est pas trop élevé.

Pourquoi créer une table des matières ? On peut évoquer plusieurs raisons. La première, c’est que cette démarche rend le contenu plus digeste et plus fluide aux yeux de l’internaute. Cela l’aide à mieux naviguer dans l’article et à se rendre directement à la section ou au sous-titre qui l’intéresse.

Créer automatiquement une table des matières avec Divi ou un autre outil permet d’aiguiser la curiosité de l’internaute. En général, juste après la lecture de l’introduction, les visiteurs se détournent d’un contenu qu’ils jugent non pertinent. Le sommaire donne l’occasion au rédacteur de retenir l’attention de l’internaute et de le pousser à lire l’article.

L’insertion du sommaire n’est pas bénéfique que pour l’expérience de l’utilisateur. Cela s’avère également utile pour booster l’optimisation de votre plateforme. Avec la table des matières, les bots du moteur de recherche identifient rapidement le contenu de votre site et savent à quelle requête le suggérer à l’internaute.

Par ailleurs, grâce à cette section, les bots peuvent créer des résultats enrichis (rich snippets) pour vos contenus en fonction des requêtes. Ainsi, votre article apparait dans les premiers résultats de recherche et l’internaute accède directement au sous-titre qu’il juge intéressant.

Faire une insertion du sommaire avec la méthode manuelle

Compte tenu des nombreux avantages de la création d’une table des matières, il convient d’apprendre à le faire. Une technique pratique consiste à faire une insertion manuelle. L’opération peut paraitre difficile, mais en réalité, ce n’est pas le cas. Il suffit de recourir à un outil efficace comme Gutenberg. La seule contrainte avec la méthode manuelle, c’est qu’il vous faut avoir quelques connaissances en HTML. Cependant, ce n’est rien de compliqué.

La première étape est de préparer le plan de votre article. Une fois cette étape franchie, vous devez sélectionner le bloc de titre à modifier. Cliquez ensuite sur le menu contextuel qui s’affiche. Ce menu correspond aux 3 petits points qui apparaissent à l’écran. Ensuite, sélectionnez l’option « Modifier en HTML ».

Lorsque vous choisissez « Modifier en HTML », votre titre apparaitra sous sa version HTML, avec des balises. À cette étape, vous devez insérer un identifiant unique que vous exploiterez pour les titres de votre article. Par exemple, pour une balise h2, vous pouvez mettre <h2 id=’’mon-identifiant-1’’>. La même action sera reproduite pour tous les sous-titres du contenu. Seulement, prenez soin de ne pas répéter les mêmes identifiants pour chaque sous-titre. Si une première balise h2 correspond à <h2 id=’’mon-identifiant-1’’>, une deuxième pourrait être <h2 id=’’mon-identifiant-2’’>

À la fin de ce travail, vous sélectionnez « Modifier visuellement ». Cette option vous sort du mode HTML et votre texte apparait dans sa forme visuelle. Après avoir fini de définir un identifiant pour chaque sous-titre, créer un « Bloc liste » et énumérer les composantes de la table des matières avec une liste à puces.

Le rôle majeur du sommaire est de simplifier la lecture des articles pour les visiteurs. À ce titre, vous pouvez lui ajouter l’insertion de lien interne au contenu. En clair, il s’agit de créer des liens internes sur les éléments de la table des matières. De cette façon, le lecteur peut rapidement, rien qu’en cliquant sur le lien, accéder à la section qu’il souhaite. Pour cela, vous pouvez utiliser les liens comme #mon-identifiant-1, #mon-identifiant-2, etc. Le lien doit correspondre à l’identifiant que vous avez précédemment défini.

Utiliser le thème Divi pour créer un sommaire

À priori, créer automatiquement une table des matières avec Divi peut être déroutant. On peut penser que c’est une opération complexe. Mais en vérité, rien n’est plus facile. Le thème simplifie le travail à faire. Voici une liste des étapes à suivre avec des explications :

• Créer la page ou l’article dans lequel insérer votre table des matières. Enregistrez votre page et sélectionnez l’option « Utiliser Divi Builder » ;
• Faites un choix entre les trois options que propose l’outil : construire à partir de zéro, choisir la mise en page ou cloner une page qui existe. Pour les débutants, quand on n’y connait pas grand-chose en HTML, l’option à privilégier est la première : construire à partir de zéro. Une fois que vous l’avez sélectionné, cliquez sur « Commencer à construire » ;
• Créez une rangée avec la structure qui vous parait la plus séduisante. Ensuite, il faut insérer un module de texte. Le module devra comporter les éléments que vous souhaitez faire apparaitre dans votre table des matières. En général, c’est la disposition en liste à puces qui est utilisée. Cela dit, vous pouvez très bien opter pour une autre forme. Dans un cas comme dans l’autre, le sommaire doit être en début d’article ;
• Insérez un lien d’ancrage sur chaque élément du sommaire : sélectionnez le symbole de lien d’ancrage puis, dans le champ URL, indiquez un ID CSS. Il servira à faire accéder le lecteur directement à la section qu’il souhaite. Vous pouvez utiliser le même lien que celui dont nous avons parlé dans le cas de l’utilisation de Gutenberg. Le premier élément peut correspondre à l’identifiant #mon-identifiant-1 par exemple ;
• Créez une nouvelle section pour accueillir un module texte. Dans cette section, insérez le titre souhaité. Ensuite, dans l’onglet « Avancé du module », dans « ID CSS », entrez l’ID CSS précédemment défini en prenant soin de retirer le « # » ;
• Sauvegardez votre action et vérifiez le rendu.

Il existe une seconde technique relativement plus facile à exploiter pour créer automatiquement une table des matières avec Divi.

Comment utiliser Divi Builder pour créer une table des matières ?

Assurez-vous que vos paragraphes sont bien séparés dans des rangées différentes et bien définies et suivez les étapes suivantes.

Cliquez sur l’onglet « Réglages de la rangée ». Par la suite, sélectionnez l’option « Avancé ». Une section s’ouvre et vous donne la possibilité de créer un ID CSS et une classe CSS. Comme ID CSS, vous pouvez écrire « sommaire-1 » ou « sommaire-2 » en fonction du sous-titre auquel se rattache votre section. Enregistrez vos modifications. La prochaine étape consiste à utiliser un module texte dans lequel ajouter une liste à puce pour le sommaire.

Nous l’avons dit, l’utilisation de la table des matières permet d’améliorer l’expérience de l’utilisateur. Pour qu’elle soit davantage efficace, comme dans le cas de l’utilisation de Gutenberg, vous devez insérer des liens internes grâce auxquels le lecteur accédera rapidement à la section souhaitée. Pour cela :

• Lancez les paramètres du module texte ;
• Surlignez chaque élément qui compose le sommaire ;
• À chaque surlignement, sélectionnez l’icône pour insérer des liens ;
• Dans le champ du lien, entrez l’identifiant CSS utilisé pour le paragraphe correspondant à l’élément du sommaire. Par exemple, pour le premier élément, écrivez #sommaire-1 ;
• Validez l’opération en sélectionnant « OK » ;
• Refaites le même exercice pour chaque paragraphe ;
• Sauvegardez vos modifications.

Après la sauvegarde, vous constaterez que votre table des matières est devenue fonctionnelle. Félicitations, vous avez réussi l’opération.

Se servir de l’éditeur classique de WordPress pour créer un sommaire

Divi Builder est de toute évidence l’un des outils les plus utilisés par les éditeurs de site. Pour autant, beaucoup de personnes préfèrent se servir de l’éditeur classique de WordPress pour créer leur table des matières. Cette action est-elle vraiment possible ? Absolument ! Il suffit de connaitre les bonnes astuces pour la réussir.

À partir de l’éditeur visuel de WordPress, rédigez votre article. Ensuite, passez en version HTML afin d’insérer les identifiants CSS tels que définis dans ce contenu. Notez que les identifiants doivent figurer dans toutes vos balises (h2, h3, h4, etc.).

Une fois que vous avez défini les identifiants, vous pouvez les ajouter comme adresse de lien interne dans les éléments qui composent le sommaire. Pour cela, vous pouvez suivre la même procédure que celle que nous avons vue pour l’outil Gutenberg ou pour Divi Builder.

En conclusion, créer une table des matières pour ces articles est un chantier relativement complexe, mais indispensable. Cette démarche vous permet d’améliorer le référencement de votre site internet ainsi que sa position dans les moteurs de recherche. En outre, elle vous aide à rendre plus fluide la lecture de vos contenus, et donc rendre l’expérience utilisateur (UX) plus agréable.