I am trying to improve SEO for a local plumber website. I am using the following elements in the contact section:
<div itemscope itemtype="http://schema.org/Plumber">
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
I also want to list the services that are provided. These are shown in a list and include: Boiler services, Installation, Fix leaking taps etc.
How would I markup these multiple services?
You can add an OfferCatalog of Offers which are the provided Services:
<div itemscope itemtype="http://schema.org/Plumber">
<span itemprop="name">Mr. Plumber</span>
<!-- other properties e.g. address -->
<ul itemprop="hasOfferCatalog" itemscope itemtype="http://schema.org/OfferCatalog">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/OfferCatalog">
<span itemprop="name">Services offered</span>
<ul itemprop="itemListElement" itemscope itemtype="http://schema.org/OfferCatalog">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Offer">
<div itemprop="itemOffered" itemscope itemtype="http://schema.org/Service">
<span itemprop="name">Service one name</span>
</div>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Offer">
<div itemprop="itemOffered" itemscope itemtype="http://schema.org/Service">
<span itemprop="name">Service two name</span>
</div>
</li>
</ul>
</li>
</ul>
</div>
This is based on the example for an OfferCatalog.
Related
I am using BigCommerce Theme for my website and I was trying to show Brands on homepage. I used below mentioned code but it does not give any output. Here is my code
<ul class="brandGrid">
{{#each brands}}
<li class="brand">
<article class="card {{#if alternate}}card--alternate{{/if}}">
<figure class="card-figure">
<a href="{{url}}">
<img class="card-image" src="{{getImage image 'brand_size' (cdn ../theme_settings.default_image_brand)}}" alt="{{name}}" title="{{name}}">
</a>
</figure>
<div class="card-body">
<h4 class="card-title">
{{name}}
</h4>
</div>
</article>
</li>
{{/each}}
</ul>
Recently I've lost my star review on Google SERP. I know that reasons may be differents and various, but I would to be sure that I didn't made mistakes on code:
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating" style="text-align:right;">
<b><span itemprop="ratingValue">5</span> on
<span itemprop="bestRating">5</span> based on <span itemprop="reviewCount">857</span> reviews</b>
</div>
Could Google have released an update?
The code snippet you provided in the main post: in isolation is not valid according to Google SDTT.
The review has no reviewed item specified
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating" style="text-align:right;">
<b><span itemprop="ratingValue">5</span> on
<span itemprop="bestRating">5</span> based on <span itemprop="reviewCount">857</span> reviews</b>
</div>
This is fixed by adding in itemprop="itemreviewed"
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating" style="text-align:right;">
<h3 itemprop="itemreviewed">Mario Bros service</h3>
<b><span itemprop="ratingValue">5</span> of
<span itemprop="bestRating">5</span> based on <span itemprop="reviewCount">857</span> reviews</b>
</div>
Instances of AggregateRating may appear as values for the following properties
Brand
CreativeWork
Event
Offer
Organization
Place
Product
Service
Source - http://schema.org/AggregateRating
Your full snippet in the comments (which I have simplified) is using the Organization schema http://schema.org/Organization and a different vocabulary for Review aggregate
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div class="review">
<div itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<img itemprop="rating" src="#" alt="173 recensioni" />
<span itemprop="count">173 recensioni</span>
</div>
</div>
</body>
</html>
Which has multiple errors.
The valid way would be:
Using data-vocabulary.org
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div>
<h1 itemprop="name">Mario Bros</h1>
<div itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<h3 itemprop="itemreviewed">Mario Bros service</h3>
<p>
<span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<em itemprop="average">5</em> out of <em itemprop="best"> 5 </em>
</span>
<b>based on</b>
<!-- How many people rated this item? -->
<em itemprop="votes">173</em> ratings.
</p>
<p>
<!-- How many people reviewed this item? -->
<em itemprop="count">45 </em> user reviews.
</p>
</div>
</div>
</body>
</html>
Using schema.org
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div>
<h1 itemprop="name">Mario Bros</h1>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<em itemprop="ratingValue">5</em> out of <em itemprop="bestRating">5</em> based on <em itemprop="ratingCount">24</em> user ratings.
</div>
</div>
</body>
</html>
You also mentioned in comments that they are products:
products such as curtains, roll-up, etc
This is Google's example from the Products data type:
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="dell-30in-lcd.jpg" />
<span itemprop="name">Dell UltraSharp 30" LCD Monitor</span>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">87</span>
out of <span itemprop="bestRating">100</span>
based on <span itemprop="ratingCount">24</span> user ratings
</div>
</div>
Modified for your criteria would be:
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div>
<h1 itemprop="name">Mario Bros</h1>
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="curtains.jpg" />
<span itemprop="name">Acme brand Curtains</span>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<em itemprop="ratingValue">5</em> out of <em itemprop="bestRating">5</em> based on <em itemprop="ratingCount">173</em> reviews.
</div>
</div>
</div>
</body>
</html>
Enchanced further:
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div>
<h1 itemprop="name">Mario Bros</h1>
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="brand">Acme brand</span>
<img itemprop="image" src="curtains.jpg" />
<span itemprop="name">Acme brand Curtains</span>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<em itemprop="ratingValue">5</em> out of <em itemprop="bestRating">5</em> based on <em itemprop="ratingCount">173</em> reviews.
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<!--price is 1000, a number, with locale-specific thousands separator and decimal mark, and the € character is marked up with the machine-readable code "EUR" -->
<span itemprop="priceCurrency" content="EUR">€</span>
<span itemprop="price" content="1000.00">1,000.00</span>
<link itemprop="availability" href="http://schema.org/InStock" />
<span>In stock</span>
</div>
</div>
</div>
</body>
</html>
I'm updating Rich snippets on a recipe page and when testing the results in the Google Structured Data testing tool (https://developers.google.com/structured-data/testing-tool/). I get some errors due to the fact that the breadcrumb is in the scope of the recipe.
Is this a blocking error ?
What could be the resolution ? Some extra markup around the breadcrumb part ?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body class="" itemscope itemtype="http://schema.org/Recipe">
<h1><span itemprop="name">Baked Cheesy Dippers with Nacho Cheese Cheddar</span></h1>
<div class="extraPropeties">
<span itemprop="description">A fun way to serve chicken dippers and keep kids interested</span>
<span itemprop="recipeYield">4 Persons</span>
<span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
<span itemprop="calories">11</span>
<span itemprop="fatContent">31</span>
<span itemprop="proteinContent">41</span>
<span itemprop="carbohydrateContent">51</span>
<span itemprop="fiberContent">61</span>
<span itemprop="cholesterolContent">71</span>
</span>
</div>
<div class="part2">
<div class="shortInfo">
<div class="shortInfoTile">
<div class="key">Preparation time</div>
<div class="value">
<span datetime="PT10M" itemprop="prepTime">10</span><span class="unit">'</span>
</div>
</div>
<div class="shortInfoTile">
<div class="key">Cooking time</div>
<div class="value">
<span datetime="PT20M" itemprop="cookTime">20</span><span class="unit">'</span>
</div>
</div>
<div class="shortInfoTile">
<div class="key">Nr of servings</div>
<div class="value">
<span>4</span>
</div>
</div>
</div>
</div>
<div class="breadcrumb">
<div class="wrapper">
<div class="typoMinusR">
<span class="word" id='bc_0' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemref='bc_1'>
<span class="first"></span>
<a href="/" itemprop="url">
<span itemprop="title">Home</span>
</a>
<span class="last"></span>
</span>
<span class="word" id='bc_1' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child' itemref='bc_2'>
<span class="first"></span>
<a href="/recipes" itemprop="url">
<span itemprop="title">Recipes</span>
</a>
<span class="last"></span>
</span>
<span class="word" id='bc_2' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child'>
<span class="first"></span>
<a href="/recipes/baked-cheesy-dippers-with-nachos-beans-cheddar" itemprop="url">
<span itemprop="title">Baked-Cheesy-Dippers-with-Nacho-Bean-Cheddar</span>
</a>
<span class="last"></span>
</span>
</div>
</div>
</div>
</body>
</html>
</html>
Nesting the http://data-vocabulary.org/Breadcrumb item in the http://schema.org/Recipe item is not a problem. Microdata does not care about the HTML5 nesting, unless a property is used (itemprop).
The problem in your case is that your 2nd and 3rd breadcrumb items (which have the child property) are not nested in the http://data-vocabulary.org/Breadcrumb item, but in the http://schema.org/Recipe item. This way they get associated with the recipe, which is of course not correct.
So the solution would be to nest the breadcrumb items, instead of using itemref.
<div class="breadcrumb">
<div class="wrapper">
<div class="typoMinusR">
<span id='bc_0' itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>
<span class="word">
<a href="/" itemprop="url">
<span itemprop="title">Home</span>
</a>
<span class="last"></span>
</span>
<span id='bc_1' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child'>
<span class="word">
<span class="first"></span>
<a href="/range" itemprop="url">
<span itemprop="title">Our Range</span>
</a>
<span class="last"></span>
</span>
<span id='bc_2' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child'>
<span class="word">
<span class="first"></span>
<a href="/range/fish2" itemprop="url">
<span itemprop="title">Fish</span>
</a>
<span class="last"></span>
</span>
<span id='bc_3' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child'>
<span class="word">
<span class="first"></span>
<a href="/range/fish2/inspirations" itemprop="url">
<span itemprop="title">Inspirations</span>
</a>
<span class="last"></span>
</span>
</span>
</span>
</span>
<span class="word currentitem">
<span class="first"></span>
<span class="label">Inspirations Fish Chargrills - Sun Ripened Tomato and Oregano</span>
<span class="last"></span>
</span>
</span>
</div>
</div>
</div>
Which one is correct breadcrumb structure?
Example 1:
<a href="http://example.com/topic" itemprop="url">
<span itemprop="title">Topic Archive</span></a>
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;">
<a href="http://example.com/topic/parent-category" itemprop="url">
<span itemprop="title">ParentCategory</span></a>
</div>
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;">
<a href="http://example.com/child-category" itemprop="url">
<span itemprop="title">Child Category</span></a>
</div>
<span>Post Title Goes Here</span>
</div>
Example 2:
<div id="breadcrumb">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a rel="home" href="http://www.example.com/topic" itemprop="url"><span itemprop="title">Topic Archive</span></a> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Parent Category</span> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Child Category</span> ›
</span>
<span>Post Title Goes Here</span>
</span>
</span>
</div>
Example 3:
<div id="breadcrumb">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a rel="home" href="http://www.example.com/topic" itemprop="url"><span itemprop="title">Topic Archive</span></a> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Parent Category</span> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Child Category</span> ›
<h1 itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Current Post Title</span> ›
</h1>
</span>
</span>
</span>
</div>
Test the code here: Google Testing Tool
For example number 3, is it right to include the current page in breadcrumb schema? Do I violate any rules?
If you want to use data-vocabulary.org (which is already considered outdated), example 3 is the most correct. It is standard to include the current page in the breadcrumb. Example 1 is not correct since you have not nested your elements. In this case, you would want to add the itemref property and give ids to your divs. The itemref property should equal the id of the next child. https://developers.google.com/structured-data/breadcrumbs?rd=1
You should definitely consider moving to schema.org, since that is the format the major search engines will almost certainly agree upon. According to schema.org, none of these are the proper implementation. Your overall list should be marked as a BreadcrumbList, with each item being marked as a ListItem. Yes, by convention, the current page is the last item in the list.
https://schema.org/BreadcrumbList
I am getting "Warning: Incomplete microdata with schema.org." when validating my Prestashop 1.6 project with the Google Structured Data Testing Tool.
I include all required field for Products (https://support.google.com/webmasters/answer/146750?hl=en).
My code:
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">{$product->name}</span>
<span itemprop="description">{$product->description}</span>
<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}" />
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="EUR" />
<br />
<span itemprop="price">{$product->getPrice(true, $smarty.const.NULL, 2)}</span></span>
</div>
And URL to Google Testing Tools: http://www.google.com/webmasters/tools/richsnippets?q=http%3A%2F%2Fwww.decoracionna.es%2F
What do I need add to everything works properly?
Edit:
I posted the piece of html code of one product
<li class="ajax_block_product col-xs-12 col-sm-4 col-md-3 last-item-of-mobile-line">
<div class="product-container" itemscope="" itemtype="http://schema.org/Product">
<div class="left-block">
<div class="product-image-container">
<a class="product_img_link" href="http://www.decoracionna.es/350367-jarron-de-vidrio-frances-botella-grande.html" title="Jarrón de Vidrio Francés - Botella Grande" itemprop="url">
<img class="replace-2x img-responsive" src="http://www.decoracionna.es/1721-home_default/jarron-de-vidrio-frances-botella-grande.jpg" alt="Jarrón de Vidrio Francés - Botella Grande" title="Jarrón de Vidrio Francés - Botella Grande" width="250" height="250" itemprop="image">
</a>
<div class="content_price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<span itemprop="price" class="price product-price"> 23,98 € </span>
<meta itemprop="priceCurrency" content="0">
</div>
<span class="new-box"></span>
</div>
</div>
<div class="right-block">
<h5 itemprop="name">
<a class="product-name" href="http://www.decoracionna.es/350367-jarron-de-vidrio-frances-botella-grande.html" title="Jarrón de Vidrio Francés - Botella Grande" itemprop="url"> Jarrón de Vidrio Francés - Botella Grande </a>
</h5>
<p class="product-desc" itemprop="description"> Gastos de envío por Pedido: 8.80€</p>
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer" class="content_price">
<span itemprop="price" class="price product-price"> 23,98 € </span>
<meta itemprop="priceCurrency" content="0">
</div>
<div class="button-container">
<a class="button ajax_add_to_cart_button btn btn-default" href="http://www.decoracionna.es/carro-de-la-compra?add=1&id_product=350367&" rel="nofollow" title="Añadir al carrito" data-id-product="350367">
<span>Añadir al carrito</span>
</a>
<a itemprop="url" class="button lnk_view btn btn-default" href="http://www.decoracionna.es/350367-jarron-de-vidrio-frances-botella-grande.html" title="Ver">
<span>Más</span>
</a>
</div>
<div class="product-flags"></div>
<span itemprop="offers" itemscope="" itemtype="http://schema.org/Offer" class="availability">
<span class="available-now">
<link itemprop="availability" href="http://schema.org/InStock">En stock
</span>
</span>
</div>
</div>
</li>"
Thanks for reply.
Your usage of Microdata and Schema.org is not wrong. The Google Structured Data Testing Tool is just "complaining" that you did not specify all properties Google Search needs for displaying one of their Rich Snippets.
It seems that the culprit is the last Offer:
<span itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<link itemprop="availability" href="http://schema.org/InStock">En stock
</span>
If you remove this or if you add, for example, a price property, Google’s SDTT doesn’t warn anymore.
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<link itemprop="availability" href="http://schema.org/InStock">En stock
<span itemprop="price">10</span>
</span>
If I understand your code correctly, it seems that this Offer is about the same offer as the previous Offer (where you specify price/priceCurrency). If that’s the case, you should merge them into one item.
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">23,98</span> € <!-- I removed the currency symbol from the price property, and added the currency to the priceCurrency property -->
<meta itemprop="priceCurrency" content="EUR">
<link itemprop="availability" href="http://schema.org/InStock">En stock
</div>