Tutoriel - Comment afficher une FAQ dans vos articles de blog?

Dernièrement, nous avons vu apparaître des sections FAQ à la fin de certains articles de blog. Cela a attiré mon attention et j’ai cherché quelle était la meilleure manière d’ajouter cette fonctionnalité à mes articles.

Si vous cherchez également à disposer de cette possibilité, ce tutoriel vous guidera et vous aidera de A à Z. Même si vous êtes complètement débutant.

Mais avant d'entrer dans le vif du sujet, il est toujours bon de rappeler quelques points utiles sur l'utilisation d'une FAQ dans un article de blog.

Qu'est-ce qu'une section Foire Aux Questions d'un article de blog?

Une section Foire aux questions est une série de questions et de réponses affichées à la fin d'un article de blog. C'est un excellent moyen d'améliorer l'expérience de vos visiteurs sur votre site Web en répondant directement (ou indirectement) aux questions sur un sujet, une marque, un produit ou un service en quelques phrases courtes. Et c'est également un excellent moyen de donner plus de contexte sur le sujet de la page aux moteurs de recherche.

Pourquoi devriez-vous ajouter une section FAQ à vos articles de blog?

Il existe déjà de nombreux articles sur Internet qui répondent à cette question, mais je vais vous donner quatre bonnes raisons pour lesquelles vous devriez afficher une foire aux questions dans vos articles :

• Ajouter plusieurs centaines de mots supplémentaires à vos articles pertinents n’est jamais une mauvaise idée du point de vue du référencement.
• Répondre aux éventuelles questions que vos lecteurs pourraient encore se poser après avoir lu votre article les aidera à se sentir plus à l'aise avec votre contenu, votre service, vos produits, etc.
• Actualiser vos articles déjà classés sur les moteurs de recherche avec des informations supplémentaires est un excellent conseil éditorial.
• Parce que tous vos concurrents ne le font peut être pas...

Ceci étant dit, vous devez savoir que Google souhaite que vous fournissiez uniquement du contenu original et utile à vos lecteurs et que vous n'utilisiez pas ce type de sections à des fins publicitaires.

La question suivante doit donc être la suivante : le contenu supplémentaire sous forme de FAQ va-t-il rendre le contenu de votre article inutile ou va t il l'améliorer ? Comme d'habitude, vous devez agir intelligemment et non de manière stupide.

Combien de questions doit contenir votre Foire Aux Questions de blog?

Il n'y a pas de bonne ou de mauvaise réponse ici, car si une FAQ pour une base de connaissances doit être aussi complète que possible, une section de questions fréquemment posées dans un article de blog ne doit donner que quelques réponses sur le sujet de l'article.

Si vous souhaitez afficher une section FAQ à la fin de vos articles, inutile d'être verbeux car votre article répond probablement déjà aux principales questions que vos lecteurs peuvent se poser et parce que le sujet est probablement spécifique. Si votre article affiche 5 bonnes questions avec 5 excellentes réponses, ce sera vraiment parfait.

Sur quels articles afficher votre FAQ?

Votre blog contient probablement déjà des centaines d’excellents articles, la question pertinente que vous devriez vous poser est donc : quels articles devraient avoir une section Foire aux questions ?
Parce que tous vos articles ne méritent pas d'avoir une telle section, vous devez choisir judicieusement les articles dans lesquels afficher votre section de blog Foire aux questions.

La meilleure façon de choisir vos articles est de sélectionner ceux pour lesquels une telle section serait pertinente pour vos lecteurs.

Comment rédiger le contenu de la section FAQ des articles de votre blog?

Pour rédiger une exceptionnelle rubrique FAQ dans vos articles, choisissez les questions parmi celles que vous pourriez recevoir de vos lecteurs sur des sujets similaires, sur Google, sur alsoasked.com, etc.

Commencez toujours vos réponses par une réponse perspicace et claire aux questions posées. Plus votre contenu est de qualité, plus vous avez de chances qu'il apparaisse comme un extrait en vedette sur la SERP de Google et plus il sera susceptible de fidéliser vos lecteurs.

Bien entendu, vous pouvez ajouter plus de détails dans vos réponses, mais uniquement si cela est pertinent et nécessaire pour vos lecteurs. Enfin, n’hésitez pas à ajouter des liens vers des contenus de référence pour établir votre site comme une autorité sur le sujet.

Comment optimiser votre FAQ pour les moteurs de recherche?

Maintenant que vous avez consolidé votre liste de questions et noté les réponses appropriées, il est temps de créer une excellente section de blog FAQ. Si vous souhaitez que votre temps et vos efforts soient récompensés à leur juste valeur, vous devez respecter et suivre les dernières recommandations SEO.

Le 8 août 2023, Google a publié une mise à jour concernant les résultats enrichis de la FAQ et des procédures pratiques : Modifications apportées aux résultats enrichis de type HowTo et FAQ

