Введение в schema.org — Вебмастер. Справка

Содержание страниц вашего сайта понятно читающим их людям, однако поисковым системам сложно определить, о чем идет речь. Добавляя специальные теги к HTML-коду своих страниц, вы как бы говорите: «Эй, поисковая система, вот здесь описывается такой-то фильм (место, человек, видеоролик)». Тем самым вы помогаете поисковым системам и другим приложениям лучше понимать ваш контент и отображать его подходящим, полезным образом. Микроданные — набор тегов, появившийся в HTML5,— позволяют делать именно так.

Начнем с конкретного примера. Представим, что у нас есть страница о фильме «Аватар» — со ссылкой на трейлер, информацией о режиссере и т. п. HTML-код может выглядеть примерно так:

<div>
    <h2>Аватар</h2>
    <span>Режиссер: Джеймс Кэмерон (род. 16 августа 1954 г.)</span>
    <span>Фантастика</span> 
    <a href=".  ./movies/avatar-theatrical-trailer.html">Трейлер</a>
</div>

В первую очередь необходимо указать, какая часть страницы посвящена непосредственно фильму «Аватар». Для этого добавим атрибут itemscope к HTML-тегу, в который заключена эта информация:

<div itemscope>
    <h2>Аватар</h2>
    <span>Режиссер: Джеймс Кэмерон (род. 16 августа 1954 г.)</span>
    <span>Фантастика</span>
    <a href="../movies/avatar-theatrical-trailer.html">Трейлер</a>
</div>

Добавляя itemscope, мы тем самым обозначаем, что HTML-код, содержащийся в блоке <div>...</div>

Пока мы только объявили, что речь идет о какой-то сущности, но не сообщили, что это за сущность. Чтобы указать тип сущности, добавим атрибут itemtype сразу после itemscope.

<div itemscope itemtype="http://schema.org/Movie">
    <h2>Аватар</h2>
    <span>Режиссер: Джеймс Кэмерон (род. 16 августа 1954 г.)</span>
    <span>Фантастика</span>
    <a href="../movies/avatar-theatrical-trailer.html">Трейлер</a>
</div>

Тем самым мы уточняем, что сущность, описание которой заключено в теге <div>, представляет собой фильм (тип Movie в иерархии типов schema.org). Названия типов имеют вид URL, в нашем случае

