Содержание

Микроразметка контактов организации Sсhema.org | Alferov.su

Для чего нужна?

В большинстве инструкций пишут, что микроразметка контактов больше всего нужна для того, чтобы улучшить сниппеты в поисковых системах, сделать их более наглядными и т.д., например, вот так:

Но на самом деле использование микроразметка организации несет в себе намного больше потенциала, но так или иначе все сводится к тому, что ваш сайт проще парсить. Т.е. собирать с него структурированную информацию для последующий обработки.

Кто и зачем может собирать контакты?

  • Каталоги организаций
  • Сервисы онлайн-карт и навигаторы
  • Различные каталоги услуг
  • Агрегаторы товаров
  • И т.д.

Т.е. разметив контакты при помощи Sсhema.org можно «заодно» добавить свой сайт в десятки, а то и сотни различных сервисов, которые могут давать тот или иной объем трафика. В общем, тема полезная, а внедрение занимает буквально 10 минут, так что явно стоит делать 🙂

Как внедрять?

1. Добавить блок div с параметром itemscope itemtype=»https://schema.org/Organization»

По сути, этим шагом мы указываем, что вот тут начинается микроразметка и она будет про нашу организацию.

На выходе получим примерно вот так:

<div itemscope itemtype="http://schema.org/Organization">
Организация: ООО "Алфёров.су"
Телефон: +7 (555) 555-55-55
Почтовый индекс: 123123
Город: Санкт-Петербург
Адрес: Невский проспект 1
Email: [email protected]
</div>

2. Теперь надо разметить контакты. Для начала разметим адрес, и для него есть есть отдельный блок, по аналогии с https://schema.org/Organization и называется он http://schema.org/PostalAddress.

Как и в предыдущем пункте — вынесем наш адрес в отдельный блок div с данным параметром:

Получим:

<div itemscope itemtype="https://schema.org/Organization">
Организация: ООО "Алфёров.су"
Телефон: +7 (555) 555-55-55
<div itemprop="address" itemscope itemtype="https://schema.
 
 org/PostalAddress">
Страна: Россия
Почтовый индекс: 123123
Город: Санкт-Петербург
Адрес: Невский проспект 1
</div>
Email: [email protected]
</div>

3. Вот теперь можно приступать к полноценной разметке. Сделать это крайне просто — надо всего лишь оборачивать каждый пункт в тег <span> с параметром в соответствии с ссылкой schema.org. Например вот тут https://schema.org/PostalAddress написано, что есть разметка «addressCountry» и инструкция, что с ее помощью можно разметить название страны.

Делаем все по инструкции и получаем результат:

<div itemscope itemtype="https://schema.org/Organization">
Организация: ООО "Алфёров.су"
Телефон: +7 (555) 555-55-55
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
Страна: <span itemprop="addressCountry">Россия</span>
Почтовый индекс: <span itemprop="postalCode">123123</span>
Город: <span itemprop="addressLocality">Санкт-Петербург</span>
Адрес: <span itemprop="streetAddress">Невский проспект 1</span>
</div>
Email: 123@123.
 
 ru
</div>

Вот мы и сделали микроразметку адреса организации, осталось добавить email, номер телефона и само название организации. Посмотрим, что нам рекомендует сама страница https://schema.org/Organization и в соотстветствии со списком размечаем.

Получили вот такую штуку:

<div itemscope itemtype="https://schema.org/Organization">
Организация: itemprop="name">Алфёров.су</span>
Телефон: <span itemprop="telephone">+7 (555) 555-55-55</span>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
Страна: <span itemprop="addressCountry">Россия</span>
Почтовый индекс: <span itemprop="postalCode">123123</span>
Город: <span itemprop="addressLocality">Санкт-Петербург</span>
Адрес: <span itemprop="streetAddress">Невский проспект 1</span>
</div>
Email: <span itemprop="email">[email protected]</span>
</div>

На этом можно и закончить пост 🙂 Как видите — ничего сложного, а пользы — очень много! Вообще крайне рекомендую посмотреть, какие еще возможности есть для микроразметки контактов, там можно и логотип добавить, и режим работы указать и даже дату основания компании! Чем больше информации на сайте вы разметите — тем больше различных источников трафика будут корректно обрабатывать информацию о вашей организации и тем больше они будут давать дополнительного трафика.

Ну и сниппеты, конечно, куда же без них 🙂

Как сделать микроразметку для страницы контактов


<div itemscope="" itemtype="http://schema.org/Airline">
 <span itemprop="iataCode">IATA - код авиакомпании, уникальный идентификатор авиакомпании
 в международном регистре компаний осуществляющих авиаперевозки пассажиров</span>
 <span itemprop="name">Наименование авиакомпании</span>
 <img src="img/airline_logo.jpg" itemprop="logo">
 <span itemprop="description">Подробное описание авиакомпании</span>
 
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
 <span itemprop="ratingValue">4</span> звезды -
 основано на <span itemprop="reviewCount">250</span> отзывах клиентов компании
 </div>
 
 Контактная информация авиакомпании:
 
<div itemprop="address" itemscope="" itemtype="http://schema.
 
 org/PostalAddress">
 Почтовый адрес:
 <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>

Схема Corporation

Схема предназначена для описания крупных сетевых компаний, магазинов имеющих представительства в разных городах и странах, строительных холдингов и т.п. 


<div itemscope="" itemtype="http://schema.org/Store">
    <div>    
        <h2 itemprop="name">Название сети магазинов</h2>
        Описание сети магазинов
        Часы работы:
        <time itemprop="openingHours" datetime="Mo-Fr 07:00-23:00">Понедельник-Пятница с 7:00 до 23:00</time>
        Контактный телефон: <span itemprop="telephone">контаткный телефон</span>
    </div>
    Дальше перечесляем предприятия (департаменты) входящие в нашу сеть
    <div itemprop="department" itemscope="" itemtype="http://schema.
 
 org/Pharmacy">
        <h3 itemprop="name">Аптека</h3>
        Описание аптеки
        Часы работы:
        <time itemprop="openingHours" datetime="Mo-Fr 07:00-23:00">Понедельник-Пятница с 7:00 до 23:00</time>
        Контактный телефон: <span itemprop="telephone">контаткный телефон</span>
    </div>
    
    <div itemprop="department" itemscope="" itemtype="http://schema.org/DryCleaningOrLaundry">
        <h3 itemprop="name">Химчистка</h3>
    
        Описание химчистки
    
        Часы работы:
        <time itemprop="openingHours" datetime="Mo-Fr 07:00-23:00">Понедельник-Пятница с 7:00 до 23:00</time>
    
        Контактный телефон: <span itemprop="telephone">контактный телефон</span>
    
        Какая-нибудь ветвь компании <span itemprop="branchOf" itemscope="" itemtype="http://schema.org/Corporation">
     URL адрес сайта
     <a itemprop="url" href="http://example.
 
 
 com/">
     <span itemprop="name">Наименование ответвления</span></a></span>.
    </div>
</div>

Схема EducationalOrganization

Тут всё предельно ясно, мы описываем какое-нибудь образовательное учреждение. Тут есть одно уникальное свойство alumni выпускник. Многие учебные заведения хвастаются своими известными выпускниками. такое как МГИМО например. Так же описывая конкретного человека используюя схему Person можно сослаться на учебное заведение в котором учился этот человек, использую обратное свойство alumiOf. 


<div itemscope="" itemtype="http://schema.org/EducationalOrganization">
	<span itemprop="name">Наименование образовательного учреждения</span>
 
	<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
	   <span itemprop="streetAddress">дом, улица</span>
	   <span itemprop="addressLocality">населённый пункт</span>,
	   <span itemprop="addressRegion">регион</span> <span itemprop="postalCode">почтовый индекс</span>
	</div>
 
	Список выпускников учебного заведеия
	<span itemprop="alumni" itemscope="" itemtype="http://schema.
 
 org/Person">
		<span itemprop="name">Имя выпускника</span>
	</span>
	<span itemprop="alumni" itemscope="" itemtype="http://schema.org/Person">
		<span itemprop="name">Имя выпускника</span>
	</span>
</div>

Схема GovernmentOrganization

Правительственные организации, неплохо подойдёт для описания бюджетных и муницыпальных учреждений , администраций городов и районов, дум и пр. 