À l'avenir, les résultats enrichis FAQ (à partir des données structurées FAQPage) ne s'afficheront que pour les sites Web connus, gouvernementaux et de santé. Pour tous les autres sites, ce résultat enrichi ne s'affichera plus régulièrement. Les sites peuvent être automatiquement considérés pour ce traitement, en fonction de leur éligibilité.

Sur cette base, la démarche la plus intelligente consiste à afficher votre section FAQ dans vos articles de blog sans le balisage Schema, mais uniquement en utilisant un balisage H2-H3:

<div>
	<h2>
		Titre de la question 1
	</h2>
	<h3>
		Texte de la réponse 1
	</h3>
</div>

Comment créer une section FAQ dans vos articles qui soit très conviviale et très simple à utiliser?

Pour ajouter une section FAQ dans vos articles de blog, il y a deux manières:

1. Si votre site Web est propulsé par un système de gestion de contenu (CMS), le moyen le plus évident serait d'ajouter un plugin ou une extension : facile, rapide, sans code, parfait pour les personnes pressées.
2. L’autre solution n’est pas la plus évidente mais la plus intelligente (de mon point de vue). Gratuite, sans maintenance, sans licence, sans virus, entièrement personnalisable, etc. Et vous apprendrez quelque chose de nouveau, vous le créerez vous-même, et c'est quelque chose dont vous serez fier.

Cela dit, définissons maintenant quelles seraient les caractéristiques d'une section FAQ idéale:

• pouvoir l'utiliser uniquement dans les articles où ce type de contenu serait pertinent pour les visietrus du blog.
• être très simple à créer, à mettre à jour, et à utiliser au quotidien.
• et bien sur, gratuite, open source,avec un code aussi léger que possible.

Avoir toutes ces caractéristiques réunies semble être utopique, mais croyez-moi, vous allez le créer et l'ajouter maintenant à votre site.

Créons maintenant cette section FAQ pour les articles de blog

Pour créer et afficher cette section utopique de questions fréquemment posées, nous utiliserons la fonctionnalité des champs personnalisés.

De cette façon, remplir et modifier chaque question/réponse dans vos articles sera super facile et super simple pour vous.

Le groupe de champs

Tout d'abord, créons un nouveau groupe de champs (qu'on appellera FAQ) dans l'administration de notre site Joomla:

Les champs personnalisés

Ensuite et pour ce groupe de champs, créons les champs personnalisés suivants:

• Titre
• Classe CSS
• et pour chaque groupe de Q/R que vous voulez, un champs de type text pour la question et un champs de type textarea pour la réponse.

Et dans l'onglet Options de chaque champs, configuerez les paramètres comme ceci:

• Modifiable dans: administration
• Label: Masquer
• Affichage automatique: Ne pas afficher automatiquement

Ouvrez ou créez un article dans la catégorie où votre groupe de champs doit apparaître pour vérifier que tout est correct.

L'override de l'article

Comme vu précédemment, le balisage d'une question et de sa réponse pourrait être comme ceci:

<div>
	<h2>
		Titre de la question 1
	</h2>
	<h3>
		Texte de la réponse 1
	</h3>
</div>

Dans cet exemple, je vais ajouter 5 questions/réponses. Bien sur, vous pouvez en créer plus si besoin.

Je fais volontairement simple, mais vous pouvez facilement personnaliser ce balisage en ajoutant des classes CSS.

Maintenant, créons une override du fichier default.php deu dossier article dans votre template.

Aux alentours de la ligne 100, repérez ce code:

<?php echo $this->item->text; ?>

Juste après ce code, ajouter ceci:

<?php $Customfields = FieldsHelper::getFields('com_content.article', $this->item, true); ?>
<?php $fields = []; ?>

<?php foreach ($Customfields as $field) : ?>
	<?php $fields[$field->id] = $field; ?>
<?php endforeach; ?>

Juste en dessous, insérez ce code pour déclarer le contenu de chaque champ personnalisé dans les variables PhP:

<?php $topic = $fields[xx]->value; ?>
<?php $css = $fields[xx]->value; ?>
<?php $q1 = $fields[xx]->value; ?>
<?php $a1 = $fields[xx]->value; ?>
<?php $q2 = $fields[xx]->value; ?>
<?php $a2 = $fields[xx]->value; ?>
<?php $q3 = $fields[xx]->value; ?>
<?php $a3 = $fields[xx]->value; ?>
<?php $q4 = $fields[xx]->value; ?>
<?php $a4 = $fields[xx]->value; ?>
<?php $q5 = $fields[xx]->value; ?>
<?php $a5 = $fields[xx]->value; ?>

Remplacez chaque XX avec les ID de chaque champs personnalisé que vous avez créé précédemment.

Ensuite, nous ajoutons ces variables PhP dans le code HTML qui va afficher votre FAQ et copiez/collez la totalité de ce code à la suite des variables que nous venons d'ajouter:

<h2 class="<?php echo $css; ?>">		
	<?php echo Text::_('FAQ_ABOUT'); ?> <?php echo $topic; ?>
</h2>		

<div>
	<h2>
		<?php echo $q1; ?>
	</h2>
