Home
/
Blog
/
Schema Implementation on Webflow Site: How to Implement Your Schema Markup Right?
Schema Markup Graphics

Schema Implementation on Webflow Site: How to Implement Your Schema Markup Right?

Publish date
December 20, 2023
Author
Team Marketechy
Category
Structured data markup improves search visibility and increases CTR.
Table of contents

Whenever you check with the updated SEO checklists, you can see Schema markup prominently features there year after year. And no wonder as structured data markup improves search visibility and increases CTR.

So, continuing our SEO series, we would like to introduce you to key considerations that should help you add schema markup error-free and make the most of it in terms of SEO. On top of that, we’ll focus on specifics of Schema implementation in Webflow websites and highlight the go-to approaches that can save you loads of time. Well, let’s get started.

What Is Schema Markup, and How Does It Help Your SEO?

Shema Markup is a microdata in a form of code snippet allowing search engines to identify the type of web page content, categorize it, and deliver more informative search results. Shema.org library of structured data appeared as a result of collaboration between major search engines to instruct webmasters on how to implement structured data code into HTML.

Schema markup follows a certain vocabulary and contains specific identifiers to add machine-understandable context to HTML code:

  • ItemScope. This tag conceals the subject of an HTML container.
  • ItemType. It’s an attribute that extends the ItemScope and specifies the type of item. Such can be “Product”.
  • ItemProperty. Property attribute defines a particular feature of an item. For “Product” items, we can set aggregateRating, brand, size, and many other attributes.

As the outcome of global Schema implementation, we can now see search results filled with rich and featured snippets like knowledge graphs, product carousels, Local Business snippets and others. Their power is immense as they allow site owners to deliver immediate value in response to user’s search queries. 

How Does Schema Implementation  Benefit SEO?

Schema implementation drives the appearance of featured and rich snippets on SERP. These are essential contributors to overall SEO performance as they deliver:

  • Improved brand exposure. Featured snippets occupy SERP Position Zero above the rest of the organic results. When your page makes it to Rich Results, it is a fairly advantageous position that yields massive impressions.
Featured snippet vs. rich snippet - screenshot
  • Improved CTR. While structured data markup isn’t one of the ranking factors, it fosters a higher click-through rate, which contributes to SEO rankings directly. A study from the Search Engine Journal found that rich snippets got a 58% higher than average CTR. Those containing branded keywords did slightly better with 60% higher CTR.
  • Higher search visibility. Search visibility is an essential SEO metric indicating to which extent your website owns the SERP. It is directly proportional to the number of:
  • TOP-ranked domain URLs
  • total number of indexed web pages
  • number of pages with high rankings for keywords with high search volume.

Since featured snippets occupy top positions in SERP, website visibility will go up immediately in case of correct schema implementation. If you complement it with properly placing frequently searched keywords and well-laid link building, visibility gains would be even better.

  • Increased site traffic. More click-throughs mean more organic site traffic, meaning more people discover your brand, engage with your content, and embark on their online buying journey. Get additional insights on how to make the latter seamless from our digital marketing funnel optimization guide.

How Does It Benefit Users?

Apart from that, there are the associated benefits of Schema implementation for website visitors:

  • Eye-catching results. Search snippets built from Schema markup code make your links stand out among other search results. Take, for instance, rich results based on Product markup. These contain non-textual elements like slideshow images, star ratings based on Google reviews, and delivery options. Those are both visually appealing and informative.
Product snippets appearance in SERP - screenshot
  • Disclosure of site features and contents. Featured snippets with Google Site Links inform users of what they can find on the website and navigate directly to the category that interests them. Note that this type of featured snippet is triggered strictly by branded keywords and demands a unique brand name.
Company featured snippet triggered by branded search query - screenshot
  • Improved user experience. The search engine results page provides an initial impression of your website. Therefore, Schema implementation contributes to the user experience from the start, and you can enhance it before they even enter your website. As for fine-tuning your website UX, you can properly optimize the conversion funnel by adopting our CRO guidelines.

Key 9 Types of Shema Markup Entities

As of 2023, Google supports 32 types of structured data markup entities. But let's focus on those of particular interest for B2B companies.

1. Product

Product markup backed by Schema implementation informs users about products in your online store directly on the search results page. Note that Review markup can boost the CTR of product cards featured in SERP, and a high user ranking can prompt purchase decisions.

2. Local Business

With Local Business structured data, a knowledge panel appears when people google your organization's name online or search it via Google Maps. This featured snippet includes:

  • Physical address
  • Work hours
  • Link to the website
  • Star rating from Google Business ProfileGMB and list of top-rated reviews

*Since July 2022, Google My Business was replaced by Google Business Profile 

Here’s an example of a perfectly structured and informative Local business panel by a commercial cleaning company:

Example of Local Buisiness panel in SERP - screenshot
Products section of Local Business panel - screenshot
Google Reviews displayed in SERP - screenshot
Local Buisiness panel's Carousel section in SERP - screenshot

3. Learning Video

