> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-seo.md).

# Sygnal SEO

{% hint style="success" %}
**QUESTIONS?  PROBLEMS?  FEATURE REQUESTS?** \
Contact me on [Sygnal's forum](https://sygnal-attr.discourse.group/c/general). 
{% endhint %}

## Components

The following code components are included in this library.  

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><p></p><h3>JSON-LD Website Schema</h3><ul><li>Dynamic structuring</li><li>CMS support </li></ul></td><td><a href="/files/LHB4iWoXCVf6KPrrylLs">/files/LHB4iWoXCVf6KPrrylLs</a></td><td><a href="/pages/GG0y9dzq0bAxTucofGVl">/pages/GG0y9dzq0bAxTucofGVl</a></td></tr><tr><td><p></p><h3>JSON-LD Organization Schema</h3><ul><li>Dynamic structuring</li><li>CMS support </li></ul></td><td><a href="/files/LHB4iWoXCVf6KPrrylLs">/files/LHB4iWoXCVf6KPrrylLs</a></td><td><a href="/pages/WpqfhsVyjun1EpHRojFa">/pages/WpqfhsVyjun1EpHRojFa</a></td></tr><tr><td><p></p><h3>JSON-LD Video Schema</h3><ul><li>Dynamic structuring</li><li>CMS support </li></ul></td><td><a href="/files/LHB4iWoXCVf6KPrrylLs">/files/LHB4iWoXCVf6KPrrylLs</a></td><td><a href="/pages/CQBnnBSpM1678hkQ2NxO">/pages/CQBnnBSpM1678hkQ2NxO</a></td></tr><tr><td><p></p><h3>JSON-LD Job Posting Schema</h3><ul><li>Dynamic structuring</li><li>CMS support </li></ul></td><td><a href="/files/LHB4iWoXCVf6KPrrylLs">/files/LHB4iWoXCVf6KPrrylLs</a></td><td><a href="/pages/TEPMZRBXboy4KZTyIw9w">/pages/TEPMZRBXboy4KZTyIw9w</a></td></tr></tbody></table>

<table><thead><tr><th width="100.333251953125">Version</th><th width="499">Changes</th><th>Date</th></tr></thead><tbody><tr><td>v0.1.0</td><td>Website, Organization, Video &#x26; Job Posting JSON-LD components </td><td>26-Sep-2025</td></tr></tbody></table>

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

* You must work directly with the JSON-LD structure&#x20;
* On collection pages, the structure is not adaptable to the data&#x20;
* CMS-embedded fields are HTML-encoded which means that certain characters like `&quot;` can be problematic.&#x20;
* Line breaks in multiline text fields can invalidate the JSON&#x20;
* No built-in assistance to verify your JSON or your JSON-LD are valid&#x20;
* No array support&#x20;
* 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&#x20;

## Features&#x20;

* Server-side rendering for best SEO quality&#x20;
* Large array of properties to describe your schemas&#x20;
* Built-in debugging feature to notify you of missing required properties&#x20;
  * And debugging displays only in the designer&#x20;

### Design-Time Debugging&#x20;

<figure><img src="/files/460cxXj4gHFlFFGUMKl4" alt=""><figcaption><p>When debugging is on, a panel appears in the designer only. </p></figcaption></figure>

## Demonstration&#x20;

{% embed url="<https://www.loom.com/share/abfe862c3a70480e838915679c5b2ade>" %}

{% embed url="<https://json-ld-code-components.webflow.io/>" %}

## Usage Notes&#x20;

1. Place the components you want on any page&#x20;
   1. For site-wide components, place them inside of your Nav or Footer component&#x20;
2. Enable Debug mode in the Advanced property group for the component&#x20;
3. Enter your data
   1. Bind any properties to CMS fields that you want&#x20;
4. Ensure the debug view shows as green&#x20;
5. Switch off Debug mode ( best practice to keep your production HTML clean )&#x20;
6. Publish your site&#x20;
7. Test your JSON-LD using a validation service&#x20;

### Testing your JSON-LD&#x20;

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

|                                                                           | Works with Staging                                                                  | Works with Production |
| ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | --------------------- |
| [Schema.org's Schema Markup Validator](https://validator.schema.org/)     | YES                                                                                 | YES                   |
| [Google's Rich Results Test](https://search.google.com/test/rich-results) | NO - if Staging is marked as noindex, it will see the robots.txt and avoid testing. | YES                   |

## Future&#x20;

* Dive deeper on property validation, e.g. ensure dates are ISO-8601&#x20;
* Add support for array objects;&#x20;
  * FAQPage and FAQ, with CMS support&#x20;
  * Organization and ContactPoints array&#x20;
* Support full range of [Google-supported structured data](https://developers.google.com/search/docs/appearance/structured-data/search-gallery)&#x20;
* Support HTML properties&#x20;
  * For FAQAnswer, and possibly Article&#x20;

## Project Notes&#x20;

| Module         | Source | Version |
| -------------- | ------ | ------- |
| Deploy scripts | NPM    | 0.3.0   |