I present here a completely unique example of schema markup, “Out of My Head”. There will be no talk of avatars or tigers here, nor football teams and movie directors. You own a small business in a town where there is competition and you provide a service in that town and you want Google to understand who you are, what you do, where you are, and why you are better than the other guys!

What is Schema?

Schema is code, added to your website’s html, that allows search engines to better understand what information is contained on the web page.

Schema Resources

Schema.org

https://schema.org/docs/gs.html is a good place to get started with schema, it outlines the different structures and syntaxes for schema markup. The properties are clickable links that will open to a new page showing further properties, if applicable, and expected values for the property. Careful, you can quickly end up way down the rabbit hole, with 20 open windows, and a red queen looking for your head!

Google Structured Data Testing Tool

https://search.google.com/structured-data/testing-tool is where you can test your schema, either by uploading your code snippets or by fetching a url. The result will show you the schema from the top level down, with expanding sub-sections, delineating errors and warnings. The warnings are often expected values that Google would like to see included with your markup. So if Google would like to see them, I recommend you put them in.

Advantages of Using Schema for Local Businesses

First and foremost, the advantage of using schema is to minimize ambiguity about:

• Who you are
• What you do
• Where you are
• Examples of your work
• Your business hours
• Your Service area
• What entities are you, i.e. social media personas, nom de plumes
• Adding reviews that are outside Google Reviews to your entity
• Having rich snippets show up in SERPs, like review star ratings or schedules

One theory is, if the search engine understands your website better, then you will rank higher in SERPs. Another theory is, if you get rich snippets in SERPs, you have more real estate on the page, and more information than the others on the page, thus, you are more likely to get a click.

Basic Service Page Without Schema

So below we have a basic webpage, with title and description in the, a header with logo, business name,

for page, and a short description of the service provided.

We continue to a

1.  an article detailing the service
2. images of something showing off the end result of the service
3. customer reviews of the service

The

Page Title for Service

Business Name

Main description of service, business or USP

Examples of Service

Description of service example

Description of service example

Customer Reviews

Review Title

Review Date

Author Name

Review Rating

Max Rating

Review Body

Customer Reviews

Review Title

Review Date

Author Name

Review Rating

Max Rating

Review Body

So now that you have all that digested let’s get to marking up the code using schema.

Understanding Schema Markup

Schema markup has 3 main parts to it:

1.  :: parameter given to the html element that encloses the information pertaining to the that is also defined.
2.  :: syntax where the link is to the page on schema.org that defines that type; in this case “Service”. Note that the link is case sensitive and a change in case can reference a different page.
3.  :: defines an expected property of the defined and will have expected values associated with it.

and 2 more concepts:

1. Expected property: is an that are expected for a specific .
2. embedded item: concept… an can become an in its own right with its own set of expected properties.

and 2 more ideas:

1. an that is included on the webpage but not in a convenient part of the html markup to be enclosed in the can be added to the using a meta tag. i.e.

property name” content=”property value” />

we will see this idea in action when we add schema to the html above.

2. Try to wrap everything in 1

Adding Schema to Your HTML

Marking up the WebPage using Schema

The first thing we are going to add is an of WebPage to define that the web page is, in fact, a web page. Strictly speaking this is not necessary, search engines understand they are looking at web pages…for the most part. I have chosen to add this to thetag because it defines the page. So it looks like this:

https://schema.org/WebPage">head stuff here 
 
   body stuff here
 

So the ends with the tag, so everything in-between is part of the itemtype WebPage. So the properties, ’s, you can define are found at https://schema.org/WebPage and you can see these for yourself at the link. A couple of the more interesting ones, IMO, are: mainContentOfPage and specialty which gives us a places to define what we do and how it is better than the other guy’s.

It should also be noted that Webpage is a sub-category of CreativeWork, so all the itemprop’s of CreativeWork is also available to us to use in the WebPage itemtype.

Defining the Service Schema

Since this is a Service page, I defined an using the

so everything, including the footer is part of the “Service” .

We can further define the “serviceType”, description in subsequent elements and the “areaServed” in atag as seen below in the code block. So here is what it looks like:

https://schema.org/WebPage">
   head stuff

https://schema.org/Service”>

Page Title for Service

Business Name

Main description of service, business or USP

    more body stuff here
   

Defining the Service and serviceType with Schema Markup

I added in the of “serviceType” as a property of “Service” and used the

as the value for that. Then description is another of “Service” and I wrapped that around the intro paragraph for the page. I did not wrap the of “provider” around the logo and business name, preferring to do that in the footer where all the information is together.

