Structured Data using JSON-LD for SEO

"Structured data is a standardized format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on." - Google Search Central

Adding Structured Data to Pages

To get started with structured data you'll want to learn more about what works best for your website. You can learn about it in general on "Understanding How Structured Data Works" article, or jump directly into the Search Gallery to see what structure your site needs. To add Structured data to your Framer site you'll also need to use the Custom Code feature.

From there you can add the relevant structure to your page in the custom code section. Here is an using the structured data example for a recipe:

Adding Structured Data to CMS Pages

For CMS detail pages, you can use variables from the CMS in your custom code, allowing you to have uniqued structured content for each CMS page.

To use CMS variables in your Custom Code, you can use the {{}} syntax. For example to use the "Title" field from the CMS, you can type {{Title}} in your Custom Code field. In the case of JSON-LD, you can use the syntax of {{Title | json}} to automatically ensure your field is json-safe and to have it wrapped in in the proper quotations.

As an example here we are adding markup for Breadcrumbs.

Then in web inspector on the published site we can see our {{Title | json}} fields were transformed into the appropriate data for each page.

Note: Support for Images Variables from the CMS is coming soon

Verifying your Structured Data

After you've setup your structured data and published your site, you can verify that everything is set up correctly using the Rich Results Test tool. In this case we validate the breadcrumbs data we added in the previous section, and the tool tells us that everything is working correctly.