Gatsby SEO using JSON+LD for FAQs page - How to avoid duplicating content?

Question

I am trying to add FAQs structured data(JSON+LD) for one of my blog pages. My blog is powered by Gatsby. I referred to gatsby-plugin-next-seo's guide page. Here is the example presented:

import React from 'react';
import { FAQJsonLd } from 'gatsby-plugin-next-seo';

export default () => (
  <>
    <FAQJsonLd
      questions={[
        { question: 'What?', answer: 'Stand' },
        { question: 'How?', answer: 'Effort' },
        { question: 'Why?', answer: 'Peace' },
      ]}
    />

    <h1>What?</h1>
    <p>Stand</p>

    <h1>How?</h1>
    <p>Effort</p>

    <h1>Why?</h1>
    <p>Peace</p>
  </>
);

Content from the article body have been replicated within the JSON+LD section. Is there a way to avoid this duplication? D-R-Y.

Can you clarify what are you trying to achieve? Do you want to fill FAQJsonLd with your article content? — Ferran Buireu
– Ferran Buireu, Commented Jan 26, 2022 at 18:21
Wondering if there is a way to programmatically fill FAQJsonLd, instead of manual copy+paste. — Harsha N Hegde
– Harsha N Hegde, Commented Jan 27, 2022 at 5:44

Ferran Buireu · Accepted Answer · 2022-01-28 18:06:46Z

Wondering if there is a way to programmatically fill FAQJsonLd, instead of manual copy+paste.

One thing that comes to my mind is to create custom fields inside the markdown (if you have the option) aside from the HTML/body of the markdown.

You can emulate the question/answer array using something like:

---
title: Some Dummy Title
questionsSection:
  - question1:
    question: Some question?
    answer: Some answer
   - question2:
    question: Some question 2?
    answer: Some answer 2  
---
The body of the article

Note: check the structure, maybe you don't need to nest each question/answer inside a new array position (delimited by hyphen, -). I haven't tested the structure, you may need to refine it but get the idea

In this case, you can parse questionsSection for each markdown article and pass it directly to FAQJsonLd component like:

<FAQJsonLd
  questions={questionsSection}
/>

As I said, if the structure of questionsSection doesn't fit your specs, you can always flat or flatMap the array.

My idea relies on creating a custom section for each markdown with the FAQs content to avoid parsing the html to find the headings of the posts (which may contain the questions). That markdown section, ideally, should be an array of objects to fit FAQJsonLd specs.

You can even use a JSON notation inside like:

---
title: Some Dummy Title
questionsSection: '{"questions":[{question: "Question 1", answer: "Answer 1"}]}'
---
The body of the article

The idea is exactly the same. Use whatever is more comfortable with you.

Collectives™ on Stack Overflow

Gatsby SEO using JSON+LD for FAQs page - How to avoid duplicating content?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related