Blog Post

Creating a FAQ React Component to add Google Structured Data

In this post, I want to show you how to create a React component that features a FAQ section to make use of Google's Structured Data.

Google's FAQ structured data is a format that allows you to provide a list of questions and answers on a given topic. This can be used to provide helpful information to users who are searching for answers to common questions. FAQ structured data is typically implemented using a JSON-LD format, which is a format that allows you to embed structured data into a web page.

In this example we'll be using React with NextJS together with react-bootstrap.

Let's take a look at our Requirements:

  • We want a component

  • We want it to take questions and answers as props

  • It should also render and display them in a handsome way

Compile the Structured Data

Let's take a look at Google's official documentation ( and their example of the structured data markup:

Let's recreate this in our React Component. Our approach could look like this:

export default function (props) {
    let mainEntity = []; => {
            "@type": "Question",
            "name": el.question,
            "acceptedAnswer": {
                "@type": "Answer",
                "text": el.answer

    const structuredData = {
        "@context": "",
        "@type": "FAQPage",
        "mainEntity": mainEntity

Now, let's add our markup to the <Head> section of our website - we'll do so with next/head:

                dangerouslySetInnerHTML={{__html: JSON.stringify(structuredData)}}

Add some more styling and make it look handsome, here's our full example:

Now, let's use it in a page:

// ...

<RichFAQ questions={[
        "answer": "Sample Answer",
        "question": "Sample Question?"
        "answer": "Sample Answer No 2",
        "question": "Sample Question No 2?"

And - Here we go!

Of course, you can also improve this component further or split up the Markup and rendering sections.