Streaming live at 10am (PST)

Adding Attributes to Elements from RichText from CMS / Pinterest Rich Pin Integration

Hey guys!

I have a website with many recipes and now I’m trying to add some code so that Pinterest and Google get the information as a “rich pin”. Herefore I’m using .
I have a CMS collection with my recipes and a dynamic recipe page, so all the data is coming from my CMS in dynamic fields, to which I added the as custom attributes.
(I tried it with JSON in the “” before, but I have rich text fields which I can’t add from the collection to the head section)

I was able to pass on fields like the recipe name or the recipe description, but I struggle with the ingredients. Therefore my CMS has a Rich Text Field, where the ingredients are listed:

The problem is that I need to adress every “paragraph” from the Rich Text Field individually, because otherwise, if I’m giving the rich text block a custom attribute, Pinterest and Google will read all ingredients as a single one.

Right now I have set the custom data of the CMS rich text block like this:

With the Pinterest Validator the ingredients look like this:

I tried a little Javascript code to add the needed attributes to my paragraphes and it works when I inspect my page with the chrome inspector, but it doesn’t work with the validators.

This is my Javascript on the "before "-Section on the page:

This is what Chrome shows me:

And this is what the Google Validator gets:

So can anybody help me and maybe knows a way to separate the ingredients? I tried to give a paragraph a custom attribute and set that paragraph as "for all paragraphs in rich boxes), but the custom attributes aren’t passed on.

I searched the forum and the web but I didn’t find a solution yet (or somebody with a similar problem).
Thank you!

Looks like the validator is not running the script and just simply rendering the source. You would need to take each ingredient and place it in its own separate field.