Unique Example of Schema
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.
<!DOCTYPE html>
<html>
<head>
<title>Local Business Service Page</title>
<meta name ="Description" content="Description of service for SERPs" />
</head>
<body>
<wrapper>
<div id="container">
<header>
<h1>Page Title for Service</h1>
<img src="images/logo.jpg" />
<h2>Business Name</h2>
<p>Main description of service, business or USP</p>
</header>
<nav>
<ul id="topmenu">
<li>Link to page 1</li>
<li>Link to page 2</li>
<li>Link to page 3</li>
<li>Link to page 4</li>
<li>Link to page 5</li>
</ul>
</nav>
<section id="service examples>
<h2>Examples of Service</h2>
<div class="service-example">
<img src="img/service-image1.jpg" alt="service image desc" />
<p>Description of service example</p>
</div>
<div class="service-example">
<img src="img/service-image2.jpg" alt="service image desc" />
<p>Description of service example</p>
</div>
</section>
<section id="reviews">
<h2>Customer Reviews</h2>
<div class="review" id="review1">
<h3>Review Title</h3>
<h4>Review Date</h4>
<h4>Author Name</h4>
<h4>Review Rating</h4><h4>Max Rating</h4>
<p>Review Body</p>
</div>
<h2>Customer Reviews</h2>
<div class="review" id="review1">
<h3>Review Title</h3>
<h4>Review Date</h4>
<h4>Author Name</h4>
<h4>Review Rating</h4><h4>Max Rating</h4>
<p>Review Body</p>
</div>
</section>
</div>
<footer>
<div id="column1">
<img src="img/logo.jpg" alt="businessname logo" />
<h2>Business Name</h2>
<div id="address">
123 Main Street
CityName, Region
postal code, country
</div>
<h2><a href="tel:4165551212">416-555-1212</a></h2>
<h2><a href="info@domainname.com">info@domainname.com</a></h2>
</div>
<div id="column2">
<h2>Find Us on Google Maps</h2>
<iframe src="https://www.google.com/maps/
embed?pb=!1m14!1m12!1m3!1d11576.264402431727!2d-79.84087805!3d43.
5009566!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sca!
4v1490106502845" width="600" height="450" frameborder="0"
style="border:0" allowfullscreen></iframe>
</div>
<div id="column3">
<h2>Find us in Social Media</h2>
<div id="social-links">
<table>
<tr>
<td><a href="facebook"><img src="img/fbicon.jpg" /></a></td>
<td><a href="twitter"><img src="img/twicon.jpg" /></a></td>
<td><a href="g-plus"><img src="img/gplicon.jpg" /></a></td>
<td><a href="linkedin"><img src="img/lnkdin.jpg" /></a></td>
</tr>
</table>
</div>
</div>
</footer>
</wrapper>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</html>
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:
- <itemscope> :: parameter given to the html element that encloses the information pertaining to the <itemtype> that is also defined.
- <itemtype> :: syntax <itemscope itemtype = “http://schema.org/Service”> 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.
- <itemprop> :: defines an expected property of the defined <itemtype> and will have expected values associated with it.
and 2 more concepts:
- Expected property: is an<itemprop> that are expected for a specific <itemtype>.
- embedded item: concept… an <itemprop> can become an <itemtype> in its own right with its own set of expected properties.
and 2 more ideas:
- an <itemprop> that is included on the webpage but not in a convenient part of the html markup to be enclosed in the <itemscope> can be added to the <itemscope> using a meta tag. i.e.
<meta itemprop=”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 <itemscope>
Adding Schema to Your HTML
Marking up the WebPage using Schema
The first thing we are going to add is an <itemscope> 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 the <html> tag because it defines the page. So it looks like this:
<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/WebPage">
<head>
head stuff here
</head>
<body>
body stuff here
</body>
</html>
So the <itemscope> ends with the </html> tag, so everything in-between is part of the itemtype WebPage. So the properties, <itemprop>’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 <itemscope> using the <div id=”wrapper”> so everything, including the footer is part of the “Service” <itemscope>.
We can further define the “serviceType”, description in subsequent elements and the “areaServed” in a <meta itemprop> tag as seen below in the code block. So here is what it looks like:
<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/WebPage">
<head>
head stuff
</head>
<body>
<div id="wrapper" itemscope itemtype ="https://schema.org/Service">
<div id="container">
<header>
<h1 itemprop="serviceType">Page Title for Service</h1>
<img src="images/logo.jpg" />
<h2>Business Name</h2>
<p itemprop="description">Main description of service, business or USP</p>
<meta itemprop="areaServed"
itemprop="GeoShape"
itemprop="circle" content="43.5227904 -80.2226189 50000" />
</header>
more body stuff here
</div><!--end #container-->
</wrapper>
</body>
</html>
Defining the Service and serviceType with Schema Markup
I added in the <itemprop> of “serviceType” as a property of “Service” and used the <h1> as the value for that. Then description is another <itemprop> of “Service” and I wrapped that around the intro paragraph for the page. I did not wrap the <itemprop> 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 a <meta itemprop> tag. The logic goes like this.
- areaServed is a property of Service.
- GeoShape is a property of areaServed.
- circle is property of GeoShape.
- 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 <itemprop> “serviceOutput” which is a property of “Service”. Before we mark up this section it looks like this:
<section id="service examples>
<h2>Examples of Service</h2>
<div class="service-example">
<img src="img/-service-image1.jpg" alt="service image desc" />
<p>Description of service example</p>
</div><div class="service-example">
<img src="img/before-service-image2.jpg" alt="service image desc" />
<p>Description of old hardwood floor</p>
<img src="img/after-service-image2.jpg" alt="service image desc" />
<p>Description of intangible service performed on the old hardware floor
and the outcome</p>
</div>
</section>
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:
<section id="service examples">
<h2>Examples of Service</h2>
<div class="service-example" itemprop="serviceOutput" itemscope itemtype="
http://schema.org/Product">
<meta itemprop="image" content="http://www.example.com/img/service-image1.jpg" />
<img src="img/service-image1.jpg" alt="service image desc" />
<p itemprop="description">Description of service example</p>
</div>
<div class="service-example" itemprop="serviceOutput" itemscope itemtype="
http://schema.org/Action">
<div itemprop="object" itemscope itemtype="https://schema.org/Thing">
<span itemprop="name"><h3 >Old Hardwood Floor</h3></span>
<meta itemprop="image" content="http://www.example.com/img/
before-service-image2.jpg" />
<img src="img/before-service-image2.jpg" alt="service image desc" />
<p itemprop="description">Description of old hardwood floor</p>
</div>
<meta itemprop="image" content="http://www.example.com/img/
after-service-image2.jpg" />
<img src="img/after-service-image2.jpg" alt="service image desc" />
<p itemprop="description">Description of intangible service performed on
the old hardware floor and the outcome</p>
</div>
</section>
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 starts alongside your listing.
Here is the html before we mark it up
<section id="reviews"> <h2>Customer Reviews</h2> <div class="review" id="review1"> <h3>This is the Title of the Review</h3> <h4>Reviewed on: 2017-06-01</h4> <h4>by: Author Name</h4> <h4>Review Rating: 4</h4><h4>Max Rating: 5"</h4> <p>Review Body...Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.</p> </div> <div class="review" id="review2"> <h3>Another Review Title</h3> <h4>Reviewed on: 2017-07-01</h4> <h4>by: Author Name #2</h4> <h4>Review Rating: 5</h4><h4>Max Rating: 5"</h4> <p>Second Review Body...Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book.</p> </div> </section>
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 <div id=”wrapper”>. So we set the <itemscope> to wrap around a single review and defined the <itemtype> as Review. We defined the properties of Review using: “name”, “datePublished”, “author”, “reviewRating” and “reviewBody”. We wrapped these around the appropriate data.
We further defined the <itemtype> 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 <itemtype> “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.
<section id="reviews"> <h2>Customer Reviews</h2> <div class="review" id="review1" itemprop="review" itemscope itemtype="
http://schema.org/Review"> <h3 itemprop="name">This is the Title of the Review</h3> <h4>Reviewed on: <span itemprop="datePublished">2017-06-01</span></h4> <h4>by: <span itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Author Name</span></span></h4> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating" > <meta itemprop="worstRating" content="1" /> <h4>Review Rating: <span itemprop="ratingValue">4</span></h4>
<h4>Max Rating: <span itemprop="bestRating">5</span></h4> </div> <p itemprop="reviewBody">Review Body ... Lorem Ipsum is simply dummy text of
the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book.</p> </div> <div class="review" id="review2" itemprop="review" itemscope itemtype=
"http://schema.org/Review"> <h3 itemprop="name">Another Review Title</h3> <h4>Reviewed on: <span itemprop="datePublished">2017-07-01</span></h4> <h4>by: <span itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Author Name #2</span></span></h4> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating" > <meta itemprop="worstRating" content="1" /> <h4>Review Rating: <span itemprop="ratingValue">5</span></h4>
<h4>Max Rating: <span itemprop="bestRating">5</span></h4> </div> <p itemprop="reviewBody">Second Review Body... Lorem Ipsum is simply dummy
text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.</p> </div> </section> ;
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.
<section id="reviews">
<h2>Customer Reviews</h2>
<div itemprop="aggregateRating"itemscope itemtype="http://schema.org/AggregateRating">
Rated <span itemprop="ratingValue">4.5</span>/5
based on <span itemprop="reviewCount">2</span> customer reviews
</div>
<!-- I put the actual reviews here -->
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 <itemprop> “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.
<footer>
<div id="column1">
<img src="img/logo.jpg" alt="businessname logo" />
<h2>Business Name</h2>
<div id="address">
123 Main Street
CityName, Region
postal code, country
</div>
<h2><a href="tel:4165551212">416-555-1212</a></h2>
<h2><a href="info@domainname.com">info@domainname.com</a></h2>
</div>
<div id="column2">
<h2>Find Us on Google Maps</h2>
<iframe src="https://www.google.com/maps/embed?
pb=!1m14!1m12!1m3!1d11576.264402431727!2d-
79.84087805!3d43.5009566!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sca
!4v1490106502845" width="600" height="450" frameborder="0"
style="border:0" allowfullscreen></iframe>
</div>
<div id="column3">
<h2>Find us in Social Media</h2>
<div id="social-links">
<table>
<tr>
<td><a href="facebook"><img src="img/facebkicon.jpg" /></a></td>
<td><a href="twitter"><img src="img/twittericon.jpg" /></a></td>
<td><a href="googleplus"><img src="img/googleplusicon.jpg" /></a></td>
<td><a href="linkedin"><img src="img/linkedin.jpg" /></a></td>
</tr>
</table>
</div>
</div>
</footer>
Marking up Company Information with Schema
To start with we used “provider” an <itemprop> of “Service” to wrap around the whole footer assigning an <itemscope> to the expected value of “LocalBusiness” as the <itemtype>. 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 <itemprop>’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 <meta itemprop=””…>. I also added in the domain using <meta itemprop=”url” …> to 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 <itemtype> PostalAddress has further <itemprop>’ s of: “streetAddress”, “addressLocality”, “addressRegion”, “postalCode” and “addressCountry”. I placed <span>’s around the appropriate values for these as seen in the code below.
In Column2 the <itemprop> “hasMap” was inserted into the Google Map embedded <iframe> — nice’n’easy.
Column3 contains the social media links, this is where you can use the <itemprop> sameAs to show that the social links contained in the anchor <a> is the sameAs this LocalBusiness.
<footer itemprop="provider" itemscope itemtype="http://schema.org/LocalBusiness">
<div id="column1">
<img itemprop="logo" src="img/logo.jpg" alt="businessname logo" />
<h2 itemprop="name">Business Name</h2>
<div id="address" itemprop="address" itemscope
itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">123 Main Street</span>
<span itemprop="addressLocality">CityName</span>,
<span itemprop="addressRegion">Region</span>
<span itemprop="postalCode">postal code</span>,
<span itemprop="addressCountry">country </span>
</div>
<h2 itemprop="telephone"><a href="tel:4165551212">416-555-1212</a></h2>
<h2><a href="info@domainname.com"><span itemprop="email">info@domainname.com
</span></a></h2>
<meta itemprop="image"
content="https://upload.wikimedia.org/wikipedia/commons/b/b2/Centre_Block_-_
Parliament_Hill.jpg"/>
<meta itemprop="priceRange" content="$400 to $15000" />
<meta itemprop="url" content="http://www.companydomain.com" />
</div>
<div id="column2">
<h2>Find Us on Google Maps</h2>
<iframe itemprop="hasMap" src="https://www.google.com/maps/
embed?pb=!1m14!1m12!1m3!1d11576.264402431727!2d-79.84087805!3d43.
5009566!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sca!4v1490106502845"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div id="column3">
<h2>Find us in Social Media</h2>
<div id="social-links">
<table>
<tr>
<td><a itemprop="sameAs" href="facebook.com"><img src="img/facebkicon.jpg" /></a></td>
<td><a itemprop="sameAs" href="twitter.com"><img src="img/twittericon.jpg" /></a></td>
<td><a itemprop="sameAs" href="googleplus.com"><img src="img/googleplusicon.jpg" />
</a></td>
<td><a itemprop="sameAs" href="linkedin.com"><img src="img/linkedin.jpg" /></a></td>
</tr>
</table>
</div>
</div>
</footer>