Script Json and +add field CMS

Hello community,

Here is some advanced problems :sweat_smile:.

Solved

@Pandore Use a Custom Embed in the Page Template (Manual Field Mapping)

  1. Drag a <Embed> element (not rich text!) into the page where you want the SEO schema.
  2. Paste your JSON-LD inside <script type="application/ld+json"> tags.
  3. Use Webflow field bindings inside the JSON like this:
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "V!deoObject",
  "name": "{{wf {&quot;path&quot;: &quot;title&quot;, &quot;type&quot;: &quot;PlainText&quot;} }}",
  "description": "{{wf {&quot;path&quot;: &quot;description&quot;, &quot;type&quot;: &quot;PlainText&quot;} }}",
  "thumbnailUrl": "{{wf {&quot;path&quot;: &quot;thumbnail-url&quot;, &quot;type&quot;: &quot;PlainText&quot;} }}",
  "uploadDate": "{{wf {&quot;path&quot;: &quot;date&quot;, &quot;type&quot;: &quot;Date&quot;} }}",
  "contentUrl": "{{wf {&quot;path&quot;: &quot;v!deo-url&quot;, &quot;type&quot;: &quot;PlainText&quot;} }}"
}
</script>

Webflow will not render {{wf...}} tags in the Designer, but they will work on the published site.

AddWeb’s solution can work but only if your fields are separate and if that field content is very simple. Webflow always HTML-encodes +add fields, which is not the same as JSON encoding so things like a single quote can break your JSON.

If you want to stay close to your current approach- the big stored chunk of JSON per CMS item, here’s how;

  • Create a rich text field in your CMS, call it JSON-LD
  • For each record, edit the content of that field and create an embed within the rich text block. Paste your JSON-LD there including the script tags, it must be the full block.
  • Then bind that Rich text field to a Rich text element on the page

When you publish, the JSON-LD will be rendered into the page intact with no encoding.

2 Likes

Hey memetican,

You are the master of this forum section ahah, a great thanks for your help.

Google doesn’t detect the file.

  1. Made a richtext in the CMS and clic + to past Code
  2. Add the CMS field for JSON and connect
  3. visibily off when it’s empty for google SEO
  4. Position absolute -9999 left into hiden overflow div
  5. Publish web and blog

Actually I can’t find the code on the inspector.

I think I mess somewhere, google think it’s just writted, he do not use it like a

Hey Christopher,

It’s showing in your code fine-

It’s able to see it as well, you can use this tool on GDev to test-
https://search.google.com/test/rich-results