What is schema markups?

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 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>


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

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


<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>



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>


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


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 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


  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>


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”




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. WordPress 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 know how to hire 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!

A Complete Introduction to the Fascinating World of Typography for Web Design

When it comes to web design, the devil is in the details. In other words, to make your site really great you need to pay attention to every last aspect and put real thought into everything you do.

Take your choice of font for example. This is something that you may not have even noticed when browsing the web but the reality is that every page you visit will have put painstaking thought into their choice of font. And there’s so much to consider when choosing just the right typography. Read on and we’ll take a look at some of those things…

What is Typography?

To start with, did you know there’s a difference between font and typeface? Essentially, the typeface is the ‘category’ of text style whereas the font is the precise choice. For instance, Arial is a typeface; whereas Arial Narrow and Arial Bold are fonts.

Both typefaces and fonts were originally born out of necessity with the emergence of analog printing. Back then, letters were laid out in frames that could be rolled in ink and then pressed onto paper (hence printing press). Typefaces and fonts dictated the shape and style of these letters with the aim of ensuring maximum readability and legibility.

Today that is still the aim of typography – to ensure your text is comfortable and easy to read – but it also has an impact on the overall look and feel of your web design.

Aspects of a Typeface

To these ends, there are numerous ‘aspects’ of a typeface that you need to consider…


The history of typefaces is a fascinating one and in many ways mirrors the history of our culture and the printing press in particular. Over the years many different styles have come in and out of fashion but generally there are three main categories that you can pick from: Old Style (Geralde), Transitional and Modern. They are defined by the thickness of the vertical and horizontal lines as well as their use or lack of serifs. The era or flavor of your font can also be divided further however: ‘humanist’ typefaces for instance tend to have more prominent curves. Check out this excellent video for more on where typography comes from and how that has literally shaped it over the years.


A ‘Serif’ is the little flick on the ends of a letter. For instance, the feet on the bottom of a capital A. As a general rule, Old Styles are more likely to feature these than Modern styles. Today they are more common in print than online, though they may be used in web designs that are trying to mimic the feel of the printed word or in headings and article titles. A typeface without a serif is called ‘sans serif’.


‘Kerning’ describes the relative distance between letters which is important for legibility. This too is more complicated than you might at first suspect as different letters require more space depending on the letter they’re next to. So if you’re going to design your own typography for your website there’s a lot you need to consider! ‘Monospace’ is any font designed to ensure the space between letters is consistent which has a very ‘source code’ look to it.

Rules for Web Design

So now you know some of the basics, you’re ready to learn some of the rules that web designers need to stick to…

No More Than Three Fonts

In any web design, you shouldn’t use more than three fonts. Ideally you should have two (one for headers and one for body text) with a third used sparingly.

Choose Fonts That Are Similar…

Avoid picking typefaces from entirely different eras. A gothic typeface for instance and a modern typeface can look jarring next to each other. This infographic can help you through the process.

But Not too Similar…

That said, there should be some distinct difference between your fonts. Using Arial and Arial Bold for instance won’t have much of an impact and can lead to your site looking a little bland.

Choose Fonts Fit for Purpose

Some fonts are designed to be ‘display fonts’ (think impact) whereas others are designed for paragraphs. Choose the right font for the situation.

Never Use Comic Sans

‘Nuff said!

Top Tips

Finally, the following are not ‘rules’ so much as useful tips that can help you to make the right typography decisions.

  • Remember that different typefaces will say different things about your site. Modern fonts are good for modern businesses.
  • Narrow fonts can be useful if you need to make use of a narrow space while wide fonts work well for centered text that you want to spread out across the available space.
  • The color of your typeface will have a big impact on the impression it creates and its legibility
  • Bear in mind for responsive website development that your text may have to grow and shrink to adapt to display size
  • Take a look at Font Squirrel to find some great free typefaces and to get started!