Содержание

1. История появления форматов семантической разметки сайтов.
2. Понятия “словарь” и “синтаксис”
3. Open Graph
4. Schema.org
5. JSON-LD
6. Простой способ микроразметки

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

История появления форматов семантической разметки сайтов.

Схемы форматов микроразметки существует уже давно.Первые подвижки в этом направлении сделал консорциум W3C в 2004 году. Далее командой энтузиастов в 2007 году был разработан новый формат — Микроформат. Следующий шаг в развитии этой технологии произошел в 2011 году. Такие компании, как Google, Microsoft, Yahoo и чуть позже к ним присоединился Яндекс, сформировали единую схему форматов.

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

Рисунок №1 — Пример сниппета с микроразметкой

Как не сложно догадаться, у 4 “титанов” получилось таки реализовать задуманное. И миру был представлен словарь Schema.org, который объединил под своим флагом большое количество правил для разметки веб-страниц.

Понятия “словарь” и “синтаксис”

Структурированные данные имеют также другое, общепринятое определение — микроразметка. Состоит она из словаря и синтаксиса.

Словарь — это набор классов и атрибутов, позволяющих описать суть отдельной сущности.

Синтаксис — это набор правил, определяющий как именно нужно работать с словарем.

В некотором роде, можно провести аналогию: словари — это как набор продуктов, а синтаксис — это свод правил(например, Украинская, Китайская или Английская кухня), определяющих, как работать с этими продуктами, чтобы получилось конкретное блюдо. На сегодняшний день существует три основных формата микроразметки, это: Schema.org, Open Graph и Json-LD.

Важно!
Существуют и другие форматы, такие как Микроформаты, Dublin Core, Data Vocabulary, но, так как они устарели и уже практически не встречаются в использовании веб—мастерами, по данным из Яндекса это не более 4-7% все вместе взятые. Мы не будем их рассматривать в рамках этой статьи.

Open Graph

Данный словарь является лидером по количеству использования в рунете и разработал его никто иной, как “Facebook”. Основное применение данного словаря — это создание расширенных, понятных и красивых ссылок со сторонних сайтов при публикации в соц. сетях. Разметку OG корректно понимают все основные социальные сети (Facebook, Вконтакте, Google+, Twitter, LinkedIn, Pinterest).

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

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

og:title — заголовок размещаемой страницы/ссылки.
og:type — тип объекта, к примеру, music.album»(альбом). Набор свойств, которые можно будет указать дополнительно, зависит от указанного типа.
og:image — URL-изображение, которое визуально представляет объект.
og:url — канонический URL объекта.

Важно!
Все теги словаря OG должны быть расположены между тегами head.

Ниже вы видите пример разметки OG, которая описывает конкретного человека. Но, как показывает практика, в основном хватает 4 главных свойств.

<html prefix="og: https://ogp.me/ns# profile: https://ogp.me/ns/profile#">
<head>
   <meta property="og:title" content="Александр Пушкин" />
   <meta property="og:type" content="profile" />
   <meta property="og:url" content="https://domen.com/Пушкин" />
   <meta property="og:image" content="http://domen.com/name.jpg" />
   <meta property="og:image:width" content="ширина изображения" />
   <meta property="og:image:height" content="высота изображения" />
   <meta property="profile:first_name" content="Александр" />
   <meta property="profile:last_name" content="Пушкин" />
   <meta property="profile:gender" content="male" />
...
</head>
...
</html>

Для своего сайта я прописал разметку OG следующим образом (рис. 2)

Рисунок №2 — Пример разметки OG

В результате, при публикации в соц. сетях ссылки имеют такой вид (рис. 3)

Рисунок №3 — Результат разметки OG

Для того, чтобы ознакомиться со всей информацией по разметке OG, посетите официальный сайт.

Schema.org

Этот словарь, по своей сути, также дает возможность более подробно описать некую сущность (объект). Отличием его, например, от OG является то, что для описания свойств тут уже есть сотни классов. Посмотреть их представление в древовидной структуре можно тут.

