Add Schema Markup to Your Website

What is Schema Markup?

Schema markup is a form of structured data that helps search engines understand what’s on a webpage. This markup is a community effort to create a universal vocabulary of tags and categories for the internet. An example of Schema markup in action is the Google Knowledge Graph. These are the cards on the right-hand side of some Google searches. These cards provide more information about your search, and are a collection of structured data snippets from all over the internet.

Here you can see a snippet of Chow-Bryant’s card in Google’s Knowledge Graph. Some of this information is fed into Google’s Knowledge Graph using Schema markup on our website. For instance, the footer on our site features Schema for a local business.

Other Forms of Structured Data

In a nutshell, Schema markup is very similar to the Open Graph Protocol and Twitter Card Data. The main difference is that Schema markup isn’t unique to a specific social media platform. Instead, Schema is primarily used by webmasters, app developers and search engines. In fact, Schema markup is supported by Google, Bing, Yahoo and Yandex.

Why Schema Markup is Important

It’s hard to overemphasize how important Schema markup is for a webmaster or business owner. Structured data like Schema is one of the most powerful SEO tactics that works across all of the major search engines. Also, adding Schema to your site helps search engines understand what your site is about.  Finally, if you have an eCommerce site, Schema markup is the most reliable way to control how Google Shopping ranks your products in search results.

How to Create Schema Markup for a Local Business

Creating Schema markup is similar to creating Open Graph Data and Twitter Cards. The main difference is that Schema markup is a little more involved, and includes more information. This means more markup tags. Schema.org  provides a guide for every type of Schema, which includes organizations, people, places, products, and many others.

Markup Tags

The first step to putting together structured data is gathering the information for the require tags. For this article I’m going to put together Schema data for Chow-Bryant as a local business. Since this is a Local Business the following tags are required:

• URL – this is the URL for the website object. In most cases you should use your homepage.
• Name – this field declares the business name. This should be your official name you use on your website, map listings, and social media accounts (note: ideally, you should only use one name for your business
• Address – the business’s address is composed of the following fields:
  • Street Address – exact street address. Note: if you don’t know your official address, consult with your local Post Office
  • Address Locality – city, township, village, etc.
  • Address Region – state or province
  • Postal Code – zip code
• Telephone – this is the business phone number, and should match all social media accounts and map listings
• Price Range – this field is technically optional. This helps set a price range on a scale of $-$$$$
• Image/Logo – this should be the business logo. Images should be approximately 60 pixels square.
• HasMap – this field declares that the business has a listing on Google Maps. This should be the URL to your business’s map listing and not your street address.
• Geo-coordinates – geo-coordinates for your business. Note: you can find this in the URL when searching for your business on Google maps.
  • Latitude – the latitude for your business
  • Longitude – the longitude for your business

Example Schema Markup for Local Business

Now that we have the right information and know which tags we need, it’s just a matter of creating the tags. The syntax for Schema is very similar to HTML or XML. For the most part, you’ll only need to understand how <span> works. For the most part, the markup is composed of item types and properties. Item types declare the kind of item like postal address. Item properties are details about an item type. In the case of postal address, the item properties are street address, address locality, address region and postal code.

Example Snippet

Here’s what the Schema markup looks like for Chow-Bryant:

<div itemscope itemtype="http://schema.org/LocalBusiness">
<a href="https://www.chow-bryant.com/" itemprop="url">
<span itemprop="name">Chow-Bryant</span></a>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">1104 W Tri Oaks Ln #128</span>
<span itemprop="addressLocality">Houston</span>, <span itemprop="addressRegion">TX</span> <span itemprop="postalCode">77043</span></span>
Tel: <span itemprop="telephone">(713) 496-2061</span>
Price Range: <span itemprop="priceRange">$$</span>
<img itemprop="image" src="/wp-content/uploads/2016/12/chow-bryant-xs-logo.jpg" alt="Chow-Bryant Logo" height="60" width="60"/></div>
<a href="https://goo.gl/maps/Wx5dVbi98vx" target="_blank" itemprop="hasMap">Find us on Google Maps</a>
<div itemtype="http://schema.org/GeoCoordinates" itemprop="geo" itemscope>
<meta itemprop="latitude" content="29.786409"/>
<meta itemprop="longitude" content="-95.5865647"/></div>

Where to Place Schema Markup

Now that the Schema markup is finished, it’s time to place it on page. Schema is a little different than other structured data. Instead of placing it in the HEAD section on a page, the object receives an in-line wrap in Schema. In the example above, I put together Schema markup for Chow-Bryant as a local business. Since we display our address in the footer, then the text for the address was wrapped in the Schema markup.

Checking Your Work

After you add Schema to your site, make sure you check your work for errors. Try Google’s Structured Data Testing Tool to make sure your code is properly placed on your site and free of errors.