<h3>
		<?php echo $a1; ?>
	</h3>
</div>

<div>
	<h2>
		<?php echo $q12; ?>
	</h2>
	<h3>
		<?php echo $a2; ?>
	</h3>
</div>
		
<div>
	<h2>
		<?php echo $q3; ?>
	</h2>
	<h3>
		<?php echo $a3; ?>
	</h3>
</div>	
		
<div>
	<h2>
		<?php echo $q4; ?>
	</h2>
	<h3>
		<?php echo $a4; ?>
	</h3>
</div>	
		
<div>
	<h2>
		<?php echo $q5; ?>
	</h2>
	<h3>
		<?php echo $a5; ?>
	</h3>
</div>

Explications:

• Ligne 1: la classe CSS est appliquée au H2, le titre de la section
• Ligne 2: J'ai ajouté une chaîne de langues pour le titre de la section car mon site est multilingue. Et je personnalise également l'affichage de ce titre pour chaque article pour ne pas avoir seulement un titre générique «Foire aux questions».
• Et de la ligne 5 à la ligne 48, chaque question de la FAQ est affiché avec un H2, et toutes les réponses sont affichées avec des H3.

Cette override fonctionne parfaitement mais il y aura un petit problème si nous la publions telle quel.
Comme nous l'avons vu précédemment, il n'est pas nécessaire d'afficher une FAQ dans tous les articles d'un blog.
Nous allons donc ajouter une condition pour publier (ou pas) notre FAQ. Modifions notre code comme ceci:

<?php if (!empty($q1)) : ?>
<h2 class="<?php echo $css; ?>">		
	<?php echo Text::_('FAQ_ABOUT'); ?> <?php echo $topic; ?>
----
----
----
	</h3>
</div>	
<?php endif; ?>

Et voilà, si le champ personnalisé de la première question est vide, toute la section du blog FAQ n'est pas affichée.
Enregistrez et fermez votre override et revenez à votre gestionnaire d'articles.

Ouvrez ou créez un article dans la catégorie où votre groupe de champs doit apparaître et remplissez tous les champs.

Maintenant, ouvrez l'article dans lequel vous avez ajoutez vos questions et vos réponses, et vérifiez:

• si l'affichage est pertinent et intéressant
• si le design est satisfaisant

Ajustez ce qui doit l'être, appréciez le résultat et soyez fier du travail que vous venez d'accomplir (grâce à ce tutoriel).

Comme promis, votre section Foire aux questions pour vos articles est facile à utiliser, à gérer, et vous l'avez fait sans extension.

<div>
	<h2>
		Titre de la question 1
	</h2>
	<h3>
		Texte de la réponse 1
	</h3>
</div>

<div>
	<h2>
		Titre de la question 1
	</h2>
	<h3>
		Texte de la réponse 1
	</h3>
</div>

<?php echo $this->item->text; ?>

<?php $Customfields = FieldsHelper::getFields('com_content.article', $this->item, true); ?>
<?php $fields = []; ?>

<?php foreach ($Customfields as $field) : ?>
	<?php $fields[$field->id] = $field; ?>
<?php endforeach; ?>

<?php $topic = $fields[xx]->value; ?>
<?php $css = $fields[xx]->value; ?>
<?php $q1 = $fields[xx]->value; ?>
<?php $a1 = $fields[xx]->value; ?>
<?php $q2 = $fields[xx]->value; ?>
<?php $a2 = $fields[xx]->value; ?>
<?php $q3 = $fields[xx]->value; ?>
<?php $a3 = $fields[xx]->value; ?>
<?php $q4 = $fields[xx]->value; ?>
<?php $a4 = $fields[xx]->value; ?>
<?php $q5 = $fields[xx]->value; ?>
<?php $a5 = $fields[xx]->value; ?>

<h2 class="<?php echo $css; ?>">		
	<?php echo Text::_('FAQ_ABOUT'); ?> <?php echo $topic; ?>
</h2>		

<div>
	<h2>
		<?php echo $q1; ?>
	</h2>
<h3>
		<?php echo $a1; ?>
	</h3>
</div>

<div>
	<h2>
		<?php echo $q12; ?>
	</h2>
	<h3>
		<?php echo $a2; ?>
	</h3>
</div>
		
<div>
	<h2>
		<?php echo $q3; ?>
	</h2>
	<h3>
		<?php echo $a3; ?>
	</h3>
</div>	
		
<div>
	<h2>
		<?php echo $q4; ?>
	</h2>
	<h3>
		<?php echo $a4; ?>
	</h3>
</div>	
		
<div>
	<h2>
		<?php echo $q5; ?>
	</h2>
	<h3>
		<?php echo $a5; ?>
	</h3>
</div>

<?php if (!empty($q1)) : ?>
<h2 class="<?php echo $css; ?>">		
	<?php echo Text::_('FAQ_ABOUT'); ?> <?php echo $topic; ?>
----
----
----
	</h3>
</div>	
<?php endif; ?>