Understand structured data, its SEO benefits, and how to easily implement schema markup on your website for better indexing, visibility, and rich results.

Structured Data in 10 Minutes or Less

Taking SEO (Search Engine Optimization) into account when building your website is an essential part of your end user’s business strategy. It helps improve the quantity and quality of visitors and makes the site rank better in Google’s recommendations to create trust and credibility. 

When building a site that’s optimized for SEO, you’ll explore topics like improving Core Web Vitals, using the most optimized technologies, and more. When you reach more advanced levels of SEO optimization, you’ll likely encounter the idea of structured data — special type of information you can provide in your website’s code to help search engines better understand and display your content.

Today, we’ll dive into understanding what structured data is, what it helps with, how it works, and how you can implement it on your website.  

Structured data, which is an implementation of schemas, is specially formatted data that helps search engines easily find information about and understand the type of content on your website so they can index and display it correctly in search results. Some types of structured data are even used to create “rich results,” which are the visually enhanced search results that you sometimes see when using Google, for example. They’re based on schemas, which are data types that many search engines have agreed to recognize in order to create a shared language for crawling and understanding the internet.

In case you are not familiar with structured data, it’s made up of JSON data structures, defined through a set of commonly agreed-upon schemas. You add these structures within the `<head>` tag of your website (ideally) or within `<script>` tags elsewhere on a page. There are specific JSON data structures that Google and other search engines use to understand a variety of content types. Some examples include:

For a full list of structured data that Google recognizes, check out this resource.

Because these data structures clearly identify which information you’re providing to the search engine, and they do so in a consistent manner, it’s easier for search engines to understand information about a page (e.g. with an article, the title is always found under “headline” in the data structure, so it’s easy to pull that information for search results).

Let’s look at an example to see structured data in action: imagine you write for a cooking blog and add structured data to each recipe.

When a user does a search about recipes, your page’s structured data will help search engines understand that your content is a recipe and create specially formatted results, like the cards below, when users search for recipes specifically.

It’s important to note that most types of structured data that Google, for example, recognizes also have guidelines for the content they contain and how they’re used (for example, here are the content guidelines for recipe structured data). If these guidelines aren’t observed when using this markup, Google might flag you for using it in a “spammy” way, and at a minimum, search engines aren’t likely to implement rich results based on inappropriate use.

Adding structured data to your website is beneficial for SEO because it makes it easier for search engines to understand your content, and rich results often appear at the top of search engine results pages, thus outranking others more easily.

In other cases, such as when adding FAQ structured data to a page, you’ll find that your search result takes up more visual space than others, making it more prominent and, thus, more clickable. Here’s an example of how we’ve used FAQ structured data to enrich the search results for our blog.

Improving clickability in this way can help your content improve its ranking steadily over time.

Whether a website needs structured data or not can depend on its business goals. However, if one of those goals is to generate organic traffic, it’s worth exploring whether there are any structured data types that work for your content. Google provides a great guide to all of the possibilities, along with previews of how a given data structure might enrich your search result.

One of the most common structured data types that you’ll see is the article type, which is used for news or blog articles. It’s used to help search engines display information that’s useful about a given blog. Here’s an example lightly adapted from Google to show what an article’s structured data might look like.

How can you add structured data to your website?

Adding structured data to your website has two essential elements:

First of all, you’ll need to add the appropriate JSON data structure to your webpage. In fact, to get the best results with structured data, you probably want to provide an interface in a CMS that allows users to easily add and update structured data without editing the code manually every time.

Secondly, you or your team need to update the content of each page to be sure that it adheres to the content guidelines for the type of structured data you’re trying to use.

Depending on your website, there are multiple ways you can achieve these steps. We’ll list a few approaches below.

It’s worth noting that if you’re interested in investing in the SEO of your website and you haven’t heard about headless content management systems yet, it’s a topic you should explore. Headless products allow you to accomplish maximum technical SEO optimization on your website, and a headless website builder like Prismic can then help you create rich content experiences that ultimately enhance your on-page SEO.

Using a headless content management product

With headless content management products, your website is divided into a few key components. There’s the content management system (which could be a headless website builder like Prismic), and then there’s the front end of your website. With Prismic, you can create a customized page builder interface that makes it easy to add and update structured data, while using our API to connect the data to the fully custom and optimized front-end code of your site.

So, if you’re using a headless product, setting up structured data is relatively simple. You’ll simply need to

Add the appropriate custom fields to your page templates. With Prismic, you can do this using Slices, which are essentially building blocks that are available within your custom page builder.

Then ensure that you use the dynamic data in the front-end code of the website through our API.

Here’s a complete guide on how to implement structured data with Prismic.

If you’re not yet ready to invest in the benefits of a headless product for your SEO and your website is currently powered by WordPress, your best bet is to use a plugin.

It is possible to manually add structured data within WordPress using `<script>` tags and free online tools that will generate the data for you, but this method isn’t recommended because it will be difficult to manage and update your structured data later on. From time to time, there are updates to how structured data is formatted, which a plugin is likely to help you manage, rather than you needing to manually find and update every schema JSON you’ve ever added to your pages.

Here’s a guide to the top plugins for adding structured data to your website.

All in all, structured data can help your team take your website’s SEO to the next level. While implementing it can be relatively simple, it’s important to do so in a scalable way to minimize the impact of future updates to the schema formats. It’s also important that you’re mindful of following content guidelines like Google’s for each schema because using them improperly can, at best, make search engines not use your structured data, and at worst actually negatively impact your SEO.

Quickstart: Understand Structured Data in Less than 10 Minutes