Наиболее общий тип объекта (сущности) — это Thing. Данный тип, конечно же, делится на множество подтипов, которые выражают более конкретно тип сущности, которую необходимо описать. Рассмотрим некоторые из них.

CreativeWork — этот тип позволяет описать продукты творческой деятельности, такие как: книги, статьи, картины, фотографии, программное обеспечение.

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

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

Person – этот тип, как и очевидно из названия, предназначен для описания, живых, мертвых, придуманных персонажей.

Place используется для разметки объекта, который имеет статическое расположение. Например, парк, памятник, площадь и т.д.

Product – этот тип служит для описания объектов, созданных для продажи. Это могут быть кроссовки, ноутбук ,билеты, мотоцикл и все, что угодно.

Образец разметки Schema.org для типа Person

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Виталий Сухомлинов</span>
  <img src="suhomlinov.jpg" itemprop="image"/>
  <span itemprop="jobTitle">Seo специалист</span>
  <span itemprop="colleague">Ирина Старченко</span>
  <link itemprop="nationality"href="http://ru.wikipedia.org/wiki/Украина">Украина
  <time itemprop="birthDate" datetime="1986-08-10">8 октября 1986</time>
  <span itemprop="memberOf">Студия интернет маркетинга Seolab</span>
  <span itemprop="knows">Денис Гревцев</span>
  <span itemprop="award"> Человек года по версии моей мамы </span>
 <a href="http://ru.wikipedia.org/wiki/Сухомлинов_Виталий_Валериевич" itemprop="sameAs">Страница на Википедии</a>
  <a href="http://scriptcraft.site/Сухомлинов" itemprop="url">Сайт 
   Сухомлинова Виталия</a>
 </div>

Как можно увидеть, такая разметка говорит поисковым роботам, что человека, которого мы описывает, зовут Виталий Сухомлинов, а колега его — Ирина Старченко. Он является seo-специалистом и имеет специфическую награду. Также в конце указано две ссылки, размещенные с помощью свойств sameAs (указывает на страницу в энциклопедии), а вторая со свойством url ведет на личный сайт.

Если вам необходимо более подробно расписать свойства, вы просто в общем списке типов,(ссылка на дерево типов) выбираете тот, который необходим, в нашем случае Person (рис. 4).

Рисунок №4 — Как просмотреть все возможные свойства для конкретного типа

Кликнув на него, получим таблицу. Первая колонка — это перечень всех возможных свойств, вторая — тип данных, которые должны содержаться в атрибуте “content” и в третьей — краткое описание свойства (рис. 5).

Рисунок №5 — Как просмотреть все возможные свойства для конкретного типа 2

Пример разметки Schema.org для типа Article

<!DOCTYPE HTML>
<html lang="ru"> 
<head> 
   <meta charset=utf-8>
   <title> Образец статьи с размеченой с помощью словаря schema.org 
   </title> 
   <!—Описание страницы-->
   <meta name="description" content="Краткое описание текущей страницы">
   <!—Указание профиля автора в соц. сетях-->
   <a rel="author" href="Ссылка на профиль в соц. сетях">имя и фамилия</a>
</head>
<body> 
   <!--Указывается схема Article-->
   <div itemscope itemtype="https://schema.org/Article">
   <!--Указывается контактная информация организации, которая публикует статью--> 
   <div itemprop="publisher" itemscope 
   itemtype="https://schema.org/Organization">
      <meta itemprop="name" content="наименование организации">
      <meta itemprop="telephone" content="контактный телефон">
      <meta itemprop="address" content="физический адрес организации">
      <span itemprop="logo" itemscope 
      itemtype="https://schema.org/ImageObject">
      <img class="itemprops" itemprop="url image" width="Ширина лого в 
      пикселях" height="Высота лого в пикселях" src="Ссылка на изображение 
      логотипа" alt="Альтернативное описание изображения" />
     <meta itemprop="width" content=" Альтернативное описание изображения ">
     <meta itemprop="height" content=" Альтернативное описание изображения "> </span>
