featured case study
Safely
Brandon Amoroso
How To Use Schema Markup To Boost Your SEO
What is Schema.org Structured Data?
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.
The difference between Schema, microdata, structured data markup, Open Graph, JSON-LD, etc.
Let’s clear up the confusion between all of these different, yet pretty similar, terms:
- Structured Data: Standardized format to mark up information on a web page to help search engines better understand what the web page is about.
- Microdata: Microdata is a form of structured data that works with HTML5.
- Schema.org: Agreed-upon definitions for microdata tags between the major search engines Google, Bing, and Yahoo.
- Rich Snippets: A type of rich result. Regular search results with additional info displayed.
- Rich Results: Any type of visually-enhanced search result with information pulled from structured data.
- SERP features: Any result that is not a traditional organic result. The most common being rich snippets! They can also be featured snippets, PPC ads, tweet boxes, and Knowledge Panels
- Knowledge Panels: The block you sometimes see on the right side of your screen in the search results pulled from Google’s Knowledge Graph, a base used to pull information from a variety of sources to serve relevant Google search results. The best example is if you’re a local business and have a Google My Business account, you’ll typically see that appear in search results on the right side.
- Open Graph: Markup used by Facebook so it knows what images and description to display when someone shares your page on social media. Open graph does not replace Schema, but they can and should be used together.
- JSON-LD: Javascript Object Notation for Linked Data. In other words, it is an implementation format for schema.org that is considered to be simpler to implement than microdata.
Schema Markup SEO Best Practices
JSON-LD
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.
What does JSON-LD do?
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.
Where do I add JSON-LD?
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.
How to Implement JSON-LD
<script type=“application/ld+json”>{
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>
“@context”:“
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.
“@type”: “...”,
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.
Attribute-value Pairs
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:
- Item Property: What’s the item property as defined by Schema.org vocabulary?
- Value: The value for the stated item property. It’s vital the value aligns with the property and is singular (i.e., each value must be annotated separately. Strings (characters) and URLs need the "double straight quotation marks." Numbers, integers, floats, or doubles (for the programming inclined) alone don’t need quotation marks, but it’s also okay to put them into quotations (this just means they’ll be considered a string data type).
<script type=“application/ld+json”>
{
“@context”: “https://schema.org”,
“@type: “Recipe”,
“name”: “Brandon’s Chicken Prosciutto Salad”,
Using Square Brackets
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 JSON-LD
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 Checklist:
- Use the item property specific to the item type
- Value/s are in curly braces
- Have to identify the item type of that property
- Accompanying attribute/value properties within that specific item types properties.
- Put a comma after the closing } if there are more item properties to come.
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.
Common JSON-LD and Schema Markup Mistakes
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:
1. Syntax
- Curly quotation marks are not as the same straight (this is quite literally the most annoying thing ever)
- Commas. Check your commas. There are so many commas when implementing, and if there is just one in the wrong place or missing then your code won’t work.
2. Vocabulary
No we’re not talking about semantic vocabulary here to all you SEO’s.
- Make sure you’re using the right properties for each type specification.
- Also, make sure your type specification. is a real type specification.
3. Policy Violation
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?
4. Document Editors
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).
Step by Step List to Add JSON-LD to your Site
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!
1) What do you want to markup?
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
2) Don’t create from scratch
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?
3) Find your Schema.org item type page
4) Save the immutable elements to copy and paste them
5) Add your item type as @type:
6) List out your item properties and values but without syntax
7) Format into proper JSON-LD syntax with nesting where required or appropriate
8) Test with the Structured Data Testing Tool
9) Decide where to add your Structured Data on your Webpage
Typically, just paste it into the <head> section.
Let us know how it goes!
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!