The Complete Guide to Schema Markup in Webflow

What is Schema Markup?

Schema markup (or structured data) is a code that resides within each website (or some webpages) in order to make the eligible for dynamic search results, or what Google calls "Rich Results".

What Google has to say about schema markup:

"Google Search works hard to understand the content of a page. You can help us by providing explicit clues about the meaning of a page to Google by including structured data on the page. Structured data is a standardized format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on." - Google

Note that these details must be structured in a very specific way for Google to read the schema markup codes properly.

Schema Code & Schema in SERP Examples

Events

Here is an Event schema markup code we (the Labate Group) use for our Events page:

This code produces the following SERP (search engine results page) feature:

Review Snippets

Here is a schema code for a Review snippet that Zillow.com uses for the reviews of real estate agents they have on their site:

This code produces the following SERP feature:

There are many different kinds of schema markup marketers can use on their page, in order to stand out in the SERP. There have been stories about CTRs (click thru rates) improving by a whopping 100% (2X) under certain circumstances, such as in the Eventbrite case study by Google or even by 450% (4.5X) as outlined in the ZipRecruiter case study by Google.

JSON-LD or Microdata

Because schema markup is a code that resides within a webpage, it must be written in a programming language. JSON-LD and Microdata are two primary ways to implement schema markup on a webpage.

When comparing which method to use, JSON-LD is the clear winner in Webflow. JSON stands for JavaScript Object Notation (simply the notation of objects), and is structured in a very simple hierarchical way, therefore easy to understand and keep track of than Microdata. The schema code examples above are written in JSON-LD.

Microdata is the annotation of actual HTML elements, instead of running a JavaScript script. This makes the managing of the microdata method can become very overwhelming, and easily to lose track off, especially if you are making lots of changes to the HTML in your site.