With Learning video structured data, your educational content can achieve unparalleled visibility in SERP. Apart from the video link, this rich snippet displays a sequence of video chips representing the chapters and subtopics covered in this material.

Learning Video snippets are great for growing your website visibility and relevancy for mid and low-volume keyword phrases, allowing you to meet narrow user intents. However, you should note that Google displays Learning Video snippets only for English search queries.

Learning video featured snippet - screenshot

4. Sitelinks

Sitelinks markup adds extra navigational links to search snippets. As we mentioned before, this featured snippet gets triggered by brand searches. Therefore, first-timers instantly grasp what products and services you have and click on the category link right away.

5. FAQ / HowTo

FAQ Schema implementation backs up rich snippets with a drop-down answer section related to common questions. Well, it used to before Google rolled out a new algorithm update that allows the appearance of FAQ rich snippets only for “a limited number of well-known, authoritative government and health websites.”

‍

FAQ Schema markup triggers featured snippet appearance - screeenshot

‍

The visibility reduction is now applied to HowTo structured data as well. It backed up featured snippets that appeared as text excerpts with direct answers to questions from a search query.

Featured snippet triggered by How-to search query - screenshot

According to Search Engine Land findings, HowTo snippets will only appear in desktop browsers.

That said, you shouldn’t let go of the structured data markup types. They are still going strong when it comes to informing search engines about the structure and relevance of the webpage content.  

6. QAPage

Although the rich snippet of the QA page looks similar to the FAQ page, these use different structured data markups.

QA Page markup triggers rich snippent appearance - screeenshot

QA pages contain topic threads where users can submit answers to other users’ or administrators’ questions. The common case of QAPage markup implementation is using product support pages to dispel customer concerns.

Google provides comprehensive guidelines for implementing QA pages, so it’s generally a no-brainer.

7. Article

The template for Article structured markup is rather flexible. It can be applied for blog posts, news, and announcements. It helps search engines build more informative snippets by differentiating titles, article body text, images, authors' names, and publishing dates.

8. Service

Although Service Schema markup isn’t listed in Google’s structured data guide, it is widely used in e-commerce and B2B segments. Along with Local Business markup, this Schema item allows you to provide more details on your business location, specialization, and contact information. 

The main difference is that the properties of the Service entity mainly inform search engines on service specifics, so they consider your web pages relevant for commercial and navigation queries. However, property values won’t necessarily be rendered in rich results.

If you wish to delve into Schema implementation for Service entities, you can check the simple and concise guide from SchemaApp.

9. Organization Logo

Implementing Logo markup lets you connect brand search results with your company identity. In particular, displaying the company’s logo in the Knowledge Graph is necessary.

Organization logo appeared in SERP due to Logo markup - screenshot

10. Breadcrumb

Breadcrumb navigation bar is displayed in the search snippet right below the blue clickable link text. It represents the path to the indexed page from the main one, explaining the internal hierarchy of a website.

Breadcrumb Schema markup in Webflow and similar website builders is generated automatically. However, you’ll need to create proper taxonomies and connect them. You can find out more about that from Webflow’s guide on building a breadcrumb navigation.

This is where Marketechy steps in to develop a plan of work tailored to your growth marketing, metrics, and budget.
Talk to Us
White word balloon icon

Schema Implementation FAQ

Let’s cover some of the common questions about Schema implementation, syntaxis types, and code validation.

What Structured Data Formats Does Google Support?

Google currently supports RDFa, Microdata, and JSON-LD structured data markup syntaxes. Whereas RDFa and Microdata are, in fact, extensions of HTML, JSON-LD is JavaSript-based syntaxis that runs independently from the HTML code.

What are the General Guidelines for Schema Implementation?

Google prompts content managers and SEO specialists to fulfill quality requirements. The implemented markup items must match the type of content displayed on pages. Content quality and relevancy also matter as they facilitate better rankings. Have a look at our SEO checklist defining main content quality factors.

Spend a couple of minutes to read the full list of Schema implementation guidelines and ensure that you meet them.

Is JSON-LD More Preferable than Microdata?

JSON-LD edged out Microdata markup for a couple of reasons:

1. Less redundant code and faster page loading.

2. JSON-LD scripts can be inserted in any part of the <head> tag, whereas Microdata markup is hardcoded into the <body> tag. Item type and property must be inserted into corresponding tags as attributes. Consequently, developers can troubleshoot JSON-LD markup code without impacting HTML code, granting stable webpage performance.

Although Google openly states that JSON-LD is preferable for Schema implementation, there is no hard proof that it can impact organic SEO. However, it's a flexible, lightweight, structured data format that can greatly ease and speed up website development and maintenance.

How to Validate Structured Data Markup Code?

If you prioritize SEO performance on Google, you should test Schema markup code through Structured Data Markup Helper. This built-in testing tool is available for every authorized Google Search Console user.

But if your Schema implementation strategy pursues higher rankings in Bing, you should pay attention to URL inspection reports. It contains the Markup card with the results of code inspections for different markup types. Click on any list item, and you’ll see details on structured data issues.

Schema markup issue report in Bing's URL Inspection - screenshot