<div itemscope="" itemtype="http://schema.org/GovernmentPermit">
    <span itemprop="name">Наименование разрешения/лицензии выданное государственным органом</span>

    <div itemprop="issuedBy" itemscope="" itemtype="http://schema.org/GovernmentOrganization">
        <span itemprop="name">Наименование гописываемого гос.учреждения</span>
        Обязательно нужно указывать адрес организации и контактные данные

        <div itemprop="address" itemscope="" itemtype="http://schema. org/PostalAddress">
            <span itemprop="streetAddress">дом, улица</span>
            <span itemprop="addressLocality">населённый пункт</span>,
            <span itemprop="addressRegion">регион</span> <span itemprop="postalCode">почтовый индекс</span>
        </div>

        Телефон:<span itemprop="telephone">контактный телефон</span>,
        Факс:<span itemprop="faxNumber">факс</span>,
        E-mail: <span itemprop="email">корпоративный e-mail</span>
    </div>

    <div itemprop="issuedThrough" itemscope="" itemtype="http://schema.org/GovernmentService">
 <span itemprop="name">Услуги предоставляемые данной правительственной организацией, например выдача пособий,
 оформление определённого вида документов и т.п.</span>
    </div>

    <div itemprop="validIn" itemscope="" itemtype="http://schema. org/AdministrativeArea">
        <span itemprop="name">Географический регион находящийся под юрисдикцией той или иной власти</span>
        Обязательно нужно указывать адрес организации и контактные данные

        <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
            <span itemprop="streetAddress">дом, улица</span>
            <span itemprop="addressLocality">населённый пункт</span>,
            <span itemprop="addressRegion">регион</span> <span itemprop="postalCode">почтовый индекс</span>
        </div>

        Телефон:<span itemprop="telephone">контактный телефон</span>,
    </div>

    <time itemprop="validFor">Время действия разрешения/лицензии
        выданной данной правительственной организации
    </time>
</div>

Схема LocalBusiness

Тут можно описать небольшую комапнию предоставляющую услуги (автосервис, заправка картриджей для принтера) или маленький магазинчик, аптеку, торговую точку в гипермаркете и т. п. 


<div itemscope="" itemtype="http://schema.org/Restaurant">
    <span itemprop="name">Наименование ларька</span>

    <div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
        <span itemprop="ratingValue">4</span> звезды -
        основнано на <span itemprop="reviewCount">250</span> отзывах клиентов ларька
    </div>

    <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">дом, улица</span>
        <span itemprop="addressLocality">город</span>,
        <span itemprop="addressRegion">регион</span> <span itemprop="postalCode">почтовый индекс</span>
    </div>

    <span itemprop="telephone">Контактный телефон</span>
    <a itemprop="url" href="http://www. example.com">веб-сайт компании</a>

    Часы работы:
    <time itemprop="openingHours" datetime="Mo-Fr 07:00-23:00">Понедельник-Пятница с 7:00 до 23:00</time>

    Дальше может идти описание специфичных именно этому бизнесу свойств. Блюда, услуги, музыка и т.п.
</div>

Схема NGO

Описание неправительственных общественных организаций. Практически повторяет описание обычной организации. 


<div itemscope="" itemtype="http://schema.org/NGO">
    <span itemprop="name">Наименование организации</span>

    <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">дом, улица</span>
        <span itemprop="addressLocality">город</span>,
        <span itemprop="addressRegion">регион</span> <span itemprop="postalCode">почтовый индекс</span>
    </div>

    Телефон:<span itemprop="telephone">контактный телефон</span>,
    Факс:<span itemprop="faxNumber">факс</span>,
    E-mail: <span itemprop="email">корпоративный e-mail</span>
</div>

Схема PerformingGroup

Этой схемой можно описать музыкальную группу или танцевальный ансамбль или любое дургое творческое объединение. Не буду подробно тут останавливаться т.к. схема не содержит каких-либо уникальных свойств. Скажу лишь что тут можно сделать упор на описание членов группы, руководителей и т.п.

Схема SportsOrganization

С помощью этой схемы Вы можете описывать футбольные, хоккейные, волейбольные и другие команды, тренеров этих команд выделяя их схемой Person , атрибутику компанд и пр. Уникальным свойством схемы является sport т.е. вид спорта в котором играет эта комманда 


<div itemscope="" itemtype="http://schema.org/SportsOrganization">
    <span itemprop="name">Наименование команды</span>
    <span itemprop="description">Описание команды, история, победы, награды, участники</span>
    <span itemprop="sport">вид спорта в которм состязается эта команда</span>
    Почтовый адрес клуба где тренируется команда

    <div itemprop="address" itemscope="" itemtype="http://schema. org/PostalAddress">
        <span itemprop="streetAddress">дом, улица</span>
        <span itemprop="addressLocality">город</span>,
        <span itemprop="addressRegion">регион</span> <span itemprop="postalCode">почтовый индекс</span>
    </div>

    Контактные телефоны
    Телефон:<span itemprop="telephone">контактный телефон</span>,
    Факс:<span itemprop="faxNumber">факс</span>,
    E-mail: <span itemprop="email">корпоративный e-mail</span>
</div>

Вот собственно и всё. Многие из этих схем например LoacalBusiness имеют дальнейшую градацию на типы бизнеса. Что позволяет ещё точнее рассказать поисковикам о Вашей компании. А в сочетании с грамотно созданными интерактивными картами и удобнымим контактными формами, Ваша страница контактов будет неотразима для поисковика. Оптимизируйте свой контент, пишите нужную людям информацию и будет Вашему сайту счастье!

Не забудьте проверить вашу микроразметку с помощью валидатора Яндекс дабы исключить все ошибки до индексации сайта роботом.

Микроразметка контактной информации на сайте

На любом продающем сайте должна быть контактная информация. Ведь сайт нацелен продавать, верно? А значит, посетитель должен знать, что у вас за организация, где находится, когда работает, как вам дозвониться и уточнить интересующие вопросы. Как правило, большинство компаний пренебрегают микроразметкой контактной информации и просто помещают блок «Контакты» с адресом и телефоном в подвале сайта. Даже если не разбирать вопрос размещения контактов с точки зрения влияния на конверсию сайта в целом, то отметить о применении микроразметки просто необходимо.Микроразметка позволяет улучшить оформление сниппета вашего сайта в поисковой выдаче (и не только). Микроразметку нужно применять для важных блоков сайта, таких, в частности, как контакты.

Возьмем для примера такой блок контактов на сайте:

<div>
 <span>ООО "Интэрсо"</span>
 <div>
  Адрес: ул.  Балтийская, 5Б,
  185011,
  Республика Карелия, г. Петрозаводск
 </div>
  Телефон: +7 8142 33-22-11 
</div>

А теперь посмотрим, как оформить контакты на сайте в HTML с помощью микроразметки Schema.org:

<div itemscope itemtype="http://schema.org/Organization">
 <span itemprop="name">ООО "Интэрсо"</span>
 <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
   Адрес: 
  <span itemprop="streetAddress">ул. Балтийская, 5Б</span>
  <span itemprop="postalCode">185011</span>
  <span itemprop="addressLocality">Петрозаводск</span>
  </div>
   Телефон: <span itemprop="telephone">+7 814 233-22-11</span>
</div>

Проверить правильность микроразметки можно с помощью сервиса от Яндекс — Валидатор микроразметки.

Кроме красивого сниппета, микроразметка контактной информации позволяет добавить вашу организацию в Яндекс. Справочник, а значит, и добавить свою компанию на Яндекс.Карты. Многие пользователи ищут магазины в непосредственной близости от своего дома на карте. Наличие микроразметки позволяет таким пользователям найти ваш магазин/офис прямо на карте, посмотреть время работы, телефон, адрес сайта. И это, естественно, положительно сказывается на количестве ваших продаж.

Виджет «Контакты» в конструкторе сайтов «Нубекс» имеет микроразметку.

Микроразметка страницы контактов — Разное

Схема Organization

Универсальная схема для страницы контактов, т.е. наиболее обобщенный тип.



<div itemscope="" itemtype="http://schema.org/Organization">
 <span itemprop="name">Наименование организации</span>
 Контактная информация:
 
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
 Почтовый адрес:
 <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>

Схема LocalBusiness

Данная схема может подойти для небольших компаний по предоствлении услуг, или для маленького магазина, торговой точки, аптеки и т. п.

В примере, схема ресторана.



<div itemscope="" itemtype="http://schema.org/Restaurant">
 <span itemprop="name">Наименование ларька</span>
 
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
 <span itemprop="ratingValue">4</span> звезды -
 основнано на <span itemprop="reviewCount">250</span> отзывах клиентов ларька
 </div>
 
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
 <span itemprop="streetAddress">дом, улица</span>
 <span itemprop="addressLocality">город</span>,
 <span itemprop="addressRegion">регион</span> <span itemprop="postalCode">почтовый индекс</span>
 </div>
 
 <span itemprop="telephone">Контактный телефон</span>
 <a itemprop="url" href="http://www.example.com">веб-сайт компании</a>
 
Часы работы: <time itemprop="openingHours" datetime="Mo-Fr 07:00-23:00">Понедельник-Пятница с 7:00 до 23:00 </time>
 
 Дальше может идти описание специфичных именно этому бизнесу свойств.  Блюда, услуги, музыка и т.п.
