Schema Markup: An overlooked tool on many websites

1. Introduction

If you've ever wondered how some search results seem to have extra information, like star ratings or event dates, right there on the search page., well that’s thanks to something called schema markup. In this post, I want to explore what schema markup is, why I think it’s important, especially with the rise of generative search (AI), and how I go about implementing it in Webflow, both for regular pages and for items in the Webflow CMS.

2. What is Schema Markup?

Simply put, schema markup is a type of code that I can add to my website to help search engines understand my content better. Think of it as providing extra context to the search engines. Instead of just seeing a block of text, schema markup helps them identify what that text is actually about – is it a blog post? A product? An event?

There are various types of schema markup available, each designed for different kinds of content. For example, I might use the “Article” schema for a blog post like this one, or the “Product” schema if I were selling something online.

To give you an idea of what this looks like in the code, schema markup is often written in a format called JSON-LD. It’s a way to organize data that search engines can easily read. You might see something like this in the code:

1{
2  "@context": "https://schema.org",
3  "@type": "Article",
4  "headline": "Your Blog Post Title Here",
5  "author": {
6    "@type": "Person",
7    "name": "Mark Thurman"
8  },
9  "datePublished": "2024-10-26",
10  "articleBody": "The main content of your blog post goes here..."
11}

3. Why is Schema Markup Important?

From my perspective, schema markup offers several significant advantages that I consider essential for any website owner. Let me delve into why I find it so important:

• Enhanced Search Results: One of the most compelling reasons I utilize schema markup is the potential for impressive search results. When I implement it correctly, my website's listings in search results can often display more information than a standard listing. These "rich snippets," as they're often called, can include things like star ratings for reviews, event dates and times, pricing information for products, and even images. I've noticed that these visually striking and informative snippets tend to capture the attention of searchers more effectively.
  ‍
• Improved SEO: Beyond just looking good, I believe schema markup plays a crucial role in improving my website's overall search engine optimization. By providing explicit clues about the meaning and context of my content, I'm helping search engines like Google to more accurately understand what my pages are about. This improved understanding can lead to better indexing and potentially higher rankings for relevant search queries. I see it as a way to communicate directly with search engines in a language they understand perfectly.
  ‍
• Generative Search Optimization (GSO): With the recent evolution of search towards more generative AI-powered experiences, I feel that schema markup has become even more vital. As search engines increasingly rely on AI to provide direct answers and summaries, structured data from schema markup makes it easier for these systems to grasp the key information on my pages. I foresee that websites that effectively use schema markup will be better positioned to have their content included and referenced in these new generative search results, which I think is a significant advantage moving forward.
  ‍
• Increased Click-Through Rate (CTR): From my experience, the richer and more informative my search result looks, the more likely people are to click on it. When I see a listing with star ratings or event details, I'm personally more inclined to choose that result over a plain one. I believe my audience feels the same way. By implementing schema markup and achieving those rich snippets, I anticipate a boost in my click-through rates, which ultimately means more traffic to my website.
  ‍
• Better User Experience: Ultimately, I strive to provide the best possible experience for my website visitors. I think schema markup contributes to this goal by delivering more relevant information directly within the search results. If a user can see key details about my content before even clicking on my site, they can make a more informed decision about whether it meets their needs. This efficiency and clarity, in my opinion, leads to a more satisfying user journey.

‍

4. Implementing Schema Markup in Webflow

General methods for adding custom code in Webflow.

Step-by-step guide on how I add schema markup to static Webflow pages:

• Generate the Schema Markup: I start by using a schema markup generator tool online. There are many free options available that help me create the correct code based on the type of content on the page.
• Copy the Code: Once I’ve configured the generator, I copy the JSON-LD code it provides. This is the recommended format for schema markup.
• Add to Webflow: In my Webflow project, I go to the page settings where I want to add the schema markup. Within the “Custom Code” section, I paste the code either in the “Head Code” or “Footer Code” area. I generally prefer the head, but for some types I will embed it in a component that is on every page such as the nav or footer.
• Save and Publish: After saving the changes and publishing my site, the schema markup is live.

5. Implementing Schema Markup for Webflow CMS Items

Here's how I dynamically add schema markup to CMS items:

• Blogs: Article schema, Author schema.
  • To implement this dynamically, I often use Webflow’s custom code feature within the CMS template page. I can use Webflow’s dynamic fields to pull in the relevant information for each blog post (e.g., the post title, author name, and publish date) and insert it into the schema markup code. For the author, I might also include the “Person” schema.

1<script type="application/ld+json">
2{
3  "@context": "https://schema.org/",
4  "@type": "Article",
5  "headline": "{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}",
6  "author": {
7    "@type": "Person",
8    "name": "{{wf {&quot;path&quot;:&quot;author:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}",
9     "url": "https://www.linkedin.com/in/markdthurman"
10  },
11  "datePublished": "{{wf {&quot;path&quot;:&quot;published-on&quot;,&quot;transformers&quot;:[{&quot;name&quot;:&quot;date&quot;,&quot;arguments&quot;:[&quot;YYY-MM-DDTHH:mm:ssZ&quot;]\}],&quot;type&quot;:&quot;Date&quot;\} }}", 
12  "dateModified": "{{wf {&quot;path&quot;:&quot;updated-on&quot;,&quot;transformers&quot;:[{&quot;name&quot;:&quot;date&quot;,&quot;arguments&quot;:[&quot;YYY-MM-DDTHH:mm:ssZ&quot;]\}],&quot;type&quot;:&quot;Date&quot;\} }}",
13  "image": "{{wf {&quot;path&quot;:&quot;main-image&quot;,&quot;type&quot;:&quot;ImageRef&quot;\} }}", 
14  "description": "{{wf {&quot;path&quot;:&quot;meta-description&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}",
15  "publisher": {
16    "@type": "Organization",
17    "name": "Koodos",
18    "logo": {
19      "@type": "ImageObject",
20      "url": "https://cdn.prod.website-files.com/674880a68f3bc43d47cec5b3/674880a68f3bc43d47cec5ef_koodos_logo_dark.svg" 
21    }
22  },
23  "mainEntityOfPage": {
24    "@type": "WebPage",
25    "@id": "https://www.getkoodos.com/{{wf {&quot;path&quot;:&quot;slug&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"
26  }
27}
28</script>

• Authors: Person schema.
  • When I have a collection of authors, I like to use the “Person” schema for each author page. This allows me to include information like their name, job title, and potentially links to their social media profiles. Again, I use dynamic fields in the CMS template to populate this information in the schema markup.
• Events: Event schema.
  • For event listings, the “Event” schema is what I typically go for. This lets me specify the event name, location, start and end dates, and a description. By using dynamic fields connected to my Events CMS collection, I can ensure that each event on my site has the correct schema markup.
• Other relevant CMS collections.
  • Using Webflow's custom code feature to inject dynamic schema.

‍

6. Best Practices for Schema Markup

After I've implemented schema markup on my Webflow site, I always take the step to validate it. This helps me ensure that the code is correctly implemented and that search engines can properly understand the data. There are a few tools I find particularly useful for this:

• Google's Rich Results Test: This is a free tool provided by Google that allows me to test specific URLs or code snippets to see if they are eligible for rich results. I simply enter the URL of a page where I've added schema markup, and the tool will analyze it and tell me if any issues are detected. It even shows me a preview of how the rich result might appear in Google Search.
• Schema Markup Validator: Another helpful tool is the Schema Markup Validator, which can analyze schema markup in various formats, including JSON-LD. I can either paste my code directly into the tool or provide a URL for it to check. This validator provides detailed feedback on any errors or warnings it finds in my markup.

I generally recommend testing your schema markup after implementing it on any new page or when making changes to existing markup. This proactive approach helps me catch any mistakes early and ensure that my efforts in adding schema are actually paying off in the way I intend.

Here's what validation looks like for this blogpost:

And here we can see the date in the Schema, some of which comes from my Author CMS Collection:

7. Best Practices for Schema Markup

• Focus on accuracy and relevance.
• Use the correct schema types.
• Validate your schema markup using testing tools.
• Monitor your search performance.

‍

8. Conclusion
‍

‍

To sum up, schema markup is a really helpful tool that can significantly improve how my Webflow website is understood and presented in search results. By taking the time to implement it correctly, both for static pages and my CMS content, I can enhance my site’s visibility, potentially increase traffic, and even get a leg up in the evolving landscape of generative search. If you haven't yet, I encourage you to begin exploring how schema markup can benefit your own Webflow projects.

‍