How to Improve Your SEO with Schema Markup

The word "schema" sounds an awful lot like "scheme."

And rightly so: its origins are rooted in the Greek skhema, which roughly translates as "the figure, appearance, or nature of a thing."

In the modern translation, "scheme" has earned a less-than-rosy reputation (think Ponzi Scheme). But "schema," on the other hand, is warmly regarded by web developers and digital professionals because of its impact on SEO (search engine optimization). 

We've written a lot about SEO practices over the years, like how to edit meta information on your website. Why? Because SEO is an essential component of every website. Search engines like Google and Bing crawl millions of websites every day to index and serve the information people are looking for. By improving your website's SEO posture, you're helping customers find you faster. 

If you're scheming to improve your SEO, one of the best ways is with schema markup. It's a relatively newer concept in the realm of technical SEO, but a powerful one that focuses on structured data. 

What is Schema Markup?

Schema markup is code that makes it easier for search engines to crawl your website and understand the content on your web pages. It's basically structured data that simplifies the process for Google to categorize what your website is about – so it can serve up the right content during a relevant search. 

Below is a sample structured data snippet taken from a web page:

<script type="application/ld+json"> { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://www.dundermifflin.com/#organization", "name": "Dunder Mifflin", "url": "https://www.dundermifflin.com/", "sameAs": [ "https://www.facebook.com/DunderMifflin/", "https://www.linkedin.com/in/dunder-mifflin", "https://twitter.com/dundermifflin" ] } ] } </script>

Now, if you're not a web developer or a technical person, you might have a frog in your throat...

But fear not! Even the greenest user can create schema markup without getting mired in code. 

We'll walk you through the process step-by-step, so you can make your own rainbow connection.

What is Schema.org?

Schema.org is a collaborative, community-based initiative that creates, maintains, and promotes schema for structured data across the Internet. This includes web pages as well as email and other forms of web-based communications.

On the Schema.org website, you can access all the structured data markup supported by the various search engines. While structured data can be used to mark up all kinds of items – from recipes to software services – it is often used to provide more detailed information about:

• Events
• Organizations
• People
• Local business
• People
• Products

And the list goes on. Literally. You can find the complete inventory of markup here.

Each type of information in schema markup falls under a certain category. For example, a "book" that falls under the category "creative work" can have the properties "name," "title," "author," "illustrator," and more. It all depends on how many details you'd like to provide. 

What is JSON-LD?

The most common format for structured data markup is the JSON-LD, which stands for Javascript Object Notation for Linked Data (the other structured data markup formats are Microdata and RDFa, in case you were curious). 

JSON-LD is the most straightforward format to implement compared to other formats because of its ability to simply put the markup within the HTML document versus wrapping the markup around HTML elements.

In terms of SEO, JSON-LD is implemented using the Schema.org vocabulary, a joint effort by Google, Yahoo!, Bing, and Yandex in 2011 to create a unified structured data vocabulary for the web. That being said, Bing and other search engines haven't officially stated their support of JSON-LD implementations of Schema.org.

Now, all this may seem way too technical. After all, content is for humans and not machines, right?

True, but structured data actually helps the people who consume your content.

For example, let's say your website has food recipes. Delicious recipes. Maybe for, oh, something Greek – like gyros. And let's assume that a web user is searching for a recipe just like yours. 

OK, well... what's in a recipe? The name, the food category (breakfast, dinner), the ingredients, the amounts of each ingredient, the cooking time, and so much more.

Now, you could add these content points to your webpage. But if you add them as structured data, your search results will look much richer: 

With a Google return like this, people who are looking for a gyro recipe will immediately have an idea of the ingredients and inspire them to click through for more. 

Here’s a part of the JSON-LD code for the recipe page:

<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Recipe", "name": "Greek Gyro Recipe with Homemade Gyro Meat", "author": "The Food Charlatan", "image": "https://thefoodcharlatan.com/wp-content/uploads/2020/02/Greek-Gyro-Recipe-3-e1582318114192.jpg", "prepTime": "2021-03-29T00:20:00+00:00", "totalTime": "2021-03-29T00:35:00+00:00", "recipeYield": "8", "nutrition": { "@type": "NutritionInformation", "servingsize": "100g" }, "recipeIngredient": [ "1 pound ground beef", "1 pound ground lamb", "2 tablespoons bacon grease OR butter*", "2 large eggs", "1/2 cup milk", "2 tablespoons lemon juice", "1 cup Panko bread crumbs", "1 medium onion, finely chopped", "6 cloves garlic, smashed and finely minced", "4 teaspoons kosher salt (yes, 4 teaspoons**)", "2 teaspoons black pepper", "2 teaspoons dried oregano", "1/2 teaspoon dried rosemary", "1 teaspoon dried thyme", "2 teaspoons dried cumin", "1 teaspoon dried marjoram, optional", "1 batch Tzatziki Sauce", "1 large red onion, sliced thin", "2-4 tomatoes, sliced", "1-2 cucumbers, sliced", "8-10 pita rounds", " fresh dill, to garnish, optional" ] } </script>

Hopefully, you're starting to get an idea of how the JSON code translates to informational content. This is why implementing structured data is so valuable.

The Anatomy of a Schema

Let’s talk briefly about the structure of JSON-LD data. Again, if you're not super technical, just hang with us – it's not as bad as you think. 

Odds are, you won’t need to write JSON code from scratch. There are many structured data generators online and we've listed some in the section below. This will get you acquainted with the code itself, so you understand what the data represents and how to customize it if you need to.

The first thing you’ll see is the script tag with the included type attribute “application/ld+json”. Structured data needs to be enclosed inside script tags, so pay careful attention to this. 

Within the tags, you'll see that the data is wrapped in curly {} braces. If these are missing, your data won’t be parsed by the search engines. This is another simple yet critical miss that can impact the performance of your schema.

Your curly braces go inside the script tags, so your data will start with a curly brace right after the script type="application/ld+json" tag and the closing curly brace right before the closing script tag. 

Inside the curly braces is where the key-value pairs live. The keys are reserved names and they start with the @ symbol. In the example below, there are the property names @context and @type. This tells the parser that the type “Organization” is prefixed by the context of http://schema.org.

To put it more clearly, the value "Organization" resolves to https://schema.org/Organization. "Organization" is one of the most commonly used types in structured data as it represents broad information on businesses, schools, NGOs, clubs, etc.

<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "name":"Dunder Mifflin", "url":"https://www.dundermifflin.com/" } </script>

