Streaming live at 10am (PST)

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

#1

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 schema.org .
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 schema.org-code 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:
23

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:
12

With the Pinterest Validator the ingredients look like this:
51

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:
17

This is what Chrome shows me:
15

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!

0 Likes

#2

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.

0 Likes