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>