Schema.org - это формат структурированных данных, которым можно указать поисковым системам, чем конкретно являются элементы на вашем сайте - где логотип, где отзыв, где информация о компании, и многое другое.
Schema.org поддерживается Яндексом и Гуглом, но требования у валидаторов этих поисковых систем разные. Поэтому нужно обязательно проверять свой код сразу в двух сервисах: один, два.
Schema.org - самые нужные виды разметки
Полный список типов разметки огромен и универсален. Каждый может найти что-то под свой сайт - от обозначения игр и диет до спортивных событий и станций метро.
Рассмотрю более простые и понятные для бизнеса типы разметки. Их можно применить практически на каждом коммерческом сайте.
- организация,
- отзыв,
- навигация (хлебные крошки),
- товар (услуга),
- человек.
Ниже будет текстовая статья, где покажу конкретные примеры, но предлагаю вам посмотреть 3 записи трансляций, где я в прямом эфире внедрил эти виды разметок на сайт. То есть в видео можно увидеть, как пошагово добавляется разметка Schema.org на сайт. Если вам интересна тема продвижения сайтов, то могу смело рекомендовать подписываться на мой канал в Youtube.
Schema.org - разметка Organization (организация)
Рекомендовал бы начинать внедрение Schema.org именно с этого вида разметки. Данный код нужно вставить на все страницы сайта. Это позволит ассоциировать каждую страницу с вашей организацией. Сначала покажу пример разметки Organization, потом опишу более подробно.
Важное уточнение! Все примеры разметки Schema.org, которые я привожу в статье, точно проходят валидацию и в Яндексе, и Гугле.
<script type="application/ld+json"> {
"@context": "http://schema.org",
"@type": "Organization",
"name" : "Диспетчерская 33",
"alternateName": "Диспетчерская33 - Грузоперевозки",
"description": "Грузоперевозки во Владимире и по всей России",
"url": "https://www.perevozki33.ru",
"email": "perevozki33@mail.ru",
"legalName": "ООО «Диспетчерская33 - Грузоперевозки»",
"logo": "https://www.perevozki33.ru/assets/images/logo.jpg",
"address": {
"@type": "PostalAddress",
"addressCountry": "RU",
"addressLocality": "Владимир",
"addressRegion": "Владимирская область",
"postalCode": "600037",
"streetAddress": "Верхняя Дуброва, 40б"
},
"telephone": "+7-492-277-8300",
"sameAs" : ["https://www.facebook.com/disp33/", "https://www.instagram.com/semen_ivanutenko/",
"https://www.youtube.com/user/perevozki33"]
}
</script>
Скопируйте код и замените данные на свои. На своих проектах я вставляю этот код в формате ld+json в самом конце страницы - его не видно посетителям сайта, но поисковые системы его, конечно, обнаружат. Можно добавить его в шаблон footer, чтобы он был размещен сразу на всех страницах сайта. Если у вас есть вопросы по практическому внедрение, то опять предлагаю вам посмотреть 3 видео, которые я разместил выше. Там всё есть :)
Пройдусь по пунктам, которые могут вызвать вопросы:
- alternateName - альтернативное название компании,
- legalName - полное наименование юридического лица,
- sameAs - ссылки на страницы, которые связаны с компанией, например, её представительства в соц. сетях.
Schema.org - разметка Review (отзыв)
Данный вид разметки также можно внедрить в формате ld+json, но давайте рассмотрим другой формат. Microdata позволяет оборачивать в Schema.org данные, которые видны посетителям сайта. Тем не менее, если вам нужно скрыть некий код, то используйте тег meta. Но meta не подходит для изображений, поэтому там приходится использовать свойство display:none.
Ниже пример полноценного отзыва об организации, который оставлен человеком. Можно оставлять отзывы не только об организациях, но и о конкретных товарах и услугах. Можно публиковать отзыв, не только от человека, но и от организации.
<div itemscope itemtype="https://schema.org/Review">
<div itemprop="itemReviewed" itemscope itemtype="https://schema.org/LocalBusiness">
<meta itemprop="name" content="ООО Диспетчерская 33">
<meta itemprop="description" content="Грузоперевозки во Владимире и по всей России">
<img itemprop="image" src="https://www.perevozki33.ru/assets/images/logo.jpg" alt="Логотип Диспетчерской 33" style="display:none">
<meta itemprop="telephone" content="+7 (4922) 77-83-00">
<meta itemprop="priceRange" content="от 270 рублей за час">
<div id="https://www.perevozki33.ru/index.html" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="Верхняя Дуброва, 40 Б">
<meta itemprop="addressLocality" content="Владимир">
<meta itemprop="addressRegion" content="Владимирская область">
<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="Отзыв 5">
</a>
<div itemprop="author" itemscope itemtype="https://schema.org/Person">
<div itemprop="name">Иван Воронин</div>
<div itemprop="jobTitle">Начальник отдела материально-технического снабжения<br> ООО "Судогодские стеклопластики"</div>
</div>
<div itemprop="reviewBody">Сотрудничаем более 4 лет, заказываем и Газели, и 5, 7, 10-тонники. Все устраивает, логисты работают четко и слаженно, всегда находятся на связи, грамотно решают все текущие и попутные проблемы.</div>
</div>
Конструкция достаточно громоздкая, но простая, если присмотреться. Главное, что она проходит валидацию в сервисах от двух самых популярных поисковых систем.
Schema.org - разметка Breadcrumbs (хлебные крошки)
Хотите, чтобы в поисковой выдаче строка с навигацией была написана кириллицей и включала в себя ключевые слова? Помогите поисковым системам правильно понять путь к каждой странице вашей сайта с помощью разметки Breadcrumbs.
Практически на каждом сайте сейчас используются хлебные крошки, но далеко не на каждом они обрамлены корректным кодом Schema.org. Ниже пример с того же сайта.
<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">Главная</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">Автоновости</span>
</a>
<meta itemprop="position" content="2" />
<span> > </span>
</li>
<li>Диспетчерской 33 сегодня ровно 10 лет</li>
</ul>
Важно не забывать дублировать ссылку в itemid и проставлять номер каждого пункта навигации в теге position. Пишу это не просто так, иначе ваш код не пройдёт валидацию в сервисах Яндекса и Гугла.
Schema.org - разметка Product (товар или услуга)
Описание товара или услуги сделаю в формате ld+json. Берем за шаблон нижеуказанный код и подставляем свои значения. Гугл рекомендует использовать изображения на белом фоне и сразу в трёх форматах. Это рекомендация, а не требование. Тем не менее, я использую один из этих форматов - квадратное изображение размером 500х500 пикселей на белом фоне.
<script type="application/ld+json">{
"@context": "https://schema.org/",
"@type": "Product",
"name": "Грузоперевозки 20 тонн",
"image": "https://www.perevozki33.ru/assets/im2019/20-ico-schema.jpg",
"description": "Грузоперевозки фурами по России, расценки на перевозку грузов до 20 тонн от Диспетчерской 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": "Диспетчерская 33"
}}}
</script>
Пункт availability указывает доступность товара/услуги. Если товара нет на складе, то следует указывать OutOfStock. Остальные пункты, думаю, объяснять не стоит, так как всё просто и понятно.
Schema.org - разметка Person (человек)
Самый простой вид разметки, который уже использовали внутри отзыва - Person. Этой разметкой указывают, что информация относится к конкретному человеку. Самая базовая информация - это имя, должность, телефон и электронная почта.
Также можно использовать такую разметку в блоке с сотрудниками вашей компании.
<div itemscope itemtype="http://schema.org/Person">
<p itemprop="name">Семён Иванютенко</p>
<p itemprop="jobTitle">Директор</p>
<span itemprop="telephone">8(910)096-88-**</span>
<a href="mailto:semen@perevozki33.ru" itemprop="email">semen@perevozki33.ru</a>
</div>
Внедряем Schema.org?
Это практически разовая достаточно простая работа, которая позволит роботам поисковых систем лучше распознавать контент вашего сайта. Также разметка улучшает отображение вашего сайта в поисковой выдаче, что напрямую влияет на улучшение кликабельности.
Во многих случаях можно использовать шаблоны конкретных CMS-систем, чтобы упросить и автоматизировать внедрение Schema.org.
Я не вижу причин не использовать разметку Schema.org на сайте.
