What is schema markup?

Schema markup, often referred to as structured data, is a semantic vocabulary of tags that people can add to their HTML to improve the way search engines read and represent their web pages in search results.

In layman's terms, it’s a piece of code you add to your website’s tag to give search engines like Google a better understanding of your page and give your page a chance of getting featured in rich snippets.

Let’s look at an example to better understand how schema markup works.

Let’s say you have a recipes blog and decide not to use schema markup. Here’s how Google will show your recipe in the SERP:

But if you do have a schema markup, here’s how they will be shown:

Which one are you more likely to click on? I think we both know the answer.

Schema markup is often associated with SEO, but does it actually help you rank higher?

Does schema markup help with SEO?

Yes, schema markup is definitely beneficial for SEO. Not because it directly impacts your ranking position, but because there are two indirect benefits of using it.

First, it can enhance how your page is displayed on search result pages and give you a higher chance of attracting clicks, which will still result in more traffic.

Secondly, a higher click-through rate (CTR) is generally considered one of the signals Google uses to determine whether users like your page, which could slightly improve rankings over time.

All in all, adding schema markup is definitely beneficial in terms of SEO.

Now, let’s look at different types of schema you can implement on your website.

Types of schema markup

Not all pages need structured data. And even if you could find a suitable schema for every page on your website, it’s definitely not necessary or beneficial.

So, let’s quickly go over a list of the most common and useful types of schema that Google currently supports:

Article

This schema type is used to mark up articles, blog posts, news stories, and other types of written content.

It includes properties for the headline, author, publication date, main image, and article body.

Using this type of structured data helps search engines understand the structure and content of your articles, potentially leading to enhanced presentation in search results with rich snippets.

Here’s how the news featured snippet looks like:

Product

The product schema marks up (physical) products sold on e-commerce websites.

It includes properties such as name, description, brand, price, availability, and reviews.

Product snippets are one of Google's most used schemas and can help you win a lot of real estate in the search result pages.

Here’s an example:

Organisation

The Organisation schema is used to mark up information about an organisation or company, including its name, logo, contact information, and social media profiles.

It can help Google better understand all the information regarding your organisation and display it in a big rich snippet box on the right side of the search results.

Here’s an example from Framer itself:

Recipe

This schema type is used to mark up recipes, including details such as ingredients, cooking instructions, preparation time, and nutrition information.

I’ve already shown an example above of how these rich snippets look in search engines, so I won’t re-upload the same photo again :)

FAQ

The FAQPage schema marks up frequently asked questions (FAQs) and their corresponding answers on a web page.

This is not to be confused with the “People Also Ask” question.

Here’s an image to better understand the difference:

How to add schema markup to a Framer website

Now that you understand what schema markup is and the most popular types, let’s look at how you can implement it into your own Framer website.

Framer only supports adding schema through JSON-LD, which is also what Google recommends, so we’ll use that.

And don’t worry - you don’t need any technical knowledge to write it. I will show you a tool that creates the markup, so you just need to copy and paste it.

So, here’s a step-by-step guide on how to implement it:

Step 1: choose the kind of schema you want to use

The first step is to choose the schema you’ll use on each page.

While I’ve shown you some of the most common ones, that’s not to be considered a complete list.

For reference, here’s a list of the 35 schema types Google currently supports.

As I mentioned, not every page needs a schema markup. So, if you don’t find one that suits your case, move on to the next page.

Step 2: write the JSON-LD script

The second step will be to write the JSON-LD information you want to place into your page’s tag.

To do that, I highly suggest you use this free online schema markup generator.

Just select the kind of schema you want to implement, and it will guide you through the whole process.

Important note on referencing images:

Currently, there’s no easy way to reference images from the schema markup in Framer. To solve the problem, I’ve come up with two possible workarounds:

1. Publish the page first and then copy the URL.

   → If you want to keep everything limited to Framer, you can publish the page first and then use the developer tools to see at which address the page is being stored. Once you know that, come back to the schema markup and hardcode the URL.

   
   

2. Use an external CDN.

   → Otherwise, you can store and serve your images with an external CND. I personally use Cloudinary, as their free plan is very generous (not sponsored). To use it, sign up for a free account, upload the images, copy the URL, and paste it into the schema markup.

Step 3: paste the schema in the <head> tag

Once you’re done creating the schema, copy and paste it into your page's tag.

To do that, go to site settings, select the page to which you want to apply the schema, paste it into the <head> tag, save, and publish your changes.

Once you’ve done that, it’s always best practice to ensure everything works fine.

Step 4: validate the schema

To validate the schema, open this simple schema validator and paste the URL of the page you want to test.

If you see 0 errors and zero warnings, congratulations! Your schema markup is working as intended.

Now, all you have to do is repeat the whole process for every page, and you’ll be done.

Schema markup for CMS pages

Writing schema markup for static pages is relatively straightforward. However, the process gets a bit trickier when the page is CMS-generated.

If you want to create a different schema markup for every CMS item, you’ll have to reference specific fields from the schema using this syntax:

{{ FieldName | json }}

For example, here’s what the schema markup for my blog looks like:

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BlogPosting",
      "headline": {{Title | json}},
      "articleSection": {{Category | json}},
      "description": {{Description | json}},
      "inLanguage": "en-US",
      "image": {{ImageURL | json}},
      "datePublished": {{Published | json}},
      "dateModified": {{Modified | json}},
      "author": {
          "@type": "Person",
          "name": "Luca Da Corte",
          "url": "https://www.dacorte.dev/about"
        },
      "publisher": {
        "@type": "Person",
        "name": "Luca Da Corte",
        "url": "https://www.dacorte.dev/about"
      }
    }
</script>

As you can see, I reference six different CMS fields:

• Title

• Category

• Description

• ImageURL

• (date) Published

• (date) Modified

Due to how schema works in Framer, you’ll probably find yourself adding CMS fields just for the sake of being able to reference them from the schema markup.

For example, the “ImageURL” field I use in my structured data is created appositely for that.

My advice is not to get too fancy with it. Just include the most important information, or your CMS collection will soon become a mess.

How to add schema that is longer than 5k characters

Framer imposes a limit of 5k characters for scripts placed inside the <head> of each page.While this is a great limit to avoid making the page too heavy, it sometimes can get in the way of long schema markup.

So how do you work around that? The answer is a simple code override that appends your schema to the head of the page dynamically.

Before I show you the solution, let me quickly debunk a common myth: that search engines don’t run JavaScript. That used to be true — but today, search engines (especially Google) have evolved and do execute JS on the page. In fact, adding schema via JavaScript is a supported method, documented in Google’s own guidelines.

If you want proof, feel free to test this example website with any schema validator — you’ll see that it correctly detects the schema even though it’s added via JavaScript.

Now, here's the override you can use to add schema markup with no limits to your pages:

import { useEffect, type ComponentType } from "react"

export default function SchemaInjector(Component): ComponentType {
    return (props) => {
        useEffect(() => {
            const script = document.createElement("script")
            script.type = "application/ld+json"
            script.textContent = JSON.stringify([
                
            ])

            document.head.appendChild(script)

            return () => {
                document.head.removeChild(script)
            }
        }, [])

        return <Component {...props} />
    }
}

All you have to do is:

1. Create a new code override in your project

2. Paste the snippet above

3. Paste the schema markup inside the square brackets on line 9

4. Apply the override to any element on the desired page [even the page itself]

5. Publish

And voilà! Here's also the remix link of the remix link of the example website if you need some hands-on reference 👉🏻 https://framer.link/zBdMtcj

Conclusion

And that’s it for the tutorial. I hope you liked it.

Thanks for reading!

- Luca