</div>
<!--Указывается название статьи--> 
<span itemprop="name">Название статьи</span>
<!--Указывается описание статьи--> 
<span itemprop="description">Описание статьи</span>
<!--Указывается авторство-->
<span itemprop="author">Имя автора</span>
<!--В поле URL указываем каноническую ссылку на страницу статьи-->
<link itemprop="url" href="Ссылка на страницу статьи" />
<!--В поле datePublished указывается дата в формате год-месяц-число-->
<meta itemprop="datePublished" content="Дата публикации">
<!--В поле dateModified указывается дата последнего редактирования-->
<meta itemprop="dateModified" content="Дата последнего изменения">
<!--Поле с тегом headline указывается в заголовке h1 страницы -->
<h1 itemprop="headline"> Заголовок H1</h1>
<!--В поле image указывается ссылка на превью статьи -->
<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img class="itemprops" itemprop="url image" width="Ширина превью в пикселях" height="Высота превью в пикселях" src="Ссылка на изображение превью" alt="Альтернативное описание превью" />
<meta itemprop="width" content=" Альтернативное описание превью "><meta itemprop="height" content=" Альтернативное описание превью "></span>
<!--В пределах этого тега указывается основной текст статьи -->
<div itemprop="articleBody">
Тут будет расположен текст статьи
</div>
</div>
</body> 
</html>

В этом примере важно заметить, что часть тегов размещена в секции body, а часть в head. Такие свойства, как articleBody или publisher, не являются обязательными. Но если их не прописывать, могут возникнуть ошибки при проверке на валидность в сервисах Яндекс или Google.

Образец разметки Schema.org для типа Product

<!DOCTYPE HTML>
<html lang="ru"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head> 
<body>
<div itemscope itemtype="https://schema.org/Product">
<!—Указываем заголовок H1 -->
<div itemprop="name"><h1>Содержание H1</h1></div>
<!—Указываем ссылку на изображение товара -->
<a itemprop="image" href="Ссылка на изображение" alt="Альтернативное описание изображения">
<img src="Ссылка на изображение" title="Содержание H1"></a>
<!—Прописываем, там где написано «цена в гривнах», указывается цена в свободном формате, например: «6000 гривен» -->
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<div>цена в гривнах</div>
<!—Указываем стоимость в формате 000.00, без указания типа валюты, например «6000.00» -->
<meta itemprop="price" content="Стоимость в формате 000.00">
<!—Указывается валюта, за которую продается этот товар, в данном случае это «UA» -->
<meta itemprop="priceCurrency" content="UA">
<!—Прописываем доступность товара «В наличии», «На складе», «Нет в наличии» и т.д. -->
<div>Указываем доступен ли товар</div>
<link itemprop="availability" href="https://schema.org/InStock">
</div>
<!—Прописываем небольшое описание товара -->
<div itemprop="description">ОПИСАНИЕ ТОВАРА</div>
</div>
</body>

Тут важно, что в самом теге price, цену необходимо указать именно в денежном формате, в противном случае ПС проигнорируют эту строку. Возможно, просматривая примеры разметки у кого-то, мог возникнуть вопрос: “а как все-таки это сделать для уже существующей страницы? Ведь у нее есть структура HTML и вся информация разбросана по документу.” И вопрос этот справедлив. Для решения этой задачи нам нужно перейти в консоль гугл (подробное описание функций консоли для разработчиков от гугл). В данном случае нам необходимо меню старой версии консоли и кликнуть на пункт Web Tools, в самом низу списка меню (рис. 6).

Рисунок №6 — Разметка документа на практике

Далее нужно кликнуть на пункт меню “Средства тестирования” и после кликнуть на “Мастер разметки структурированных данных”. Как результат, мы получим окно, в котором можно выбрать тип размечаемой страницы (рис. 7 ).

Рисунок №7 — Разметка документа на практике 2

Тут нужно определить тип данных и вставить в строку адрес страницы, после кликнуть на кнопку “Начать разметку”. Вам отобразится страница, адрес которой был указан. Я добавил ссылку на статью и, соответственно, тип тоже выбрал “статья”. Все, что остается — это выделять мышкой отдельные элементы и устанавливать их как значения для свойств (рис. 8).