It should be noted that there are a growing number of specific “serviceTypes” that are predefined with their own specialized set of schema available like FoodService and Taxi Service.

Using Schema to Define Other Properties — like areaServed

This can be particularly important to service providers with mobile services, like furnace repair, driveway paving, etc. and service areas can be small or large, but it is a good idea to define them. For this, looking at the code block above, we used atag. The logic goes like this.

1. areaServed is a property of Service.
2. GeoShape is a property of areaServed.
3. circle is property of GeoShape.
4. the content of circle is defined by a coordinate pair and a radius defined in meters.

There are many ways to define areaServed, this was just one of them.

Defining Examples of Your Service with Schema

So we want to show off our great work, for web-products we look to link to things directly but for physical products we can only put images of our work on the web page. We do this by using the “serviceOutput” which is a property of “Service”. Before we mark up this section it looks like this:

Examples of Service

Description of service example

Description of old hardwood floor

Description of intangible service performed on the old hardware floor and the outcome

This section shows 2 examples of our service, each with a photo and a description.

Schema Markup of a Product

The first example is marked up as a tangible product, so in the context of “Service” it would be finished product as a result of the Service, like a furnace would be the result of a furnace installation service.

Schema Markup of an Action

The second example is more of an intangible service like refinishing of an existing hardwood floor. I have included 2 images, before and after, for this service. The “serviceOutput” in this case is an “Action”. I have included and “object” of “old hardwood floor” that the “Action” in performed upon. There is a description of the floor and a description of the Action.

The markup looks like this:

Marking up Client Reviews using Schema

Below we see customer reviews that are on your website but not necessarily on Google reviews. Marking these up will allow them to show in your Google My Business knowledge card. They will be marked as “Reviews from the web” or at least that is what they call them today.

There are 2 reviews below, I will mark up both and add and aggregate rating. The aggregate rating can show up in SERPs as stars along side your listing.

Here is the html before we mark it up

Example of a Marking up Review Using Schema

The code below shows the schema markup added to the reviews. This can be a little daunting so I will go through it piece by piece.

The 2 reviews are basically the same. We start with a <itemprop=”review”> which is a property of “Service”, which we wrapped around everything using the

We further defined the of author as “Person” and defined the property “name” of Person. We could define many more properties of Person here if we wanted, like: address, birthDate, email, awards, siblings, spouse, etc but this seems pointless as an author of a review unless they are a celebrity of some sort.

We also defined the “reviewRating” as “Rating” which has the properties of “worstRating”, which we added in using a meta tag, and represents the beginning of the rating scale. Similarly “bestRating” defines the best possible rating on the scale and finally “ratingValue” which is the rating the author gave.

Using Schema Markup to Add Aggregate Review Rating

I placed the aggregate rating before the actual reviews, it could be placed at the bottom of the reviews, or anywhere on the page. It basically shows an average value of the ratings — 4.5/5 on 2 reviews. As stated before this can show up in SERPs included in your listing.

Using Schema to Show Your Company as the Service Provider

The whole point of this exercise is to show that your company offers this great service, can show some super results from the output of the service and has some very happy clients who have used the service…but now…we need to define who you are!

The footer of your webpage is a good place to add the schema markup because all the information is together. The concept here is to wrap the whole footer using the “provider” of the “Service”, then define it as an “Organization” and a “LocalBusiness” .

Below is the code for the footer before we mark it up with schema. It consists of 3 columns. Column1 includes the business name, logo, address and other contact information. Column2 is basically just a map. Column3 includes social media links.

Marking up Company Information with Schema

To start with we used “provider” an of “Service” to wrap around the whole footer assigning an to the expected value of “LocalBusiness” as the . Said another way, the whole footer represents the provider of the service, which is a local business…and here is their information.

In Column1 we defined the ’s “name”, “address”, “telephone”, “logo” and “email”. For LocalBusiness Google expects “priceRange” and “image” (additional image, not just a logo). If you do not define these Google will throw an error or warning when you pass it through the structured data tester. I added these in using. I also added in the domain usingto define the homepage in any data aggregater that picks this up as a data set.

To define the address better we used:

itemprop="address" itemscope itemtype="http://schema.org/PostalAddress

The PostalAddress has further ’ s of: “streetAddress”, “addressLocality”, “addressRegion”, “postalCode” and “addressCountry”. I placed ’s around the appropriate values for these as seen in the code below.

In Column2 the “hasMap” was inserted into the Google Map embedded