</div>

Примечание

Если надо скрыть поля от отображения но они должны участвовать в разметке то можно использовать мета. Это удобно когда дизайн сайта не предусматривает некоторые поля но они обязаны быть в микроразметке.

например


скрываем поле "name"
<span itemprop="name">Наименование ларька</span>

новая запись
<meta itemprop="name" content="Наименование ларька">

Json схема макроразметки организации

Данная схема очень проста, и легко может быть размещена где угодно в теле документа, при этом не нарушаю валидацию тегов html.



<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Organization",
"url" : "https://my-site.org",
"contactPoint" : [
{ "@type" : "ContactPoint",
"telephone" : "+1 (234) 567-89-10",
"contactType" : "рабочий"
},
{
"@type" : "ContactPoint",
"telephone" : "+1 (234) 567-89-11",
"contactType" : "оперативная связь"
},
{
"@type" : "ContactPoint",
"telephone" : "+1 (234) 567-89-12",
"contactType" : "все типы мобильных месседжеров"
},
{
"@type" : "ContactPoint",
"telephone" : "+1 (234) 567-89-13",
"contactType" : "дополнительный рабочий"
},
],
"email" : "admin@admin. ru",
"address" : {
"@type" : "PostalAddress",
"addressLocality" : "Sity",
"postalCode" : "123456",
"streetAddress" : "ул. Улица, д. 10, кв. 1"
}
}
</script>

какая микроразметка и когда необходима? Особенности настройки — SEO на vc.ru

Всем привет! Меня зовут Алексей Сидей, я основатель агентства интернет-маркетинга «WEDEX» и один из авторов телеграм канала «Интернет-маркетинг простым языком». И сегодня хочу начать свой блог с очень интересной темы о микроразметках.

2449 просмотров

Микроразметка важна для оформления информации на сайте на доступном поисковикам языке. Благодаря использованию размеченных сведений для вывода данных в сниппетах улучшаются ответы на запросы пользователей.

Словари микроразметки

После возникновения разметки разрабатывались определенные словари и синтаксисы. Словарь выделяет классы и свойства, посредством чего передаётся контент со страницы в поисковую выдачу. Синтаксис включает теги и атрибуты для отображения сущностей.

Schema.org

Вариант контентной микроразметки, который поддерживается Google, Яндекс, Yahoo, Bing. Позволяет вывести в сниппет рейтинг, отклики, цены и др.

В Schema.org доступны три атрибута, использующиеся в каждой микроразметке: itemscope, itemtype и itemprop.

Open Graph

Не менее известный тип разметки, необходимый для правильного отображения постов в соцсетях, мессенджерах и т.д. С Open Graph текст имеет заглавие, картинку и описание.

При разработке кода применяются такие теги синтаксиса: og:title, og:description, og:image, og:url, og:type.

Микроформаты

Разметка Microformats. org содержит различные типы объектов и отображение их характеристик. С ее помощью описываются продукция, мероприятия, фирмы, рецепты и пр. Наиболее распространенный — hCard.

Микроразметка для Яндекс и Google. Что нужно размечать в первую очередь?

Присутствие микроразметки – подтвержденное условие ранжирования сайта. Google советует применять JSON-LD.

BreadcrumbList (строки навигации)

Это микроразметка хлебных крошек на страницах сайта. Часто вебмастера допускают ошибку при разметке хлебных крошек – делают разметку для каждой ХК отдельно.

Organization

Общая микроразметка контактной информации сайта, которая уместна для любых контактов и типов ресурсов. Данная микроразметка может быть использована как отдельно, так и внутри разметки Website. Размечать стоит все контактные данные, к примеру как тут https://best-time.biz/kharkiv, где было применено небольшую seo-хитрость и размечено данные, которых по факту на странице нет:

Пример реализации микроразметки Organization Алексей Сидей

Product

Одна из самых популярных микроразметок для страниц товаров. С ее помощью можно разметить все основные данные товара – фото, адреса, характеристики, цену, отзывы и другие. При правильной разметке вы сможете значительно улучшить сниппет товара, что соответственно улучшит и CTR. Так как и что нужно размечать? Давайте разбираться:

Алексей Сидей

review и additionalProperty – это множественные данные, если на сайте несколько отзывов и много характеристик то данные блоки в разметке повторяются.

Какие «подводные камни» могут быть? При разметке продуктов могут возникнуть несколько предупреждений в сервисе проверки от Гугла, что в общем то не повлияет на итоговый результат, но если вы перфекционист, а нужных данных у вас нет и вы хотите сделать все идеально, тогда заполняем так:

· «brand» – использовать наименование сайта;

· «sku» – применять артикул;

· «description» – использовать дескрипшен;

· Глобальный идентификатор товара, например, код GTIN, MPN или ISBN – применять артикул;

· «priceValidUntil» – указать дату, до которой цена актуальна;

· «url» – уточнить УРЛ страницы продукта;

· «availability» – присутствие товара:

o in_stock – в наличии;

o out_of_stock – нет в наличии;

o preorder – предзаказ.

· Недопустимый формат значения цены для элемента данных «price» – в стоимости не должны быть пробелы, точки, запятые и т.д.

Product для категорий

Нет это не ошибка) Речь пойдет о дочерних разметках AggregateOffer и AggregateRating.

· AggregateOffer – указывает на объем ассортимента и ценовой диапазон

· AggregateRating – показывает средний рейтинг товаров по категории