Рисунок №8 — Разметка документа на практике 3

Таким образом, для статьи можно установить значение для свойства: автор, дата публикации, изображение, раздел статей и т.д. После того, как все необходимые сущности заполнены значениями, нужно нажать на кнопку в правом верхнем углу “Создать HTML”. Инструмент дает нам по умолчанию разметку json-ld (рис. 9).

Рисунок №9 -Разметка документа на практике 4

Собственно, можно скопировать теги script и все их содержимое и передать программисту. В нашем случае он должен будет вставить этот код в шаблон, который отвечает за статьи. Либо мы переключаемся в формат “микроданных” (рис. 10).

Рисунок №10 -Разметка документа на практике 5

И получаем весь код HTML страницы с добавленными тегами разметки. Вам нужно будет скопировать весь код HTML и, вставив его, например, в гугл док(теги разметки будут выделены желтым фоном у текста) (рис. 11), передать программисту. Суть задачи, которую нужно будет поставить, это добавить в шаблон, отвечающий за рендеринг статей, теги разметки.

Рисунок №11 -Разметка документа на практике 6

После того, как программист добавит разметку в шаблон, вы можете проверить корректность ее работы. Для этого есть инструмент проверки. Для того, чтобы его открыть, проходим аналогичный путь. Консоль старой версии, далее “Web Tools”, далее “Средства тестирования” и “Инструмент проверки структурированных данных”.

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

Рисунок №12 — Проверка на наличие ошибок в микроразметке

JSON-LD

Данный тип расшифровуется как «JavaScript Object Notation Linked Data». Родителем этого формата является ранее упомянутый консорциум W3C. Этот формат позволяет выполнить функцию, аналогичную Schema.org, но иным способом, посредством JavaScript. Как вы скоро увидите, это существенно облегчает работу.

Этот формат использует словарь Schema.org, следовательно, с помощью скрипта json-ld, мы сможем описать абсолютно любой вид объектов\сущностей. При этом не нужно добавлять тегов в html разметку. Достаточно просто в секции head указать <script type=»application/ld+json»> </script>, а внутри этого тега описать все необходимые свойства. Т.е., мы используем все доступные свойства того или иного типа из Schema.org, но описываем это просто немного иначе.

Еще одним явным преимуществом данной технологии является то, что крупнейшая ПС Google рекомендует для семантической разметки именно JSON-LD.

Образец разметки Json-ld для типа Article

<script type="application/ld+json">//Определяется тип скрипта, в данном случае это ld+json
{
  "@context" : "http://schema.org",//Прописывается словарь, которой будет использован для разметки
  "@type" : "Article",//Устанавливается тип объекта
  "name" : "Search Console инструмент для вебмастера от Google",//Устанавливается название статьи
   "headline": "заголовок H1", //Устанавливается заголовок
"dateModified":"Дата изменения статьи",//Устанавливается дата изменения статьи
  "author" : {
    "@type" : "Person",
    "name" : "Виталий Сухомлинов"//Указывается имя автора
  },
  "datePublished" : "2019-02-25",//Дата публикации
  "image" : "http://scriptcraft.site/wp-content/themes/education-hub/s7_2.jpg", //Устанавливается изображение представляющее статью
   "publisher": {
 "@type": "Organization ",
  "name": "Наименование организации",//Устанавливается название организации
  "logo" : {
   "@type": "ImageObject",
   "url": "http://scriptcraft.site/wp-content/themes/education-hub/s7_2.jpg",//Устанавливается ссылка на логотип компании
   "height" : 200, //Устанавливается высота и ширина логотипа
   "width" : 200
  }
 }
}
</script>

Мы тут видим тег <script> с указанием типа — type=»application/ld+json». А в нем, в фигурных скобках, многомерный массив. Ключи — это ни что иное, как свойства из словаря Schema.org. Для наглядности маленькое сравнение (рис. 13 и 14).

Рисунок №13 — Сравнение Schema.org и Json-LD

