SEO, Rich Results: Turn your FAQ page into something that Google loves.

Adventurous coders can use the FAQ page of their website to improve the experience in Google's results. How? Let me spoil it for you : by using some simple structured data. Follow the recipe, here’s how the magic happens.

Ingredients:
All you need is :

• a webpage with some parts of Questions and Answers in a webpage, a FAQ page for example
• a selection of structured data in JSON-LD to add to this webpage
• some online tools to check how the result will look like when published online, like those 2 published by Google : https://search.Google.com/test/rich-results/ et https://search.Google.com/structured-data/testing-tool/

Recipe:

1. In your FAQ page, add some Script tags, either in the Head tag or in the Body tag, as you like it. Source. One Script type="application/ld+json" for the Structured Data explaining that your webpage is a FAQ page, and one Script type="application/ld+json" for the Structured Data showing the selected questions and their best answer. It’s not mandatory to separate this into two Scripts but, according to me, it makes their readability and maintainability easier in the code review.
2. One rule: if you write your own answers to your own questions in this FAQ page, then the structured data "@type": will be "FAQPage", instead of “QAPage” where users upload their answers to the questions. source
3. One Script type="application/ld+json" will describe the webpage with this example of JSON-LD :

   {
   "@context": "https://schema.org/",
   "@type": "WebPage",
   "name": " // here you can paste the content of your ",
   "Url":" // here you can paste you canonical url"
   }
   

4. And one Script type="application/ld+json" will determine the Questions and Answers you want Google to emphasize for you :

   {
   "@context":"https://schema.org",
   "@type":"FAQPage",
   "mainEntity":[ {
   "@type":"Question",
   "Name":"", // paste here the first Question
   "acceptedAnswer": {
       "@type": "Answer", "text": "" // add here the text you want as your Answer
       }
   }
   ,
   {
   "@type":"Question",
   "Name":"", // here’s some place for a second Question
   "acceptedAnswer": {
       "@type": "Answer", "text": "" // and for your second Answer
       }
   }
   ,
   {
   "@type":"Question",
   "Name":"", // a third Question here
   "acceptedAnswer": {
       "@type": "Answer", "text": "" // and its Answer
       }
   }
   ,
   {
   "@type":"Question",
   "Name":"", // Up to you: number of Questions...
   "acceptedAnswer": {
       "@type": "Answer", "text": "" // and their text as Answer
       }
   }
   ]
   }
   

5. When available in your rendered HTML, try your code in some tools by Google to check if the result reaches your expectations and Google standards. I recommend to check your code in html in those two tools as preview : Google.com test rich-results and Google.com structured-data testing tool

6. Happy with those previews? So you can comfortably publish your code online. Google will love it.

Who am I? I’m Pascal, happy Front-End developer in Paris. Nice to meet you. And glad to help.
My agency in Paris publishes a great weekly newsletter about SEO (in French), so feel free to subscribe it here. We also provides powerful services for your needs in SEO, feel free to contact us to share your demand with us.