What is micro-markup

Micro -markup is a standard for semantic site optimization. It was introduced by Google, Bing and Yahoo in the summer of 2011. In the autumn of the same year, it became known about the support of the standard by the search engine Yandex. Micro-markup allows robots to more accurately define and structure information on site pages.

Micro-markup is performed by adding special tags or attributes to the HTML code, in which various useful information is placed.

There are such types of micro-markup:

• microformats;
• microdata;
• RDFa.

The benefits of micro-markup

First of all, the presence of microformat or microdata on the page is reflected in the snippet (description) that accompanies the link to the site in the search results. The snippet contains a more complete description of the page, the main sections of the site, the price range of goods, photographs of the address, phone numbers, and so on. In addition, it indicates to the search robots the information that should be processed. This allows for improved page relevance for search engine robots and users.

How to implement micro-markup?

According to the experience of our portfolio sites, micro- markup is most often used in the Schema.org or JSON + LD format

In this article, we will take a closer look at the Schema micro-markup.

What is Schema.org?

Schema.org is a site that publishes micro-markup schemes recognized by the world's largest search engines, including Yandex and Google. Schemas are HTML tags and attributes. With their help, search engines recognize the meaning and structure of the information published on the site. This improves the quality of the search and improves the search results.

What should be prescribed for micro-markup?

There are 3 main attributes, each of which is necessarily involved in the description of an element:

The itemscope is only needed to show the search bot that a specific object is being described on the page.

itemtype always goes next to itemscope and is needed in order to show the type of the object to the search bot

itemprop - describes the properties of the selected object.

Basic principles of markup

• Wrapping the type declaration into a container with further indication of the markup schema.
• Marking of individual properties with an indication of each specific property of the schema.

Let's analyze the Schema.org micro-markup using the example code that was used in OkayCMS

 <div itemscope = "" itemtype = "http://schema.org/Product">
    <span itemprop = "name"> Product name </span>
    <span itemprop = "sku"> SKU </span>
    <img itemprop = "image" src = "product_picture.jpg">
    <! - The first option to display the price ->
    <div itemprop = "offers" itemscope = "" itemtype = "http://schema.org/Offer">
        <span itemprop = "price" content = "55.00"> $ 55.00 </span>
        <meta itemprop = "priceCurrency" content = "USD">
        <link itemprop = "availability" href = "http://schema.org/InStock"> Available
    </div>
    <! - The second option for displaying the price ->
    <div itemprop = "offers" itemscope = "" itemtype = "http://schema.org/Offer">
        <span itemprop = "price" content = "55.00"> 55.00 </span>
        <span itemprop = "priceCurrency" content = "RUB"> RUB </span>
        <link itemprop = "availability" href = "http://schema.org/InStock"> Available
    </div>
    <span itemprop = "description"> Product Description </span>
</div>

This is the basic code, which is enough to do the micro-markup of your store's product.

As you can see, there is always a container that includes several different types of entities.

In our case, the most important container is <div itemscope = "" itemtype = "http://schema.org/Product"> inside it will contain all our micro-markup.

Next, we are faced with another container:

<div itemprop = "offers" itemscope = "" itemtype = "http://schema.org/Offer">

It shows the robot that data for a specific markup of the product offer will go inside it.

Important! It should be remembered that some elements of the micro-markup are required, so if you do not fill out the information about the product in full, this can lead to errors in the micro-markup.

The most common problem is the lack of a product description, as a result of which the validator will generate an error in the micro-markup.

An example of snippets with product microdata can be seen below:

How to make micro-marking of bread crumbs?

If, when searching for a site, you see such links (in Russian, not a real url)

This means that the site's breadcrumbs are marked correctly, and this allows the robot to form a more beautiful snippet.

An example of the micro-markup code for bread crumbs on a real product:

 <li itemscope = "" itemtype = "http://data-vocabulary.org/Breadcrumb">
	<a itemprop="url" href="/" data-language="252">
		<span itemprop = "title"> Home </span>
	</a>
</li>
<li itemscope = "" itemtype = "http://data-vocabulary.org/Breadcrumb">
	<a itemprop="url" href="catalog/templates">
		<span itemprop = "title"> Templates </span>
	</a>
</li>
<li itemscope = "" itemtype = "http://data-vocabulary.org/Breadcrumb">
	<a itemprop="url" href="catalog/drugoe">
		<span itemprop = "title"> Other </span>
	</a>
</li>
<li> Template for OkayCMS Carol </li>

This is how our micro-markup looks like, using the example of a real product. Important ! The last point of breadcrumbs should not be a link to itself, this is bad for SEO and creates circular links on the page.

And the last thing that we will analyze today is the micro-markup of contacts on schema.org

The micro-markup code for contacts may look something like this

 <div itemprop = "address" itemscope = "" itemtype = "http://schema.org/PostalAddress">
        The address:
        <span itemprop = "streetAddress"> 33 enotovich street </span>
        <span itemprop = "postalCode"> 100500 </span>
        <span itemprop = "addressLocality"> Dnipro </span>,
    </div>
    Phone: <span itemprop = "telephone"> + 8 066 99 99 999 </span>,
    Fax: <span itemprop = "faxNumber"> + 8 097 99 99 999 </span>,
    Email: <span itemprop = "email"> [email protected] </span>
    <! - First option ->
    <time itemprop = "openingHours" datetime = "Tu-Th 16: 00-20: 00"> Tuesdays and Thursdays 4-8pm </time>
    <! - Second option ->
    <meta itemprop = "openingHours" content = "Mo-Sa 10: 00-20: 00"> Mon-Sat from 10:00 to 20:00.
</div>

And now what you will definitely need when carrying out work on the implementation of micro-markup - services.

Services for working with micro-markup

• 1. Structured Data Testing Tool . The peculiarity of the service is that you can see how micro-markup is performed using examples.
• 2. Sections "Structured data" and "Marker" in the Search Console from Google , which will allow you to customize the micro-markup
• 3. Validator of micro-markup from “Yandex”
• 4. Yandex.Directory . Add information about your organization and the Yandex search results will show the address, phone number and work schedule

Output:

Microdata can help the robot form a more attractive snippet.

Micro-markup can affect the output of the text that is passed to the snippet.

Microdata can show how new and relevant your site's content is.

Implement micro-markup on the site, if available, you will have more chances to form a beautiful output of information from your site in the search engine.