Рисунок №14 — Сравнение Schema.org и Json-LD-2

Скорее всего, вы оценили, насколько проще добавить в head подобный скрипт, нежели добавлять всю эту информацию в код разметки. Для своего сайта я прописал разметку только для типа “статья” и сделал это следующим образом (рис. 15). Если у вас также wordpress, тогда можете использовать ее как готовое решение.

Рисунок №15 — Разметка json ld для типа статья на wordpress

Простой способ микроразметки

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

Мероприятия
Местные организации
Обзоры книг
Приложения
Продукты
Рестораны
Статьи
Телесериалы
Фильмы

Поможет нам в этом инструмент Маркер Google. После перехода по ссылке нужно выбрать проект, с которым будем работать (рис. 16).

Рисунок №16 — Пример работы с гугл маркером

Далее нас перебросит уже в наш аккаунт консоли. Для того, чтобы попасть в интерфейс по настройке разметки, кликните на кнопку (рис. 17).

Рисунок №17 — Пример работы с гугл маркером 2

Далее получим окно, в котором можно выбрать, хотим ли мы работать только с одной страницей или со всеми похожими, тип информации и нужно указать адрес страницы (рис. 18). Я выбрал тип “Статьи”.

Рисунок №18 — Пример работы с гугл маркером 3

Важно!
Разметить можно только страницы, которые уже есть в индексе гугла.

Дальше все очень просто. Справа есть блок под названием “Мои элементы данных”. Там список свойств, а для того, чтобы установить значение, мы просто выделяем на странице элемент и указываем его, как значение для свойства (рис. 19).

Рисунок №19 — Пример работы с гугл маркером 4

Таким образом, заполнить нужно все свойства. А потом кликнуть в верхнем правом углу “далее”. После чего мы попадем в раздел “создание групп страниц”. Там либо соглашаемся с тем, что выбрала система, либо прописываем структуру урлов, определяющих группу самостоятельно (рис. 20).

Рисунок №20 — Пример работы с гугл маркером 5

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

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

Рисунок №21 — Пример работы с гугл маркером 6

Естественно, что, если вы идете именно этим путем ,необходимо создать одну группу, например, статьи или товары, а страницы типа “контакты” и т.д., разметить отдельно. На этом можно подвести черту с темой микроразметки. Пожалуй, все основное, что необходимо в работе, тут есть. Если где-то описание кажется вам неполным и возникают трудности в реализации, пишите ваши вопросы в комментариях и наша команда постарается вам помочь. А сейчас, как всегда, to be continued…

Автор Виталий Сухомлинов
практикующий веб разработчик
и seo-специалист

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 3.5 / 5. Количество оценок: 2

Оценок пока нет. Поставьте оценку первым.

Комментариев: 2

Scroog:

30.09.2019 в 17:50

Здравствуйте, пропал рейтинг “AggregateRating” из сайта после после работы программиста. Не Могу разобратся в чём проблема.

https://search.google.com/structured-data/testing-tool?hl=ru#url=https%3A%2F%2Fxiaomi.kz%2Fsmartfony%2Fmi-9t-pro%2Fmi-9t-pro-6-128gb-carbon-black%2F

Возможна из-за неправильной валидации ?
Прошу подсказать в каком направлений копать или что можно почитать (простое для понимания).
1. Виталий Сухомлинов:
  
  30.09.2019 в 21:03
  
  Здравствуйте, судя по всему, тут дело не в ваших программистах. На форуме гугл есть обсуждение этой темы, — “недопустимый тип целевого объекта для свойства itemReviewed” https://support.google.com/webmasters/thread/14764570?hl=ru.
  Ссылку на статью по этому вопросу, от 22 сентября, я отправил вам на почту. Там раскрывается тема, почему пропали звезды рейтинга. Также можете почитать об этом в посте от google на ангельском https://webmasters.googleblog.com/2019/09/making-review-rich-results-more-helpful.html. Надеюсь, это поможет вам решить вопрос.

Комментарии закрыты

ScriptCraft

Полное руководство по работе с микроразметкой