How to add schema markup in Prismic

Prismic Administrative Support FAQs
1

Schema markup is a standard for structuring data in web pages, it helps you improve your website's SEO and help search engines crawl and display your site on their results page.

The official website schema.org contains a vast collection of documents that explain how this semantic vocabulary can help you improve your website's SEO and thereby your pages' positions in search engine results.

1. Get your structured data

Schemas come in different shapes, but the final format you'll need to add to your code is a JSON-LD <script /> that you can add to your page's head element.

Create a custom <script> by using a third-party service, such as the following two:

  • Google's Structured Data Markup Helper allows you to interactively create your script. Just enter your website URL and click each element to assign it to a value in the script.

  • Schema Markup Generator lets you create your script by filling in the characteristics and details of your project.

This is an example of a script. This one was created for the prismic.io official website:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Project",
    "name": "Prismic",
    "alternateName": "Prismic.io",
    "url": "https://prismic.io/",
    "logo": "https://prismic.io/_next/static/images/logo-dark-f98ec8a4cf11fdbabf59573cfe3c409f.svg",
      "sameAs": [
        "https://twitter.com/prismicio",
        "https://www.youtube.com/channel/UCJq6AEgtWeZt7ziQ-fLKOeA"
     ]
   }
</script>

2. Add a field for your script

Add a Rich Text field that only allows preformatted text to your Custom Type. Here's a guide that explains how to do it: Adding Custom Embed or HTML code. You can use this example and paste it in the JSON editor of your Custom Type builder:

{
  "Main":{
    "schema_script":{
      "type":"StructuredText",
      "config":{
        "multi":"preformatted",
        "label":"schema_script",
        "placeholder":"schema_script"
      }
    }
  }
}

Save your changes and then go to the Documents tab to add your script.

3. Add it to your code

Now, after querying the API in your project, render the schema field as HTML.

In React, you can use Richtext.render method to transform the field into HTML code and add it to your page's Head. Here's an example of how you'd do it in React:

// In a React component
const schemaMarkup = () => {
  return <head>{RichText.render(document.data.schema_script)}</head>
}

4. Test your results

Now, the fun part. After your project is deployed and live you can go ahead and check how your markup is being re. There are many tools online to do so, but we recommend using Google's Rich Results Test.

And you're all set, your project is now ready to start generating rich snippets for the users to find!

2

Threads close after a period of inactivity. Flag this thread to re-open it and continue the conversation.