If you're just starting your journey with the magic of APIs, Postman will soon become an invaluable tool for you. Get started with API testing using Postman in this short tutorial.

A 6-Minute Introduction to API Testing with Postman

We’ve seen some awesome APIs we could test out so far in our series, so now we will learn how to test APIs using Postman. If you're not sure what an API is, we recommend you read our previous guide to get an excellent overview.

We chose Postman because it makes API testing easy. It is an intuitive platform with many options. It helps you to have a visual reference of how API calls are made to servers with queries. It is important to learn these concepts when we are learning front-end so you can explore and leverage APIs in your projects more easily.

Postman is an API development environment tool that’s great for learning how to use APIs in a simple and professional way.  It helps you organize queries, test them, and visualize the lifecycle of an API call.

You can use it in the browser or download the desktop app. Download it from Postman’s official page.

Now let's learn how you can run an API on Postman. Open the app or the website. You will see that there are many elements with which you can interact; let’s look at the more frequently used options so you understand the interface before diving in.

The first and most important element is the request URL field. This is where you paste your API endpoint URL.

In the upper left corner of the center Scratch pad overview, click the + button to open a new work area and set up your calls. Here’s a preview of how the Dashboard looks in the desktop app:


As we have already seen in the post on how APIs work, we know that they allow us to request data structures that we use in our apps.

Requests in your code can be made with many languages and structures, but in general, they happen as follows: you give your application an API endpoint and a query request written in REST or GraphQL. When the query request is sent, it communicates with the server with a CRUD HTTP request method that enables you to interact with the content of the API.

Requests in Postman are made similarly but in a more didactic way. Here we will see the list of the most commonly used methods:

`GET` retrieves content that is read-only

`POST` allows you to write new content or update the existing one

`PATCH` or `PUT` allows you to update existing content

`DELETE` helps you delete content from the API

The server then receives the request and returns a response, usually in the form of JSON.

Each API has requirements or specifications that are unique to each endpoint. Each API usually has its own documentation that tells you what kind of options you have for making your queries.

To provide the required options, there are three tabs in Postman’s requests dashboard that you will use more frequently: Params, Auth, and Headers. These are optional values that you can pass to your API.

Params and Headers help you make your request more specific and authentication is used to access private APIs that require tokens.

Status codes are a series of standardized three-digit codes that represent the status of a response. They tell you if everything is fine or if there is an error with your API call. For example, 200 means that your response is correct, 400 that your request failed due to an error in your configuration, and 500 means there’s an error coming from the server.

You can learn more about status codes here.

Once you gain experience using Postman you will find it very useful to use other organizational elements. These options allow you to structure your projects if you have more than one endpoint, if you have lots of queries, and if you work with a large team.

Environment Variables: they allow you to group a set of values that you can reuse in your requests. They help you not to repeat information and to have order when managing the access of the data in your team.

Collections: they allow you to group your requests. They are useful when you want to separate them by application, by feature, etc.

Now let’s use our understanding of the Postman interface to make our first request. In this example, our goal is to retrieve a successful 200 status code API response. Let's see our to-do list:

Add the URL of our endpoint. In this case, we will use an API that comes from Prismic.

Create a request to bring the documents that we need.

Prismic is a headless website builder that allows you to build the structure of your own API and add content to it through the Prismic editor. Learn more about this tool and how you can create your own endpoint here.

In this example, we’re going to use a test Prismic API endpoint that’s already configured for you. This endpoint delivers data that a content team created in Prismic’s editing interface for their website about an online coffee shop.

We are going to use REST API parameters to filter the response. Click the + button to open a new request window and paste the following endpoint in the request URL field.

Then, in the Params tab add the following values. Add `ref` as key and `YpDsxRAAAB8Auuom` as value. It should look like this:

Click Send. Go to the body tab and you’ll see a successful 200 status and the JSON response. 

Congratulations you just made your first Prismic API call in Postman!

Now you know that your endpoint works. So far the JSON response showed us the first 20 items of the API.

Items or “documents” are individual content entities. These structures help us separate, for example, the content of each blog post or article on a website, or the information of each user or author profile.

Now we want to get something more specific. Let’s retrieve all product-type documents.

In a new key add a new parameter. Type `q`  as the key and the following code as the value:

The value snippet may seem somewhat confusing. This is an encoded text string that can be read by the endpoint's URL. If we decode this in a URL Decoder/Encoder we can see the actual form of our query:

For now, what you should know is that this query will help you separate the items or documents that are of the product type from those that are not.

In Prismic terminology, types are the models that shape “documents”. They are useful because each type of content needs a different structure. For example, the format to write an article will not have the same input fields as a format to write the homepage of a site, or a list of products, a table of contents, etc. In our example, we just want the “product” type so that we can access product content.

Click, Send. That's it! The result should return a successful response and a JSON with 10 items of the type “product.”

JSON is the favorite data structure of JavaScript. It is extremely easy to read and consume. If we see the response that our API has given us, we can see within the `data` node that we have a lot of information. For example, the `url` of the `product_image` field takes us to this image:

And one node further down in the `product_name` text field we can read: `“Immersive Brand Experience”`. This is how you’ll read and consume APIs to build your site or application.

After calling an API the last thing that remains is to save the content of the response and render it. Here you can see an example of how you can create a site with the API endpoint that we just tested:

Now you know how to test and read the content of an API using Postman. Below you can also read our post about cool APIs you can try with Postman to keep putting everything you've learned into practice.

Deliver a website with a visual Page Builder for your marketing team

Paulina Gavilán

Quickstart: Understand Structured Data in Less than 10 Minutes

A 6-Minute Introduction to API Testing with Postman

Deliver a website with a visual Page Builder for your marketing team