What is Schema Markup and how do you implement it?
Schema.org micro markup for the site
The Schema.org standard was launched by Western search engines Google, Yahoo and Bing in 2011. A little later, the Russian Yandex joined them. The main objective of the initiative is to develop a unified semantic HTML5 markup that would make it easier for search engines to “understand” the content of websites, and therefore help improve the quality of search.
Schema.org micromarking provides for highlighting the main types of entities and their properties and assigning them specific values. Data is marked up and transmitted directly in the page code using microdata , JSON-LD or RDFa format.
Structured data, marked according to the standard, is extracted by robots and can be used in various search engine services. Does micro markup affect site rankings? The official answer from search engines is that there is no impact. But using Schema.org markup, you can improve the presentation of your site in search results and make the snippet more attractive and clickable.
Not all markup schemes described in Schema.org are used in search. The help sections of Yandex and Google indicate what types of structured data are currently used in the formation of rich snippets - significantly less than described by the Schema.org dictionary, but their number is gradually increasing.
Let's look at examples of those schemes that are most often used on websites. You will understand how to make micro markup and check it in Google and Yandex .
Schema.org micro-markup makes your data accessible not only to search engines, but also to any services that use this standard in their work.
Micro marking of breadcrumbs
Breadcrumbs are additional navigation chains containing the path from the main page of the site to the current one. We recommend implementing them in any case - duplicate navigation is useful for both users and search engines. And semantic breadcrumb markup allows you to get beautiful Google snippets for non-main pages:
This type of micro markup is not yet officially supported in Yandex, but the search engine itself creates chains for some sites. They, like quick links, are based on the internal structure of the site:
To mark bread crumbs, use the scheme https://schema.org/BreadcrumbList .
Example of BreadcrumbList markup in microdata
<ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a target="_blank" href="/" itemprop="item">
<span itemprop="name">Marketing</span></a>
<meta itemprop="position" content="1"/></li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a target="_blank" href="/services/" itemprop="item">
<span itemprop="name">Services</span></a>
<meta itemprop="position" content="2" /></li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a target="_blank" href="/services/ppc/" itemprop="item">
<span itemprop="name">ppc</span></a>
<meta itemprop="position" content="3"/></li>
</ul>
Example BreadcrumbList markup in JSON-LD
<ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a target="_blank" href="/" itemprop="item">
<span itemprop="name">Marketing</span></a>
<meta itemprop="position" content="1"/></li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a target="_blank" href="/services/" itemprop="item">
<span itemprop="name">Services</span></a>
<meta itemprop="position" content="2" /></li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a target="_blank" href="/services/ppc/" itemprop="item">
<span itemprop="name">PPC</span></a>
<meta itemprop="position" content="3" /></li>
</ul>
Micro markup of the organization
An organization's address markup can be displayed on Yandex.Maps and in Yandex Search in the form of an address snippet:
The same snippet can be generated by registration in Yandex.Directory. If you have not yet posted information about your company in this service, a quick way to get a rich URL snippet is to use the http://schema.org/Organization or http://schema.org/Place markup , including the more specific http:/ /schema.org/LocalBusiness for data on companies linked to a specific place of work: beauty salons, bakeries, etc.
Example of Organization markup in microdata
<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">DigiSkills</span>
Address and telephone:
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">M.A. Jinnah Campus, Defence Road, Off Raiwind Road</span>
<span itemprop="postalCode">105264</span>
<span itemprop="addressLocality">Lahore, Pakistan</span>
</div>
Telephone:<span itemprop="telephone">+0 (000) 000 00 00</span>,
E-mail: <span itemprop="email">info@example.com</span>
</div>
Organization markup example in JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"address": {
"@type": "PostalAddress",
"addressLocality": "Lahore, Pakistan",
"postalCode": "54000",
"streetAddress": "M.A. Jinnah Campus, Defence Road, Off Raiwind Road"
},
"email": "info@example.com",
"name": "Ursa",
"telephone": "+0 (000) 000 00 00"
}
</script>
The Organization schema does not support company time stamping.
Organization microdata was used in Google search to display company data in the knowledge block. This markup is no longer supported and the data is added automatically.
LocalBusiness markup allows you to transfer company data to Google Maps, including information about branches. This data enters the knowledge network along with other sources.
Example of LocalBusiness markup in microdata
<div itemscope itemtype="http://schema.org/LocalBusiness">
<img itemprop="image" src="/images/logo-square.png"/>
<span itemprop="name">DigiSkills</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">M.A. Jinnah Campus, Defence Road, Off Raiwind Road</span>
<span itemprop="addressLocality">Lahore</span>
</div>
<div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="00.0000000" />
<meta itemprop="longitude" content="00.0000000" />
</div>
<span itemprop="telephone">0 (000) 000-00-00</span>
<span itemprop="telephone">0 (000) 000-00-01</span>
<a itemprop="url" href="https://digiskills.pk">digiskills.pk</a>
Working hours:
<meta itemprop="openingHours" content="Mo-Fr 0:00-21:00">Mon-Fri 0:00-21:00,
<meta itemprop="openingHours" content="Sa-Su 0:00-18:00">Sat-Sun 0:00-18:00
Prices: <span itemprop="priceRange">FREE</span></div>
Example of LocalBusiness markup in JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"additionalType": "DigiSkills",
"address": {
"@type": "PostalAddress",
"addressLocality": "Lahore",
"streetAddress": "M.A. Jinnah Campus, Defence Road, Off Raiwind Road"
},
"name": "DigiSkills",
"email": "info@example.com",
"openingHours": [
"Mo-Fr 0:00-21:00",
"Sa-Su 0:00-18:00"
],
"priceRange": "Free",
"telephone": ["0 (000) 000-00-00", "0 (000) 000-00-00"],
"image": "/images/logo-square.png",
"url": "https://digiskills.pk",
"geo": {
"@type": "GeoCoordinates",
"latitude": "00.0000000",
"longitude": "00.0000000"
}
}
</script>
Article markup
Article markup is intended for articles published on the site. On desktop, the date of publication will be added to the snippet:
On mobile devices there is also a picture:
Moreover, the picture can be either the one you specified in the markup as an image for the announcement of the article, or any other one from the page. Google itself will determine which image is best to show in the rich snippet. There may be several of them:
Example of Article markup in microdata
<section itemscope itemtype="http://schema.org/Article">
<h2 itemprop="headline">How To Select the Right Skill as a freelancer
</h2>
<img itemprop="image" src="https://www.example.com/GridImageTemplate.aspx?ref=blog&Id=28">
<div itemprop="description">
The selection of an appropriate skill set and its implementation is one of the most crucial elements in your freelance journey.
</div>
<time itemprop="datePublished" datetime="2016-03-21"></time>
<span itemprop="author">digiskills</span>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url" src="https://www.example.com/images/news/logo.jpg" />
</div>
<meta itemprop="name" content="example.com">
<meta itemprop="url" content="https://www.example.com">
</div>
<meta itemprop="dateModified" content="2018-05-22" />
<meta itemscope itemprop="mainEntityOfPage"
itemType="https://schema.org/WebPage"
itemid="https://www.example.com/articles/right_skill" />
</section>
Example of Article markup in JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Article",
"headline": "How To Select the Right Skill as a freelancer",
"image": "https://www.example.com/GridImageTemplate.aspx?ref=blog&Id=28",
"description": " The selection of an appropriate skill set and its implementation is one of the most crucial elements in your freelance journey.",
"author": "Аква Шоп",
"publisher": {
"@type": "Organization",
"name": "example.com",
"url": "https://www.example.com",
"logo": {
"@type": "ImageObject",
"url": "https://www.example.com/images/news/logo_Aqua-shop.jpg"
}
},
"datepublished": "2016-03-21",
"datemodified": "2018-05-22",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://www.example.com/articles/right_skill"
}
}
</script>
Search bar
Search bar markup is supported by Google and adds an additional site search box below the site address when you enter a brand name or URL of a specific site. It helps to immediately clarify the request to the site and get the desired result.
The peculiarity of this micro-markup in practice is that its addition does not guarantee the appearance of a search in the snippet of your site. And vice versa, for large popular sites, Google itself generates an additional search string without adding micro-markup.
Example markup in microdata
<div itemscope itemtype="https://schema.org/WebSite">
<meta itemprop="url" content="https://example.com"/>
<form itemprop="potentialAction" itemscope
itemtype="https://schema.org/SearchAction">
<meta itemprop="target" content="https://example.com/search/?q={query}"/>
<input itemprop="query-input" type="text" name="query" required/>
<input type="submit"/>
</form>
</div>
Example markup in JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://example.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://example.com/search/?q={query}",
"query-input": "required name=query"
}
}
</script>
Structured data for information sites
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://example.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://example.com/search/?q={query}",
"query-input": "required name=query"
}
}
</script>
These types of markup structure information content, although they can be found on commercial resources.
Micro markup FAQ: Frequently asked questions
The Frequently Asked Questions (FAQ) markup is intended for questions and answers to them, most often formulated by the site owners themselves. You can create a FAQ on any topic and get good exposure in search results. This markup involves multiple questions on a page with only one answer.
The markup of questions and answers must completely match the content of the original page. In addition, FAQs cannot be used for advertising, but Google supports HTML markup within answers, which means that links to other pages can be placed within information content.
Example of FAQpage markup in microdata
<div itemscope itemtype="https://schema.org/FAQPage">
<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name">✅What is DigiSkills about us?
</h3>
<div id="a2" itemscope itemprop="acceptedAnswer"
itemtype="https://schema.org/Answer">
<div itemprop="text">
DigiSkills Training Program is Pakistan's first Online Training Program to empower the youth with skills that are in-demand in freelance market. It consists of multiple online skill-based training courses.
</a>.
</div>
</div>
<div>
</div>
Example FAQpage markup in JSON-LD
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "✅ What is DigiSkills about us?",
"acceptedAnswer": {
"@type": "Answer",
"@id":"a1",
"text": "DigiSkills Training Program is Pakistan's first Online Training Program to empower the youth with skills that are in-demand in freelance market. It consists of multiple online skill-based training courses."
}
}]
}
</script>
Checking micro markup
At the implementation stage, use special services to check structured data.
Yandex provides such functionality in the Webmaster tool. Log in to the service and follow the link Tools - Micro markup validator . You can check the micromark by the page URL or a fragment of HTML code.
On Google, markup testing is available at https://search.google.com/structured-data/testing-tool/u/0/ with similar capabilities. But here the interface is a little more convenient - for any initial version it provides the ability to debug and instantly check changes made to the markup.
There are 2 types of comments here: actual errors (highlighted in red), which interfere with the interpretation of the markup, and warnings (highlighted in orange), which are valid, but indicate that the data in the markup is incomplete.
Google recently introduced another online tool to test rich snippets and see if your markup can be shown in search results https://search.google.com/test/rich-results?hl=en . You must specify the URL of the page or a fragment of the code to be checked and select the main robot (in most cases, this is Googlebot for smartphones).
Instead of a conclusion
As you can see, getting a beautiful snippet that attracts attention is not at all difficult! You only need to understand Schema.org once, using our tips and examples, and you will be able to structure the data on your site yourself.