Visit the Schema.org page about microdata learn more about microdata, but this guide will focus on JSON-LD (Google's recommended way to implementing schema markup).

Syntax & Valid Values

Because all schema markup (including JSON-LD) is a form of code, it must be written with proper syntax in order to be recognized by Google and other search engines. The code has to be structured, and written in a specific way. In order to product a valid schema code, understanding the valid schema types, the valid attributes of those types, and the valid values for those attributes is a requirement.

Types include some of those listed above such as Events, and Review snippets. Attributes those types contain are "name", "url", "id", "about" etc. The values that reside within those attributes may include a time, a place, plain text, a number, a boolean (true/false), etc.

This means, even if you want Google to dynamically display how your rubber ducky is "gettinMoney", and is a "littleCranky", you won't be able to do it, sorry.

As far as getting familiar enough with the syntax, You may be able to get away with just copying and pasting a JSON-LD schema template from Google's examples (read on to find the list) and just filling in your own values, but to get a better understanding about how JSON-LD works, check out Moz's JSON-LD for beginners guide.

Using CMS Data as Schema Values

Webflow's integrated CMS allows for some great use cases. One of which is the ability to use the data in each CMS collection as schema values in the schema markup page templates. We can fill schema data dynamically! This saves a lot of time, and can complete automate schema generation by filling in CMS data (more on this later).

We all use the most basic CMS fields like name, slug, image, description (a text field) etc. These values can and often do constitute accurate, valid, and coherent schema markup attribute values.

Once you have an understanding of the types, the attributes, the values, and the relationships between them, you can begin to place the CMS variables in the schema values.

Ensuring Valid Schema Values Beyond CMS Data

Not all CMS data will be enough to fill all schemas values properly. This causes an obstacle when relying on only pre-made schema templates with CMS data used as schema values. This can cause another problem as changing the schema template for a single page in order to fix any missing data will change it for all pages the schema code for for all pages in the collection. However, there are some workarounds to solve this. You can create CMS collection fields that cater specifically to fill schema markup values, and can be left entirely on the back end if needed.

"eventAttendanceMode" of "Event" Example

Taken from the example in the image directly above, the attribute, "eventAttendanceMode", note it's value consists of both a CMS field variable, and the static text, "EventAttendanceMode". We created this because a value for the attribute "eventAttendenceMode", must be one only 3 accepted values. The accepted values are, "OnlineAttendanceMode", "OfflineAttendanceMode" and "MixedAttendanceMode".

Because of thi,, we created a field called, "Event Attendance Mode" in the CMS under our Events collection. The field is a drop down menu containing the first word of those 3 accepted values, "Online", "Offline" and "Mixed". By placing the the value of this variable in front of the text value, "EventAttendanceMode", we are are to produce both a valid schema value, AND a UI/UX-friendly CMS field that can be used on the front end of the site (an "Online", "Offline" or "Mixed" event).

"totalTime" of "HowTo" Example

Here is another example of using both static and CMS data to make up the "totalTime" variable in  the HowTo schema:

This schema attribute only accepts values in the temporal duration format (a specific time format). To simplify filling this value from CMS data, we added the text "PT" in front of the dynamic time variable in the event template, but also added to the "Help text" in that same CMS field. We filled the Help text with examples of what would be acceptable values. This is a great way to remind yourself to enter values in accepted formats, and would also help when outsourcing or having employees fill in CMS data. In this case, the values in this field would not be as UI/UX friendly as the previous example, so this would be a back-end variable only, and just be used for schema purposes:

In short, ensuring each schema markup code is complete entirely from static text, and CMS data can be done with a little outside the box thinking.

Global / Page-Specific Schema Merging with JSON-LD

Schema markup can be added in any section of a webpage that allows for custom code when using JSON-LD. We recommend adding it in 2 places. The first place is as the last item (after Google Analytics and other codes) in the global head code for your Webflow project. Placing a schema code here means it will be in every page of your site.

Although you can create and end a full schema markup script in the global head for each page, if your attentive to detail, we have another option for you.

Be keeping your JSON-LD schema code incomplete in the global head, you can customize the schema code on each page (both static and collection pages) while maintaining a few global schema types across the site. In order to do this, use "@graph" function available. This allows JSON-LD users to create a list of non-nested (all top level) schema types within a single script.

End the global schema script after a comma after ending the last schema type in the syntax.

Be sure the start another schema types as the first item in the head code of all your static pages or collection pages.

This can be done because Webflow places the custom global head code directly above the page head codes. If done correctly, your code will be read as one complete script, saving you the troubling for loading a global schema and a page schema script for each page (reducing JavaScript scripts).

So, the structure of the blended code between the global head and page/collection heads should look like this:

NOTE: Do this with caution! Be sure you understand the syntax before tying this! Always be sure to validate your code after publishing.

Other Recommendations for Schema Markup in Webflow

Recommended Types for a Global Schema

Because schema markup can be placed both in the global head code section, and in page-specific head code sections, you may want to consider which types of schemas should reside with the global head, and would make sense to appear in all pages on your site.

We recommend a WebSite schema (for the purpose of utilizing the Sitelinks Search box which must reside within the WebSite schema type), Local Business or Corporation or Organization, Store, etc (whichever property best fits your business)and a Logo.

Recommended Types of All CMS Pages

Breadcrumbs‍ and FAQPage (or a WebPage if your page/collection cannot utilize Questions & Answers, which is a mandatory value of FAQPage).

Types of Schema Markup Google Recognizes

Schema.org outlines all schema types used on the web. However, the types of schema markup Google recognizes when displaying dynamic search results, is limited to the following:

‍Article, Book, Breadcrumb,‍ Carousel, Course, COVID-19 announcements, Dataset, Education Q&A, Employer Aggregate Rating, Estimated Salary, Event, Fact Check, FAQ, Home Activities‍, How-to, Image License, Job Posting, Learning Video, Local Business‍, Logo, Math solvers ,Movie, Practice problems, Product,‍ Q&A, Recipe‍, Review snippet, Sitelinks Search box‍, Software App, Speakable, Subscription and paywalled content and Video.

Google has pages on each of these accepted schema types, and they are very detailed. For more information on syntax, mandatory fields, access to code templates and more, visit each page.

Google does read and utilize other types as defined by Schema.org for the purpose of understanding the content on a page, however this does not affect dynamic search results, only the specified types listed above will product rich results. Google outlines visual example of what each schema type looks like on each corresponding page.

Validation and Monitoring

The Schema.org Validator is great for checking syntax structure as well as both Google and non-Google recognized schema types, however Google's Rich Results Test will check the syntax, as well as the missing of mandatory fields, the missing of optional fields as recognized by Google.

In Google Search Console under the "Enhancements" tab, you will see a list of schema types Google has recognized on your website (you may not see the tab if Google has not detected any schema on your site).

Here you will see the schemas detected by Google that have "Errors" (not showing in SERP), ones that have "Issues" (showing in SERP under some circumstances), and "Valid" (fully approved by Google).

If an item has as an "Error" or an "Issue", you will be able to see when it was detected, as well as the type of problem Google is detecting with it. Once you have believed you have solved the issue in your schema, republish your site, and click "Run Validation" to confirm the problem is resolved. It may take a few days or a week for Google to confirm.

Google is known to detect schema both over a period of time (few days to a few weeks), and incompletely (as far as being displayed in Google Search Console), so be patient.

Conclusion

Schema markup in Webflow can be a huge asset to the platform! By undering the nuances of the JSON-LD schema syntax and how to structure your CMS data to complete (or supplement) attribute values, you'll be a Webflow schema pro in no time!