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