Micro markup on the site for users
My name is Ivan Zhdanovich, head of the Seo House project. Why can you trust me? I am engaged in client website promotion in the CIS, Europe and the USA. More than 15 years of experience working with client projects. Today we will talk about the structural markup of websites.
Micro-markup of a website is a way of structuring information for search engines, facilitating their work in indexing pages. This is achieved by introducing special tags into the HTML code of the page, which help search engines better understand the content of the site and display it more attractively in search results. The use of micro markup increases the visibility of the site in search results and can have a positive effect on its click-through rate.
What does micro markup provide?
Microdata provides a number of important benefits for websites, especially in the context of search engine optimization (SEO) and improving search engine experience:
Increased visibility in search results: Since micro-markup helps search engines better understand the content of pages, sites with correctly implemented micro-markup are more often displayed in the search results as rich snippets. These can be snippets with ratings, prices, product availability, author and publication date for articles, etc.
Improving user experience: Providing additional information in search results, such as user ratings, prices, product availability, or navigation elements (breadcrumbs), makes snippets more informative. Not only does this help users find the information they need faster, but it can also make them more likely to click through to your site.
Increase the accuracy and relevance of search queries: micro markup allows search engines to more accurately interpret the content of the page, therefore, the site will appear more often in search results for truly relevant queries. This increases the quality of traffic to the site, attracting more interested users.
Using micro-markup, webmasters have the opportunity to promote their sites more effectively, making information about products, services and proposed content more understandable and accessible to both search engines and end users.
What is the advantage of rich snippets?
Rich snippets created using micro markup have several significant advantages over regular snippets in search results:
Increased click-through rate: Rich snippets are more visible in search results due to additional elements (for example, rating, reviews, prices, product availability), which attracts the attention of users and increases the likelihood that they will click on your link.
Improving the user experience even before visiting the site: Providing key information right in the snippet helps users find what they're looking for faster, improving their overall experience with the search engine and your site before they even click on it.
Targeted traffic and increased conversion: Thanks to more detailed information in the snippet, users get an idea of the content of the page in advance, so if they go to the site, then their interest in the information or product presented there has already been confirmed. This drives higher quality traffic to your site and can lead to higher conversions.
These benefits make microdata an important tool for webmasters and marketers looking to maximize the visibility and performance of their sites online.
Main types of markup
There are several main types of markup used in web development and SEO, each of which serves to improve the understanding of site content by search engines and improve the display of search results. Below are the main types:
Schema.org (Scheme): The most popular and universal microdata dictionary, supported by major search engines, including Google, Bing, Yahoo!, and Yandex. Schema.org provides an extensive set of types for marking up various types of information on websites, including products, people, organizations, locations, events, and more.
Microformats: This type of markup allows you to embed information about contacts (hCard), events (hCalendar), reviews and other data directly into HTML classes. Microformats are easy to read by both humans and machines, making them useful for search engine optimization.
RDFA (Resource Description Framework in Attributes): Standard based on the use of
Types of markup with code for Google
Micro markup for the contact page
<div itemscope="" itemtype=">
<span itemprop="name"> </span>
Контактная информация:
<div itemprop="address" itemscope="" itemtype=>
Почтовый адрес:
<span itemprop="streetAddress">номер дома, улица</span>
<span itemprop="postalCode">почтовый индекс</span>
<span itemprop="addressLocality">город, страна</span>
</div>
Телефон:<span itemprop="telephone">контактный телефон</span>,
Факс:<span itemprop="faxNumber">факс</span>,
E-mail: <span itemprop="email">корпоративный e-mail</span>
</div>Product card micro markup
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Футболка с топорами</h1>
<img src="https://habr.com/images/article/1556011480370.jpg" itemprop="image">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <div>700 руб.</div>
<meta itemprop="price" content="700.00"> <meta itemprop="priceCurrency" content="RUB"> </div>
<div>Производитель: <span itemprop="brand">Макс-Экстрим</span></div>
<div>Модель: <span itemprop="model">3774438</span></div>
<div itemprop="description">Дизайнерская футболка, перевод надписи - <br> "Нечего делать с ножом там, где нужен топор". Футболка с классным <br> дизайном, изготовлена из качественных материалов и стойкой краски.</div>
</div>Micro markup of product categories
<div itemscope itemtype="http://schema.org/Product">
<p itemprop="name">Мужские футболки</p>
<div itemtype="http://schema.org/AggregateOffer" itemscope="" itemprop="offers">
<div>40 товаров</div>
<meta content="40" itemprop="offerCount">
<div>от 500 руб.</div>
<meta content="500" itemprop="lowPrice">
<div>до 1000 руб.</div>
<meta content="1000" itemprop="highPrice">
<meta content="RUB" itemprop="priceCurrency">
</div>
</div>Article markup
<section itemscope itemtype="http://schema.org/Article">
<h1 itemprop="headline">Микроразметка для статьи</h1>
<time itemprop="datePublished" datetime="2019-04-26T20:10:00+00:00">26 апреля 2019</time>
<div itemscope itemprop="image" itemtype="http://schema.org/ImageObject">
<img itemprop="url contentUrl" src="https://habr.com/images/article/microrazmetka-schema-org.png" alt="Микроразметка статьи">
</div>
<h2 itemprop="alternativeHeadline">Подзаголовок</h2>
<article itemprop="articleBody">
<p>Текст статьи</p>
</article>
<div>Автор: <span itemprop="author">Артем Абловацкий</span></div>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url image" src="https://habr.com/ru/articles/801575/logo.svg" />
</div>
<meta itemprop="name" content="Артем Абловацкий">
<meta itemprop="telephone" content="+7 909 45 45 396">
<meta itemprop="address" content="г. Москва, ул. Пушкина Дом Колотушкина">
</div>
<meta itemprop="dateModified" content="2019-04-26T23:30:40+00:00" />
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="Ссылка на статью" />
</section>Micro markup for reviews
<div itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="name">Превосходная статья!</span>
<span itemprop="author">Артем Абловацкий Старший Сео специалист RUSH</span>
<meta itemprop="datePublished" content="2022-26-04">
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content = "0">
<span itemprop="ratingValue">10</span> <span itemprop="bestRating">10</span> </div>
<span itemprop="reviewBody">Очень познавательная и информативная статья! Узнал много нового.</span>
</div>
</div>Microdata for images
<div itemscope itemtype="http://schema.org/ImageObject">
<h2 itemprop="name">Винни-Пух</h2>
<img src="https://habr.com/ru/articles/801575/vinni.jpg" itemprop="contentUrl" />
<span itemprop="description">Винни-Пух залезает на дерево.</span>
</div>Micro markup for video
<div itemscope itemtype="http://schema.org/VideoObject" >
<a itemprop="url" href="https://www.mysite.com/view/306/">
<h1 itemprop="name">Что такое Schema.org</h1></a>
<p itemprop="description">Schema.org - это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года. Цель семантической разметки — сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного её представления в результатах поиска.</p>
<meta itemprop="duration" content="PT6M58S">
<meta itemprop="isFamilyFriendly" content="true">
<p>Дата загрузки:<span itemprop="uploadDate">2013-06-05T00:00:00</span></p>
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<img itemprop="contentUrl" src="https://www.mysite.com/images/preview/img1.jpg">
<meta itemprop="width" content="250">
<meta itemprop="height" content="120">
</span>
</div>Q&A page micro markup
<span itemprop="name">Почем опиум для народа</span>
<div><span itemprop="answerCount">Количество ответов на вопрос</span></div>
<div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
<div itemprop="text">Религия-опиум для народа</div>Microdata for culinary sites
<div itemscope itemtype="http://schema.org/Recipe">
<h1 itemprop="name" >Бефстроганов</h1>
Впервые это блюдо появилось в конце XIX века и было названо в честь графа Строганова А.Г.
<img itemprop="resultPhoto" src="https://habr.com/ru/articles/801575/profit.jpg" />
<ul>
<li>Автор рецепта: <span itemprop="author">Граф Строганов</span></li>
<li>После приготовления вы получите <span itemprop="recipeYield" >7 порции</span></li>
<li>Время приготовления: <meta itemprop="totalTime" content="PT45M"/>40 минут</li>
</ul>
<h2>Ингредиенты</h2>
<ul>
<li itemprop="ingredients">
говядина
</li>
<li itemprop="ingredients" >
сметана
</li>
<li itemprop="ingredients" >
соль
</li>
<li itemprop="ingredients" >
свежемолотый перец
</li>
<li itemprop="ingredients" >
мука
</li>
</ul>
<h2>Способ приготовления</h2>
<ul itemprop="recipeInstructions">
<li><img itemprop="image" src="https://habr.com/ru/articles/801575/creks.jpg" alt="нарезанная ломтиками говядина"/>
Положить мясо между двумя слоями пищевой пленки (или в пакет) и тонко отбить.
</li>
<li><img itemprop="image" src="https://habr.com/ru/articles/801575/feks.jpg" alt="лук нарезанный четвертькольцами"/>
Отбивные нарезать тонкой соломкой поперек волокон.
</li>
<li><img itemprop="image" src="https://habr.com/ru/articles/801575/peks.jpg" alt="из любого мяса"/>
обжарить до мягкости на медленном огне, периодически помешивая.
</li>
</ul>
<span itemprop="recipeCategory">Блюда из говядины</span>
<div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">All examples are taken from Google FAQ. If you need examples, then welcome to help Google! If you need to implement markup without errors, then contact me, I will help you do everything. My website and contacts are in my profile!
