Error in the docs related to Structured Data?

Developing with Prismic
1

Hello,

This might be error on my side, but I'm currently integration structured data into a React/Gatsby project.

I'm following this article: How to add schema markup in Prismic - FAQs - Prismic People

In step 3, you have said that we need to render the RichText field as HTML using the RichText.render method. However if I do that, this output html in this format:

Screenshot 2021-03-22 at 14.05.31
Screenshot 2021-03-22 at 14.05.311620Ă—586 49.1 KB

My code for this is {RichText.render(structuredScript.raw)}

In order to actually render the script tag, we need to get the text value then wrap it in dangerouslySetInnerHTML tag

This worked for me:

<div dangerouslySetInnerHTML={{ __html: `${structuredScript.text}` }} />

Even though that this renders the script tag correctly, react Helmet unfortunately doesn't support dangerouslySetInnerHTML so this is not really a solution for us.

Any help will be greatly appreciated!

Thanks,
Kris

3

Hi Kris,

I don't have a solution for you off the top of my head, but I did a little research and found a couple of possible solutions here:

I haven't tested it myself, but one person suggests using react-html-parser.

Give that a try and let me know if it works for you :slight_smile:

Cheers,
Levi

4

Hi @Levi

I actually saw this and tried it, but it didn't work unfortunately.

After some thinking I did make it work by extracting only the JSON from the script (removing the script tags around it) then passing that JSON data to react-helmet.

Not the ideal solution, but it looks like it's working well!

This solution won't work if you want to pass any non-json code though.

I could help out updating that article if you need the help. Just give me a shout.

Cheers,
Kris

1 Like
5

@kris I'm glad that you were able to find a solution. We can get the article updated for anyone else using react-helmet.

But can you share a code snippet here showing what you did to get this working? It'll be very helpful for anyone else that finds this thread :slight_smile:

8

This issue has been closed due to inactivity. Flag to reopen.

10

Hello @Levi,

I am picking up on this topic as I am facing the same issue with Next js and dynamic structured data (blog post, FAQ, etc.): Schema markup Prismic Next js - markup with multiples paragraphs (e.g FAQ) - #5 by Marving

If I may, I do also think the documentation need to be updated as it is not working for next js neither.

11

Hey @Marving, I've written two articles which you might find useful

You can then use the free schema markup generators I created - Schema Markup (Structured Data) JSON-LD Generators | SEO component

Hope this helps!

12

Thanks man!

I have been able to find a way around: Schema markup Prismic Next js - markup with multiples paragraphs (e.g FAQ) - #6 by Marving

Thanks :grin: