Schema.org is an initiative of the biggest search engines: Google, Bing (Microsoft), Yahoo and Yandex along with W3C organization which develops schemes and tags for labelling the elements of HTML5 code for websites and which is sponsored by the search engines’ owners. Formats such as Microdata, RDFa or JSON-LD can improve the semantics of the website’s code (SEO) by using a standardized code. In this tutorial you will find best practice for using Microdata which will help to optimize the search engine indexing. There is also data-vocabulary.org which has a similar use and application, also supported by Google, but this is a dated solution and schema.org is its successor.
Although using schema.org tags can improve the code and help in website optimization for search engines, it is advisable to use them wisely. One needs to assess first whether specific tags are useful or not in a given position. It is important to be aware that using them increases the amount of data sent to a web browser, so the tags should not be overused. The point to give semantic meaning to parts of the code that will be detected by robots. It is a perfect solution for tagging specific relations in the HTML code such as header or footer, address, phone number, opening hours, product price, and users’ profiles.
WebPage
Taking http://schema.org/WebPage as an example it is advisable to use it in an element containing the whole text of a website, e.g body.
<body itemscope itemtype="http://schema.org/WebPage">
...
<div></div>
...
</body>
The itemscope tag is required and used for defining a new element which limits the closing tag, in this case it is </body>. The value defining a new element is presented in the form of a full address URL as an attribute value itemtype. The documentation for this element exists under the same address which will undoubtedly be helpful in further work. The tags itemscope, itemtype are ignored by the browser and have no influence on the way of presenting a website to users, they only change the way of recognizing specific elements by the robots of search engines visiting a website.
WPHeader and WPFooter
The next tags include http://schema.org/WPHeader and http://schema.org/WPFooter which point to the header and the footer.
<header itemscope itemtype="http://schema.org/WPHeader">
...
</header>
...
<footer itemscope itemtype="http://schema.org/WPFooter">
...
</footer>
Organization
The following tag http://schema.org/Organization can be used both for an organization and for a company. I prefer this tag for companies since the logo can be also tagged and which is not possible with http://schema.org/LocalBusiness. LocalBusiness can be used for tagging branch offices where parent element is Organization.
<ul class="socialIcons" itemscope itemtype="http://schema.org/Organization">
<li>
<link itemprop="url" href="https://www.redigart.com/" />
<meta itemprop="logo" content="http://www.redigart.com/wp-content/themes/redigart/images/logo.png" />
<meta itemprop="name" content="Redigart Design" />
<div itemscope itemprop="address" itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="Wisłowiec 82" />
<meta itemprop="postalCode" content="22-417" />
<meta itemprop="addressLocality" content="Stary Zamość" />
</div>
<meta itemprop="telephone" content="+48 84 307 07 79" />
<meta itemprop="telephone" content="+48 570 285 787" />
<meta itemprop="email" content="info(at)redigart.com" />
<a href="https://www.facebook.com/redigart" rel="nofollow" target="_blank" itemprop="sameAs"><img src="http://www.redigart.com/wp-content/themes/redigart/images/social-icons/facebook.png" alt="Facebook" /></a>
</li>
<li><a href="https://www.google.com/+Redigart" rel="nofollow" target="_blank" itemprop="sameAs"><img src="http://www.redigart.com/wp-content/themes/redigart/images/social-icons/googleplus.png" alt="Google+" /></a></li>
<li><a href="https://twitter.com/redigart" rel="nofollow" target="_blank" itemprop="sameAs"><img src="http://www.redigart.com/wp-content/themes/redigart/images/social-icons/twitter.png" alt="@redigart" /></a></li>
</ul>
The itemprop tag used in the above code for the first time determines a type of data and refers to parent element, e.g. itemprop="url" determines the website address of an organization (parent element), itemprop="name" the name etc.
SiteNavigationElement
The marker http://schema.org/SiteNavigationElement, which has not been used on my website and blog, informs a robots about the menu placed on the website. In the example specific menu elements, links, and titles are tagged.
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li>
<a href="http://www.redigart.com/pl/" itemprop="url">
<span itemprop="name">Home</span>
</a>
<ul>
<li>
<a href="http://www.redigart.com/pl/redigart-design/o-firmie" itemprop="url">
<span itemprop="name">O nas</span>
</a>
</li>
...
<ul>
</li>
...
</ul>
</nav>
BreadcrumbList
The http://schema.org/BreadcrumbList tag is used for tagging breadcrumbs — place where a user is at the moment.
<ol id="breadcrumb" class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="http://www.redigart.com/pl" title="Redigart Design" itemprop="item">
<span itemprop="name"><i class="fa fa-home"></i></span>
<meta itemprop="position" content="1" />
</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="http://www.redigart.com/pl/blog-pl" title="Blog" itemprop="item">
<span itemprop="name">Blog</span>
<meta itemprop="position" content="2" />
</a>
</li>
<li class="active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="http://www.redigart.com/?p=613" title="Schema.org – Dane strukturalne dla SEO" itemprop="item">
<span itemprop="name">Schema.org – Dane strukturalne dla SEO</span>
<meta itemprop="position" content="3" />
</a>
</li>
</ol>
What is also worth mentioning is the meta tag which is not placed in the <head>…</head> section, according to W3C, but in <body>…</body>. It is not an error but a conscious procedure and the validation will not show any errors concerning this element. An additional advantage is the fact that we can give the value – in this case the relations between the elements (parent — child) without showing it to the user viewing the website.
Thanks to the correct use of this tag, search results will be displayed in a user-friendly manner as in the example below (access path in Google is marked green).
Blog
An excellent solution is informing the search engine robots when a post was published. Thanks to this a person searching for any information on the Internet, e.g. in Google, can see the post along with the date of its publication and can initially assess whether it is valid and can be useful. This is a huge benefit for frequently updated blogs with new posts since new articles encourage to click on it and read a relevant content. It may look as the following:
This is a code for a list of articles using http://schema.org/Blog:
<div itemscope itemtype="http://schema.org/Blog">
<div itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
<div class="blog-thumbnail" >
<a href="http://www.redigart.com/en/blog-en/google-search-engine-changes-an-algorithm-for-mobile-browsers"><img src="http://www.redigart.com/wp-content/uploads/2015/03/google-search-thumnail.jpg" alt="" itemprop="thumbnailUrl" /></a>
</div>
<div class="info">
<h4><a href="http://www.redigart.com/en/blog-en/google-search-engine-changes-an-algorithm-for-mobile-browsers">Google search engine changes an algorithm for mobile browsers</a></h4>
<ul class="blog-meta">
<li><span><i class="fa fa-user"></i> </span><span class="entry-author" itemprop="author" itemscope itemtype="http://schema.org/Person">Wojtek Batyra</span></li>
<li><span><i class="fa fa-calendar"></i> </span><span datetime="2015-03-15" itemprop="datePublished">15 March 2015</span></li>
<li><span><i class="fa fa-comments"></i> </span>0</li>
</ul>
</div>
<span><a href="http://www.redigart.com/en/blog-en/google-search-engine-changes-an-algorithm-for-mobile-browsers">View</a></span>
<div class="clear"></div>
</div>
<div itemscope itemtype="http://schema.org/Blog">
...
</div>
...
</div>
BlogPosting
For a single article http://schema.org/BlogPosting:
<div class="mainCopy" itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<h1 itemprop="name headline">Google search engine changes an algorithm for mobile browsers</h1>
<ul class="blog-meta">
<li><span class="icon"><i class="fa fa-user"></i> </span><span class="entry-author" itemprop="author" itemscope itemtype="http://schema.org/Person">Wojtek Batyra</span></li>
<li><span class="icon"><i class="fa fa-calendar"></i> </span><span datetime="2015-03-15" itemprop="datePublished">15 March 2015</span></li>
<li><span class="icon"><i class="fa fa-comments"></i> </span>0</li>
<li><span class="icon"><i class="fa fa-tags"></i> </span>
<a href="http://www.redigart.com/en/tag/google-en"><span itemprop="keywords">google</span></a>
| <a href="http://www.redigart.com/en/tag/mobile-version"><span itemprop="keywords">mobile version</span></a>
| <a href="http://www.redigart.com/en/tag/search"><span itemprop="keywords">search</span></a>
</li>
</ul>
<div itemprop="articleBody">
<!-- Copy -->
</div>
</div>
What was used above are the keywords elements. Although the Google robot ignores them (more can be read here), the phrases used in a blog as links will be recognised. Moreover, robots of other search engines which use keywords can find them useful.
UserComments
The possibility of posting comments positively influences the positioning, obviously when it’s spam secure. When we have a secure commenting system it is important to mark them properly. For comments is used http://schema.org/UserComments:
<ol class="comment-list">
<li class="comment" id="comment-1" itemprop="comment" itemscope itemtype="http://schema.org/UserComments">
<meta itemprop="discusses" content="Google search engine changes an algorithm for mobile browsers" />
<link itemprop="url" href="#comment-1">
<div class="comment-author" itemprop="creator" itemtype="http://schema.org/Person">
<div itemprop="name">Wojtek Batyra</div>
</div>
<span itemprop="commentTime" content="2015-04-19" datetime="2015-04-19T02:18" title="19 April 2015 at 02:18">19 April 2015 at 02:18</span>
<div itemprop="commentText">
<!-- comment content -->
</div>
</li>
<li class="comment" id="comment-2" itemprop="comment" itemscope itemtype="http://schema.org/UserComments">
...
</li>
...
</ol>
Review
If we have the possibility to rate articles or products in an online shop or we rate books, films, informing search engines about the obtained evaluation is an excellent solution. The tag http://schema.org/Review is used to do it, and please find a rating of the product below:
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Kenmore White 17" Microwave</span>
<img 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>
<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 "USD" -->
<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
</div>
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>
Customer reviews:
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Not a happy camper</span> - by <span itemprop="author">Ellie</span>,
<meta itemprop="datePublished" content="2011-04-01">April 1, 2011
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content = "1">
<span itemprop="ratingValue">1</span>/<span itemprop="bestRating">5</span>stars
</div>
<span itemprop="description">The lamp burned out and now I have to replace it.</span>
</div>
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Value purchase</span> - by <span itemprop="author">Lucas</span>,
<meta itemprop="datePublished" content="2011-03-25">March 25, 2011
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content = "1"/>
<span itemprop="ratingValue">4</span>/<span itemprop="bestRating">5</span>stars
</div>
<span itemprop="description">Great microwave for the price. It is small and fits in my apartment.</span>
</div>
...
</div>
In the example above one can find tags useful in online shops, e.g. product price, currency, average product rating and each rating separately. The following tags can be also used in online shops: http://schema.org/CheckoutPage, http://schema.org/CollectionPage, http://schema.org/ItemPage.
WPAdBlock
If there are any adverts on a website, http://schema.org/WPAdBlock can be used:
<div class="ads" itemscope itemtype="http://schema.org/WPAdBlock">
<meta itemprop="name" content="Advertise Block" />
<meta itemprop="description" content="Advertise using AdSense."/>
<div class="adsContent">
...
</div>
</div>
Useful links:
- schema.org documentation: http://schema.org/docs/documents.html
- Google Structured Data Testing Tool: https://developers.google.com/structured-data/testing-tool/