Schema.org allows us to provide search engines with the information required to understand what our content is and how to provide the best search results. It’s easiest to understand schema markup by looking at an example of the final outcome. We’ll work our way backwards from there.
Can you spot anything different about this search result? If you said the star ratings, you got it! Product ratings showing up underneath your standard search result is the byproduct of implementing schema.org structured data on a product page.
Reviews are just one example of what adding schema can do for your search results. To generate your own code, head to Google’s Data Markup Helper.
Let’s clear up the confusion between all of these different, yet pretty similar, terms:
JSON-LD allows you to simply paste the markup within your HTML code document versus wrapping the markup around HTML elements like you have to do with Microdata. We use JSON-LD to implement schema markup for all of our clients.
JSON-LD structures your data by annotating elements on the page, which in turn are used by search engines to pull out facts and information about your website and webpage.
It’s recommended by Google to add your JSON-LD to the <head> section of your HTML document, but it can also live within the <body> section.
This is the first thing you should always see. This script tag tells the browser you’re calling the JavaScript that contains JSON-LD.
electrIQ tip: Always remember to close your tag with }</script>
Now, you have to let the web browser know what vocabulary you’ll be referencing in your markup.
<script type=“application/ld+json”>
{
“@context”: “https://schema.org”,
By implementing the above, you’re able to use any of the item types and item properties that Schema.org defines.
The final element in every JSON-LD is the type specification. You can find a full list of types here at schema.org. This tells the search engine I’m using this item type and you can find it here. Now, everything you add will be an attribute of the type.
<script type=“application/ld+json”>
{
“@context”: “https://schema.org”,
“@type: “Recipe”,
electrIQ tip: If you use a nested item type, you’ll have to include another @type.
Let’s start annotating information about the item type! You can find item properties within the item type’s Scehma.org page for you to add to your HTML code.
Each item property in JSON-LD requires these two elements:
<script type=“application/ld+json”>
{
“@context”: “https://schema.org”,
“@type: “Recipe”,
“name”: “Brandon’s Chicken Prosciutto Salad”,
If there are multiple values for an item property, you’ll have to use square brackets to properly annotate the values.
For example, if there were two different names for my recipe.
“Name”: [“Brandon’s Chicken Prosciutto Salad”, “Brandon’s Prosciutto Chicken Salad”],
These square brackets are saying there are multiple values for this item type; Brandon’s salad has two different names.
Nesting sounds more complicated than it actually is. Think of your JSON-LD as nesting dolls. The largest doll is your high-level @type, but you can have multiple @types within your main @type.
Nesting allows you to provide additional information that you wouldn’t be able to if you were restricted to one item type. For example, if we want to add a rating to my recipe it would look like this.
<script type=“application/ld+json”>
{
“@context”: “https://schema.org”,
“@type: “Recipe”,
“name”: “Brandon’s Chicken Prosciutto Salad”,
“aggregateRating”: {
“@type”: “AggregateRating”,
“ratingValue”: “5”,
“reviewCount”: “440”,
“bestRating”: “5”,
“worstRating”: “4”,
},
Wow! That’s a pretty damn good salad. You can see how I nested it within the current JSON-LD, and also how I indented the nested code for readability.
Nesting is most commonly used on ecommerce websites. You will see the @type Offer nested in the @type Product to provide pricing,availability, and more.
We’ve all been there. Your markup just won’t work in Google’s Structured Data Testing Tool. After getting increasingly frustrated, you decide this whole search engine thing just isn’t for you. Wait! Below are the most common mistakes we encounter when implementing JSON-LD:
No we’re not talking about semantic vocabulary here to all you SEO’s.
This typically only happens when you add annotated information that doesn’t actually show up on the page. Not only is it against Google’s guidelines, but it’s not going to show up in search results anyways, so why do it?
Write your code in an HTML editor. Copying and pasting from Google Docs, Pages, Microsoft Word, etc. can create issues with the formatting (especially the quotation marks).
How you end up implementing your JSON-LD boils down to whether or not you’re super experienced with it. Below, we’ve provided an outline for someone who is new to Schema.org and JSON-LD that you can easily replicate to start getting some rich search results!
Determine what you want to markup so you can find the appropriate Schema.org type and accompanying attribute/property vocabulary. Sometimes it might make sense to you, but it won’t be an option within the Schema.org framework
If you’re using a markup that Google explicitly supports, they’ll have documentation and relevant examples you can use to base your markup off of. Why reinvent the wheel when they’ve laid it out so nicely for you?
Typically, just paste it into the <head> section.
Schema markup can be a powerful way to boost your website’s SEO. While it may seem complicated to start, once you get the hang of it and have a few completed pages under your belt, it gets a lot easier!