Chevron Down Resources Blog Articles
SEO   |   Clock Icon 12 min read

How to: Schema Markup

by Aimee Sanford   |   Jun 27, 2017

What is Schema?

Schema, in terms of search marketing, is code markup that you add to your site's pages to help search engines understand the context of your content or data. It is more commonly known in our industry as structured data or structured markup. Schema often refers to schema.org, which is a collaborative library of structured data types created by teams at Google, Bing, and Yahoo. Using schema to mark up the data on your site improves your chances of gaining search features like rich results and knowledge graph cards.

For example, if you want your web page about an asparagus galette recipe to appear in a carousel of recipe results in Google, your page must have schema for the data type "recipes."

What Schema Should Be On Your Site?

Only add schema for features that are relevant or exist on your site. Not all types of schema will be applicable to every business or website.

Here are some common structured data types that we add to many of our client sites:

You should also see the full list of markup recommended by Google for attaining specific search features, as well as schema.org's comprehensive library of data types.

How do You Mark Up a Site with Schema?

Get Your Development Team to Add It

If you have a dedicated developer that can make edits to the source of your website's pages, send them a request that includes the page templates and JSON-LD schema types that you need on your site. Hard-coding schema is the best way to apply it, but is not realistic for a majority of marketers working with typical resources available to SMBs.

So, for everyone else—here are your options:

Google's Data Highlighter tool

The easiest way to mark up different elements of your site for use by search engines is Google's Data Highlighter. You can use this tool from Google Search Console for any site that you have verified. You simply select your page, highlight your data type, then tag elements on the page with their appropriate label. If you are missing certain elements on the page that are required for the data type, you can manually enter these with the tool.

image.assetAltText

One of the limitations of this tool is that it only supports a narrow set of schema types:

  • Articles
  • Book Reviews
  • Events
  • Local Businesses
  • Movies
  • Products
  • Restaurants
  • Software Applications
  • TV Episodes

What if you are marking up a schema type not supported by Data Highlighter?

If you want to add structured markup for a data type not supported by Google's Data Highlighter, you have to create your structured data (snippets of code) and add it to relevant pages on your site.

Common formats for structured data include microdata, RFDa, and JSON-LD. Microdata and RFDa formats both involve tagging pieces your existing content that's already located in the source code of the page. For example, if you are marking up a page containing a recipe for banana bread, the existing copy on the page that displays the list of ingredients will need to be wrapped in the tag "recipeIngredient" in the source code of that page.

image.assetAltText
Page content with no markup added.
image.assetAltText
Page content with microdata format schema added.

JSON-LD is considerably simpler, easier to implement, and less prone to human error—it is therefore more widely adopted than either microdata or RDFa, and is Google's recommended format for structured markup.

JSON-LD can exist in the body of the page like the other formats, but it can also be added in the head of relevant pages, since the JSON-LD code snippets in the source code can be added independent of user-facing elements.

Notice that for the same banana bread recipe example below, the JSON-LD code snippet is a standalone and therefore can be added anywhere—whereas the microdata pictured above has tags wrapped around existing page elements.

image.assetAltText
JSON-LD markup for the banana bread recipe.

Creating and Testing JSON-LD Schema Markup

You can create your own JSON-LD structured data using the guides for different data types at schema.org.

To test your markup, use Google's Structured Data Testing Tool. With this tool, you can test your JSON-LD by entering the URL address of the page after you've added the structured data, or you can test just the JSON-LD code snippet before installing it on the page. I recommend doing both.

image.assetAltText
Testing my fake banana bread recipe JSON-LD code.

How do You Add JSON-LD Schema Markup to Your Site?

After you've validated your JSON-LD snippet, you can add it to the relevant web page or pages. This is a straightforward step if you have access or feel comfortable editing the source code of your site through FTP or your CMS—or if you have a developer that you can hand this off to.

We usually install JSON-LD markup using Google Tag Manager because it's easy (once you get the hang of it), and it rarely requires any action from our clients' development teams. Here are step by step instructions for adding your JSON-LD to your site using GTM:

  1. Go to Google Tag Manager (if your site has no Google Tag Manager container installed, create an account and add the container to your site)
  2. Click on the site's container
  3. Click add a new tag, and give the tag a relevant name
  4. Choose Custom HTML as your tag configuration
  5. Add, or create and add, a Pageview trigger for the URL or URLs you are adding the markup to
  6. Click Save
  7. Under Custom HTML, paste your JSON-LD code snippet
  8. Hit Save again
  9. Use GTM's preview tool to test if your tag will fire on the correct page or pages
  10. Exit Preview Mode, Submit, then publish your updated container

If you have a large set of pages to add structured markup to, and the data for your fields will differ for each page, you can still use GTM to add accurate JSON-LD to all of these pages at once by using variables that will generate the proper code snippet for each page based on each page's elements (or whatever you configure your custom variable to identify). But, that is for another day and another blog post. For now, you can go ahead and get started adding static JSON-LD directly to your website's source code or injecting it through your GTM container.

Have any questions? Add them below!

portrait of Aimee Sanford

Aimee Sanford

Aimee is happiest when working closely with clients, learning about their business and communicating the "why" behind our work. Before coming to Workshop Digital in 2015, Aimee was an in-house marketer for a large architectural supply retailer—so she knows what it’s like “on the other side.” Born and raised in Southern California, she attended Mary Baldwin University in Staunton, Virginia, where she fell in love with Richmond after many weekend road trips. You are likely to see her at the climbing gym, bike commuting, or eating a big meal out (after climbing and biking).