Discover everything we launched at Webflow Conf 2024
Read post
Blog
Schema markup explained: Enhancing SEO with structured data

Schema markup explained: Enhancing SEO with structured data

Learn how to implement schema markup, which helps search engines better understand your content so they can display rich results for your search listings.

Schema markup explained: Enhancing SEO with structured data

Learn how to implement schema markup, which helps search engines better understand your content so they can display rich results for your search listings.

Build with Webflow

Webflow Enterprise gives your teams the power to build, ship, and manage sites collaboratively at scale.

Contact sales
Contact sales
Written by
Webflow Team
Webflow Team
Webflow Team
Webflow Team

Search engines can’t interpret everything on their own — sometimes, they need help.

Adding schema markup to a page is like sticking labels to your content to identify essential features such as an article title, product price, or business location. Done correctly, schema markup gives search engines the information they need to deliver better search results.

While seemingly complex, you can create schema markup after learning just a few fundamentals and best practices. With these basics in mind, you’ll be well on your way to climbing the search results page.

Why is schema markup important for SEO?

Schema markup, also known as structured data, helps search engines better understand your content. Detailed schema markup helps search engines use this information to share rich results for their users on search result pages (SERPs). These rich results include more features, such as reviews, prices, and images, and they have a better click-through rate (CTR). As your CTR increases, your website earns higher search ranks — so having the right schema markup significantly impacts your SEO.

Common schema markup types

When you implement schema markup on your page, you’re labeling content using a consolidated library of item properties from Schema.org. Google, Microsoft, Yahoo, and Yandex cooperatively developed the library to establish a unified vocabulary they could all use to interpret content and improve search results

There are 1,476 item properties available on Schema.org, including “aggregateRating,” “image,” and “price.” They’re organized into primary types, such as CreativeWork, Event, and Product. Then, they’re further separated into subtypes, like Article, Festival, and Vehicle. 

Some subtypes are associated with more than one primary type. For example, LocalBusiness has its own set of properties, but it also supports everything from Place and Organization, the two primary types it falls under.

Business websites use different schema types depending on the services and products they offer and how they describe them. Here are the most commonly used types of schema, along with a few suggestions for item properties to use from them:

  • Organization — A primary type for institutions like businesses, schools, or clubs.
    • Common properties:
      • telephone
      • address
      • url
  • LocalBusiness — A subtype of Place and Organization for places of business, such as a bank or restaurant.
    • Common properties:
      • openingHours
      • priceRange
      • address
  • Review A subtype of CreativeWork for critical reviews of movies, books, or restaurants.
    • Common properties:
      • reviewRating
      • reviewBody
      • positiveNotes
  • Article A subtype of CreativeWork for published writings, such as blog posts or news articles.
    • Common properties:
      • speakable
      • wordCount
      • articleBody
  • Product — A primary type for products and services, such as guitars, hats, or car rentals.
    • Common properties:
      • aggregateRating
      • color
      • size
  • Event A primary type for events like concerts, debates, and festivals.
    • Common properties:
      • aggregateRating
      • about
      • location
Unlock growth with SEO

Join Webflow and leading growth agency Graphite as they discuss actionable insights for scaling and achieving growth with SEO

Watch now
Unlock growth with SEO

Join Webflow and leading growth agency Graphite as they discuss actionable insights for scaling and achieving growth with SEO

Watch now
Watch now

How does schema markup work?

There are three popular formats for implementing schema markup: JSON-LD, Microdata, and RDFa. Other formats exist, like PageMaps, but search engines only use these three to generate rich results. Each format has pros and cons, but JSON-LD scales the best, making it excellent for large-scale SEO projects, where teams must apply structured data to hundreds or thousands of pages and product descriptions.

JSON-LD

The JSON-LD format involves placing a script tag in your page’s head or body element. You fill the script with name:value pairs that identify the properties you want to use and their values. It’s the most common method because it’s easier to read. The HTML tags in the other two formats quickly complicate the code, making it difficult to find values when updating them.

Here’s how the structured data might look for a page selling a Gillo GT 25” recurve riser, a popular choice among professional archers:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "5",
    "reviewCount": "13"
  },
  "description": "Compatible to all G1, GQ, and G5 weights, grips, and accessories.”,
  "name": "Gillo GT 25\" ILF Recurve Riser",
  "image": "Gillo-GT-25.png",
  "offers": {
    "@type": "Offer",
    "availability": "https://schema.org/InStock",
    "price": "649.99",
    "priceCurrency": "USD"
  }
}
</script>

When Google pulls this structured data to create a rich result, it looks like this:

Screenshot of Google search result for Lancaster Archery Supply

Microdata

Microdata and RDFa both use HTML attributes to label item properties. To use either, you’ll wrap everything on your page in <div>s that label the types you’re using, such as Product, Place, or Event. Then, you’ll use <span>, <img>, and <meta> tags to label individual strings. The difference between microdata and RDFa is the attributes they use. For example, microdata schema markup tags use “itemscope” and “itemtype” to reference the relevant types. 

Resource Description Framework in Attributes (RDFa)

RDFa was a precursor to Microdata, so they function very similarly. You still use <div> and <span> tags to label strings, but the attributes differ slightly from Microdata’s. For example, with RDFa, you use “property” instead of “itemprop.”

How to validate your schema markup

Before you launch a page with structured data, run it through a testing tool to ensure search engines can surface all the item properties you labeled. Here are the two most popular free validators available online.

Schema.org

The Schema.org validator performs a basic check on your code to ensure it runs. You can use it on a code snippet or live URL. To check a snippet, place your code on the left side and click the arrow near the bottom of the screen. The output appears on the right. If your code runs, the validator lists all the item properties it detected. If not, it shows you the errors it encountered. 

Google’s rich results test

Google’s rich results test takes schema markup validation a step further. It can handle URLs or snippets just like Schema.org, and it checks the code to validate that it runs. Then, it also offers a preview showing how the content’s rich result might appear, and it gives recommendations for other properties to include. 

5 schema markup best practices

To ensure your schema markup gets results, follow these five fundamental principles.

1. Select the appropriate schema types

Always choose the most applicable types to ensure you can access all the item properties you need. For example, using LocalBusiness gives you access to “openingHours” and “priceRange,” two options you don’t get from Organization or Place. 

2. Keep your schema markup updated

If you change the content on a page, update the relevant schema markup, too. For example, if a product’s price changes, update its “price” property. If you don’t, the rich result won’t be accurate, leading to a poor user experience. 

3. Stay informed about Google updates

Google occasionally updates its structured data guidelines to make new recommendations, so check back periodically. When they do, you’ll be the first to know and can optimize your content to get better rich results.

4. Validate

Google’s rich result tool provides all the testing features you need to ensure your structured data is working, comprehensive, and creates the best possible rich result. Add it to your SEO checklist so you remember to check every page before it goes out. 

5. Use the JSON-LD format

JSON-LD is easier to read and update, making it the preferred schema markup format. It’s also what Google recommends, so it could play a part in search rankings in the future. Starting with the JSON-LD format primes you for that possibility and makes your markup more scalable.

Add schema markup to your website with Webflow

Adding schema markup is an excellent method for moving up the search results, and with the right tools, it’s a painless experience. 

With the Webflow CMS, you can incorporate structured data by adding custom code to the <head> section using dynamic embeds, enabling you to scale schema markup across multiple pages. To learn more, check out our University tutorials or get started with Webflow today.

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Get started for free
Last Updated
July 5, 2024
Category
Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Get started for free