# 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   |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-seo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.