{"id":1352,"date":"2017-03-24T17:22:29","date_gmt":"2017-03-24T21:22:29","guid":{"rendered":"http:\/\/www.harrisweb.ca\/blog\/?p=1352"},"modified":"2019-09-27T14:42:09","modified_gmt":"2019-09-27T18:42:09","slug":"schema-markup-for-service-page-of-local-business","status":"publish","type":"post","link":"https:\/\/www.harrisweb.ca\/blog\/schema-markup-for-service-page-of-local-business\/","title":{"rendered":"Schema Markup for Service Page of Local\u00a0Business"},"content":{"rendered":"<section class=\"section section--body\">\n<div class=\"section-divider\"><em><strong>Sorry About this, I changed themes and this post got all missed up lkjlkkj<\/strong><\/em><\/div>\n<div><em><strong>you can read this post how it is supposed to look here:<a href=\"https:\/\/medium.com\/@weprintink\/schema-markup-for-service-page-of-local-business-9ba458fbca60\"> https:\/\/medium.com\/@weprintink\/schema-markup-for-service-page-of-local-business-9ba458fbca60<\/a><\/strong><\/em><\/div>\n<div><em><strong>until I get this fixed<\/strong><\/em><\/div>\n<div class=\"section-content\">\n<div class=\"section-inner sectionLayout--insetColumn\">\n<h3 class=\"graf graf--h3\">Unique Example of\u00a0Schema<\/h3>\n<\/div>\n<\/div>\n<\/section>\n<section class=\"section section--body\">\n<div class=\"section-content\">\n<div class=\"section-inner sectionLayout--insetColumn\">\n<p class=\"graf graf--p\">I present here a completely unique example of schema markup, \u201cOut of My Head\u201d. 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!<\/p>\n<h3 class=\"graf graf--h3\">What is\u00a0Schema?<\/h3>\n<p class=\"graf graf--p\">Schema is code, added to your website\u2019s html, that allows search engines to better understand what information is contained on the web page.<\/p>\n<h3 class=\"graf graf--h3\">Schema Resources<\/h3>\n<h4 class=\"graf graf--h4\">Schema.org<\/h4>\n<p class=\"graf graf--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/schema.org\/docs\/gs.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"https:\/\/schema.org\/docs\/gs.html\">https:\/\/schema.org\/docs\/gs.html<\/a> 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!<\/p>\n<h4 class=\"graf graf--h4\">Google Structured Data Testing\u00a0Tool<\/h4>\n<p class=\"graf graf--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/search.google.com\/structured-data\/testing-tool\" target=\"_blank\" rel=\"noopener noreferrer\" data-href=\"https:\/\/search.google.com\/structured-data\/testing-tool\">https:\/\/search.google.com\/structured-data\/testing-tool<\/a> 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.<\/p>\n<h3 class=\"graf graf--h3\">Advantages of Using Schema for Local Businesses<\/h3>\n<p class=\"graf graf--p\">First and foremost, the advantage of using schema is to minimize ambiguity about:<\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\">Who you are<\/li>\n<li class=\"graf graf--li\">What you do<\/li>\n<li class=\"graf graf--li\">Where you are<\/li>\n<li class=\"graf graf--li\">Examples of your work<\/li>\n<li class=\"graf graf--li\">Your business hours<\/li>\n<li class=\"graf graf--li\">Your Service area<\/li>\n<li class=\"graf graf--li\">What entities are you, i.e. social media personas, nom de plumes<\/li>\n<li class=\"graf graf--li\">Adding reviews that are outside Google Reviews to your entity<\/li>\n<li class=\"graf graf--li\">Having rich snippets show up in SERPs, like review star ratings or schedules<\/li>\n<\/ul>\n<p class=\"graf graf--p\">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.<\/p>\n<h3 class=\"graf graf--h3\">Basic Service Page Without\u00a0Schema<\/h3>\n<p class=\"graf graf--p\">So below we have a basic webpage, with title and description in the, a header with logo, business name,<\/p>\n<h1>for page, and a short description of the service provided.<\/h1>\n<p class=\"graf graf--p\">We continue to a<\/p>\n<nav>section with links to other pages then 3 main sections for the page plus a footer. The 3 main sections are comprised of:<\/nav>\n<ol class=\"postList\">\n<li class=\"graf graf--li\">\u00a0an article detailing the service<\/li>\n<li class=\"graf graf--li\">images of something showing off the end result of the service<\/li>\n<li class=\"graf graf--li\">customer reviews of the service<\/li>\n<\/ol>\n<p class=\"graf graf--p\">The<\/p>\n<footer>section has the business contact information, a map and a social media section.<\/footer>\n<pre class=\"graf graf--pre\"><\/pre>\n<div id=\"container\">\n<header>\n<h1>Page Title for Service<\/h1>\n<p><img decoding=\"async\" src=\"images\/logo.jpg\" \/><\/p>\n<h2>Business Name<\/h2>\n<p>Main description of service, business or USP<\/p>\n<\/header>\n<nav>\n<ul id=\"topmenu\">\n<li>Link to page 1<\/li>\n<li>Link to page 2<\/li>\n<li>Link to page 3<\/li>\n<li>Link to page 4<\/li>\n<li>Link to page 5<\/li>\n<\/ul>\n<\/nav>\n<section id=\"\">\n<h2>Examples of Service<\/h2>\n<div class=\"service-example\"><img decoding=\"async\" src=\"img\/service-image1.jpg\" alt=\"service image desc\" \/>Description of service example<\/div>\n<div class=\"service-example\"><img decoding=\"async\" src=\"img\/service-image2.jpg\" alt=\"service image desc\" \/>Description of service example<\/div>\n<\/section>\n<section id=\"reviews\">\n<h2>Customer Reviews<\/h2>\n<div id=\"review1\" class=\"review\">\n<h3>Review Title<\/h3>\n<h4>Review Date<\/h4>\n<h4>Author Name<\/h4>\n<h4>Review Rating<\/h4>\n<h4>Max Rating<\/h4>\n<p>Review Body<\/p>\n<\/div>\n<h2>Customer Reviews<\/h2>\n<div id=\"review1\" class=\"review\">\n<h3>Review Title<\/h3>\n<h4>Review Date<\/h4>\n<h4>Author Name<\/h4>\n<h4>Review Rating<\/h4>\n<h4>Max Rating<\/h4>\n<p>Review Body<\/p>\n<\/div>\n<\/section>\n<\/div>\n<footer>\n<div id=\"column1\">\n<p><img decoding=\"async\" src=\"img\/logo.jpg\" alt=\"businessname logo\" \/><\/p>\n<h2>Business Name<\/h2>\n<div id=\"address\">123 Main Street<br \/>\nCityName, Region<br \/>\npostal code, country<\/div>\n<h2><a href=\"tel:4165551212\">416-555-1212<\/a><\/h2>\n<h2><a href=\"mailto:info@domainname.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"mailto:info@domainname.com\">info@domainname.com<\/a>&#8220;&gt;<a class=\"markup--anchor markup--pre-anchor\" href=\"mailto:info@domainname.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"mailto:info@domainname.com\">info@domainname.com<\/a><\/h2>\n<\/div>\n<div id=\"column2\">\n<h2>Find Us on Google Maps<\/h2>\n<p><iframe src=\"&lt;a class=\" data-href=\"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\">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&#8243; width=&#8221;600&#8243; height=&#8221;450&#8243; frameborder=&#8221;0&#8243; style=&#8221;border:0&#8243; allowfullscreen&gt;<\/iframe><\/p>\n<\/div>\n<div id=\"column3\">\n<h2>Find us in Social Media<\/h2>\n<div id=\"social-links\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"facebook\"><img decoding=\"async\" src=\"img\/fbicon.jpg\" \/><\/a><\/td>\n<td><a href=\"twitter\"><img decoding=\"async\" src=\"img\/twicon.jpg\" \/><\/a><\/td>\n<td><a href=\"g-plus\"><img decoding=\"async\" src=\"img\/gplicon.jpg\" \/><\/a><\/td>\n<td><a href=\"linkedin\"><img decoding=\"async\" src=\"img\/lnkdin.jpg\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/footer>\n<p class=\"graf graf--p\">So now that you have all that digested let\u2019s get to marking up the code using schema.<\/p>\n<h3 class=\"graf graf--h3\">Understanding Schema\u00a0Markup<\/h3>\n<h4 class=\"graf graf--h4\">Schema markup has 3 main parts to\u00a0it:<\/h4>\n<ol class=\"postList\">\n<li class=\"graf graf--li\">\u00a0:: parameter given to the html element that encloses the information pertaining to the that is also defined.<\/li>\n<li class=\"graf graf--li\">\u00a0:: syntax where the link is to the page on schema.org that defines that type; in this case \u201cService\u201d. Note that the link is case sensitive and a change in case can reference a different page.<\/li>\n<li class=\"graf graf--li\">\u00a0:: defines an expected property of the defined and will have expected values associated with it.<\/li>\n<\/ol>\n<h4 class=\"graf graf--h4\">and 2 more concepts:<\/h4>\n<ol class=\"postList\">\n<li class=\"graf graf--li\">Expected property: is an that are expected for a specific .<\/li>\n<li class=\"graf graf--li\">embedded item: <em class=\"markup--em markup--li-em\">concept\u2026 <\/em>an can become an in its own right with its own set of expected properties.<\/li>\n<\/ol>\n<h4 class=\"graf graf--h4\">and 2 more\u00a0ideas:<\/h4>\n<ol class=\"postList\">\n<li class=\"graf graf--li\">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.<\/li>\n<\/ol>\n<pre class=\"graf graf--pre\">property name\u201d content=\u201d<em class=\"markup--em markup--pre-em\">property value<\/em>\u201d \/&gt;<\/pre>\n<p class=\"graf graf--p\">we will see this idea in action when we add schema to the html above.<\/p>\n<p class=\"graf graf--p\">2. Try to wrap everything in 1<\/p>\n<h3 class=\"graf graf--h3\">Adding Schema to Your\u00a0HTML<\/h3>\n<h4 class=\"graf graf--h4\">Marking up the WebPage using\u00a0Schema<\/h4>\n<p class=\"graf graf--p\">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\u2026for the most part. I have chosen to add this to thetag because it defines the page. So it looks like this:<\/p>\n<pre class=\"graf graf--pre\">https:\/\/schema.org\/WebPage\"&gt;<em class=\"markup--em markup--pre-em\">head stuff here<\/em> \r\n \r\n   <em class=\"markup--em markup--pre-em\">body stuff here<\/em>\r\n \r\n<\/pre>\n<p class=\"graf graf--p\">So the ends with the tag, so everything in-between is part of the itemtype WebPage. So the properties, \u2019s, you can define are found at <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/schema.org\/WebPage\" target=\"_blank\" rel=\"noopener noreferrer\" data-href=\"https:\/\/schema.org\/WebPage\">https:\/\/schema.org\/WebPage<\/a> and you can see these for yourself at the link. A couple of the more interesting ones, IMO, are: <em class=\"markup--em markup--p-em\">mainContentOfPage<\/em> and <em class=\"markup--em markup--p-em\">specialty<\/em> which gives us a places to define what we do and how it is better than the other guy\u2019s.<\/p>\n<p class=\"graf graf--p\">It should also be noted that <em class=\"markup--em markup--p-em\">Webpage<\/em> is a sub-category of <em class=\"markup--em markup--p-em\">CreativeWork<\/em>, so all the itemprop\u2019s of <em class=\"markup--em markup--p-em\">CreativeWork<\/em> is also available to us to use in the <em class=\"markup--em markup--p-em\">WebPage <\/em>itemtype.<\/p>\n<h4 class=\"graf graf--h4\">Defining the Service\u00a0Schema<\/h4>\n<p class=\"graf graf--p\">Since this is a Service page, I defined an using the<\/p>\n<div id=\"\u201dwrapper\u201d\">so everything, including the footer is part of the \u201cService\u201d .<\/div>\n<p class=\"graf graf--p\">We can further define the \u201cserviceType\u201d, description in subsequent elements and the \u201careaServed\u201d in atag as seen below in the code block. So here is what it looks like:<\/p>\n<pre class=\"graf graf--pre\">https:\/\/schema.org\/WebPage\"&gt;\r\n   head stuff<\/pre>\n<div id=\"wrapper\" data-href=\"https:\/\/schema.org\/Service\">\n<p>https:\/\/schema.org\/Service&#8221;&gt;<\/p>\n<div id=\"container\">\n<header>\n<h1>Page Title for Service<\/h1>\n<p><img decoding=\"async\" src=\"images\/logo.jpg\" \/><\/p>\n<h2>Business Name<\/h2>\n<p>Main description of service, business or USP<\/p>\n<\/header>\n<\/div>\n<\/div>\n<pre class=\"graf graf--pre\">    <em class=\"markup--em markup--pre-em\">more body stuff here\r\n   <\/em><\/pre>\n<\/div>\n<p><!--end #container--><\/p>\n<h4 class=\"graf graf--h4\">Defining the Service and serviceType with Schema\u00a0Markup<\/h4>\n<p class=\"graf graf--p\">I added in the of \u201cserviceType\u201d as a property of \u201cService\u201d and used the<\/p>\n<h1>as the value for that. Then description is another of \u201cService\u201d and I wrapped that around the intro paragraph for the page. I did not wrap the of \u201cprovider\u201d around the logo and business name, preferring to do that in the footer where all the information is together.<\/h1>\n<p class=\"graf graf--p\">It should be noted that there are a growing number of specific \u201cserviceTypes\u201d that are predefined with their own specialized set of schema available like <em class=\"markup--em markup--p-em\">FoodService<\/em> and <em class=\"markup--em markup--p-em\">Taxi Service.<\/em><\/p>\n<h4 class=\"graf graf--h4\">Using Schema to Define Other Properties\u200a\u2014\u200alike areaServed<\/h4>\n<p class=\"graf graf--p\">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.<\/p>\n<ol class=\"postList\">\n<li class=\"graf graf--li\">areaServed is a property of Service.<\/li>\n<li class=\"graf graf--li\">GeoShape is a property of areaServed.<\/li>\n<li class=\"graf graf--li\">circle is property of GeoShape.<\/li>\n<li class=\"graf graf--li\">the <em class=\"markup--em markup--li-em\">content<\/em> of <em class=\"markup--em markup--li-em\">circle<\/em> is defined by a coordinate pair and a radius defined in meters.<\/li>\n<\/ol>\n<p class=\"graf graf--p\">There are many ways to define areaServed, this was just one of them.<\/p>\n<h3 class=\"graf graf--h3\">Defining Examples of Your Service with\u00a0Schema<\/h3>\n<p class=\"graf graf--p\">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 \u201cserviceOutput\u201d which is a property of \u201cService\u201d. Before we mark up this section it looks like this:<\/p>\n<section id=\"\">\n<h2>Examples of Service<\/h2>\n<div class=\"service-example\">\n<p><img decoding=\"async\" src=\"img\/-service-image1.jpg\" alt=\"service image desc\" \/>Description of service example<\/p>\n<\/div>\n<\/section>\n<div class=\"service-example\">\n<p><img decoding=\"async\" src=\"img\/before-service-image2.jpg\" alt=\"service image desc\" \/>Description of old hardwood floor<\/p>\n<p><img decoding=\"async\" src=\"img\/after-service-image2.jpg\" alt=\"service image desc\" \/>Description of intangible service performed on the old hardware floor and the outcome<\/p>\n<\/div>\n<pre class=\"graf graf--pre\"><\/pre>\n<\/div>\n<\/section>\n<p class=\"graf graf--p\">This section shows 2 examples of our service, each with a photo and a description.<\/p>\n<h4 class=\"graf graf--h4\">Schema Markup of a\u00a0Product<\/h4>\n<p class=\"graf graf--p\">The first example is marked up as a tangible product, so in the context of \u201cService\u201d it would be finished product as a result of the Service, like a furnace would be the result of a furnace installation service.<\/p>\n<h4 class=\"graf graf--h4\">Schema Markup of an\u00a0Action<\/h4>\n<p class=\"graf graf--p\">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 \u201cserviceOutput\u201d in this case is an \u201cAction\u201d. I have included and \u201cobject\u201d of \u201cold hardwood floor\u201d that the \u201cAction\u201d in performed upon. There is a description of the floor and a description of the Action.<\/p>\n<p class=\"graf graf--p\">The markup looks like this:<\/p>\n<section id=\"service examples\">\n<h2>Examples of Service<\/h2>\n<div class=\"service-example\" data-href=\"http:\/\/schema.org\/Product\">\n<p>http:\/\/schema.org\/Product&#8221;&gt;http:\/\/www.example.com\/img\/service-image1.jpg&#8221; \/&gt; <img decoding=\"async\" src=\"img\/service-image1.jpg\" alt=\"service image desc\" \/>Description of service example<\/p>\n<\/div>\n<div class=\"service-example\" data-href=\"http:\/\/schema.org\/Action\">\n<p>http:\/\/schema.org\/Action&#8221;&gt;<\/p>\n<div data-href=\"https:\/\/schema.org\/Thing\">\n<p>https:\/\/schema.org\/Thing&#8221;&gt;<\/p>\n<h3>Old Hardwood Floor<\/h3>\n<p>http:\/\/www.example.com\/img\/before-service-image2.jpg&#8221; \/&gt; <img decoding=\"async\" src=\"img\/before-service-image2.jpg\" alt=\"service image desc\" \/>Description of old hardwood floor<\/p>\n<\/div>\n<p>http:\/\/www.example.com\/img\/after-service-image2.jpg&#8221; \/&gt; <img decoding=\"async\" src=\"img\/after-service-image2.jpg\" alt=\"service image desc\" \/>Description of intangible service performed on the old hardware floor and the outcome<\/p>\n<\/div>\n<\/section>\n<h3 class=\"graf graf--h3\">Marking up Client Reviews using\u00a0Schema<\/h3>\n<p class=\"graf graf--p\">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 \u201cReviews from the web\u201d or at least that is what they call them today.<\/p>\n<p class=\"graf graf--p\">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.<\/p>\n<p class=\"graf graf--p\">Here is the html before we mark it up<\/p>\n<section id=\"reviews\">\n<h2>Customer Reviews<\/h2>\n<div id=\"review1\" class=\"review\">\n<h3>This is the Title of the Review<\/h3>\n<h4>Reviewed on: 2017-06-01<\/h4>\n<h4>by: Author Name<\/h4>\n<h4>Review Rating: 4<\/h4>\n<h4>Max Rating: 5&#8243;<\/h4>\n<p>Review Body&#8230;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;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>\n<\/div>\n<div id=\"review2\" class=\"review\">\n<h3>Another Review Title<\/h3>\n<h4>Reviewed on: 2017-07-01<\/h4>\n<h4>by: Author Name #2<\/h4>\n<h4>Review Rating: 5<\/h4>\n<h4>Max Rating: 5&#8243;<\/h4>\n<p>Second Review Body&#8230;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;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>\n<\/div>\n<\/section>\n<h4 class=\"graf graf--h4\">Example of a Marking up Review Using\u00a0Schema<\/h4>\n<p class=\"graf graf--p\">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.<\/p>\n<p class=\"graf graf--p\">The 2 reviews are basically the same. We start with a &lt;itemprop=\u201dreview\u201d&gt; which is a property of \u201cService\u201d, which we wrapped around everything using the<\/p>\n<div id=\"\u201dwrapper\u201d\">. So we set the to wrap around a single review and defined the as Review. We defined the properties of Review using: \u201cname\u201d, \u201cdatePublished\u201d, \u201cauthor\u201d, \u201creviewRating\u201d and \u201creviewBody\u201d. We wrapped these around the appropriate data.<\/div>\n<p class=\"graf graf--p\">We further defined the of author as \u201cPerson\u201d and defined the property \u201cname\u201d 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.<\/p>\n<p class=\"graf graf--p\">We also defined the \u201creviewRating\u201d as \u201cRating\u201d which has the properties of \u201cworstRating\u201d, which we added in using a meta tag, and represents the beginning of the rating scale. Similarly \u201cbestRating\u201d defines the best possible rating on the scale and finally \u201cratingValue\u201d which is the rating the author gave.<\/p>\n<section id=\"reviews\">\n<h2>Customer Reviews<\/h2>\n<div id=\"review1\" class=\"review\" data-href=\"http:\/\/schema.org\/Review\">\n<p>http:\/\/schema.org\/Review&#8221;&gt;<\/p>\n<h3>This is the Title of the Review<\/h3>\n<h4>Reviewed on: 2017-06-01<\/h4>\n<h4>by: <span data-href=\"http:\/\/schema.org\/Person\">http:\/\/schema.org\/Person&#8221;&gt; Author Name<\/span><\/h4>\n<div data-href=\"http:\/\/schema.org\/Rating\">\n<p>http:\/\/schema.org\/Rating&#8221; &gt;<\/p>\n<h4>Review Rating: 4<\/h4>\n<h4>Max Rating: 5<\/h4>\n<\/div>\n<p>Review Body &#8230; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;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>\n<\/div>\n<div id=\"review2\" class=\"review\" data-href=\"http:\/\/schema.org\/Review\">\n<p>http:\/\/schema.org\/Review&#8221;&gt;<\/p>\n<h3>Another Review Title<\/h3>\n<h4>Reviewed on: 2017-07-01<\/h4>\n<h4>by: <span data-href=\"http:\/\/schema.org\/Person\">http:\/\/schema.org\/Person&#8221;&gt; Author Name #2<\/span><\/h4>\n<div data-href=\"http:\/\/schema.org\/Rating\">\n<p>http:\/\/schema.org\/Rating&#8221; &gt;<\/p>\n<h4>Review Rating: 5<\/h4>\n<h4>Max Rating: 5<\/h4>\n<\/div>\n<p>Second Review Body&#8230; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;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>\n<\/div>\n<\/section>\n<h4 class=\"graf graf--h4\">Using Schema Markup to Add Aggregate Review\u00a0Rating<\/h4>\n<p class=\"graf graf--p\">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\u200a\u2014\u200a4.5\/5 on 2 reviews. As stated before this can show up in SERPs included in your listing.<\/p>\n<section id=\"reviews\">\n<h2>Customer Reviews<\/h2>\n<div data-href=\"http:\/\/schema.org\/AggregateRating\">http:\/\/schema.org\/AggregateRating&#8221;&gt; Rated 4.5\/5 based on 2 customer reviews<\/div>\n<p><!-- I put the actual reviews here --><\/p>\n<\/section>\n<h3 class=\"graf graf--h3\">Using Schema to Show Your Company as the Service\u00a0Provider<\/h3>\n<p class=\"graf graf--p\">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\u2026but now\u2026we need to define who you are!<\/p>\n<p class=\"graf graf--p\">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 \u201cprovider\u201d of the \u201cService\u201d, then define it as an \u201cOrganization\u201d and a \u201cLocalBusiness\u201d\u00a0.<\/p>\n<p class=\"graf graf--p\">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.<\/p>\n<footer>\n<div id=\"column1\">\n<p><img decoding=\"async\" src=\"img\/logo.jpg\" alt=\"businessname logo\" \/><\/p>\n<h2>Business Name<\/h2>\n<div id=\"address\">123 Main Street CityName, Region postal code, country<\/div>\n<h2><a href=\"tel:4165551212\">416-555-1212<\/a><\/h2>\n<h2><a href=\"mailto:info@domainname.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"mailto:info@domainname.com\">info@domainname.com<\/a>&#8220;&gt;<a class=\"markup--anchor markup--pre-anchor\" href=\"mailto:info@domainname.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"mailto:info@domainname.com\">info@domainname.com<\/a><\/h2>\n<\/div>\n<div id=\"column2\">\n<h2>Find Us on Google Maps<\/h2>\n<p><iframe src=\"&lt;a class=\" data-href=\"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\">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&#8243; width=&#8221;600&#8243; height=&#8221;450&#8243; frameborder=&#8221;0&#8243; style=&#8221;border:0&#8243; allowfullscreen&gt;<\/iframe><\/p>\n<\/div>\n<div id=\"column3\">\n<h2>Find us in Social Media<\/h2>\n<div id=\"social-links\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"facebook\"><img decoding=\"async\" src=\"img\/facebkicon.jpg\" \/><\/a><\/td>\n<td><a href=\"twitter\"><img decoding=\"async\" src=\"img\/twittericon.jpg\" \/><\/a><\/td>\n<td><a href=\"googleplus\"><img decoding=\"async\" src=\"img\/googleplusicon.jpg\" \/><\/a><\/td>\n<td><a href=\"linkedin\"><img decoding=\"async\" src=\"img\/linkedin.jpg\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/footer>\n<h4 class=\"graf graf--h4\">Marking up Company Information with\u00a0Schema<\/h4>\n<p class=\"graf graf--p\">To start with we used \u201cprovider\u201d an of \u201cService\u201d to wrap around the whole footer assigning an to the expected value of \u201cLocalBusiness\u201d as the . Said another way, the whole footer represents the provider of the service, which is a local business\u2026and here is their information.<\/p>\n<p class=\"graf graf--p\">In Column1 we defined the \u2019s \u201cname\u201d, \u201caddress\u201d, \u201ctelephone\u201d, \u201clogo\u201d and \u201cemail\u201d. For LocalBusiness Google expects \u201cpriceRange\u201d and \u201cimage\u201d (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.<\/p>\n<p class=\"graf graf--p\">To define the address better we used:<\/p>\n<pre class=\"graf graf--pre\">itemprop=\"address\" itemscope itemtype=\"<a class=\"markup--anchor markup--pre-anchor\" href=\"http:\/\/schema.org\/PostalAddress\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"http:\/\/schema.org\/PostalAddress\">http:\/\/schema.org\/PostalAddress<\/a><\/pre>\n<p class=\"graf graf--p\">The PostalAddress has further \u2019 s of: \u201cstreetAddress\u201d, \u201caddressLocality\u201d, \u201caddressRegion\u201d, \u201cpostalCode\u201d and \u201caddressCountry\u201d. I placed \u2019s around the appropriate values for these as seen in the code below.<\/p>\n<p class=\"graf graf--p\">In Column2 the \u201chasMap\u201d was inserted into the Google Map embedded <iframe>\u200a\u2014\u200anice\u2019n\u2019easy.<\/p>\n<p class=\"graf graf--p\">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.<\/a><\/itemprop><\/p>\n<pre class=\"graf graf--pre\">\r\n\r\n<footer itemprop=\"provider\" itemscope=\"\" itemtype=\"&lt;a class=\" markup--anchor=\"\" markup--pre-anchor=\"\" href=\"http:\/\/schema.org\/LocalBusiness\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"http:\/\/schema.org\/LocalBusiness\">http:\/\/schema.org\/LocalBusiness\"&gt;\r\n\r\n\r\n\r\n\r\n\r\n<div id=\"column1\">\r\n     <img decoding=\"async\" itemprop=\"logo\" src=\"img\/logo.jpg\" alt=\"businessname logo\" \/>\r\n     \r\n\r\n\r\n\r\n\r\n\r\n<h2 itemprop=\"name\">Business Name<\/h2>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div id=\"address\" itemprop=\"address\" itemscope=\"\" itemtype=\"&lt;a class=\" markup--anchor=\"\" markup--pre-anchor=\"\" href=\"http:\/\/schema.org\/PostalAddress\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"http:\/\/schema.org\/PostalAddress\">http:\/\/schema.org\/PostalAddress\"&gt;\r\n      <span itemprop=\"streetAddress\">123 Main Street<\/span>\r\n      <span itemprop=\"addressLocality\">CityName<\/span>,\r\n      <span itemprop=\"addressRegion\">Region<\/span>\r\n      <span itemprop=\"postalCode\">postal code<\/span>,\r\n      <span itemprop=\"addressCountry\">country <\/span>   \r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<h2 itemprop=\"telephone\"><a href=\"tel:4165551212\">416-555-1212<\/a><\/h2>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<h2><a href=\"&lt;a class=\" markup--anchor=\"\" markup--pre-anchor=\"\" href=\"mailto:info@domainname.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"mailto:info@domainname.com\">info@domainname.com<\/a>\"&gt;<span itemprop=\"email\"><a class=\"markup--anchor markup--pre-anchor\" href=\"mailto:info@domainname.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"mailto:info@domainname.com\">info@domainname.com<\/a><\/span><\/h2>\r\n\r\n\r\n\r\n\r\n\r\n     <meta itemprop=\"image\" content=\"&lt;a class=\" markup--anchor=\"\" markup--pre-anchor=\"\" href=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b2\/Centre_Block_-_Parliament_Hill.jpg\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b2\/Centre_Block_-_Parliament_Hill.jpg\" \/>https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b2\/Centre_Block_-_Parliament_Hill.jpg\"\/&gt;\r\n     <meta itemprop=\"priceRange\" content=\"$400 to $15000\" \/>\r\n     <meta itemprop=\"url\" content=\"&lt;a class=\" markup--anchor=\"\" markup--pre-anchor=\"\" href=\"http:\/\/www.companydomain.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"http:\/\/www.companydomain.com\" \/>http:\/\/www.companydomain.com\" \/&gt;\r\n     \r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div id=\"column2\">\r\n\r\n\r\n\r\n\r\n\r\n<h2>Find Us on Google Maps<\/h2>\r\n\r\n\r\n\r\n\r\n\r\n     <iframe itemprop=\"hasMap\" src=\"&lt;a class=\" markup--anchor=\"\" markup--pre-anchor=\"\" href=\"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\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"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\">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&gt;<\/iframe>\r\n<\/div>\r\n<\/footer><\/pre>\n<p><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<div id=\"column3\">\n<h2>Find us in Social Media<\/h2>\n<div id=\"social-links\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"facebook.com\"><img decoding=\"async\" src=\"img\/facebkicon.jpg\" \/><\/a><\/td>\n<td><a href=\"twitter.com\"><img decoding=\"async\" src=\"img\/twittericon.jpg\" \/><\/a><\/td>\n<td><a href=\"googleplus.com\"><img decoding=\"async\" src=\"img\/googleplusicon.jpg\" \/><\/a><\/td>\n<td><a href=\"linkedin.com\"><img decoding=\"async\" src=\"img\/linkedin.jpg\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>Well that was a lot of work! What we now have is a webpage, that defines a service, names &amp; describes the service, defines images of the service &amp; reviews of the services. It tells search engines who the provider of the service is, what the contact information of the provider is and links the social media profiles back to the provider without ambiguity.<\/p>\n<h2>Bio<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-1356 alignleft\" src=\"http:\/\/www.harrisweb.ca\/blog\/wp-content\/uploads\/2017\/03\/steve.png\" alt=\"Steve Bonin, Harrisweb Creative\" width=\"140\" height=\"193\" \/><\/p>\n<p>I am Steve Bonin, my company is HarrisWeb Creative. I do web development, website design and search engine marketing. More of my stuff can be found at <a href=\"http:\/\/www.harrisweb.ca\">www.harrisweb.ca<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sorry About this, I changed themes and this post got all missed up lkjlkkj you can read this post how it is supposed to look here: https:\/\/medium.com\/@weprintink\/schema-markup-for-service-page-of-local-business-9ba458fbca60 until I get this fixed Unique Example of\u00a0Schema I present here a completely unique example of schema markup, \u201cOut of My Head\u201d. There will be no talk of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1354,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[56],"tags":[],"class_list":["post-1352","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo"],"_links":{"self":[{"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/posts\/1352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/comments?post=1352"}],"version-history":[{"count":12,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/posts\/1352\/revisions"}],"predecessor-version":[{"id":1570,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/posts\/1352\/revisions\/1570"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/media\/1354"}],"wp:attachment":[{"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/media?parent=1352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/categories?post=1352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/tags?post=1352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}