The CMS & Schema Markup for Recipes

Design help Custom code
1

Hello Webflow Community! :wave:

I have a ‘recipes’ CMS collection on my Webflow site and am trying to set up schema markup on each individual recipe page as custom code in the head.

To include ingredients within the schema markup it must be formatted in an array as below:

"recipeIngredient": [
   "3 or 4 ripe bananas, smashed",
   "1 egg",
   "3/4 cup of sugar"
],

Unfortunately, the Webflow CMS escapes any HTML entities (which is great for security and far from an ‘issue’).

However, this means if I made a CMS field with the following content:
"3 or 4 ripe bananas, smashed", "1 egg"

It would output in the schema markup as:
"3 or 4 ripe bananas, smashed", "1 egg"

This returns an error and breaks the entire schema markup formatting and is rejected by Google.

Does anyone have a solution for this, or should I just leave ingredients out of my recipes and take a slight hit in terms of what the pages can achieve?

Thanks in advance,

Sam

1 Like
2

+1 to this.

Did you ever find a solution ?

3

Have you found any solution for this?

4

Webflow’s CMS embedded fields are always rendered as HTML, and escaped. They don’t know that you’re trying to render inside of e.g. a JSON structure.

Two common options here;

  • Use custom code to decode the HTML, and encode the JSON, and build out your JSON-LD markup. Requires programming, and can be fragile. Depending on how Googlebot is feeling, it’s somewhat picky as to when it will execute JS code.
  • Write the entire JSON-LD as a single combined chunk, and store it in the CMS inside of an Embed in a Rich Text field. Bind that to a Rich Text element, the Embed content will be rendered without the HTML encoding. Likely requires a lot of duplication of content with other fields in your CMS item.