Schema.org своими руками: настраиваем микроразметку без программиста

Элемент Footer

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


Элемент footer представляет нижний колонтитул той секции, к которой обращается. Обычно нижний колонтитул содержит информацию о своей секции, такую, как авторство, ссылки на связанные документы, дату копирайта и прочее.

У нас на демо-странице есть четыре элемента footer: по одному на каждый из трех элементов article и общий нижний колонтитул для всей страницы. Нижний колонтитул в элементе article содержит имя автора поста, тэги и кнопку ссылки на полную версию поста в блоге.

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Микроразметка карточки товара

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

К примеру, так выглядит сниппет с разметкой в Яндексе:

Товарная микроразметка в Яндексе

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

А вот так сниппет выглядит в Гугле:

Сниппет с товарной микроразметкой в Гугле

Как видим, от яндекса отличается только дополнительной строкой. Что ж, и на этом спасибо!

Поисковые системы распознают следующие поля:

  • name — название товара.
  • description — описание товара
  • price или lowPrice — цена. Если у товара нет конкретной цены (зависит от партии, от количества и доставки), то указывайте минимальную цену. Тогда в сниппете будет выводиться «от N рублей»
  • priceCurrency — валюта. Необходимо указывать код валюты по ISO 4217
  • aggregateRating — рейтинг товара (работает в Гугле)
  • availability — информация о наличии (работает в Гугле)

Пример разметки на карточке товара (взято с официальной документации Яндекса):

<!—Указывается схема Product.—><div itemscope itemtype=»https://schema.org/Product»><!—В поле name указывается наименование товара.—><h1 itemprop=»name»>Iphone 6 plus 16 GB</h1><!—В поле description дается описание товара.—><span itemprop=»description»>iPhone 6 не просто больше. Он лучше во всех отношениях. Больше, но при этом значительно тоньше. Мощнее, но при этом исключительно экономичный. Его гладкая металлическая поверхность плавно переходит в стекло нового HD-дисплея Retina, образуя цельный, законченный дизайн. Его аппаратная часть идеально работает с программным обеспечением. Это новое поколение iPhone, улучшенное во всём</span><!—В поле image указывается ссылка на картинку товара.—><img src=»https://imageexample.com/iphone6plus.jpg» itemprop=»image»><!—Указывается схема Offer.—><div itemprop=»offers» itemscope itemtype=»https://schema.org/Offer»><!—В поле price указывается цена товара.—><span itemprop=»price»>36990</span><!—В поле priceCurrency указывается валюта.—><span itemprop=»priceCurrency»>RUB</span></div></div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<!—УказываетсясхемаProduct.—>

<div itemscope itemtype=»https://schema.org/Product»>

<!—Вполеnameуказываетсянаименованиетовара.—>

<h1 itemprop=»name»>Iphone6plus16GB<h1>

<!—Вполеdescriptionдаетсяописаниетовара.—>

<span itemprop=»description»>iPhone6непростобольше.Онлучшевовсехотношениях.Больше,ноприэтомзначительнотоньше.Мощнее,ноприэтомисключительноэкономичный.ЕгогладкаяметаллическаяповерхностьплавнопереходитвстеклоновогоHD-дисплеяRetina,образуяцельный,законченныйдизайн.Егоаппаратнаячастьидеальноработаетспрограммнымобеспечением.ЭтоновоепоколениеiPhone,улучшенноевовсём<span>

<!—Вполеimageуказываетсяссылканакартинкутовара.—>

<img src=»https://imageexample.com/iphone6plus.jpg»itemprop=»image»>

<!—УказываетсясхемаOffer.—>

<div itemprop=»offers»itemscope itemtype=»https://schema.org/Offer»>

<!—Вполеpriceуказываетсяценатовара.—>

<span itemprop=»price»>36990<span>

<!—ВполеpriceCurrencyуказываетсявалюта.—>

<span itemprop=»priceCurrency»>RUB<span>