Советую использовать данные 2 микроразметки вместе и применять ко всем интернет-магазинам. Это позволит улучшить сниппеты категорий и подкатегорий за счет вывода рейтинга и ценового диапазона. Вот как это выглядит (пример разметки — https://mebelons.ru/catalog/divany/pryamye-divany/):

Пример в выдаче Алексей Сидей

Структура данной микроразметки:

Алексей Сидей

Часто задаваемые вопросы (FAQPage)

Это важное нововведение относительно микроразметки для Google, с помощью которого можно расширить сниппет за счет вывода от 2 до 4 часто задаваемых вопросов по теме поискового запроса.

Как же настроить вопросы-ответы, чтобы получить расширенный сниппет? Для контентных ресурсов стоит писать вопросы-ответы из СНЧ запросов. Для интернет-магазинов нужно использовать автогенерилку ответов. Потенциальных покупателей чаще интересуют цены, популярные продукты, отклики, ассортимент.

Пример микроразметки FAQPage в поисковой выдаче Алексей Сидей

Все вопросы и ответы сделаны при помощи автоматической генерации и размещены по всем категориям сайта:

Алексей Сидей

Внимательные люди, наверное, заметили, что в вопросах присутствуют emodji но в сниппете их нет, так было не всегда, но к сожалению последним важным изменением стала отмена вывода emodji для вопросов и ответов примерно в 99% случаев. Это не все микроразметки, которые можно использовать при продвижении, больше о них вы можете узнать в блоге.

Микроразметка Shema.org

Микроразметка необходима сайту, чтобы упростить поисковикам распознавание информации, размещенной на нем. Shema.org помогает роботам наиболее точно обработать, распределить и понять информацию на интернет-ресурсах, чтобы потом выдать эти данные пользователям в поисковой выдаче. Кроме того, поисковые роботы относятся более лояльно к сайтам с микроразметкой, что позволяет быстрее индексировать новые посты.

Схема разметки для раздела «Контакты» (schema.org LocalBusiness)

Микроразметка для бизнеса или филиалов организации, которые имеют физический адрес. Примерами могут служить как отдельный ресторан, так и каждое заведение сети, филиал банка, стоматологическая клиника и т.д. Данная разметка позволяет поисковым системам получать больше информации о вашем бизнесе и выводить её в сниппетах. Рассмотрим пример микроразметки для организации типа «Веб-студия» (такого типа нет, поэтому будем использовать довольно общий тип «Бизнес» 2 уровня) 

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

<p itemprop="name">Дизайн студия</p>
<p itemprop="description">Веб студия занимается разработкой сайтов на 1С-Битрикс</p> 

<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<p>Адрес:	
<span itemprop="postalCode">119019</span>, 
<span itemprop="addressCountry">Россия</span>, 
<span itemprop="addressRegion">Московская область</span>, 
<span itemprop="addressLocality">Москва</span>, 
<span itemprop="streetAddress">Красная площадь, д. 1</span>
</p>
</div> 

<p>Телефоны:	
<span itemprop="telephone">8(495)123-45-67</span>,  
<span itemprop="telephone">8(499)123-45-67</span> 
</p> 

<p>Факс:
<span itemprop="faxNumber">8(495)123-45-67</span> 
</p> 

<p>E-mail:
<a itemprop="email" href="mailto:email@site. ru">[email protected]</a> 
</p> 

<p>Адрес сайта:
<a href="http://site.ru" itemprop="url">site.ru</a> 
</p> 

<img itemprop="logo" src="http://site.ru/Images/logo.png"> 

<div>Время работы: 
  <time itemprop="openingHours" datetime="Mo-Fr 9:00−20:00">С Понедельника по Пятницу 9-20</time>, 
  <time itemprop="openingHours" datetime="St,Sn">Суббота, Воскресенье круглосуточно</time> 
</div> 

<div itemprop="geo" itemscope="" itemtype="http://schema.org/GeoCoordinates"> 
  <meta itemprop="latitude" content="55.7537523"> 
  <meta itemprop="longitude" content="37.6225168"> 
</div> 

<p>ИНН:
<span itemprop="taxID">1234567890</span> 
</p> 

</div>

Схема для раздела «О компании» (schema.org Organization)

Эта схема универсальна, если вы не отнесли свою фирму ни к одному другому типу, смело пользуйтесь этой схемой. Тут приводится общая контактная информация, наименование, адреса, телефоны, электронная почта. 

<div itemscope="" itemtype="http://schema.org/Organization">
<p itemprop="name">Наименование организации</p>

Контактная информация: 
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<p>Почтовый адрес:
<span itemprop="streetAddress">номер дома, улица</span>
<span itemprop="postalCode">почтовый индекс</span>
<span itemprop="addressLocality">город, страна</span>
</p>
</div>

<p>Телефон:
<span itemprop="telephone">контактный телефон</span>,
Факс:<span itemprop="faxNumber">факс</span>,
E-mail: <span itemprop="email">корпоративный e-mail</span>
</p>
</div>

Микроразметка для раздела «Статьи» (schema.org/Article)

Микроразметка статьи позволяет сделать сниппет более структурированным и человекочитаемым. Следует найти файл, который отвечает за обзор статей. Например, это может быть: single.php. Для начала находим тег, отвечающий за вывод контента, и вставляем нужный атрибут. 

<div itemscope itemtype="http://schema.org/BlogPosting">
<link itemprop="mainEntityOfPage" itemscope href="Ссылка" />
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img alt="Логотип сайта" itemprop="image url" src="Ссылка на логотип сайта"/>
<meta itemprop="width" content="размер в пикселях">
<meta itemprop="height" content="размер в пикселях">
</div>
<meta itemprop="telephone" content="Телефон">
<meta itemprop="address" content="Адрес">
<meta itemprop="name" content="Название">
</div>
<meta itemprop="datePublished" content="1111">
<meta itemprop="dateModified" content="Дата последнего редактирования статьи">
<span itemprop="author" itemscope itemtype="http://schema. org/Person">
<span itemprop="name">Автор статьи</span>
</span>
<div itemprop="articleBody">
<h2 itemprop="headline">Заголовок Вашей статьи</h2>
<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="image url" alt="Описание изображения" src="Ссылка на изображение"/>
<meta itemprop="width" content="размеры в пикселях">
<meta itemprop="height" content="размеры в пикселях">
</span>
<p>Тут идет основной текст статьи, который можно разбить на абзацы. Разрешено использование всех html тэгов разметки.</p>
</div>
</div>

Микроразметка для «Картинок» (schema.org/ImageObject)

Существует отдельный поиск по изображениям, который дает дополнительную возможность увеличить трафик на сайт, если пользователь ищет товар по изображению. Атрибут itemprop=»image» позволяет роботам быстро распознавать информацию о картинках. Достаточно будет указать ссылку на изображение, описание, название картинки, подпись, размеры изображения. 

<div itemscope itemtype="http://schema.org/ImageObject">
<h3 itemprop="name">название картинки</h3>
<img src="https://www.seo.ru/images.jpg" itemprop="contentUrl" />
<p itemprop="description">описание картинки</p>
</div>

Микроразметка для раздела «Товарные страницы» (shema.org Product)

Для разметки товарных страниц используются схемы Product и Offer или AggregateOffer в Schema.org/Product. Таким образом информация ваших продуктовых страниц может быть представлена в виде структурированных сниппетов с описанием товара и ценой в выдаче Яндекса. Разметив эту разметку на странице сайта, можно привлечь больше потенциальных покупателей.

Вариант 1 

<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Кровать Мелисса с мягкой спинкой</span>
<span itemprop="brand">Компания диваны</span>
<img itemprop="image" src="https://www. iseo.ru/bitrix/templates/iseo/images/melissa.png" />
<span itemprop="description">Кровать Мелисса с мягкой спинкой и гарантией производителя</span>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="RUB" />
<span itemprop="price">6793</span>
</div>
</div>

Вариант 2 

<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Плюшевый еж "Уф Уф"</span>
<span itemprop="brand">Фабрика плюшевых ежей "С иголочки"</span>
<span itemprop="model">Номер модели 964893NM</span>
<img itemprop="image" src="Ссылка на изображение ежа" />
<span itemprop="description">Текстовое описание товара.</span>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="RUB" />
<span itemprop="price">Стоимость товара</span>
<span itemprop="seller">Продавец товара</span>
</div>

</div>

Микроразметка для раздела «Отзывы» (schema.

org/Review)

Если на страницах товаров есть отзывы, их также можно разметить при помощи свойства Review. В результате в выдаче Google в сниппете появится рейтинг и отзывы: В коде сайта необходимо указать следующие атрибуты. 

<div itemscope itemtype="http://schema.org/Review">
  <h3 itemprop="name"><a href="http://example.com/review?10231" itemprop="url">Русская кухня в изгнании</a></h3>
  <div>Отзыв написал <span itemprop="author" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">
      <a itemprop="url" href="http://example.com/users/vasya">Вася Пупкин</a>
    </span>
  </span>
    <meta itemprop="datePublished" content="2012-07-15" />
    15 июля 2012.
  </div>
  <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
    <meta itemprop="worstRating" content="0"/>
    <p>Оценка: <span itemprop="ratingValue">9</span> из <span itemprop="bestRating">10</span>. </p>
  </div>
  <div itemprop="pro">Бесплатная стоянка, прекрасная детская комната и предупредительные официанты.</div>
  <div itemprop="contra">Большой и шумный некурящий зал.</div>
  <div itemprop="reviewBody">
    <p>Заказ был готов сравнительно быстро, а напитки приготовили практически сразу.
    Обслуживание на уровне, хотя грязная посуда иногда застаивалась.</p>
    <p>Рекомендую русскую кухню, особенно супы.</p>
  </div>
  <div>Автор посетил заведение <meta itemprop="dateVisited" content="2012-07-10">10 июля 2012.</div>
  <div>Оценки характеристик ресторана:
    <ul>
      <li itemprop="tag" itemscope itemtype="http://schema.org/Rating">
        <link itemprop="ratingTarget" href="https://webmaster.yandex.ru/vocabularies/ReviewBusiness/Cuisine.xml">
        Кухня: <span itemprop="ratingValue">5</span> из <span itemprop="bestRating">5</span>;
      </li>
      <li itemprop="tag" itemscope itemtype="http://schema. org/Rating">
        <link itemprop="ratingTarget" href="https://webmaster.yandex.ru/vocabularies/ReviewBusiness/Hall.xml">
        Зал: <span itemprop="ratingValue">3</span> из <span itemprop="bestRating">5</span>;
      </li>
    </ul>
  </div>
  <div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Hotel">
    <h4>Информация о ресторане</h4>
    <p>Название: <span itemprop="name">Заграница</span></p>
    <p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">Адрес:
      <span itemprop="addressLocality">Москва</span>, <span itemprop="streetAddress">Тверская, 7</span>.
    </p>
    <p>Телефон: <span itemprop="telephone">123-45-12</span>.</p>
    <p>Сайт ресторана: <a itemprop="url" href="http://zagranica.ru">http://zagranica.ru</a></p>
    <p>Электронный адрес администрации:
      <a itemprop="email" href="mailto:hostess@zagranica. ru">[email protected]</a>
    </p>
  </div>
</div>

Микроразметка для раздела «О себе» (schema.org/Person)

Person — тип для описания человека — реально существующего, жившего давно или вообще вымышленного. С его помощью можно описать имя, фамилию, возраст, дату рождения и смерти, пол, контактные данные, информацию о работе и кучу другой информации, которую робот поймёт.

Вариант 1 

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Jane Doe</span>
  <img src="janedoe.jpg" itemprop="image" />
  <span itemprop="jobTitle">Professor</span>

  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">
      20341 Whitworth Institute
      405 N. Whitworth
    </span>
    <span itemprop="addressLocality">Seattle</span>,
    <span itemprop="addressRegion">WA</span>
    <span itemprop="postalCode">98052</span>
  </div>

  <span itemprop="telephone">(425) 123-4567</span>
  <a href="mailto:jane-doe@xyz. edu" itemprop="email">
    [email protected]</a>
  Jane's home page:
  <a href="http://www.janedoe.com" itemprop="url">janedoe.com</a>
  Graduate students:
  <a href="http://www.xyz.edu/students/alicejones.html" itemprop="colleague">
    Alice Jones</a>
  <a href="http://www.xyz.edu/students/bobsmith.html" itemprop="colleague">
    Bob Smith</a>
</div>

Вариант 2 

<div itemscope itemtype="http://schema.org/Person">
   <p itemprop="name">Алексей</p> <!-- Имя -->
   <p itemprop="additionalName"> Владимирович</p> <!-- Отчество -->
   <p itemprop="familyName"> Петров</p> <!-- Фамилия -->
  <p itemprop="jobTitle">веб-мастер</p> <!-- Должность -->
   <div>
      <a href="http://site.ru/about/" itemprop="sameAs">site.ru/about/</a>, <!-- Адрес оффициальной веб-страницы (вроде wikipedia), множественное -->
      <a href="http://site2. ru/users/who/" itemprop="sameAs">site2.ru/users/who/</a> <!-- Адрес оффициальной веб-страницы (вроде wikipedia), множественное -->
   </div>
   <div>
      <a href="http://ok.ru/who" itemprop="url">ok.ru/who</a>, <!-- Адрес веб-страницы, множественное -->
      <a href="http://twitter.com/who" itemprop="url">twitter.com/who</a>, <!-- Адрес веб-страницы, множественное -->
      <a href="http://vk.ru/who" itemprop="url">vk.ru/who</a> <!-- Адрес веб-страницы, множественное -->
   </div>
   <div>
      <span itemprop="telephone">8(495)123-45-67</span>, <!-- телефон, множественное -->
      <span itemprop="telephone">+7(926)12-34-567</span> <!-- телефон, множественное -->
   </div>
   <div>
      <span itemprop="email">[email protected]</span>, <!-- e-mail, множественное -->
      <span itemprop="email">email2@site. ru</span> <!-- e-mail, множественное -->
   </div>
</div>

Микроразметка шапки сайта (schema.org/WPHeader)

Данная разметка описывает информацию о сайте. 

<header itemscope itemtype="http://schema.org/WPHeader">
    <meta itemprop="headline" content="Название сайта">
    <meta itemprop="description" content="Описание сайта">
    <meta itemprop="keywords" content="асфальт, москва, недорого, доставка">
</header>

Микроразметка для меню сайта (schema.org/SiteNavigationElement)

Меню сайта тоже требует микроразметки. Хотя бы для того, чтобы поисковый робот понимал, из каких разделов состоит сайт. Это действительно нужный элемент, которым пренебрегать не стоит. 

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
    <a itemprop="url" href="mysite.com/news/">Новости</a>
    <a itemprop="url" href="mysite. com/articles/">Статьи</a>
    <a itemprop="url" href="mysite.com/contact/">Контакты</a>
</nav>

Микроразметка боковой колонки сайта (schema.org/WPSideBar)

Что у нас обычно бывает в сайдбаре (боковой колонки сайта) ? Популярные статьи, последние комментарии, виджеты социальных сетей, реклама и какой-нибудь опрос — вот первое, что приходит в голову. Собственно, мы можем разметить все эти типы элементов, но проще всего — обозначить их в виде логических блоков. 

<aside itemscope itemtype="http://schema.org/WPSideBar">
    <section>
        <h4 itemprop="name">Группа ВКонтакте</h4>
        <!-- код виджета -->
    </section>
    <section>
        <h4 itemprop="name">Страница Facebook</h4>
        <!-- код виджета -->
    </section>
    <section>
        <h4 itemprop="name">Мой опрос</h4>
        <!-- код опроса -->
    </section>
</aside>

Микроразметка для подвала сайта (schema.

org/WPFooter (подвал, footer)

Футер/footer — тот самый элемент внизу сайта, где обычно ещё раз пишут название сайта, копирайты, контакты и прочую информацию.
Если же у Вас колонтитул имеет множество элементов, характерных для организации — адреса, логотипы, контакты и т.п. — можно применить разметку с помощью типа Organization. 

<footer itemscope="http://schema.org/WPFooter">
    <div>MySite.com<span itemprop="copyrightYear">2017</span>. Все права защищены</div>
</footer>

что это, для чего нужно и как внедрить

На запрос пользователя поисковые системы выдают список релевантных ссылок. Описание (сниппет) каждой ссылки при этом может выглядеть по-разному. Как, например, вот в этом случае:

Пример выдачи «Яндекса» по коммерческому запросу

Почему у одних сайтов в сниппете показывается дополнительная информация (адрес, контакты, отзывы и пр.), формирующая так называемый расширенный сниппет, а у других – нет? Всё дело в микроразметке (структурированных данных).

Как работает микроразметка

Предположим, вы разместили на сайте статью. Поисковик понимает, что в ней написано, но не всегда может самостоятельно определить элементы статьи: заголовок, имя автора, картинки, рейтинг и т. д. Если добавить на страницу специальный код (микроразметку), — который будет разъяснять поисковым системам, что есть что, — они смогут отобразить больше информации о сайте или компании в сниппете. Это, в свою очередь, улучшает пользовательский опыт в поиске: юзеры смогут получать интересующие их данные прямо в выдаче и тратить меньше времени на выбор наиболее подходящего их запросу сайта.

Микроразметка не является фактором ранжирования и не оказывает прямого влияния на SEO. Более того, никто не гарантирует, что сразу после внедрения кода вы получите ощутимый приток посетителей на сайт. Однако это мощный инструмент, который помогает привлекать внимание в выдаче и выделять ресурс на фоне конкурентов. 

Поэтому нужно заниматься разметкой страниц, но не в первую очередь, а когда сайт уже будет на первой странице поиска, в верхней его части, где сниппет играет более значимую роль для пользователя, когда он принимает решение о переходе.

Вот как может выглядеть статья с микроразметкой в поиске «Яндекса»:

Пример статьи с микроразметкой – картинка попала в сниппет

Кстати, не только поисковые системы используют структурированные данные на сайтах. Микроразметка также позволяет формировать красивые ссылки на внешние ресурсы в соцсетях. Например, когда пользователь делится ссылкой в «Фейсбуке», она выглядит так:

Всё по канонам: картинка, ссылка, заголовок и описание

Но если не внедрить на страницу микроразметку для соцсетей, пост с ссылкой может сформироваться иначе: неправильная картинка, отсутствующие элементы и пр. Это не очень хорошо, так как от привлекательности ссылки зависит то, насколько активно по ней будут переходить. Если соцсети — один из источников трафика на сайт, о настройке микроразметки нужно подумать в первую очередь.

Читайте также: 10 способов получить бесплатный трафик на сайт

Типы расширенных сниппетов: в каком случае микроразметка наиболее полезна?

Расширенные сниппеты могут показываться как по коммерческим, так и по информационным запросам. Для разных типов контента у поисковых систем предусмотрены разные «плюшки», которые сайт может получить в выдаче. 

В примере выше был показан сайт с разметкой информационной статьи. Но есть типы содержимого, которые могут дать больше возможностей для формирования информативного и привлекательного сниппета. Одним из самых наглядных примеров такого контента являются рецепты:

Рецепты в поисковиках выделяются особым образом: в сниппете присутствует картинка, время приготовления, калории и прочая информация

При продвижении кулинарного сайта игнорирование микроразметки может негативно сказаться на посещаемости из поиска – пользователю проще кликнуть на тот рецепт, который больше понравится ему на картинке или будет подходить по другим параметрам, отображаемым в расширенном сниппете.

Еще один пример информационного контента – страница вопросов и ответов, которая тоже может иметь особый вид в поиске.

У структурированной страницы в сниппете выводится несколько вопросов и частично текст ответов на них

Кроме представленных примеров Google поддерживает нестандартные сниппеты для товаров, компаний, страниц формата Q&A (форумы), программного обеспечения и многих других типов контента. У «Яндекса» набор похожий, но немного отличается. Полный перечень видов содержимого страниц, по которым показываются расширенные сниппеты, можно посмотреть в справке.

Размечать можно не только текст, но и отдельные изображения и видео на странице. Это не только увеличит вероятность их попадания в сниппеты, но и улучшит представление в сервисах поиска по этому типу контента («Google Картинки», «Яндекс.Видео» и т. д.).

Из чего состоит микроразметка

Для внедрения структурированных данных на сайт необходимо пользоваться общепринятыми обозначениями, которые можно найти в специальных словарях.

Словари содержат наборы сущностей и их свойств, характеризующих содержимое страницы. К примеру, у вас есть интернет-магазин с товарами. Чтобы в сниппете выводилось правильное описание и цена, нужно использовать специальную сущность (Product) с соответствующим набором свойств.

Среди основных словарей можно выделить:

  • Schema.org. Практически общепринятый стандарт разметки. Он одинаково поддерживается «Яндексом», Google и Bing.
  • Microformats.org (микроформаты). Используется в основном для разметки контактов, отзывов и данных о товарах. «Яндекс» поддерживает этот формат для разметки контактной информации и рецептов. 
  • Open Graph. Это уже словарь немного иного типа – его применяют для разметки ссылок в соцсетях. Open Graph включает всего несколько типов данных: с его помощью вы можете указать заголовок, описание, картинку, тип материала и саму ссылку на материал.

Микроразметка реализуется при помощи синтаксиса. Например, ту же schema.org можно внедрить несколькими разными способами (микроформаты, в отличие от неё, уже содержат синтаксис). Их тоже бывает несколько:

  1. JSON-LD.
  2. Microdata.
  3. RDFa.

Рассмотрим каждый из типов более подробно.

JSON-LD

Самый удобный синтаксис: не нужно размечать каждый элемент – просто добавляете кусок кода между элементами <head></head> или <body></body> сайта.

Пример кода:

<script type=»application/ld+json»>
{
«@context»: «https://schema.org/»,
«@type»: «Organization»,
«name»: «My Company»,
«url»: «https://mycompany.ru/»,
«description»: «Мы предоставляем лучшие услуги во всём мире.»,
«email»: «[email protected]»
}
</script>

Microdata

Здесь всё иначе: код не вставляется отдельным блоком, а «обволакивает» каждый элемент. То есть к существующим тегам добавляются дополнительные атрибуты. Аналогичный прошлому пример, реализованный с помощью микроданных, будет выглядеть так:

<p itemscope itemprop=»organization» itemtype=»https://schema.org/Organization»>
<a href=»https://mycompany.ru/» itemprop=»url»>
<span itemprop=»name»>My Company</span></a>
<span itemprop=»description»>Мы предоставляем лучшие услуги во всём мире.</span>
Связь с нами: <span itemprop=»email»>[email protected]</span>
</p>

RDFa

Этот синтаксис всегда используется в связке с Open Graph. Его код похож на предыдущий, но выглядит слегка иначе:

<p vocab=»https://schema.org/» typeof=»Organization»>
<a href=»https://mycompany.ru/» property=»url»>
<span property=»name»>My Company</span></a>
<span property=»description»>Мы предоставляем лучшие услуги во всём мире.</span>
Contact us at: <span property=»email»>[email protected]</span>
</p>

На самом деле третий тип синтаксиса в поиске встречается редко. Если для разметки на сайте используется словарь schema.org, её обычно реализуют при помощи JSON-LD и микроданных.

Синтаксис JSON-LD содержит меньше кода, проще воспринимается и правится, рекомендован Google, но имеет существенный недостаток – поиск «Яндекса» пока его не поддерживает.

Как внедрить структурированные данные на страницу

Размечать содержимое страницы можно несколькими способами:

  1. Вручную (для этого нужно хотя бы на базовом уровне разбираться в коде).
  2. С помощью Google Tag Manager.
  3. При помощи плагинов CMS.

При ручном способе внедрения микроразметки писать код с нуля, разумеется, не нужно. Его необходимо просто добавить в правильное место. А получить готовую разметку можно благодаря специальным генераторам.

Один из самых многофункциональных сервисов – Web Code Tools. С его помощью можно создавать разметку и для соцсетей, и для поиска.

В левом меню – типы разметки (есть даже Twitter Cards – особый формат для «Твиттера»)

Все виды содержимого страниц, для которых доступны расширенные сниппеты, представлены в основном списке. Если необходимо добавить товар, к примеру, выбираем предпоследний вариант – Product Offer.

Теперь нужно вписать в пустые поля соответствующие свойства и скопировать код, сгенерированный справа.

Код обновляется прямо на ходу – по мере добавления новых свойств

Прежде чем вставлять полученный фрагмент HTML или скрипт (в случае JSON-LD) на сайт, его необходимо проверить в специальном валидаторе. Можно воспользоваться инструментами Google и «Яндекса». Они оба работают по схожему принципу: вы вставляете в поле код или ссылку на страницу с размещенным в ней кодом, инструмент анализирует содержимое и выводит отчёт.

В отчётах сервисов поисковых систем есть некоторые различия. Один и тот же недописанный фрагмент сервисы восприняли по-разному. «Яндекс» выдал ошибку и указал на то, что одно из обязательных свойств было пропущено.

Сервис явно указывает на ошибки, если они есть

Google, в свою очередь, просто выдал предупреждение:

«Яндекс» считает атрибут с валютой цены товара обязательным, а Google – нет

Теперь разберем подробнее каждый из способов внедрения кода на сайт.

Читайте также: Оптимизируем сайт: технический аспект

Ручной метод

Скрипт JSON-LD можно поместить в любое место страницы в секцию

или . Это делается в редакторе исходного кода за несколько секунд. С микроданными сложнее – придется искать именно тот фрагмент содержимого, который был размечен, и менять его на сгенерированный код или приписывать каждый атрибут к существующим тегам отдельно.

Если вы продвигаетесь только в Google, внедрить микроразметку можно гораздо проще – при помощи специального маркера. Это позволит избежать взаимодействия с кодом и быстро получить результат. Однако для других поисковиков такая разметка работать не будет.

Добавление с помощью Google Tag Manager

Этот способ подходит для внедрения разметки типа «Организация», так как код добавляется сразу на все страницы сайта.

Перейдите в Менеджер тегов и добавьте новый тег.

Для начала работы нужно зарегистрироваться и добавить сайт

Щелкните на область «Конфигурация тега», прокрутите появившийся справа список ниже и выберите «Пользовательский HTML».

Тип «Пользовательский HTML» позволяет добавить на сайт любой код или скрипт

Вставьте код и нажмите на область «Триггеры». В открывшемся меню выберите All Pages.

Если настройки дефолтные, то All Pages будет единственным триггером в списке

После выбора триггера осталось нажать «Сохранить» в правом верхнем углу и задать имя тега.

Использование плагинов CMS

Плагины популярных CMS позволяют генерировать и внедрять микроразметку прямо в панели управления сайтом (сразу при создании или редактировании страниц или в настройках плагина).

Существует много доступных вариантов. Если ваш сайт использует WordPress, для него есть как специализированные плагины, так и отдельные модули в составе SEO-плагинов (All in One SEO, Yoast и т. д.). С модулями часто бывают проблемы, так как они не совсем корректно внедряют разметку. Кроме того, они могут отсутствовать в бесплатной версии. 

Разметка для соцсетей, однако, в большинстве случаев доступна. В плагине All in One SEO её можно найти в одной из вкладок с настройками под статьей, которую вы добавляете или редактируете.

Доступна как разметка для Facebook (которую понимают и другие соцсети), так и Twitter Cards

Примеры специализированных бесплатных плагинов, с помощью которых можно добавить структурированные данные: Schema (JSON-LD) и Schema — All In One Schema Rich Snippets (microdata).

В бесплатной версии Schema микроразметка доступна для статей, контактов, видео и некоторых других типов контента. Добавляются структурированные данные в настройках плагина.

Микроразметка настраивается в разделе Settings меню плагина

Во вкладке General нужно выбрать тип сайта и загрузить логотип. Заполнение полей в разделе Knowledge Graph позволит попасть в граф знаний Google, если ваша компания/персона достаточно узнаваемы. Вкладка Schema содержит набор элементов (хлебные крошки, футер, хедер, комментарии, видео, аудио) и страниц («О нас» и «Контакты»), для которых можно активировать микроразметку.

All In One Schema Rich Snippets – полностью бесплатный плагин, который настраивается отдельно для каждой добавляемой или редактируемой страницы (настройки можно найти под редактором записей/страниц/товаров). На выходе получается код в формате микроданных, поэтому разметка подходит и для «Яндекса».

Достаточно выбрать тип контента из открывающегося списка и заполнить обязательные поля

Разметка добавлена.

Это всё?

Когда вы внедрили код, проверьте его еще раз с помощью валидаторов, но уже на странице (вместо фрагмента кода вставьте в валидатор соответствующий URL). Затем отправьте адреса измененных страниц на переобход поисковыми роботами. Это можно тоже сделать в инструментах вебмастера «Яндекса» и Google.

В панели вебмастера Google, кстати, есть специальный раздел «Улучшения», в котором можно смотреть отчёты о страницах с микроразметкой и вовремя отслеживать возможные проблемы. Но эта функция доступна, только если типы расширенных результатов поддерживаются поиском.

Конечно, микроразметка — только небольшая часть поисковой оптимизации. Чтобы эффективно продвигать сайты в «Яндекса» и Google, нужно гораздо больше знать и уметь, и для этого приходится постоянно учиться. Не важно, предприниматель вы или специалист, изучаете SEO с нуля или уже джуниор-оптимизатор, — вы найдете пользу в курсах, статьях, вебинарах от CyberMarketing.

Использование микроданных для разметки структурированных данных на ваших веб-страницах

Веб-сайты, которые мы создаем, полны данных о людях, местах, продуктах и ​​многом другом. Как дизайнеры, мы очень усердно работаем над тем, чтобы представить данные нашим пользователям в понятной и эстетичной форме. Однако мы часто не думаем о том, насколько легко наши нечеловеческие коллеги (компьютеры) могут читать и понимать данные на наших веб-страницах. Здесь может помочь использование микроданных.

Microdata направлена ​​на популяризацию стандартизированного способа разметки структурированных данных на наших веб-страницах, чтобы их можно было легко проанализировать с помощью компьютерных программ. Это достигается за счет использования нескольких новых атрибутов HTML и всего набора схем . Эти схемы описывают все свойства, которыми может обладать элемент. Элемент здесь определяется как предмет , такой как человек, место, событие или продукт.

В этом сообщении блога вы узнаете, как использовать новые атрибуты микроданных, а также познакомитесь с некоторыми популярными схемами из Schema.орг.

Знакомство с Schema.org

Это все хорошо и хорошо, если тратить время на разметку данных на наших веб-страницах, но если все не используют стандартизованный набор схем, мы не решили проблему повышения доступности этих данных. Здесь на помощь приходит Schema.org.

Schema.org — это совместный проект Bing, Google, Yahoo! и Яндекс, целью которого является создание набора стандартизованных схем, которые могут использоваться веб-разработчиками для решения описанной выше проблемы.Вам не обязательно использовать эти схемы, но я бы настоятельно рекомендовал вам это сделать.

Примечание: Также можно создавать свои собственные схемы. Это выходит за рамки данной статьи, но если вам интересно, я бы порекомендовал прочитать эту докторскую статью HTML5.

Атрибуты микроданных

Прежде чем мы остановимся на схемах, вам сначала нужно узнать о новых атрибутах, которые используются для разметки данных на ваших веб-страницах.

itemscope — этот атрибут должен быть размещен в элементе HTML, который содержит все данные, относящиеся к элементу. Вам не нужно указывать значение для этого атрибута.

 
 itemscope > . ..

itemtype — Атрибут itemtype используется для разметки того, что является . Значение этого атрибута должно содержать URL-адрес схемы, определяющей все свойства, которые может иметь элемент.

 
 itemtype = "http: // schema.org / Person "> ...

itemprop — Этот атрибут используется для разметки свойства элемента. Значение этого атрибута должно содержать название свойства. Содержимое элемента будет использоваться как значение свойства. В случае, если в ссылке используется атрибут itemprop, будет использоваться значение атрибута href . Для элементов используется значение атрибута src .

  itemprop = "name" > Мэтт Уэст

itemid — этот атрибут может использоваться для указания уникального идентификатора для элемента.Это может быть что-то вроде ISBN книги. Компьютерная программа может использовать этот идентификатор, чтобы определить, относятся ли несколько элементов микроданных к одному и тому же физическому объекту.

 
 itemid = "urn: isbn: 978-1- 
8-03-4" 
 >
  ...

itemref — Атрибут itemref позволяет добавлять свойства, расположенные за пределами элемента с заданной областью действия. Это достигается путем добавления стандартного атрибута id элемента к элементу, содержащему данные свойства, и последующего указания этого идентификатора в атрибуте itemref основного HTML-элемента, содержащего ваш элемент.Пример такого использования можно найти ниже.

  id = "my-name" itemprop = "name" > Мэтт Уэст 


 itemref = "my-name" >
  ...

Обратите внимание, что элемент за пределами области действия по-прежнему использует атрибут itemprop .

Теперь, когда вы понимаете атрибуты, участвующие в разметке ваших структурированных данных, давайте взглянем на некоторые часто используемые схемы.

Местный бизнес

Первая схема, которую вы собираетесь рассмотреть, предназначена для разметки данных о местных предприятиях. Эта схема содержит множество свойств, некоторые из которых вы будете использовать чаще, чем другие. Самыми важными свойствами, которые вы захотите обеспечить, являются: имя, описание, адрес, телефон, электронная почта и URL-адрес. Вы можете найти полный список свойств в этой схеме здесь.

Вот некоторая разметка, использующая схему LocalBusiness.

 
 itemscope itemtype = "http: // schema.org / LocalBusiness ">
  
 itemprop = "name" > Город разработчиков 

  

     itemprop = "logo"  src = "logo.png" alt = "Логотип города разработчиков">
  

  
 itemprop = "description" >
    Услуги веб-дизайна и разработки.
  

  
 itemprop = "address" itemscope itemtype = "http://schema.org/PostalAddress" >
     itemprop = "streetAddress" > Бизнес-центр Ситона, Хай-стрит 
     itemprop = "addressLocality" > Гилсборо 
     itemprop = "addressRegion" > Нортгемптоншир 
     itemprop = "postalCode" > NN6 8PU 
  

  

    Телефон:  itemprop = "phone" > 01604 749014 
  

  

    Электронная почта:  [email protected] " itemprop =" email "> [email protected] 
  

  

    Интернет:  itemprop="url" > http://developercity.co.uk

Вот как эта разметка интерпретируется компьютерной программой. Обратите внимание, как адрес анализируется как связанный элемент, поскольку мы использовали схему PostalAddress для разметки данных адреса.

 Товар
  тип: http: // schema.org / localbusiness
  имущество:
    название: Город застройщика
    логотип: http://www.example.com/logo.png
    описание: Услуги веб-дизайна и разработки.
    адрес: Пункт 1
    телефон: 01604 749014
    электронная почта: [email protected]
    URL: http://developercity.co.uk

Пункт 1
  тип: http://schema.org/postaladdress
  имущество:
    streetaddress: Seatons Business Center, Хай-стрит
    адрес местность: Гилсборо
    адресрегион: Нортгемптоншир
    почтовый индекс: NN6 8PU

Примечание. Разработчики Google разработали удобный инструмент для тестирования разметки микроданных: Google Rich Snippets Tool.

Человек

Возможные приложения для схемы Person будут включать страницы профилей пользователей и сайты социальных сетей. Эта схема также имеет исчерпывающий список потенциальных свойств, наиболее заметными из которых являются: имя, описание, изображение, URL-адрес, дополнительное имя (отчество), адрес, дата рождения, дата смерти, адрес электронной почты, givenName (имя), familyName (фамилия), телефон и jobTitle.

Ознакомьтесь с полной схемой для получения дополнительных свойств.

Разметка ниже показывает, как можно использовать схему Person для разметки данных на своих веб-страницах.

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

     itemprop = "name" >  itemprop = "givenName" > Мэтт   itemprop = "familyName" > Запад  
  

   itemprop = "image"  src = "mattwest. png" alt = "Фотография Мэтта Уэста">
  

    Дата рождения:  itemprop = "BirthDate" > 06.04.1992 
  

  

    Интернет:  itemprop =" url "> http://matt-west.com 
  

  

    Телефон:  itemprop = "phone" > 01604 749014 
  

  
 itemprop = "address" itemscope itemtype = "http://schema.org/PostalAddress" >
     itemprop = "streetAddress" > Бизнес-центр Ситона, Хай-стрит 
     itemprop = "addressLocality" > Гилсборо 
     itemprop = "addressRegion" > Нортгемптоншир 
     itemprop = "postalCode" > NN6 8PU

Попробуйте использовать инструмент Google Rich Snippets Tool, чтобы увидеть, как эта разметка может быть интерпретирована компьютерной программой.Просто скопируйте и вставьте разметку выше в текстовое поле.

Товар

Последняя схема, которую вы собираетесь рассмотреть, используется для разметки данных о продукте. Это может быть действительно полезно при создании веб-сайтов электронной коммерции.

Наиболее часто используемые свойства в схеме продукта: имя, описание, изображение, URL-адрес, модель, цвет, бренд и productID. Вы можете найти полный список здесь.

Пример продукта можно найти ниже.

 
 itemscope itemtype = "http: // schema.org / Товар ">
  
 itemprop = "name" > Ховеркар 5000 
   itemprop = "image"  src = "hovercar.png" alt = "Hovercar 5000">
  
 itemprop = "description" >
    Приезжайте к месту назначения стильно с новым экологически чистым автомобилем Hovercar 5000.
  

  

    Бренд:  itemprop = "brand" > Ховеркары ACME 
  

  

    Модель:  itemprop = "model" > 5000B 
  

  

    Цвет:  itemprop = "color" > серебристый 
  

  

    Идентификатор продукта:  itemprop = "productID" > HV5000B

Примечание: Вы можете найти полный список схем здесь.

Последние мысли о микроданных

Правильное использование микроданных поможет сделать данные на ваших веб-страницах более доступными для компьютерных программ (например, тех, которые используются поисковыми системами для анализа ваших веб-страниц).

Хотя я считаю, что микроданные действительно занимают важное место в инструментарии веб-разработчиков, стоит отметить, что использование микроданных может добавить значительный объем разметки на ваши веб-страницы. Взгляните на все эти дополнительные элементы , которые были необходимы для помощи в разметке данных в приведенных выше примерах.Вся эта дополнительная разметка может повлиять на читаемость вашего кода; затрудняет понимание людьми, которые могут работать над проектом вместе с вами. Чтобы свести к минимуму эту проблему, я бы рекомендовал использовать микроданные только для разметки наиболее важных данных на странице.

Используете ли вы микроданные в своих проектах? Дайте нам знать об этом в комментариях.

Полезные ссылки

Schema Markup — 2021 SEO Best Practices

Schema.org (часто называемый схемой) — это семантический словарь тегов (или микроданных), которые вы можете добавить в свой HTML, чтобы улучшить способ чтения поисковыми системами и представления вашей страницы в результатах поиска.

Пример кода 
 
  Входящий маркетинг и поисковая оптимизация: идеи из блога Moz

Что такое структурированные данные Schema.org?

Schema.org — результат сотрудничества Google, Bing, Yandex и Yahoo! чтобы помочь вам предоставить информацию, необходимую их поисковым системам для понимания вашего содержания и предоставления наилучших возможных результатов поиска в настоящее время.Добавление разметки схемы в ваш HTML улучшает способ отображения вашей страницы в поисковой выдаче, улучшая расширенные сниппеты, которые отображаются под заголовком страницы.

Например, первый результат поиска выше содержит рейтинг в звездах и дату публикации. Оба они могут быть добавлены с помощью схемы. Во втором примере нет расширенных фрагментов, а вместо этого отображается либо метаописание, либо другая информация, выбранная Google. Чтобы получить расширенный фрагмент кода для обзора, используйте следующий код:

 
  [Общая оценка дана]  звезд -  [Количество отзывов]  отзывов

Для создания свой собственный код, вы можете использовать помощник по разметке структурированных данных Google

Разница между схемой, микроданными и структурированными данными

Структурированные данные — это система связывания имени со значением, которая помогает поисковым системам классифицировать и индексировать ваш контент. одна форма структурированных данных, которая работает с HTML5.Schema.org — это проект, который предоставляет определенный набор согласованных определений для тегов микроданных.

Заменяет ли схема Open Graph?

Open Graph — это тип разметки, используемый Facebook для анализа такой информации, как изображение и описание для отображения. Схема предоставляет более подробный список параметров, чем Open Graph. Их можно использовать вместе, но Open Graph нельзя использовать вместо Schema.

Оптимальные методы поисковой оптимизации

Типы элементов, описываемых схемой

Структурированные данные могут использоваться для разметки всех видов элементов, от продуктов до событий и рецептов.Чаще всего он используется для предоставления дополнительной информации о следующем:

  • Творчество
  • Событие
  • Организация
  • Человек
  • Место
  • Продукт

Полный список элементов, которые можно разметить с помощью схемы, доступен здесь .

Каждый тип информации имеет свойства, которые можно использовать для более подробного описания элементов. Например, «книга», которая относится к категории «творческая работа», может иметь свойства «имя» (название), «автор», «иллюстратор», «isbn» и другие, в зависимости от того, насколько полно вы хотите. описать это.Точно так же «событие» может быть классифицировано как что угодно, от «делового события» до «театрального события».

Поисковые системы, использующие схему

Схема распознается (и фактически словарь поддерживается) Google, Bing, Yahoo !, и Яндекс. Неясно, используют ли другие поисковые системы эту разметку, чтобы изменить способ отображения результатов поиска.

Влияние структурированных данных на ранжирование

Влияние структурированных данных на ранжирование было предметом многочисленных дискуссий и экспериментов.Пока нет убедительных доказательств того, что эта разметка улучшает рейтинг. Но есть некоторые признаки того, что результаты поиска с более обширными расширенными сниппетами (например, созданные с использованием схемы) будут иметь более высокий рейтинг кликов. Для достижения наилучших результатов поэкспериментируйте с разметкой схемы, чтобы увидеть, как ваша аудитория реагирует на получаемые расширенные описания веб-страниц.

Использование схемы с другими структурированными данными

Схема может использоваться с RDFa и JSON-LD, но не поддерживается микроформатами.

Последнее обновление: 12 марта 2019 г.

Продолжайте учиться

Узнайте, как работают структурированные данные

Поиск Google прилагает все усилия, чтобы понять содержание страницы.Вы можете помочь нам, предоставив явные подсказки о значении страницы для Google, включая структурированные данные на странице. Структурированные данные — это стандартизированный формат для предоставления информации о странице и классификации содержание страницы; например, на странице рецепта, какие ингредиенты, способ приготовления время и температура, калории и т. д.

Google использует структурированные данные, которые находит в Интернете, для понимания содержания страницы, а также для сбора информации о сети и мире в целом.Например, Вот фрагмент структурированных данных JSON-LD, который может появиться на странице рецепта, с описанием названия рецепта, автора рецепта и других деталей:

 
  
     Кофейный торт для вечеринки   
  
     
 Рецепт праздничного кофейного торта 
 
    

       Мэри Стоун, 10 марта 2018 г. 
    

    

      Этот кофейный торт потрясающий и идеально подходит для вечеринок.
    

    

      Время приготовления: 20 минут.

Google Search также использует структурированные данные для включения специальных функций результатов поиска и улучшения.Например, страница рецепта с действительными структурированными данными имеет право на появятся в результатах графического поиска, как показано здесь:

Поисковый вид

Структурированные данные 


  
     Яблочный пирог от бабушки

Поскольку структурированные данные маркируют каждый отдельный элемент рецепта, пользователи могут выполнять поиск для вашего рецепта по ингредиентам, количеству калорий, времени приготовления и т. д.

Структурированные данные кодируются с использованием внутристраничной разметки на странице, к которой относится эта информация. Структурированные данные на странице должны описывать содержимое этой страницы. Вы не должны создавать пустые или пустые страницы только для хранения структурированных данных; также не следует добавлять структурированные данные о информация, которая не видна пользователю, даже если информация точна. Для более технических и рекомендации по качеству, см. Структурированные данные общие рекомендации.

Тест Rich Results — это простой и полезный инструмент для проверки структурированных данных и, в некоторых случаях, предварительного просмотра функции в поиске Google.Попробуйте: Безалкогольный напиток Пина Колада

Формат структурированных данных

В этой документации описывается, какие свойства требуются, рекомендуются или необязательны для структурированные данные, имеющие особое значение для поиска Google.Большинство структурированных данных поиска использует словарный запас schema.org, но вы должны полагаться в документации на developers.google.com в качестве окончательного для поведения в поиске Google, а не в документации schema.org. Атрибуты или Объекты, не описанные здесь, не требуются для поиска Google, хотя они могут быть полезны для других служб, инструментов и платформ.

С 29 января 2021 г. разметка data-vocabulary.org больше не будет имеют право на использование функций расширенных результатов Google.Чтобы иметь право на участие после 29 января 2021 г., вы необходимо заменить разметку data-vocabulary.org разметкой schema.org. Узнать больше о прекращение поддержки словаря данных.

Обязательно протестируйте свои структурированные данные с помощью теста Rich Results во время разработки, а Отчеты о статусе подробных результатов после развертывания, чтобы следить за работоспособностью ваших страниц, которые могут сломаться после развертывания из-за проблем с шаблонами или обслуживанием.

Вы должны включить все необходимые свойства, чтобы объект имел право на появление в Поиск Google с расширенным отображением.В общем, определение дополнительных рекомендуемых функций может сделать более вероятно, что ваша информация может появиться в результатах поиска с улучшенным отображением. Однако для важнее поставить меньше, но полных и точных рекомендуемые свойства, а не пытаться предоставить все возможные рекомендуемые свойства менее полные, плохо сформированные или неточные данные.

В дополнение к свойствам и объектам, описанным здесь, Google может использовать то же, что и недвижимость и прочее схема.орг структурированные данные. Некоторые из этих элементов могут использоваться для включения будущих функций поиска, если они считаются полезными.

Google Search поддерживает структурированные данные в следующих форматах, если не указано иное:

Формат Описание и размещение
JSON-LD * (рекомендуется) Нотация JavaScript, встроенная в тег