How to show your FAQ directly in Google search results

Optimizing your website to rank as high as possible for specific keywords is great - but did you know, that you can do much more awesome things as a developer to change the appearance of your website on Google? Today I'll show you an example of how to show your frequently asked questions directly in the search results using structured data.

By the way, you can do the same for recipes, events, products, courses and more.

How this works

We'll add additional HTML-Microdata or JSON-LD to our website, so bots can easily understand how to read (and display) the content.

In this example, I'll show you how to do this with HTML-Microdata because I think that's easier to understand and implement.

HTML-Markup

Let's create a section that contains all of the questions:

<section>
   <h2>FAQ</h2>
   <!-- Question 1 -->
   <div>
      <h3>Question goes here</h3>
      <!-- Answer to question 1 -->
      <div>
         <p>The answer goes here</p>
      </div>
   </div>
   <!-- Question 2 -->
   <div>
      <h3>Second question goes here</h3>
      <!-- Answer to question 2 -->
      <div>
         <p>The second answer goes here</p>
      </div>
   </div>
</section>

That was easy. Now we add the HTML-Microdata. First, we add the schema.org-types to the elements, FAQPage to the section, Question to the question elements and Answer to the answers:

<section itemscope itemtype="https://schema.org/FAQPage">
   <h2>FAQ</h2>
   <!-- Question 1 -->
   <div itemscope itemtype="https://schema.org/Question">
      <h3>Question goes here</h3>
      <!-- Answer to question 1 -->
      <div itemscope itemtype="https://schema.org/Answer">
         <p>The answer goes here</p>
      </div>
   </div>
   <!-- Question 2 -->
   <div itemscope itemtype="https://schema.org/Question">
      <h3>Second question goes here</h3>
      <!-- Answer to question 2 -->
      <div itemscope itemtype="https://schema.org/Answer">
         <p>The second answer goes here</p>
      </div>
   </div>
</section>

Next we set the properties to the elements. To set the name (title) of the question, we use the itemprop="name" Attribute. Same thing for acceptedAnswer, the question itself (mainEntity) and the text content of the answer (text):

<section itemscope itemtype="https://schema.org/FAQPage">
   <h2>FAQ</h2>
   <!-- Question 1 -->
   <div itemscope itemtype="https://schema.org/Question" itemprop="mainEntity">
      <h3 itemprop="name">Question goes here</h3>
      <!-- Answer to question 1 -->
      <div itemscope itemtype="https://schema.org/Answer" itemprop="acceptedAnswer">
         <p itemprop="text">The answer goes here</p>
      </div>
   </div>
   <!-- Question 2 -->
   <div itemscope itemtype="https://schema.org/Question" itemprop="mainEntity">
      <h3 itemprop="name">Second question goes here</h3>
      <!-- Answer to question 2 -->
      <div itemscope itemtype="https://schema.org/Answer" itemprop="acceptedAnswer">
         <p itemprop="text">The second answer goes here</p>
      </div>
   </div>
</section>

And that's it!

Test & Preview

Live-Demo: https://linus.link/dev-to/google-faq.html

If you want to validate your markup, head over to

https://search.google.com/test/rich-results

and paste the URL you want to validate. You can also check your code directly, for example you can paste the code above inside the "code" textfield.

If everything is valid, you should also be abled to click on "Preview results" to see an example on how the result could be displayed on Google.

Guidelines

Please read the guidelines by Google to prevent your site from getting blocked:

https://developers.google.com/search/docs/data-types/faqpage#guidelines

(In short: DON'T use this with content provided by users or for advertising and always show the full question and answer)

Done!

That is it! 😃 Now you can implement this on your website to show your customers the information they need directly in the Google Search!

I hope you learned something new today! Thank's for reading 😊