<div>

<div>


Как можно легко увидеть из кода, внедрение микроразметки товаров shema — достаточно простое действие. Нужно открыть шаблон, который отвечает за вывод на сайт карточки товаров и добавить выводим полям нужные атрибуты. Если у вас толковый программист, то эта работа займет максимум пару часов (вместе с тестированием работы).

Mobile First

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

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

Mobile First подразумевает совершенно другое мышление в плане размещения элементов на страницах и создания структуры. Главными пунктами здесь являются компактность и информативность, отсутствие отвлекающих факторов и второстепенных элементов.

Микроразметка логотипа и социальных сетей

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

Как размечать?

Находим на странице свой логотип.

Контейнеру для логотипа присваиваем атрибут itemscope, давая понять, что это отдельный объект микроразметки.

Указываем через itemtype, что это данные об организации ссылкой на schema.org

Важно при этом разметить еще 2 элемента — картинку логотипа и ссылку на главную страницу, что делается свойствами itemprop=”url” и itemprop=”logo”.. Самый удобный способ микроразметки, который будет учитывать и логотип, и социальные сети, будет рекомендуемый Google — JSON-LD:

Самый удобный способ микроразметки, который будет учитывать и логотип, и социальные сети, будет рекомендуемый Google — JSON-LD:

Разметка социальных сетей

Для логотипа и социальных сетей удобно пользоваться именно JSON-LD, т.к.

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

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

Разметка номера телефона

Телефоны организации мы указываем в отдельном массиве contactPoint. Атрибут contactType указывает, к какому виду контактов относится данный телефон.

Полный список есть , но основные виды контактов:

  • customer service (работа с клиентами);
  • technical support (техническая поддержка);
  • sales (отдел продаж).

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

Внедряем микроразметку самостоятельно и без знания кода

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

Автоматическая разметка страниц с помощью Маркера данных

Google разработал специальный инструмент для максимально простого внедрения микроразметки — Маркер данных.

Чем удобен инструмент:

  • не нужно писать код или пользоваться генераторами, не нужно проверять валидность разметки;
  • вы размечаете одну страницу, а Google автоматически реализует разметку для всех страниц сайта этого типа (например, для всех товаров).

Как пользоваться

Переходим в Маркер данных и выбираем подтвержденный ресурс;


Роботы Google просканируют страницы сайта и учтут заданную микроразметку.

Как изменить или убрать микроразметку

Когда робот Google снова просканирует страницы сайта, разметка перестанет учитываться и в поисковой выдаче будут отображаться обычные сниппеты.

Сайт на CMS? Используйте плагины

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

Настройка микроразметки в плагине Schema: пошаговая инструкция

Установите плагин и кликните по разделу Schema, который появится в боковом меню админпанели. Перейдите в раздел Settings → General. Выберите тип сайта и загрузите логотип.

Сохраните изменения и перейдите на вторую вкладку — Knowledge Graph. Здесь вам нужно указать, кого представляет сайт — выберите Person, если это личный сайт, или Organization (если продвигаете сайт компании).

Перейдите на вкладку Schemas. Выберите из выпадающих списков страницы «О себе» и «Контакты». Если хотите подключить разметку хедера и футера, хлебных крошек и других элементов страниц сайта — поставьте галочки напротив соответствующих параметров.

Также можно настроить автоматическое удаление микроразметки, если будет удален плагин Schema. Для этого перейдите на вкладку Advanced и поставьте галочку напротив «Delete Data on Uninstall».

Сохраните изменения. Проверьте исходный код страниц сайта — в разделе <head>…</head> появится код микроразметки в формате JSON-LD.

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

Примерно так же строится работа с другими плагинами для Вордпресс. Главное преимущество — вам не нужно разбираться в синтаксисе и прописывать все параметры вручную.

Позиционирование и слои

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

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

Польза микроразметки и поисковая выдача. Расширенные спиппеты

