How to show your FAQ directly in Google search results
Tags: webdev, seo, google
Published: 2021-07-07 22:15:08

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](https://developers.google.com/search/docs/data-types/recipe), [events](https://developers.google.com/search/docs/data-types/event), [products](https://developers.google.com/search/docs/data-types/product), [courses](https://developers.google.com/search/docs/data-types/course) 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:
```html
<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:
```html
<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`):
```html
<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.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxirqal4ky76bolrqq0r.png)

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 😊