Tutorial - How to easily add a FAQ section into your blog posts

Lately, we have seen FAQs sections appear at the end of some blog articles. This caught my attention and I looked for the best way to add this feature to my articles.

If you're also looking to have this possibility, this tutorial will guide and help you from A to Z. Even if you're a complete beginner.

But before starting, it's always a good practice to remind some useful points about a FAQ usage into a blog post.

What is a FAQ blog section

A Frequently Asked Questions blog section is a serial of questions and answers displayed at the end of an article. A Frequently Asked Questions blog section is a great way to improve your visitor's experience on your website by directly (or indirectly) answering questions about a topic, brand, product, or service in a few short sentences. And it's also a great way to give more context about the topic of the page to the search engines.

Why should you add a FAQ blog section to your articles?

There are many articles on Internet already replying this question but I'll give you four good reasons why you should display a Frequently Asked Questions into your articles:

• Adding several hundred additional words to your relevant articles is never a bad idea from an SEO perspective.
• Answering to the possible questions your readers may still have after reading your article, will help them feel more comfortable with your content, service, products, etc.
• Refreshing your articles that already rank on search engines with additional informations is an excellent editorial advice.
• Because your competitors probably don't

That said, you should be aware that Google wants you to provide only original helpful content to your readers and not use Frequently Asked Questions blog sections for advertising.

So your next question should be: will the additional content in the form of FAQs make your webpage content irrelevant instead of enhancing it? As usual, you should act smartly and not goofy.

To how many question your FAQ should answers?

There's no good or bad answer here, just as if a FAQ for a knowledge base must be as extensive as possible, a Frequently Asked Questions section in a blog article must only give some answers about the topic of the article.

If you want to display a FAQ section at the end of your articles, no need to be verbose because your article is probably answering the main questions your readers may have, and because the topic is probably specific. If your article displays 5 good questions with 5 excellent answers, it will be really perfect.

Which articles should display a FAQ blog section?

Your blog already have probably hundreds of excellent articles, so the relevant question you should ask yourself is: what articles should have a Frequently Asked Questions section?
Because but not all your articles deserve such section, you should choose wisely the articles where to display your Frequently Asked Questions blog section.

The best way to choose your articles is to select those where such section would be relevant for your readers.

How to write the content of your FAQ blog section?

To write an exceptional FAQ blog section, pick the questions among those you might receive from your readers on similar topics, on Google, on alsoasked.com, etc.

Always start your answers with an insightful and clear answer to the questions asked. The better your content, the better your chances that it will appear as a featured snippet on the Google SERP and the happier it will likely keep your readers.

Of course, you can add more detail to your answers but only if it's relevant and necessary for your readers. Finally, don't hesitate to add links to reference contents to establish your brand as an authority on the topic.

How to optimize your FAQ for search engines?

Now that you have consolidated your list of questions and write down the appropriate answers, it’s time to create an excellent FAQ Blog section. If you want your time and your efforts being rewarded as deserved, you must respect and follow the lastest SEO recommendations.

On 8th August 2023, Google published an update about the FAQ and How-To rich results: https://developers.google.com/search/blog/2023/08/howto-faq-changes

Going forward, FAQ (from FAQPage structured data) rich results will only be shown for well-known, authoritative government and health websites. For all other sites, this rich result will no longer be shown regularly."

Based on this, the smartest move is to display your FAQ blog section without the Schema markup, but only with H2-H3:

<div>
	<h2>
		Title of the question 1
	</h2>
	<h3>
		Text of the answer 1
	</h3>
</div>

How to create a very user friendly and very easy to use FAQ blog section?

To add a Frequently Asked Questions section into your blog articles, there are 2 ways.

1. If your website is powered by a Content Management System, the obvious way would be to add a plugin or an extension: easy, fast, no code, perfect for hurry people.
2. The other way is not the most obvious but the smartest one (from my point of view). Free, no maintenance, no licence, virus free, fully customizable, etc. And you'll learn something new, you'll create it yourself, and this is something you'll be proud of.

That said, let's now define what would be the characteristics of an ideal FAQ blog section:

• being used only into the relevant articles you want to refresh, promote, etc.
• being very easy to create, to update, and to manage on daily basis.
• and of course, free, open source, with a code as light as possible.

Having all those characteristics all together sounds like an utopia but trust me, you'll create and add it now to your site.

Create now your FAQ blog section

To create and display this utopic Frequently Asked Question blog section, we'll use the custom fields features.

This way, filling out and editing each question/answer in your articles will be super easy and super simple for you.

The custom field group

First, create a new field group (f.ex. named FAQ) in our Joomla admin panel:

The custom fields

Then, create the following custom fields for this field group:

• Title
• CSS classes
• and for each group of Q/A you want, a text field for the Q and a textarea field for the A

And in the Options tab of every field, setup the following parameters as:

• Editable in: administration
• Label: Hide
• Automatic Display: Do not automatically display

Open or create an article in the category where your group should appears to check everything is correct.

The article override

As seen earlier, the markup for a question and ist answer could be like this:

<div>
	<h2>
		Title of the question 1
	</h2>
	<h3>
		Text of the answer 1
	</h3>
</div>

In this example, I'll add 5 questions/answers. Of course, you can create more if needed.

We'll keep it simple but you can easily customize this markup by adding some CSS classes.

Now, create an override of the default.php file of the article in your template.

Around the line 100, find this code:

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

and right after, add the following code:

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

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

Just below, insert this code to declare the content of each custom fields into PhP variables:

<?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; ?>

Replace each XX with the ID of each custom you've created previously.

Then, add these PhP variables in the HTML code that will display the FAQ and copy/paste this entire code after the list of the variables previoulsy added:

<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>

Explanations:

• Line 1: the CSS class is applied to the H2, the section title
• Line 2: I've added a language chain to the section title because my site is a multilingual one. And I also individualize the display of this title for each article, not just have a generic "Frequently Asked Questions" title.
• and from line 5 to 48, each question of the FAQ is in a H2, and all the answers are in a H3.

This override works well but there will be a small problem if we publish it as is.
As we have seen previously, it is not relevant to add a FAQ section to each blog post.
So we need to add a condition to publish (or not) our FAQ section. Let's modify our previous code like this:

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

Et voilà, if the custom field for the first question is empty, the entire FAQ blog section is not displayed.
Save and close your override and come back to your articles manager.

Open or create an article in the category where your field group should appears and fill all the fields.

Now, open the article you've added your questions and answers and check:

• if the content is perfectly relevant
• if the display is really fine?

Adjust what needs to be adjusted, enjoy the result, and be proud of the work you have just accomplished (thanks to this tutorial).

As promised, your Frequently Asked Questions blog section is easy to use, to manage, and you did it without an extension.

<div>
	<h2>
		Title of the question 1
	</h2>
	<h3>
		Text of the answer 1
	</h3>
</div>

<div>
	<h2>
		Title of the question 1
	</h2>
	<h3>
		Text of the answer 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; ?>