Schema markup is a standard for structuring data in webpages. 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
You can easily 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:
2. Add a field for your script
There are many ways of doing this. We suggest two.
Firstly, if you need multiple scripts throughout your site, you can add a Rich Text field that only allows preformatted text to your Custom Type. Here's a guide that explains you how to do it: Adding Custom Embed or HTML code.
Second, you can create a singleton Custom Type, with the same Rich Text field. This way, you will only have one version of it for your whole website. You can use this example and paste it in the JSON editor of your Custom Type builder:
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
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 read. 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!