Микроразметка помогает поисковым системам не только лучше отображать, но и лучше понимать, размещенную на странице информацию. Именно микроразметка дает поисковым роботам подробную “карту” того, как следует обработать и проиндексировать информацию. Именно микроразметка, в конечном счете, позволяет значительно улучшить релевантность страницы как для поисковых систем, так и для пользователей. Следовательно, улучшается и поисковая выдача. Считается, что микроразметка может увеличить поступление трафика на сайт примерно на 30%. Согласитесь, что такая поисковая оптимизация — хорошее решение!

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

Сайт в выдаче без микроразметки

Сайт в выдаче с микроразметкой

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

Расширенный сниппет для Google

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


Создать расширенный сниппет для Google можно:

  • выбрав формат разметки (в нашем случае это микроданные);

  • разметив содержание (см. примеры ниже);

  • проверив разметку с помощью специальных валидаторов (о них речь то же пойдет ниже).

Пример кода расширенного сниппета для Google

Пример расширенного сниппета для Google  в выдаче

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

Расширенный сниппет для Yandex

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

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

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

Пример

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

Пример

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

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

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

Schema.org

Поддерживается с 2011 года поисковыми гигантами: Google, Яндекс, Yahoo, Bing. Словарь считается международным, постоянно дополняется по инициативе людей со всего мира. С помощью Schema.org веб-мастера создают привлекательные сниппеты с указанием ценных характеристик объекта.

Описание типов данных в словаре имеет древовидную структуру. Здесь собраны сотни классов, с помощью которых описываются разные объекты. Для каждого из них в синтаксисе есть стандартные атрибуты:

  • itemtype — тип объекта из списка словаря. Чаще используется Thing, который имеет свои подтипы: Action, CreativeWork, Person, Product и другие;
  • itemscope — информация о том, что в этом участке кода описывается некий объект;
  • itemprop —дополнительная информация об объекте. Например, продолжительность видеозаписи, время начала мероприятия.

Участок кода с атрибутами Schema.org выглядит так:

<div itemscope itemtype=»http://schema.org/Movie»> <h1 itemprop=»name»>Титаник</h1> <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/titanik-theatrical-trailer.html» itemprop=»trailer»>Трейлер</a> </div>

Open Graph

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

При отсутствии этого типа разметки пост будет выглядеть уныло:

Для создания кода разметки используют теги синтаксиса:

  • og:title — заголовок объекта репоста;
  • og:description — описание объекта;
  • og:image — изображение;
  • og:url — ссылка на расположение объекта;
  • og:type — тип объекта.

Пример кода с разметкой Open Graph:

<head> <meta property=»og:title» content=»Название видео» /> <meta property=»og:url» content=»http://yoursite.ru/video/» /> <meta property=»og:video» content=»http://site.ru/video/» /> <meta property=»og:description» content=»Описание видео” /> <meta property=»og:type» content=»video.other»/> </head>

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

Словарь микроразметки Microformats.org создан в 2007 году. Он включает разные типы объектов и описания их свойств. Этим словарём описывают товары, мероприятия, компании, рецепты и другие сущности с набором уникальных характеристик. Из всего списка микроформатов чаще используется hCard, который описывает контактные данные людей и организаций.

С помощью hCard можно указать:

  • bday — дату рождения;
  • n — имя;
  • adr — адрес;
  • photo — фото;
  • geo — геолокацию и другие данные.

Участок кода с использованием микроформатов будет выглядеть так:

<div class=»hcard»> <img class=»photo» src=»http://site.com/gagarin.jpg» /> <strong class=»fn»>Иван Иванов</strong> <span class=»title»>Лётчик-испытатель</span> в <span class=»org»>Военно-воздушные силы</span> <a class=»url» href=http://site.com/Иванов>Страница И.Иванова</a> <div class=»bday»> <span class=»value-title» title=»1982-12-05″>5 декабря 1982</span> </div> <span class=»note»>Герой страны</span> </div>


С этим читают