Schema Markups

What is schema markups?

Updated : July 25, 2017

If you have a website that you’re trying to promote online through SEO and other digital marketing techniques, then you need to make sure you’re vigilant in trying to stay up-to-date with the latest techniques and the recent changes to Google’s algorithms like schema markups, google answer box alias featured snippet.

New methods for promoting your site are coming along all the time and if you aren’t up-to-date with them then you could be severely limiting your potential for growth. A great example of this is using Schema markups.

This is a relatively new consideration in the world of SEO but it’s also crucial if you want to boost your search ranking and increase the number of visitors you’re getting on a regular basis. And it’s especially important for SEO for small business and non-profits.

Fortunately, ColorWhistle is here to keep you in the loop! Read on to learn what Schema.org markups are and how you should start using them…

What is Schema.org Markup?

Schema.org is the name of an initiative that was launched in June 2011 as a collaboration between Bing, Yahoo! and Google. The idea was to create a universal and standardized form of ‘structured data’ across the web. To learn more

What is structured data? Well essentially it’s the use of code within your website to tell search engines precisely what your content is about and to give it context.

Specifically, you can use schema markups to pinpoint sections of your content that relate to:

  • Company names
  • Events
  • Recipes
  • People
  • Movies
  • Books
  • Products
  • Software
  • TV Shows

And more…

In turn, this then gives Google more information regarding what it’s reading and that in turn enables it to show more information just below your search result rather than just your usual meta data. This is what’s known as a ‘rich snippet’.

Why Schema Markups Are Crucial for SEO for Small Business

For example then, if someone searches for your business then they might be able to see details like your logo and your opening hours right there on the SERP (Search Engine Results Page) and meanwhile Google will know that you’re talking about your business which will help boost your SEO.

For articles meanwhile, having some details of the article shared right underneath your listing will improve your CTR because your page will stand out against the competition. And if you get everything else right you might even be able to become one of Google’s curated ‘In-Depth Articles’ meaning your link will be highlighted with an image in a separate box, like so:

in-depth posts

 

You can read more about in-depth articles here.

As you can see then, schema markups are very important for SEO for small business going forward and give you a real chance to rank quickly and stand out against the competition.

And moreover, markups are only going to become more important going forward as they help tools like Siri, Google Now and Cortana to better understand content. If you want Google Now to be able to recommend your local business when you ask for directions, then you need to have markups on your page that explain what your business is about and where it’s located.

How to Implement Schema Markups

For small businesses and start-ups, the most important place to start is with your business name and details.

To implement these schema markups in your site you have two options. The first is to simply add the markups to the HTML. If you’re at all familiar with HTML then this should be fairly easy as the markups simply look like regular ‘tags’.

You can see an example of what the schema markup for HTML should look like for an imaginary candle company below:

<div itemscope itemtype=”http://schema.org/LocalBusiness”>

<a itemprop=”url” href=”http://www.firefly-floral.com”><div itemprop=”name”><strong>The Candle Factory</strong></div>

</a>

<div itemscope itemtype=”http://schema.org/Organization”>

<span itemprop=”telephone”>888-888-8888</span>

</div>

<div itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>

<span itemprop=”streetAddress”>1 Candle Lane</span><br>

<span itemprop=”addressLocality”>Candledton, </span>

<span itemprop=”addressRegion”>CO </span>

<span itemprop=”postalCode”>12345</span><br>

<span itemprop=”addressCountry”>USA</span><br>

</div>

</div>

Local Business owners provide information about their businesses by using Schema.org which provides Google with information about business name, physical location, address, telephone number and hours of operation.

Example to add schema for content websites:

Let us assume that we have added the below h1 tag in a website.

<h1>Jane Smith, CEO, Widgets Inc. </h1>

Google Bot knows that the above content is important but it doesn’t know what the content is all about. So, we have to add schema to the above content and now the code looks like below:

<div itemscope itemtype = “http://schema.org/Person”>

        <div itemprop = “name”><strong>Jane Smith</strong></div>

        <div itemscope itemtype = “http”//schema.org/Organization”><span itemprop=”name”>Widgets Inc.</span></div>

        <div itemprop = “jobtitle”>CEO</div>

</div>

Now from the above code, Google bot knows that Jane Smith is the name of a person.

Likewise we can write schema for articles, reviews, products, restaurants, software applications and much more.

Example to add schema for e-commerce websites:

