📗Sygnal SEO

Webflow supports JSON-LD structure through the use of Embeds, and this generally works well- however there are caveats;

• You must work directly with the JSON-LD structure

• On collection pages, the structure is not adaptable to the data

• CMS-embedded fields are HTML-encoded which means that certain characters like " can be problematic.

• Line breaks in multiline text fields can invalidate the JSON

• No built-in assistance to verify your JSON or your JSON-LD are valid

• No array support

• Complex structures require JavaScript, which means your JSON is rendered client-side. Google can often handle this, other search engines and LLMs often do not

Features

• Server-side rendering for best SEO quality

• Large array of properties to describe your schemas

• Built-in debugging feature to notify you of missing required properties

  • And debugging displays only in the designer

Design-Time Debugging

Demonstration

Sygnal's JSON-LD Code Componentsjson-ld-code-components.webflow.io

Usage Notes

1. Place the components you want on any page

   1. For site-wide components, place them inside of your Nav or Footer component

2. Enable Debug mode in the Advanced property group for the component

3. Enter your data

   1. Bind any properties to CMS fields that you want

4. Ensure the debug view shows as green

5. Switch off Debug mode ( best practice to keep your production HTML clean )

6. Publish your site

7. Test your JSON-LD using a validation service

Testing your JSON-LD

There are two popular services for testing your JSON-LD, and both accept a URL for testing. I use both.

Future

• Dive deeper on property validation, e.g. ensure dates are ISO-8601

• Add support for array objects;

  • FAQPage and FAQ, with CMS support

  • Organization and ContactPoints array

• Support full range of Google-supported structured data

• Support HTML properties

  • For FAQAnswer, and possibly Article