How to implement markup Schema.org

  • Home>
  • Blog>
  • How to implement markup Schema.org

Schema.org - this is a structured data format that can be used to indicate to search engines what exactly the elements on your site are - where is the logo, where is the review, where is the information about the company, and much more.

Schema.org it is supported by Yandex and Google, but the requirements of the validators of these search engines are different. Therefore, it is necessary to check your code in two services at once: one, two.

Schema.org - the most necessary types of markup

The full list of markup types is huge and versatile. Everyone can find something for their website - from naming games and diets to sports events and metro stations.

I will consider simpler and more understandable types of markup for business. They can be applied on almost every commercial site.

  • organization,
  • review,
  • navigation (bread crumbs),
  • product (service),
  • a person.

Below will be a text article where I will show specific examples, but I suggest you watch 3 recordings of broadcasts where I have implemented these types of markup on the site live. That is, in the video you can see how the markup is added step by step Schema.org to the website. If you are interested in the topic of website promotion, then I can safely recommend subscribing to my Youtube channel.

Schema.org - Organization markup (organization)

I would recommend starting the implementation Schema.org it is from this type of markup. This code must be inserted on all pages of the site. This will allow you to associate each page with your organization. First I will show an example of Organization markup, then I will describe it in more detail.

Important clarification! All markup examples Schema.org The ones I cite in the article are exactly validated in both Yandex and Google.

<script type="application/ld+json"> {

"@context": "http://schema.org",

"@type": "Organization",

"name" : "Dispatch 33",

"alternateName": "Dispatch33 - Cargo transportation",

"description": "Cargo transportation in Vladimir and throughout Russia",

"url": "https://www.perevozki33.ru",

"email": "perevozki33@mail.ru",

"legalName": "LLC Dispatch33 - Cargo transportation",

"logo": "https://www.perevozki33.ru/assets/images/logo.jpg",

"address": {

"@type": "PostalAddress",

"addressCountry": "RU",

"addressLocality": "Vladimir",

"addressRegion": "Vladimir region",

"postalCode": "600037",

"streetAddress": "Verkhnyaya Dubrova, 40b"

},

"telephone": "+7-492-277-8300",

"sameAs" : ["https://www.facebook.com/disp33/", "https://www.instagram.com/semen_ivanutenko/",

"https://www.youtube.com/user/perevozki33"]

}

</script>

Copy the code and replace the data with your own. On my projects, I insert this code in ld+json format at the very end of the page - it is not visible to site visitors, but search engines will, of course, detect it. You can add it to the footer template so that it is placed on all pages of the site at once. If you have questions about practical implementation, then again I suggest you watch the 3 videos that I posted above. Everything is there :)

I will go through the points that may raise questions:

  • alternateName - alternative company name,
  • legalName - full name of the legal entity,
  • sameAs - links to pages that are associated with the company, for example, its representative offices in the social network. networks.

Schema.org - markup Review (review)

This type of markup can also be implemented in the ld+json format, but let's look at another format. Microdata allows you to wrap in Schema.org data that is visible to site visitors. However, if you need to hide some code, then use the meta tag. But meta is not suitable for images, so you have to use the display:none property there.

Below is an example of a full-fledged review of an organization that was left by a person. You can leave reviews not only about organizations, but also about specific products and services. You can post a review, not only from a person, but also from an organization.

<div itemscope itemtype="https://schema.org/Review">

<div itemprop="itemReviewed" itemscope itemtype="https://schema.org/LocalBusiness">

<meta itemprop="name" content="Dispatch 33 LLC">

<meta itemprop="description" content="Cargo transportation in Vladimir and throughout Russia">

<img itemprop="image" src="https://www.perevozki33.ru/assets/images/logo.jpg" alt="Control Room logo 33" style="display:none"

<meta itemprop="telephone" content="+7 (4922) 77-83-00">

<meta itemprop="PriceRange" content="from 270 rubles per hour">

<div id="https://www.perevozki33.ru/index.html" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">

<meta itemprop="streetAddress" content="Verkhnyaya Dubrova, 40 B">

<meta itemprop="addressLocality" content="Vladimir">

<meta itemprop="addressRegion" content="Vladimir region">

<meta itemprop="addressCountry" content="RU">

<meta itemprop="postalCode" content="600037">

</div>

</div>

<meta itemprop="datePublished" content="2019-02-05">

<span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">

<meta itemprop="ratingValue" content="5">

</span>

<a itemprop="url" href="https://www.perevozki33.ru">

<img src="https://www.perevozki33.ru/assets/im2017/otz-img5.jpg " alt="Review 5">

</a>

<div itemprop="author" itemscope itemtype="https://schema.org/Person">

<div itemprop="name">Ivan Voronin</div>

<div itemprop="JobTitle">Head of Logistics<br> LLC "Sudogodsky fiberglass"</div>

</div>

<div itemprop="reviewBody">We have been cooperating for more than 4 years, we order both Gazelles and 5, 7, 10-ton trucks. Everything is fine, logisticians work clearly and smoothly, are always in touch, competently solve all current and related problems.</div>

</div>

The design is quite cumbersome, but simple if you look closely. The main thing is that it passes validation in services from two of the most popular search engines.

Schema.org - Breadcrumbs markup (breadcrumbs)

Do you want the navigation line in the search results to be written in Cyrillic and include keywords? Help search engines correctly understand the path to each page of your site using Breadcrumbs markup.

Almost every site now uses breadcrumbs, but not every one is framed with the correct code Schema.org . Below is an example from the same site.

<ul itemscope itemtype="https://schema.org/BreadcrumbList">

<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">

<a href="/" itemid="/" itemtype="https://schema.org/Thing" itemscope itemprop="item">

<span itemprop="name">Home</span>

</a>

<meta itemprop="position" content="1" />

<span> > </span>

</li>

<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">

<a href="novosti.html" itemid="novosti.html" itemtype="https://schema.org/Thing" itemscope itemprop="item">

<span itemprop="name">Auto news</span>

</a>

<meta itemprop="position" content="2" />

<span> > </span>

</li>

<li>Control Room 33 is exactly 10 years old today</li>

</ul>

It is important not to forget to duplicate the link in the itemid and put the number of each navigation item in the position tag. I am writing this for a reason, otherwise your code will not pass validation in Yandex and Google services.

Schema.org - Product markup (product or service)

I will make a description of the product or service in ld+json format. We take the following code as a template and substitute our values. Google recommends using images on a white background and in three formats at once. This is a recommendation, not a requirement. However, I use one of these formats - a 500x500 pixel square image on a white background.

<script type="application/ld+json">{

"@context": "https://schema.org/",

"@type": "Product",

"name": "Cargo transportation of 20 tons",

"image": "https://www.perevozki33.ru/assets/im2019/20-ico-schema.jpg",

"description": "Freight trucks in Russia, prices for the transportation of goods up to 20 tons from the Control Room 33",

"offers": {

"@type": "Offer",

"url": "https://www.perevozki33.ru/services-and-prices/gruzoperevozki-20-tonn.html",

"priceCurrency": "RUB",

"price": "1200",

"availability": "https://schema.org/InStock",

"seller": {

"@type": "Organization",

"name": "Control room 33"

}}}

</script>

The availability item indicates the availability of the product/service. If the product is not in stock, then you should specify OutOfStock. The remaining points, I think, should not be explained, since everything is simple and clear.

Schema.org - markup Person (person)

The simplest type of markup that has already been used inside the review is Person. This markup indicates that the information relates to a specific person. The most basic information is the name, position, phone number and email.

You can also use such markup in a block with your company's employees.

<div itemscope itemtype="http://schema.org/Person">

<p itemprop="name">Semyon Ivanyutenko</p>

<p itemprop="JobTitle">Director</p>

<span itemprop="telephone">8(910)096-88-**</span>

<a href="mailto:semen@perevozki33.ru" itemprop="email">semen@perevozki33.ru</a>

</div>

Introducing Schema.org ?

This is almost a one-time fairly simple job that will allow search engine robots to better recognize the content of your site. Markup also improves the display of your site in search results, which directly affects the improvement of clickability.

In many cases, you can use templates of specific CMS systems to simplify and automate the implementation Schema.org.

I see no reason not to use markup Schema.org on the website.

Author: Aleksandr Dergunov
Published: 3/23/2019