Structured data through JSON-LD

Structured data is an essential tool for enhancing SEO, as it allows search engines to comprehend the details of your web page more effectively. This standardized format classifies and provides specific information about a page’s content. For instance, a recipe page may include structured data outlining ingredients, cooking times, temperatures, and calorie counts. Google Search Central emphasizes the significance of structured data in understanding and categorizing page content.

Integrating structured data into web pages

Before implementing structured data, it's crucial to understand what format best suits your website. Resources like “Understanding How Structured Data Works” can offer a foundational overview, or you can explore the Search Gallery to determine the ideal structure for your site. When working with a Framer site, utilize the Custom Code feature to embed structured data. In this section, you can insert the relevant structured data format, such as JSON-LD, tailored for your page's content. Here’s an example of incorporating structured data for a recipe:

Structured data on CMS pages

Custom Code also enables the integration of structured data in CMS detail pages. This feature allows for the use of CMS variables, ensuring unique structured content for each page. To incorporate CMS variables into your Custom Code, utilize the {{}} syntax. For instance, typing {{Title}} accesses the "Title" field from the CMS. In the context of JSON-LD, the syntax {{Title | json}} ensures that the field is JSON-safe and correctly quoted. As an example here we are adding markup for Breadcrumbs.

Inspecting the published site via a web inspector reveals that the {{Title | json}} fields have been transformed into appropriate data for each page.

Writing schema as a text field in CMS pages

While we suggest you use the method mentioned above to add schema markup to your CMS pages, as it ensures your schema is always up to date whenever you change anything in your collection, there’s another way to approach structured data.

If you want to, you can write your entire schema markup as JSON in a plain text field and then add it to the <head> tag of your CMS page using the following syntax:

<script type="application/ld+json">
	{{variable_name | raw}}
</script>

Using the {{variable_name | raw}} syntax ensures that special HTML characters are not escaped, which would otherwise cause the structured data to break.

WARNING: Be careful; any HTML inside your variables will not be escaped, which could introduce issues if not handled properly.

Validating your structured data

Once you've set up your structured data and published your site, it's important to verify its correct implementation. The Rich Results Test tool is an invaluable resource for this purpose. For example, after adding breadcrumbs data, this tool can confirm whether the structured data is functioning as intended.