On web, e-commerce sites that is best implemented structured data markup gets a higher click-through rate, thus driving more revenue than other websites that haven’t implemented it.

When people search for a product in search engine, they often get attracted by the search engine results that shows the product names, ratings, reviews, prices and availability of the product. Similarly to show our product, we have to add schema to our product following the Product Schema property.

Let us see an example of a product without schema and with schema.

Product without schema:

Microwave White 17″

<img src=”microwave-17in.jpg” alt=’17” Microwave’ />

Rated 3.5/5 based on 11 customer reviews

$55.00

In stock

Product description: 0.7 cubic feet countertop microwave. Has six preset cooking categories and convenience features like Add-A-Minute and Child Lock.

Product with schema:

<div itemscope itemtype=”http://schema.org/Product”>

  <span itemprop=”name”>Kenmore White 17″ Microwave</span>

  <img itemprop=”image” src=”kenmore-microwave-17in.jpg” alt=’Kenmore 17″ Microwave’ />

  <div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>

      Rated <span itemprop=”ratingValue”>3.5</span>/5

      based on <span itemprop=”reviewCount”>11</span> customer reviews

  </div>

  <div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>

    <span itemprop=”priceCurrency” content=”USD”>$</span><span itemprop=”price” content=”1000.00″>1,000.00</span>

    <link itemprop=”availability” href=”http://schema.org/InStock” />In stock

  </div>

  Product description:

  <span itemprop=”description”>0.7 cubic feet countertop microwave.Has six preset cooking categories and convenience features like Add-A-Minute and Child Lock.</span>

</div>

After implementing the schema, we can see all the details of the product including price, availability and the ratings of the product in Google search results.

We can use the structured data markup helper to easily tag our data. After tagging the data, we will get the html code with microdata markup, which we have to add it in our website code.

Alternatively, you might instead want to use a WordPress plugin which can create all of this code for you. A good example is Schema Creator, which makes the process very simple and straightforward. Though there are many others besides.

Implementing Schema using JSON-LD:

JavaScript Object Notation for Linked Data is a lightweight Linked Data format. It is easy for humans to read and write. It is based on the already successful JSON format.

JSON-LD is a popular alternative way of expressing structured data on webpage. Unlike microdata, it is typically not embedded within the HTML layout of the page itself but as raw data in the header of a page. JSON-LD allows us to collect all data about the product and show them in one small piece of Javascript code, that can just be pushed anywhere into the page.

Below is an example of JSON-LD in a standardized format.

<script type=”application/ld+json”>{

“@context”: “http://schema.org/”,

“@type”: “Product”,

“name”: “Yoast SEO for WordPress”,

“image”: “https://cdn-images.yoast.com/uploads/2010/10/Yoast_SEO_WP_plugin_FB.png”,

“description”: “Yoast SEO is the most complete WordPress SEO plugin. It handles the technical optimization of your site & assists with optimizing your content.”,

“brand”: {

“@type”: “Thing”,

“name”: “Yoast”

},

“offers”: {

“@type”: “Offer”,

“priceCurrency”: “USD”,

“price”: “69.00”

}

}

</script>

If we are using WordPress, there are some plugins that can help out. Yoast SEO already uses JSON-LD to add information about site search.

If you are interested in learning JSON-LD, then JSON-LD Playground tool will be a great help to you. Developers may also use this tool to debug, visualize and share their JSON-LD markup.

After implementing the schema in our website, we can check our website’s schema by pasting either the url or the code snippet in the structured data testing tool.

Applying markups for articles and other content is a similar process too and you can find the full list of schema markups here.

Google Answer Box:

Google answer box is nothing but getting an answer right away at the top of the search results, without having to click through to a website.

Google’s famous answer box powered by the Knowledge Graph. Since Wikipedia is a trusted source, it naturally becomes the source of many of Google’s answer boxes and it is the key to all digital marketing agencies.

If that’s all sounding a little complicated and daunting, don’t worry – your SEO/digital marketing company should be able to handle the process for you. Don’t have an SEO company? Then just give ColorWhistle a call – we offer discounted SEO for start-ups and non-profits and can help give you the competitive advantage your site needs!

Summary

About the Author

Sankar

The founder and mastermind behind ColorWhistle is Sankarnarayan, a professional with over twelve years of experience and a passion for website design services and digital marketing services.

Our team has a wide range of skills and expertise and we always put our clients’ satisfaction first.

This is what sets us apart from the competition – an eye for detail and the best website development services from the start to the completion of your project.