In many cases, schema gets more complex because the properties may have more than one value.

For instance, say you want to include your company’s social media links. In the example below, under the sameAs property, we've listed three social media links inside square brackets [].

<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "name":"Dunder Mifflin", "url":"https://www.dundermifflin.com/", "sameAs":[ "https://www.facebook.com/DunderMifflin/", "https://www.linkedin.com/in/dunder-mifflin", "https://twitter.com/dundermifflin" ] } </script>

Don't panic: these are, in fact, different from the curly braces above. Square brackets are used when there are multiple values for a property, and in programming, they are commonly used to create arrays that hold multiple values.

JSON-LD Markup Generators and Validators

As we said earlier, you don’t have to write all this stuff by hand (thank goodness!). There are so many markup generators out there, and here are a few of them:

• Merkle Schema Markup Generator
• Google Structured Data Markup Helper
• JSON-LD Schema Generator by Hall Analysis

If you’re using WordPress, you’re lucky because Yoast, the SEO plugin for WordPress, lets you automatically implement Schema.org markup on your pages. In fact, Yoast announced Yoast SEO 11.0, which provides even better markup capabilities with the @graph, which generates structured data as a single, interconnected graph instead of individual blobs of data.

You can learn the full details of it over on this Yoast article.

Here's how our schema would look with the Yoast schema markup generator:

<script type="application/ld+json"> { "@context":"https://schema.org", "@graph":[ { "@type":"Organization", "@id":"https://www.dundermifflin.com/#organization", "name":"Dunder Mifflin", "url":"https://www.dundermifflin.com/", "sameAs":[ "https://www.facebook.com/DunderMifflin/", "https://www.linkedin.com/in/dunder-mifflin", "https://twitter.com/dundermifflin" ], "logo":{ "@type":"ImageObject", "@id":"https://www.dundermifflin.com/#logo", "inLanguage":"en-US", "url":"https://www.dundermifflin.com/images/DunderMifflin_logo.png", "width":247, "height":248, "caption":"Dunder Mifflin Logo" }, "image":{ "@id":"https://www.dundermifflin.com/#logo" } }, { "@type":"WebSite", "@id":"https://www.dundermifflin.com/#website", "url":"https://www.dundermifflin.com/", "name":"Dunder Mifflin - Paper Company", "description":"The Paper People's Paper Company", "publisher":{ "@id":"https://www.dundermifflin.com/#organization" } }, { "@type":"WebPage", "@id":"{{Page URL}}#webpage", "url":"{{Page URL}}", "name":"{{Page Title Variable}}", "isPartOf":{ "@id":"https://www.dundermifflin.com/#website" }, "about":{ "@id":"https://www.dundermifflin.com/#organization" }, "datePublished":"2016-06-09T21:38:15+00:00", "dateModified":"{{Meta DC.Date Variable}}", "description":"{{Meta Description Variable}}", "inLanguage":"en-US", "potentialAction":[ { "@type":"ReadAction", "target":[ "{{Page URL}}" ] } ] } ] } </script>

Generating markup is not enough. You also need to test and validate it to catch any data errors, so we've included a few trusty validators to consider:

• Google Structured Data Testing Tool
• Google Rich Results Test
• JSON Schema Validator
• Bing URL Inspection

Scheming for SEO

No matter what kind of website you have, it's only successful if you're driving eyeballs. That doesn't have to be a lot, per se – just the right kind of eyeballs.

Using schema markup is a proven strategy for enhancing your search posture and helping customers find what they're looking for. The best part: it doesn't take genius coding skills to supercharge your SEO.

And heck, if a dog can learn to play piano...