Какую дополнительную информацию о фильме «Аватар» можно предоставить поисковым системам? О фильме можно сообщить множество интересных сведений: актерский состав, режиссер, рейтинг. Чтобы отметить свойства сущности, используется атрибут itemprop. Например, чтобы указать режиссера фильма, добавим атрибут itemprop="director" к HTML-тегу, содержащему имя режиссера. (Полный список свойств, которые можно задать для фильма, приведен на странице http://schema.org/Movie.)

<div itemscope itemtype="http://schema.org/Movie">
    <h2 itemprop="name">Аватар</h2>
    <span>Режиссер:
        <span
  itemprop="director">Джеймс Кэмерон</span>
        (род. 16 августа 1954 г.)</span>
    <span itemprop="genre">Фантастика</span>
    <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Трейлер</a>
</div>

Обратите внимание, что мы добавили дополнительный тег <span>...</span>, чтобы привязать атрибут itemprop к соответствующему тексту на странице. Тег <span> не влияет на отображение страницы в браузере, поэтому его удобно использовать вместе с itemprop.

Теперь поисковые системы смогут понять не только то, что http://www.avatarmovie.com — это ссылка, но и то, что это ссылка на трейлер фантастического фильма «Аватар» режиссера Джеймса Кэмерона.

Иногда значение свойства может само являться сущностью, с собственным набором свойств. Например, режиссер фильма может быть описан как сущность с типом Person, у которой есть свойства name (имя) и birthDate (дата рождения). Чтобы указать, что значение свойства представляет собой сущность, необходимо добавить атрибут itemscope сразу после соответствующего itemprop.

<div itemscope itemtype="http://schema.org/Movie">
    <h2 itemprop="name">Аватар</h2>
    <div itemprop="director" itemscope itemtype="http://schema.org/Person">Режиссер:
        <span itemprop="name">Джеймс Кэмерон</span>
        (род. <span itemprop="birthDate">16 августа 1954 г.</span>)
    </div>
    <span itemprop="genre">Фантастика</span>
    <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Трейлер</a>
</div>
 

ruschema.org — проект перевода schema.org

Перевод осуществляется в гордом одиночестве и на голом энтузиазме, так что имейте терпение, а если есть возможность — можете помочь 🙂

Все свои замечания или замеченные неточности в переводе пишите сюда

Для тех кто не понял о чем вообще все это — вот определение Яндекса:

Schema.org – это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года. 
Цель семантической разметки – сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного её представления в результатах поиска. 

Микроданные (HTML microdata) — это международный стандарт семантической разметки HTML-страниц, с помощью атрибутов, описывающих смысл информации, содержащейся в тех или иных HTML-элементах. Такие атрибуты делают контент страниц машиночитаемым, то есть позволяют в автоматическом режиме находить и извлекать нужные данные. 

Это сайт, который содержит коллекцию схем (html-тегов), которые вебмастера могут использовать для разметки своих страниц способами, признаными крупнейшими поисковыми системами, такими как Bing, Google, Yahoo! и Яндекс, которые полагаются на эту разметку для улучшения отображения результатов поиска, делая процесс поиска правильных веб-страниц проще для людей.

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

Этот общий словарь облегчит вебмастерам выбор правильной схемы разметки  и поможет получить максимум выгоды из приложенных усилий. Так, воодушевленные sitemaps.org, Bing, Google and Yahoo! собрались вместе чтобы создать для вебмастеров эту коллекцию схем.

Ну что ж, начнем!

Либо сразу можете перейти к поиску необходимого типа

Микроразметка 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 protected]">[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:[email protected]">[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:[email protected]" 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">[email protected]</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>

1С-Битрикс — Микроразметка Schema.org

Микроразметка сайта — schema org и open graph

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

schema.org

В 2011 году появилась микроразметка schema.org. Она представляет собой словарь тегов и атрибутов, которые встраиваются в стандартный HTML-код страницы и указывают поисковым роботам на точное содержание информации.  Также с ее помощью формируются качественные сниппеты – информация, которая отображается в результатах выдачи.

Например, рассмотрим обычный HTML-заголовок

Титаник Титаник Титаник . Он может относится как к названию корабля, так и к названию успешного фильма, и появится в результатах выдачи по обоим запросам, что не совсем точно соответствует запросу пользователя.  А для того, чтобы поисковики понимали семантическое значение информации, и была придумана микроразметка schema.org.

Этот стандарт используют самые главные поисковики — Google, Яндекс, Microsoft и Yahoo!

Основные атрибуты schema.org

Рассмотрим основные атрибуты на конкретном примере.  Сделаем микроразметку для страницы, содержащей фильм Титаник.

Атрибут  itemscope: выделяем сущность

Этот атрибут указывает поисковым системам обратить внимание на выделенную им часть страницы, так как речь идет о какой-то конкретной сущности. Добавим его в код html, содержащий информацию о фильме:

Титаник

Титаник

Атрибут itemtype – уточняем сущность

Теперь нужно уточнить, о какой именно сущности идет говорится на странице. Сделать это можно при помощи атрибута itemtype. Укажем, что тип данной сущности —  фильм (тип Movie). Обратите внимание, что названия типов имеют вид URL:

Титаник

Атрибут itemprop – дополняем сущность

Можно указать дополнительную информацию о рассматриваемой сущности. Укажем режиссера, жанр фильма и поясним, что на странице содержится трейлер:  

Режиссер: Джеймс Кэмерон ДрамаТитаник

С полным списком атрибутов можно ознакомится на официальной странице микроразметки. 

При помощи schema.org  можно размечать статьи, товары в интернет-магазине, видео- и аудиопубликации, рецепты и многое другое.

Open Graph

Open Graph – это стандарт для правильного отображения веб-страниц в социальных сетях.

Зачем нужен Open Graph?

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

Чтобы быть уверенным в корректном отображении своей веб-страницы в социальных сетях, следует использовать стандарт Open Graph. Его создали разработчики социальной сети Facebook. Также этот стандарт поддерживают Вконтакте, Google+, Twitter, LinkedIn и Pinterest.

Основные мета-теги Open Graph

Для формирования красивого и правильного превью используются следующие четыре мета-тега: og:description, og:image, og:type и og:url. Рассмотрим их подробно.

Мета-тег og:description отвечает за описание материала, причем его размер может достигать 295 знаков.

Пример:

meta property=»og:description» content=»Разработка и продвижение сайтов»

В мета-теге og:type содержится тип добавляемого материала. Например, для указания типа статьи, нужно написать article. Если это аудиозапись песни – пишется  music.song.  Если это целый музыкальный альбом – указываем music.album.

 Пример

В теге og:url находится ссылка на исходную страницу.

Пример:

Разметка Open Graph логична и интуитивно понятна, полный словарь с примерами можно посмотреть на ее официальном сайте.

Валидаторы микроразметки

Поисковые гиганты Google  и Яндекс предлагают Вам проверить качество своей разметки на своих сайтах. Для Google  — это проверка структурированных данных , а для российского поисковика – валидатор микроразметки.

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

Schema.org делает и другие элементы кода привлекательнее для поисковиков

Объясняем, чем заменить <img src=»/pictures/logo.svg»>, и даем инструкцию по работе с микроразметкой Schema.org.

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

Язык, на котором говорят только роботы

Микроразметку часто называют единым языком, который одинаково понимают и трактуют веб-пауки всех поисковых систем. Этот язык роботы освоили еще в 2011 году. И с тех пор «общаются» только на нем. Для несведущего человека микроразметка — та еще тарабарщина. Сами посудите:

Сплошные HTML-коды. Однако именно благодаря им поисковые роботы безошибочно определяют, где на странице указаны контакты вашей компании, а где информация об оплате. Микроразметка используется не только для текстовой части сайта. Чтобы показать роботам, что картинка в шапке сайта — это ваш фирменный логотип, тоже нужно использовать фрагмент микроразметки.

Есть ли польза от микроразметки?

Часть SEO-специалистов считает, что тратить время на прописывание атрибутов на всех страницах сайта бессмысленно. Достаточно разметить «Контакты» и, например, «Новости». Якобы на результатах продвижения это практически не сказывается. Однако в аналитическом отчете «Яндекс и Google. Факторы ранжирования 2019» высказывается прямо противоположная точка зрения. Авторы отчета утверждают, что микроразметка schema.org — «новомодное веяние», однако использовать ее все-таки стоит, потому как она обеспечивает удобство пользователей. Ну а если пользователям удобно, то и поведенческие показатели улучшаются, на сайт привлекается более качественный трафик, а продвижение дает ощутимые результаты.

Чтобы наглядно показать, как Яндекс и Google оценивают сайты, которые не поленились разметить, мы вытащили из аналитического отчета вот такую замечательную диаграмму:

На ней отлично видно, что большая часть сайтов, попадающих в топ-3 и топ-30 поисковых систем, использует микроразметку. Думаем, это хороший повод, чтобы взять с них пример. Вы ведь хотите попасть на первую страницу Яндекса и Google?

К вопросу о том, как микроразметка влияет на веб-пауков и пользователей. Благодаря schema.org нужная информация автоматически подтягивается в сниппет и легко распознается роботами. Описание сайта, выводящееся в поиске, получается более подробным, что помогает снизить процент отказов. Ведь пользователь еще до посещения сайта понимает, найдет он на нем нужную информацию или нет. Релевантность страниц сайта увеличивается как для поисковых систем, так и для пользователей.

А кто это сказал вообще? Авторы аналитического отчета «Яндекс и Google. Факторы ранжирования 2019» — Михаил Волович и специалисты компании «Ашманов и партнеры». Если вы хотя бы краем уха слышали про SEO, то фамилию российского гуру продвижения вы точно узнали. Лаборатория «Ашманов и партнеры» с 2014 года анализирует работу поисковиков, вычисляет их алгоритмы и важные факторы ранжирования. Поэтому верить этим ребятам можно как себе.

Какими бывают микроразметки?

Используется для описания специальных данных, например, дат событий и отзывов. Содержат такие элементы, как itemscope (показывает, что относится к описанию объекта), itemtype (дает ссылку на тип объекта), itemprop (обозначает свойства объекта). В словарь микроданных входят все простые атрибуты, в том числе <span> и<div>.

Для этого типа разметки используют атрибут class, относящийся к тегам <span> и <div>. Он помогает давать описания типам данных, размещенных на страницах сайта. Например, на странице с анонсом мероприятия микроформаты используют для обозначения времени, даты и места, в котором состоится событие. Яндекс распознает следующие микроформаты: hCard, hRecipe и hReview. А Google — hProduct, GoodRelations и hCalendar.

Эта разметка основана на технологии Resource Description Framework. У нее расширенные возможности и она самодостаточна.

Тренды разметки задают поисковые системы. Google и Яндекс предпочитают микроданные schema.org, потому как они соединяют все удобство использование и массу возможностей. Именно о них мы и поговорим подробнее.

Эта микроразметка считается стандартной семантической разметкой, распознаваемой большинством поисковых систем. В ее словаре 815 типов, 1307 свойств и 289 значений, используя которые можно выделить фотографии, продукты/услуги, организации, комментарии и многое другое. Чтобы описать с помощью Schema.org какой-то элемент сайта, нужно использовать одну из многочисленных сущностей словаря. Например, обобщенное Thing («Нечто»). У этого типа сущности есть несколько основных свойств:

• Name («Название»),
• Description («Описание»),
• Url («Ссылка»),
• Image («Изображение»).

Остальные типы сущностей — частные случаи обобщенной категории и ее подтипов. Самыми популярными из них считаются Event («Событие»), Organization («Организация»), CreativeWork («Творческое произведение»). Первый тип сущности помогает обозначить время и место проведения мероприятия, его тип и участников. Второй — указать, где на сайте размещен логотип, контакты компании, ее местоположение, история и прочая полезная информация. Третий — описать сериал, книгу или песню, сообщить жанр произведения, его автора, прикрепить отзывы, вписать рейтинг.

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

Логотип

Разметка этого элемента относится к основным и считается самой простой.

Выполняется она следующим образом:

1. Находите на вашем сайте логотип. Если потерялись в обилии HTML-тегов, обращайте внимание только на те строки, в которых «зашиты» картинки. На большинстве сайтов (даже на тех, где частично сделана микроразметка) логотип прячется за тегом <img src=»/pictures/logo.svg»>
2. Чтобы показать, что логотип — часть микроразметки, нужно присвоить ему атрибут itemscope. Он сообщит роботам, что на сайте есть некая сущность.
3. Для уточнения типа этой сущности нам необходимо использовать атрибут itemtype. В кавычках указываем, что используем микроразметку schema.org, и прописываем название сущности (Organization).
4. Размечаем ссылку на главную страницу нашего сайта, применяя атрибут itemprop.
5. С помощью этого атрибута обозначаем и принадлежность изображения логотипа.

Контакты

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

1. Открыть страницу “Контакты” и найти контейнер <div>, в котором прописаны адрес, телефон и название организации.
2. Добавить к контейнеру атрибут itemscope, а затем itemtype.
3. В обязательном порядке прописываем, какую именно разметку используем. Для этого в значении атрибута указываем ссылку на schema.org. И не забываем про сущность. Для разметки контактов и логотипа используется одна и та же сущность — Organization.
4. Далее работаем с атрибутами itemprop. Каждому из них приписываем то значение, которое нам необходимо. Например, нам нужно указать название компании. Значит после названия атрибута прописываем name, а затем и его значение (т.е. название компании).

На нашем сайте это выглядит вот так:

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

Статья

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

Давайте разберемся, как правильно размечать этот тип текстового контента. Для начала посмотрим, что мы видим после открытия статьи в виде HTML-кода.

Перед нами тело статьи с абзацами, подзаголовками и основным текстом. Для его разметки мы:

1. Помещаем весь текст статьи в контейнер <section>. Тег парный, поэтому в конце статьи не забудьте проставить </section>.
2. Внутри контейнера прописываем название заголовка, используя тег <h2 itemprop=”headline”>.
3. Далее указываем дату и время публикации.
4. Все изображения, используемые в статье, размечаем при помощи тегов <div> и <image>.
5. Для разметки подзаголовков используем <h3 itemprop=”alternativeHeadline”>.

В результате получаем:

На нашем сайте мы делаем разметку статей следующим образом:

Товары/услуги

Прописывайте микроразметку пошагово и вы поймете, что делать ее ничуть не сложнее, чем вставлять <img src=»/pictures/logo.svg»> везде, где нужен логотип.

1. Первым делом обозначим, что мы работаем с разметкой schema.org и ее сущностью Product.
2. Затем укажем название товара, его цену, валюту, в которой он продается и дадим его краткое описание.

Если есть необходимость, можно указать и производителя, используя тег itemprop с атрибутами brand и model. Первый пригодится для отображения компании, выпустившей товар, а второй для указания модели. Нам, как вы понимаете, такой вариант разметки не подходит.

К слову, тем, кто не хочет отображать цены на сайте, нужно не забыть убрать атрибут price.

Хлебные крошки

Если микроразметку для logo вы уже используете, то про эту наверняка даже не слышали. Не переживайте, не только вы. Wildberries и Group Price тоже.

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

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

Обратите внимание, мы использовали атрибут itemscope, чтобы показать, что прописываем хлебные крошки. BreadcrumbList для указания на разделы, и itemListElement — на пункты списка.

Меню

Поисковые роботы положительно реагируют и на микроразметку меню. С помощью schema.org это можно сделать следующим образом:

Если в вашем меню подпункты не нужны, просто уберите их.

Отзывы

Для разметки этого элемента сайта необходимо использовать тег itemprop и атрибут review. Чтобы обозначить заголовок, прописываем name, чтобы указать автора соответственно author. Текст комментария размечаем с помощью reviewBody, для указания даты публикации используем datePublished. А для разметки оценки отзыва (если она есть) — reviewRating.

На нашем сайте мы используем микроразметку schema.org для отзывов следующим образом:

Рекомендации по работе с микроразметкой schema.org

1. Не ленитесь размечать страницы своего сайта. Чем больше вы поработаете над «привлекательностью кодов» для поисковых роботов, тем больше станут показатели кликабельности и результаты продвижения. Единственное, что лучше не трогать — контент, невидимый пользователям. Иначе все тайное станет явным.

2. Если вы только начали знакомиться с микроразметкой schema.org, почаще заглядывайте в ее словарь. Там вы найдете сущности, о которых не знали, и выясните, как располагать одну сущность внутри другой. Такая суперспособность пригождается, когда вам надо описать одну из сущностей (например, Event), для которой потребуется указать несколько значений (например, время дату и место проведения).

3. Боитесь запутаться с вложенными сущностями? Тогда используйте URL, текст или дочерний тип. Разобраться с последним вполне реально, если вы сумели убрать с сайта <img src=»/pictures/logo.svg»> и обозначить логотип при помощи микроразметки.

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

Как проверять валидность разметки?

Даже если на языке разметки вы не только пишите, но и мыслите, проанализировать, насколько правильно вы использовали ее синтаксис, все равно необходимо. Сделать это помогут несколько валидаторов. Чаще всего применяют валидатор Google, названный Structured Data Testing Tool.

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

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

Использовать можно и валидатор от Яндекса. Он, как и сервис Google, позволяет вставлять как URL-страницы, так и отдельный фрагмент кода. Отечественный инструмент показывает, как страница будет выглядеть в глазах поискового робота.

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

Максим Дель

Руководитель отдела SEO-продвижения Студии ЯЛ

Как добавить микроразметку Schema.org на страницы сайта

Любая страница сайта состоит из HTML тегов. Как правило, HTML теги сообщают браузеру как отобразить информацию, которая находится внутри тега. Таким же образом микроразметка Schema.org сообщает поисковым системам где находится та или иная важная информация на странице.

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

Содержание

Если Вы еще не встречались раньше с микроразметкой и слышите об этом впервые, тогда перед прочтением данной статьи изучите следующую:

Чтобы быть в курсе последних лайфхаков по SEO и знать, как продвигать сайты в 2020 году — подпишитесь на личный Telegram канал.

Много о микроразметке Schema.org писать в данной статье не буду, потому что мы подробно все рассмотрели в прошлой статье.

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

С помощью правильной микроразметки Schema.org Вы сможете передавать самые важные данные. То есть поисковому роботу информация подается сразу «на блюдечке». Для этого и была создана микроразметка поисковыми системами.

Основы микроразметки Schema.org

• Что такое микроразметка сайта?

  Микроразметка сайта — это способ показать поисковым системам важные элементы на вашем сайте. Также это способ создать расширенные сниппеты на поиске и получить больше кликов, увеличить CTR на поиске и, соответственно, улучшить позиции на поисковой выдаче.

• Что такое Schema.org?

  Schema.org — это словарь, с помощью которого можно размечать страницы, чтобы они были понятны поисковым системам Google, Яндекс, Mail.ru, DuckDuckGo, Bing, Rambler.

• Есть ли Schema.org на русском?

  Да, есть. Находится перевод проекта по адресу ruschema.org.

• Как сделать разметку страницы или сайта?

• Как проверить микроразметку на сайте?

• Как проверить есть ли на сайте микроразметка?

• Рекомендации Google по применению микроразметки

  Большое количество рекомендаций по работе со структурированными данными от Google вы можете найти здесь с примерами.

• Какую микроразметку использовать для своего сайта?

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

• Генератор микроразметки Google

• Как влияет разметка Schema на индексацию Google?

  Никак не влияет на индексацию.

Не растут позиции сайта?

Закажите разбор сайта по SEO с консультацией

Сделайте аудит сайта самостоятельно с помощью сервиса

Как проверить «правильность» микроразметки Schema.org?

Для проверки валидации («правильности») микроразметки предназначены специальные сервисы, которые были разработаны поисковыми системами. Мы будем в данной статье проверять микроразметку для поисковой системы Yandex и Google.

Вот ссылки на два сервиса проверки валидации микроразметки Schema.org:

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

Как пользоваться валидаторами микроразметки?

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

Итак, начнем с валидатора от Google. Страница выглядит следующим образом:

Есть два варианта проверки валидации страницы:

1. С помощью прямой вставки HTML кода
2. С помощью вставки URL адреса страницы, которую необходимо проверить

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

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

После проверки в валидаторе Google появится слева код Вашей HTML страницы, а справа — какая микроразметка там присутствует и есть ли там ошибки:

С валидатором Google я думаю все понятно. Перейдем к валидатору от Yandex.

Когда Вы зайдете на сайт с валидатором микроразметки от Yandex, Вы увидите несколько иную картину, но смысл там остается тот же:

Здесь интерфейс немного проще и опять же есть два варианта проверки Вашего HTML кода: с помощью вставки исходного кода страницы, либо с помощью вставки лишь URL необходимой страницы.

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

Валидатор Yandex и Google будут давать Вам рекомендации сразу на русском языке. Но и этого бывает мало, потому что у всех ошибки разные и зависят от конкретного контекста страницы и HTML структуры.

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

Очень много ошибок? Не волнуйтесь, все можно исправить. Главное разобраться в этом постепенно исправить все ошибки.

Шаг 1. Что необходимо разметить на странице?

Словарь микроразметки Schema.org очень большой. Здесь можно найти формат разметки практически любого типа записей. В прошлой статье я приводил основной список форматов, которые поддерживаются данная микроразметка: адреса и организации, видео, программы, рефераты, изображения, статьи, фильмы и так далее.

Поэтому первым шагом необходимо определиться с основным шаблоном и правильно его подготовить. А у же потом переносит на реальный сайт.

В данной статье я покажу как сделать пример для сайта, под управлением CMS WordPress. А на данной CMS чаще всего создают блоги. Поэтому будем писать разметку для такого типа страниц, как «Статья».

Далее нам необходимо определить, какую сущность из словаря мы будем использовать. На официальном ресурсе Schema.org есть следующая структура: Article. Но внутри нее есть подструктуры, которые мы можем использовать. Спускаясь все глубже по подструктурам я нашел следующий тип: BlogPosting. Он является частным вариантом сущности Article. И он отлично подходит для разметки записей на блогах.

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

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

Сейчас Вы понимаете какие свойства нам понадобятся для разметки страницы. Я сделал данное изображение, чтобы наглядно показать что именно необходимо указать с помощью микроразметки Schema.org. А из картинки выше понятно, что необходимо пометить самые важные зоны документа. Конечно, на изображении я показал не всю микроразметку, которую мы будем использовать, но Вам сейчас необходимо понять для чего вообще мы будем это делать и что именно попадет под разметку страницы.

Шаг 2. Формируем шаблон микроразметки

Что именно будем размечать стало понятно. Осталось собрать правильную структуру.

Основная суть микроразметки (технически): добавить к необходимым тегам дополнительные атрибуты. Иногда добавить дополнительные теги для структуры.

ВАЖНО: Google постоянно вносит изменения и оставил «звездочки» только для страниц с продуктами. Есть сайты, которые это обходят, но все же желательно размечать так, как этого требует Schema.org. Поэтому сейчас код был изменен и «звездочки» на поиске можно сделать только в сущности Product. Это больше относится к таким услугам и товарам, но не к обычным статьям.

Без прелюдий перейдем сразу к делу. После многочисленных попыток сделать микроразметку Schema.org валидной для Google и Яндекса получилась следующая структура:

HTML КОД

    
    
    
        
            
            
        
    
    
        Юрий Немец
    
    
            
        
        		
        
        
            
            		
        
Основной текст статьи.
    

Так выглядит обычная статья без сторонних дополнений. Код получился действительно немаленький. Сейчас поясню буквально по строкам и расскажу где какие присутствуют нюансы:

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

Если Вы разобрались в структуре микроразметки Schema.org для статьи, то проделали уже 80% работы. Осталось малость, но эта «малость» требует технических знаний. Потому что сейчас необходимо перенести данную структуру на реальный работающий сайт.

Есть вариант сделать проще с помощью мастера разметки структурированных данных от Google.

Когда попадете туда — увидите следующее:

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

Чтобы разметить, необходимо либо ввести URL страницы, либо вставить HTML этой же страницы.

Мы введем адрес одной из статей сайта и на его примере покажу как разметить:

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

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

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

Есть 2 варианта внедрения этой разметки на свой сайт:

В CMS, таких как WordPress, OpenCart и других все делается с помощью плагинов, не вручную. Ниже посмотрим с помощью каких плагинов.

Шаг 3. Внедряем микроразметку Schema.org на реальный сайт

Многие используют различные CMS. Поэтому нет уникального кода, который бы работал сразу на любом сайте. Но у Вас есть код микроразметки, который получился у меня в ходе многочисленных поисков. Вам останется постепенно внедрить данную разметку на своем сайте. И сейчас я дам советы, которые помогут Вам в этом:

1. Начинайте разметку с основных структур. То есть для начала разметьте основную сущность, внутри которой находятся все остальные элементы. Поэтому сначала необходимо найти блок, в котором содержится все: изображение, автор, дата и так далее;
2. Далее займитесь разметкой блока «Organization». Потому что он не меняется динамически. Его необходимо один раз сделать и поместить внутрь сущности «BlogPosting». Данный блок затем скройте с помощью CSS стилей.
3. Затем необходимо разметить дату публикации и дату последнего изменения. Сделать это несложно. В каждой CMS есть своя функция, которая отвечает за это. Так как это мета-теги, то скрывать ничего не нужно. Например в WordPress дата публикации и дата изменения выводятся следующим образом:
4. Далее отметьте подструктуру «articleBody». Именно внутри нее Вам необходимо будет указать заголовок и главное изображение статьи.
5. И последним шагом исправьте разметку главного изображения в статье. Так как это, чаще всего, сделать технически сложнее всего, то оставьте данный элемент на концовку.

После внедрения обязательно проверьте с помощью валидаторов на отсутствие ошибок.

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

Кликаете в правом верхнем углу по кнопке «Предварительный просмотр» и попадаете на странице предпросмотра:

Позиции сайта «зависли» и не идут в ТОП?

Закажите разбор сайта по SEO с консультацией

Сделайте аудит сайта самостоятельно с помощью сервиса

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

Как увеличить CTR на поиске за 15 минут?

Очень легко, нужно лишь добавить микроразметку FAQ в свою статью и отправить на переиндексацию в Google.

Вот пример статьи, где я добавил микроразметку:

Как добавить такую микроразметку?

Очень легко, достаточно в исходный код страницы вставить следующий JSON внутри тегов script:

Еще несколько советов по использованию:

Используйте 4 пункта, тогда будут показываться все 4 вопроса. Если напишете больше 4 вопросов, то последний пункт будет скрыт под элемент «Развернуть».

Обязательно проверьте микроразметку на валидаторе Google, чтобы она была без ошибок (только потом отправьте ее на переиндексацию). Если по тем ошибкам непонятно, как исправить, тогда советую проверить на валидаторе JSON — здесь. Если и там не удалось найти ошибку, то можете написать в комментариях к статье, либо обратиться к техническому специалисту.

Если все сделали правильно, то достаточно буквально 15-30 минут и вы увидите в поиске в сниппете микроразметку.

Важно заметить, что микроразметка появляется не под всеми ключевыми словами, под которые продвигается статья.

Ошибки микроразметки Schema.org

Рассмотрим самые популярные ошибки при добавлении микроразметки Schema.

• Необходимо указать значение для поля itemReviewed

  Здесь нужно понимать для чего нужно свойство itemReviewed.

  Это свойство, которое отдельно без сущности существовать не может. Сущностью для свойства может быть AggregateRating и Review.

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

• Необходимо указать значение для поля item

  Это свойство используется в сущностях DataFeedItem и ListItem.

  Например, вы хотите разметить «хлебные крошки» (BreadCrubms). Внутри элементов списка необходимо использовать для ссылок данное свойство:

  
      
      SEO
      
    
  
      
      Внутренняя перелинковка
      
  

• Необходимо указать значение для поля url

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

• Необходимо указать значение для поля image

  Это может быть URL или сущность ImageObject.

  Если это ImageObject, то нужно вводить гораздо больше значений:

  
    
  Название изображения
    
    Автор Юрий Немец
    Фотография сделана
      Россия, Москва
    Дата загрузки:
    22 декабря, 2020
    Подробное описание изображения.
  
  			

  Самое важное поле — это URL.

• Для id указан недопустимый url

  Ошибка чаще всего возникает с сущностью BreadcrumbList когда не задан URL, а используется текстовое описание.

  Внимательно изучите сущность itemListElement, потому что она используется для BreadCrumbs.

• Необходимо указать значение для поля itemListElement

  Это ошибка при разметке «хлебных крошек» на сайте. Если хотите сделать последний элемент списка неактивным (без ссылки), то он должен быть не BreadcrumbList элементом. Пример ниже:

Частозадаваемые вопросы по микроразметке Schema.org

• Itemprop что это?

  Itemprop — это свойство сущности для разметки подробных сведений об этой сущности.

  На примере: есть сущность для разметки фильма. У фильма есть много свойств: название, режиссер, жанр. Чтобы указать в микроразметке каждое свойство — необходимо в соответствующем атрибуте itemprop задать ему значение.

  
    
    
    Режиссер:
      Адиль Эль Арби
      (род. 30 июня 1988 г.)
    
    Комедия
            
  
  			

  Обратите внимание, что нужно разметить и сам фильм и трейлер, либо информацию о трейлере совсем не вводить.

• Как узнать тип микроразметки в Гугл?

• Как разместить URL сайта в Schema.org?

  Все зависит от того, какую сущность микроразметки вы используете.

  Например, если используете сущность BlogPosting (на русском эта же сущность), то используйте следующий код:

• Каким образом можно проверить корректность настройки микроразметки?

  Корректность настройки микроразметки проверяется с помощью валидаторов.

• Плагины внедрения микроразметки для CMS

• Как выбрать тип Schema.org?

  Рекомендую зайти на следующую страницу — структурированные данные от Google. Слева выбрать тот материал, который вам нравится и затем разметить в соотвествии с рекомендациями.

• Как исправить ошибку микроданных в Google?

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

  Чаще ошибка связана не с микроразметкой Schema, а именно с незнанием технической части сайта или CMS. Задать свой вопрос вы можете в комментариях ниже.

• Каким разметить номер телефона с помощью Schema.org?

  Есть свойство Telephone. Важно понимать, что это лишь свойство, оно должно быть внутри сущности, например, внутри сущности Organization.

• Как создать микроразметку для Яндекса онлайн?

  Для Яндекс и для Google можно создать шаблон микроразметки с помощью генератора.

• Валидатор не видит разметку

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

• Плагин проверки микроразметки в браузере Chrome

• Как добавить микроразметку для сайтов на Wix? (Schema.org)

  На самом деле это актуально для любого конструктора.

  Для начала вам необходимо сформировать скрипт в формате JSON-LD через этот генератор.

  Затем скопировать этот скрипт, перейти в раздел редактирование сайта. Там выбрать «Настройки», далее «Коды аналитики». Выбираем справа вверху «Новый инструмент», далее «Новый код».

  Вставляем скопированный скрипт в формате JSON-LD.

  Осталось сохранить и проверить на валидаторе правильность разметки.

• Как добавить микроразметку для сайтов на Tilda? (Schema.org)

  Генерируем скрипт в формате JSON-LD, как в ответе на предыдущий вопрос про Wix.

  На Тильде заходим в «Настройки страницы», затем «Дополнительно» и далее «HTML код для зоны». Кликаем «Edit code» (редактировать код).

  Вставляем скопированный код и сохраняем.

Вывод

Многие, возможно, начнут возмущаться, что нет готового решения, которого все так ждали. Все хотят волшебную таблетку: «скопировал->вставил». Такого не будет, если Вы хотите реальных и ощутимых результатов. У Вас индивидуальный шаблон, у которого своя собственная структура. Поэтому наберитесь терпения и разберетесь в том, как устроена микроразметка Schema.org.

Что касается технической части, то скажу вот что: либо отдайте это дело профессионалу, либо самостоятельно разберитесь в том, что я описал в данной статье.

Успехов!

С Уважением, Юрий Немец

Microdata — HTML: HyperText Markup Language

Microdata является частью стандарта WHATWG HTML и используется для вложения метаданных в существующий контент на веб-страницах. Поисковые системы и веб-сканеры могут извлекать и обрабатывать микроданные с веб-страницы и использовать их для обеспечения более удобного просмотра для пользователей. Поисковые системы получают большую выгоду от прямого доступа к этим структурированным данным, поскольку он позволяет поисковым системам понимать информацию на веб-страницах и предоставлять пользователям более релевантные результаты.В микроданных используется вспомогательный словарь для описания элемента и пар «имя-значение» для присвоения значений его свойствам. Микроданные — это попытка предоставить более простой способ аннотирования HTML-элементов с помощью машиночитаемых тегов, чем аналогичные подходы с использованием RDFa и классических микроформатов.

На высоком уровне микроданные состоят из группы пар имя-значение. Группы называются элементами, а каждая пара имя-значение является свойством. Предметы и свойства представлены обычными элементами.

• Для создания элемента используется атрибут itemscope .
• Чтобы добавить свойство к элементу, атрибут itemprop используется для одного из потомков элемента.

Google и другие основные поисковые системы поддерживают словарь Schema.org для структурированных данных. Этот словарь определяет стандартный набор имен типов и имен свойств, например, Schema.org Music Event указывает концертное выступление, а свойства startDate и location определяют ключевые детали концерта. В этом случае музыкальное событие Schema.org будет URL-адресом, используемым itemtype и startDate, а location — этой схемой itemprop.org Music Event определяет.

Словари микроданных обеспечивают семантику или значение элемента. Веб-разработчики могут создавать собственные словари или использовать словари, доступные в Интернете, например, широко используемый словарь schema.org. Коллекция часто используемых словарей разметки предоставлена ​​Schema.org.

Часто используемых словарей:

• Творческие работы: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries
• Встроенные нетекстовые объекты: AudioObject, ImageObject, VideoObject
• Событие
• Медицинские и медицинские типы: примечания к медицинским и медицинским видам в рамках MedicalEntity
• Организация
• Человек
• Place, LocalBusiness, Ресторан
• Продукт, предложение, Совокупное предложение
Обзор
• , AggregateRating
• Действие
• Вещь
• Нематериальные активы

Основные операторы поисковых систем, такие как Google, Microsoft и Yahoo! полагаться на схему.org словарь для улучшения результатов поиска. Для некоторых целей достаточно специальной лексики. Для других потребуется составить словарный запас. По возможности авторам рекомендуется повторно использовать существующие словари, так как это упрощает повторное использование контента.

В некоторых случаях поисковые системы, охватывающие определенные регионы, могут предоставлять локальные расширения микроданных. Например, Яндекс, основная поисковая система в России, поддерживает такие микроформаты, как hCard (контактная информация компании), hRecipe (рецепт еды), hReview (обзоры рынка) и hProduct (данные о товарах), а также предоставляет собственный формат для определения термины и энциклопедические статьи.Это расширение было сделано для решения проблем с транслитерацией между кириллицей и латинским алфавитом. Благодаря внедрению дополнительных параметров маркировки словаря Schema, индексация информации на русскоязычных веб-страницах стала значительно более успешной.

itemid — уникальный глобальный идентификатор элемента.

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

itemref — Свойства, которые не являются потомками элемента с атрибутом itemscope , могут быть связаны с элементом с помощью itemref . Itemref предоставляет список идентификаторов элементов (не itemid s) с дополнительными свойствами в другом месте документа.

itemscope — Itemscope (обычно) работает вместе с itemtype, чтобы указать, что HTML-код, содержащийся в блоке, относится к определенному элементу. itemscope создает элемент и определяет область связанного с ним типа элемента.itemtype — это действительный URL-адрес словаря (например, schema.org), который описывает элемент и контекст его свойств.

itemtype — указывает URL-адрес словаря, который будет использоваться для определения itemprop (свойств элемента) в структуре данных. Itemscope используется для установки области, в которой в структуре данных будет активен словарь, заданный типом элемента.

HTML

  

   Angry Birds  -

  ТРЕБУЕТСЯ  ANDROID  

  

  

    РЕЙТИНГ:
     4,6  (
     8864  оценок)
  

  

    Цена:  1,00 
    
  
  

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

Результат

Поддерживается в Firefox 16. Удалено в Firefox 49.

Микроданные HTML

Абстрактные

Эта спецификация [ html-extensions ] определяет новые атрибуты HTML. для встраивания простых машиночитаемых данных в HTML-документы.Он похож на RDFa, но в целом менее выразителен, и не поддерживает такой же уровень интернационализации. Его легко изучить и обработать, но авторы, которым нужна хорошая поддержка интернационализации, или желающие включить структурированный контент в свои данные должны рассмотреть возможность использования RDFa. (или другой формат, например JSON-LD).

Статус этого документа

В этом разделе описывается статус этого документа на момент его публикации. Другие документы могут заменять этот документ.Список текущих публикаций W3C и последнюю версию этого технического отчета можно найти в указателе технических отчетов W3C по адресу https://www.w3.org/TR/.

🚩
Это документ устарел, и номер НЕ ДОЛЖЕН использоваться для дальнейшей технической работы.
Вместо этого ознакомьтесь с HTML-стандартом жизни и поднимайте вопросы в репозиторий whatwg / html.

🚩 Устаревший документ. Не использовать.

 Чтобы съесть апельсин, пользователь должен:
1. Очистить апельсин.
2. Отделите каждый ломтик апельсина.3. Съешьте дольки апельсина. 

 Чтобы съесть апельсин:
1. Пользователь должен очистить апельсин.
2. Пользователь должен отделить каждый ломтик апельсина.
3. Пользователь должен съесть дольки апельсина. 

 

 
 Меня зовут
   Элизабет .



 
 Меня зовут
   Дэниел . 
 

 

 
 Мое  имя 
   Э  лиз  абет .


<раздел>
 

  <сторона>
   
 Меня зовут
      Дэниел  . 
  
 
 

 

 
 Меня зовут  Нил . 
 
 Моя группа называется  Four Parts Water . 
 
 Я  британец . 
 

 

 
 The Instigator 2000 
 

 

 
 The Instigator 2000 
 

 

  Белый холодильник Panasonic на 60 л 
 
  

    Оценка 3,5 / 5 
   (на основе  11  отзывов клиентов)
  
 

 

 Я родился  10 мая 2009 г. .
 

 

 
 Имя:  Аманда  
 
 Группа:   Джаз-бэнд 
  ( 12  игроков)  
 

 
 
 Имя:  Аманда  
 

 
 Группа:  Джаз-бэнд  
 
 Размер:  12  игроков 
 

 

 
 Ароматы моего любимого мороженого: 
 

  
 Лимонный сорбет 
  
 Абрикосовый сорбет 
 
 

 

  оранжевый 
 

 <рисунок>
 
 
 

   
<рисунок>
 
 
 

 

 
 Хедрал 
 
 Хедрал - домашний американский мужчина.
 короткошерстный, с пушистой черной шерстью, с белыми лапами и брюшком. 
 
 

 

 
 Заголовок
 
 Дисфункция реальности
 
 Автор
 
 Питер Ф. Гамильтон
 
 Дата публикации
 
  26 января 1996 г. 
 

 

 
Hedral 
 
 Хедрал - домашний американский мужчина.
 короткошерстный, с пушистым <размахом
 itemprop = "http://example.com/color"> черный  мех с  белые  лапы и живот. 
 
 

 

 
 Имя:
 
 Танковый локомотив (DB 80)
 
 Код товара:
 
 33041
 
 Масштаб:
 
 HO
 
 Цифровой:
 
 Дельта
 

 

 
 Имя:
 
 Комплект фонаря стрелочного перевода
 
 Код товара:
 
 74470
 
 Цель:
 
 Для модернизации 2-х гусениц  C 
 явки. 
 

 

 
 Имя:
 
 Пассажирский поезд экспресс (DB Am 203)
 
 Код товара:
 
 8710
 
 Масштаб:
 
 Z
 

 

 
 1 
 
 2 
 
 тест 
 

 

 
 тест 
 
 2 
 
 1 
 

 

 
 1 
 
 2 
 
 тест 
 

 

 
 1 


 
 тест 
 
 2 

 

 

 
  
 
 
   
 Мои фото 
 
  

   
   
  
  

   
   
  
  <нижний колонтитул>
   
 Все изображения лицензированы по  MIT
   лицензия . 
   
 

 


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

   
   <нижний колонтитул>
    
 Автор: 
      Грег 
     
    
  15 минут назад  
   
   
 Ха! 
  
  

   
   <нижний колонтитул>
    
 Автор: 
      Шарлотта 
     
    
  5 минут назад  
   
   
 Когда вы говорите "мы разобрались" ... 
  
 
 

 {
  "Предметы": [
    {
      "тип": ["https: // схема.org / BlogPosting "],
      "характеристики": {
        "заголовок": ["Отчет о проделанной работе"],
        "datePublished": ["2013-08-29"],
        "url": ["http://blog.example.com/progress-report?comments=0"],
        "комментарий": [
          {
            "тип": ["https://schema.org/Comment"],
            "характеристики": {
              "url": ["http://blog.example.com/progress-report#c1"],
              "создатель": [
                {
                  "тип": ["https://schema.org/Person"],
                  "характеристики": {
                    "имя": ["Грег"]
                  }
                }
              ],
              "dateCreated": ["2013-08-29"]
            }
          },
          {
            "тип": ["https: // схема.org / Comment "],
            "характеристики": {
              "url": ["http://blog.example.com/progress-report#c2"],
              "создатель": [
                {
                  "тип": ["https://schema.org/Person"],
                  "характеристики": {
                    "имя": ["Шарлотта"]
                  }
                }
              ],
              "dateCreated": ["2013-08-29"]
            }
          }
        ]
      }
    }
  ]
} 

 

  
 
 Имя:
 
 Танковый локомотив (DB 80)
 
 Код товара:
 
 33041
 
 Масштаб:
 
 HO
 
 Цифровой:
 
 Дельта
 

 <рисунок vocab = "https: // schema.org / "typeof =" CreativeWork ">
   
   
   
  
  <рисунок vocab = "https://schema.org/" typeof = "CreativeWork">
   
   
   
  
  <нижний колонтитул>
   

    

     
 Все изображения под лицензией  лицензия MIT . 
    
   
   

 

  

   
   
   
  
  

   
   
   
  
  <нижний колонтитул>
   
 Все изображения под лицензией  лицензия MIT .