-->
3
min read

Intro to Structured Data, and Rich Snippets

Written by
Search Historian
Edited by
Emanuel Skrobonja
TL;DR: 
Schema markup (structured data) is important for SEO because adding schema is like talking about your website content directly to search engines. HTML doesn’t explain what type of data any element is, adding structured data will allow you to “talk to crawlers” by classifying page content and providing more information about different data on your site.

What is Schema Markup?

Structured Data (Schema Markup) is a special type of code markup language on your website that allows search engines to understand your information better.

Search engines can use this data to display your content in rich formats like this:

Rich snippets

Here’s an example of a rating (review) schema implemented on a website (second result) and not implemented (first result):

Rich snippets

As you can see search engines show review count and average rating if you set up structured data.

Is Structured Data (Schema Markup) Important for SEO?

Yes. Schema markup (structured data) is important for SEO because adding schema gives search engines more context about your content.

Think of it as an additional layer of information for search engines.

Adding structured data will allow you to “talk to crawlers” by classifying page content and providing more information about different data on your site.

You can tell search engines:

  • This is a comment
  • This is a review
  • This is our logo

And so on...

If you don't have schema markup, you can still get rich results, but it's less likely.

In other words, with schema markup, you're increasing your chances of getting featured snippets.

The most common structure data markups that Google supports

Here’s a few most commonly used schema markups:

  • Article (also there’s markups for how-to, FAQ, Q&A, course, recipe, etc.)
  • Image metadata (not to be confused with image alt text!)
  • Video (also movie, learning video, etc.)
  • Organization (called logo but also markups for local business)
  • Search box (sitelinks, but also breadcrumbs, datasets, etc.
  • Product
  • Review
  • Subscription/paywalled content

Check Google’s Search Gallery documentation on different structured data markups for more markups.

If that sounds like a lot of data to mark on your Webflow website, it’s because it is. Great thing is that if you set dynamic structured data for your Webflow CMS Collection, you will not need to change code every time, but CMS Collection fields will need to be filled every time. 

Schema.org

Be sure to check all structured data subtypes or visit schema.org to learn more about what structured data movement is all about. I promise you, this article is distilled to just the core parts to be as beginner friendly as possible - there are thousands of schema types and there’s so much that can be done with schema markup language.

Types of Schema Markups

There are 3 most common types of structured data code formats: 

  • JSON-LD
  • Microdata
  • RDFa

In Webflow, you can use all three of those.

We recommend using JSON-LD for everything except for lists of items.

For comment, FAQ, and review lists, it's best to use Microdata or RDFa, since you can't drop a collection list into the <head> of your Webflow site.

Setting Your Schema Markup

JSON-LD

Static Schema Markup in Webflow

Setting up JSON-LD is pretty straight forward, but the setup will differ slightly for static, and dynamic content.

For static pages, your schema should look like on the image above. To set up a static schema, follow this guide.

If you're dealing with CMS pages, your schema should have dynamic fields like this:

Dynamic CMS-based schema markup in Webflow

Here's a link to our step-by-step guide for setting up a dynamic schema.

Note that if you have a typo in your schema, it most likely won't be interpreted correctly by search engines.

Make sure to test your schema with Google's Rich Results Test or Schema.org's Validator tool. More on that later.

Microdata or RDFa

Adding Microdata to Webflow element

Both Microdata, and RDFa can be used in Webflow.

And, you can also use Google's Rich Results Test to test your implementation.

I recommend using this schema implementation for any kind of list content, either static or dynamic.

To implement Microdata or RDFa, all you need to do is add HTML attributes to your content.

If you're unsure where to add the attributes, you can always ask ChatGPT with a prompt like this:

Mock up a {{SCHEMA NAME}} schema with microdata.

Schema name would be the name of the schema that you're trying to implement, such as Review.

Then you can just go through the class names, and add your attributes.

Testing Structured Data

To test your structure data, use Google's Rich Results Test or Schema.org's Validator tool.

Here are the steps:

1. Submit Your URL

Google's rich text validation tool

To test your schema markup, all you need to do is submit your URL to any of the two testing tools.

2. Fix issues and/or Validate Your Markup

Google's rich text validation with bugs

If you encounter any issues, fix them one by one, and re-run the test until all the bugs are resolved.

Google's rich text testing tool with valid schema implementation

Common Bugs

With JSON-LD, the most common issue that I encountered are typos, such as missing a comma or quotation mark.

With RDF, and Microdata, there are two issues that are quite common:

  1. Scoping issues
  2. Tagging the wrong HTML item

If you're not technical, it can be tricky to identify bugs.

Feel free to use ChatGPT as a debugging assistant for schema issues, it can save you some time.