Last but not least, both developers and non-tech specialists can always rely on Schema.org’s Validator if they want to scan markup code for errors and correct them. This resource provides comprehensive documentation that users can always dig into to look for a tip.

How Do I Add a Schema Markup to My Webflow Website?

Schema implementation for Webflow websites is a no-brainer. You can insert JSON-LD scripts in the corresponding Custom Code sections in Designer. So, this is quite similar to the embedding the Google Tag Manager tracking code we described in our guide to Webflow SEO features.

Let’s see how to add a Schema markup in Webflow to feed Googlebot structured data that describes blog articles and breadcrumbs.

Step #1 – Get to the Webflow Custom Code Section

Open Webflow Designer, and go to the Pages tab in the left sidebar menu. Click the gears icon next to the Blogs Template and scroll down to the Custom Code insertion field.

Where to insert Schema markup code in Webflow CMS - screenshot

We will use two Custom Code fields to embed Schema markup in Webflow. The “Inside <title> tag” section will contain the BreadcrumbList markup script, and the BlogPosting script will be plugged into the “Before </body> tag” section.

Step #2  – Copy-Paste BlogPosting and BreadcrubList Schema Markups Templates

Visit Schema.org and get a BreadcrumbList markup script tag. You can find it below the Properties in Examples 1 > JSON-LD.

JSON BreadcrumbList markup script tag at Schema.org - screenshot

Get the BlogPosting markup script in the same manner:

These script tag examples are a bit lengthy. But you can reduce them as we did while pasting them where they belong. Head to the 3rd step to see how it’s done.

Step #3 – Fill in Your Markup Entity Properties

Paste the BlogPosting markup script in the “Before </body> tag” section. Here’s how we excluded excessive lines from the default script and set dynamic property values by selecting them from a drop-down list.

To set a dynamic value, click "Add Field" and select the corresponding to your item field. Pay attention to syntaxis and make sure you include double quotes before and after your dynamic element.

Setting dynamic values for Schema Markup properties in Webflow CMS - screenshot

Here’s how it’s done for the BreadcrumbList markup. We’ve pasted it into the “Inside <title> tag” section:

Inserting BreadcrumbList markup code in <head> tag in Webflow CMS- screenshot

Don’t forget to click “Save” and “Publish” to apply your changes.

Step #3 – Test Your Markups

Now that you’ve done with Schema implementation, you should test the markup code with the Shema Validator tool. We took the markup scripts for BreadcrumbList and BlogPosting entities from the source code of a random blog post and copypasted them into the validation tool:

Reviewing inplemented BreadcrumbList markup in code inspector - screenshot
Checking BreacrumbList markup code with Shema Validator tool - screenshot
Checking BlogPosting markup code with Shema Validator tool - screenshot
Reviewing inplemented BlogPosting markup in code inspector - screenshot

Nice, everything looks neat and clean.

Step #4 – Monitor SERP Results for Featured Snippet Appearances

Lastly, you’ll need to keep an eye on web analytics to see whether search engines have started displaying featured and rich snippets for your pages. There are three convenient tools to assess structured data performance.

1. Google Search Console

Firstly, we recommend you check Google Search Console > Enhancements. If you’ve implemented Schema entities correctly, search result enhancements will be listed here once the Google crawler scans your website Click on them to see what pages got rich or featured snippets.

Review Snippets exploration view in Google Search Console - screenshot

Also, pay attention to the Review Snippets report. It will display what implementations failed and what issues to work on.

Schema markup issue report in Google Search Console - screenshot

2. Google Rich Snippet Testing Tool

Besides GSC Enhancements reports, you can leverage the Google Rich Snippet Testing Tool to test single URLs and see whether they got multiple rich results. You can get a detailed overview of issues with particular markup items and inspect their structure:

Google Rish Snippet Testing Tool mobile exploration view
Google Rish Snippet Testing Tool - Article markup validation report

NOTE: Google will add only supported rich results into the Enhancements reports and Results Testing Tool. It won’t inform you that Site Links, Local Business, and Article markups were successfully accepted by Googlebot.

3. Semrush Position Tracking Tool

However, you can work around this limitation if your Webflow website is connected to Semrush. Choose the Position Tracking tool in the SEO reports section. Then click on the Featured Snippets tab to see a detailed dashboard with reports on rich snippet gains and estimated opportunities.

Checking featured snippets in Semrush's Position Tracking - screenshot

Opportunities report, in fact, is a splendid source of actionable insights to guide your future Schema implementation efforts.

A Comprehensive Approach to Website SEO Including Schema Implementation

At Marketechy, we do our best to bring growth-oriented SEO strategies to life. As we map and implement technical SEO tasks, including Schema markup, step-by-step, you’ll meet the long-wanted visibility growth, improved rankings, and impressive organic traffic gains.

Let our seasoned specialists unburden your in-house team and help you with achieving your business goals. Contact us to apply for a comprehensive SEO audit, and we’ll elaborate a result-focused strategy for your brand.

Ready to grow your online presence and quality leads? Drop us a line!
Related articles