Интернет. Безопасность. Windows. Программы. Компьютеры

Что такое микроразметка и какие типы микроразметки поддерживают Яндекс и Google. Микроразметка: что нужно знать SEO-специалисту о словарях и синтаксисе Микроразметка статьи яндекс

Любой вебмастер хорошо знаком с HTML-разметкой. Обычно HTML-теги указывают браузеру, как отображать информацию, заключенную в тег. Например, тег

Аватар

означает, что строку «Аватар» следует отображать в формате заголовка первого уровня. Однако HTML-тег не предоставляет никакой информации о смысловом значении этой строки: «Аватар» может относиться к чрезвычайно успешному 3D-фильму или к картинке в пользовательском профиле. Это усложняет поисковым системам задачу нахождения информации, адекватной запросу пользователя.

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

itemprop="name" >Аватар

Режиссер: itemprop="director" >Джеймс Кэмерон (род. 16 августа 1954 г.) itemprop="genre" >Фантастика itemprop="trailer" >Трейлер

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

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

Вложенные сущности

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

Аватар

itemprop="director" itemscope itemtype="http://schema.org/Person" >Режиссер: Джеймс Кэмерон (род. 16 августа 1954 г.)
Фантастика Трейлер

Типы и свойства schema.org

Кроме типов Movie и Person, упомянутых в разделе , schema.org описывает множество разнообразных типов сущностей, для каждого из которых определен набор свойств.

Наиболее обобщенный тип сущности - это Thing (нечто), у которого есть четыре свойства: name (название), description (описание), url (ссылка) и image (картинка). Более специализированные, частные типы имеют общие свойства с более универсальными. Например, Place (место) - частный случай Thing, а LocalBusiness (местная фирма) - частный случай Place. Частные типы наследуют свойства родительского типа. (Более того, тип LocalBusiness является и частным случаем Place, и частным случаем Organization, поэтому наследует свойства обоих родительских типов.)

Вот список некоторых популярных типов сущностей:

Дополнительно: машиночитаемая версия информации

Многие страницы можно разметить, используя только атрибуты itemscope , itemtype и itemprop (описанные в разделе Как размечать контент с помощью микроданных) вместе с типами и свойствами schema.org (описанными в разделе Как использовать словарь schema.org).

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

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

Не всегда роботам удается правильно понять дату и время. Например, «04/01/11» - это 11 января 2004 г., 4 января 2011 г. или 1 апреля 2011 г.? Чтобы однозначно задать дату, используйте тег

04/01/11

Время суток задается в формате hh:mm либо hh:mm:ss , с префиксом T . Время может быть указано вместе с датой:

8 мая, 19:30

Рассмотрим пример в контексте: HTML-код с информацией о концерте, который состоится 8 мая 2011 г. Разметка типа Event включает название события, описание и дату.

itemscope itemtype="http://schema.org/Event" >
itemprop="name" >Spinal Tap
itemprop="description" >Одна из самых громких музыкальных групп всех времен воссоединится для незабываемого двухдневного шоу. Концерт состоится 8 мая в 19:30

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

H обозначает количество часов, а M - количество минут.

Форматы даты, времени и длительности соответствуют стандарту ISO 8601 .

Перечисления и ссылки на канонические страницы: используйте тег link с атрибутом href

    Перечисления

    Некоторые свойства имеют ограниченный набор возможных значений. Программисты называют их перечислениями. Например, интернет-магазин может использовать тип сущности Offer для подробного описания товарного предложения. Свойство availability (наличие) обычно имеет одно из нескольких возможных значений: In stock (в наличии), Out of stock (отсутствует), Pre-order (на заказ) и т. д. Значения перечисляемых свойств можно указывать в виде URL, аналогично типам сущностей schema.org.

    Вот товарное предложение, размеченное как сущность типа Offer, с соответствующими свойствами:

    Blend-O-Matic $19.95 Уже в продаже!

    А вот то же самое предложение, размеченное с использованием и href , что позволяет однозначно указать одно из допустимых значений свойства availability:

    Blend-O-Matic $19.95 Уже в продаже!

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

    Над пропастью во ржи Автор itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Страница в Википедии

    Как видите, атрибут itemprop="url" можно использовать для ссылки на страницу другого сайта (в этом случае, Википедии), которая описывает ту же самую сущность. Ссылки на сторонние сайты помогают поисковым системам лучше понимать, о чем речь на вашей странице.

    Над пропастью во ржи Автор

Недостающая или неявная информация: используйте тег с атрибутом content

Иногда важная информация не может быть размечена из-за способа ее отображения на странице. Например, информация представлена на рисунке (изображение рейтинга 4 звезды из 5) или во Flash-объекте (например, длительность видеоролика) либо она подразумевается, но не указана на странице в явном виде (например, валюта цены).

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

Blend-O-Matic $19.95 25 оценок

А вот тот же пример с размеченной информацией о рейтинге.

Blend-O-Matic $19.95
itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating" > itemprop="ratingCount" >25 оценок

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

Расширение schema.org

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

И Schema.org/Product . Причина такого выбора проста - один из этих типов поддерживает поисковик на «Я», а второй - поисковик на «G»:) Внедрять ее было достаточно легко, и о своем выборе нам не пришлось пожалеть.

Конечно, многие сейчас задаются вопросом, какова эффективность того или иного внедрения, в том числе и какова эффективность внедрения мироразметки - на все нужны ресурсы, которые потом должны себя оправдать. Вопрос этот, действительно, интересен. На момент внедрения мы считали микроразметку необходимым улучшением, и у нас не было цели напрямую отслеживать ее эффективность. Однако за год, прошедший с момента ее внедрения, мы получили следующее: глубина просмотра посетителей из поисковиков выросла почти в 2 раза, при этом показатель отказов снизился в 3-4 раза. Количество же достижения цели выросло на 20-30%. Согласитесь, это неплохой показатель. И хотя, конечно, мы не связываем весь этот рост только с внедрением одной лишь микроразметки, значительная доля изменения этих показателей, безусловно, ее заслуга.

Андрей Кузьмичёв, руководитель направления поисковой оптимизации Ozon.ru :
В Ozon.ru мы внедрили разметку разных стандартов, потому что каждая из них дает выигрыш в чем-то своем: микроформат hCard и Schema.org дают качественное представление в поисковых системах, а Open Graph - в социальных сетях. В общем и целом, благодаря этой разметке наши сниппеты стали более качественными и структурированными.

На достигнутом мы останавливаться не собираемся, как, видимо, и поисковые системы. Чем больше новых типов микроразметки они начинают учитывать, тем больше у магазинов становиться возможностей как-то выделиться на поиске. Так, недавно стала учитываться разметка Schema.org/Product по новой партнерской программе Яндекса для разметки товаров . Однако для некоторых категорий мы будем использовать семантическую разметку товаров совместно с программой «Товары и цены» , которая пока иногда дает преимущества по скорости обновления данных о продуктах. И такая задача уже стоит у наших программистов.

Типичный сайт Интернет-магазина состоит из страниц с товарами, каталогом, контактами и информацией о доставке. Разметив страницы с товарами и контактами, можно улучшить свое представление в поисковых системах.

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

Для формирования таких сниппетов нужны указанные поля name , description , price и priceCurrency :

массажёр Beurer MG 81

Массажер Beurer MG81 - это современный, элегантный и многофункциональный прибор. Крупные массажные головки эргономичной формы выполняют глубокий вибрационный (ударный) массаж на любом участке тела. Дополнительно массируемый участок тела можно прогреть инфракрасным нагревательным элементом. Также возможно подключить 2 разные массажные насадки. Вибромассажер с инфракрасным излучателем может проводить массаж с различной интенсивностью. Вы можете проводить массаж и самостоятельно, и с помощью другого человека. Длинный сетевой шнур позволяет проводить сеанс массажа в удобном месте независимо от расположения розетки. Также у массажера удобная и не скользящая ручка для простого и надежного применения. 3320 руб.
Большое влияние на решение о покупке оказывают отзывы. Если у вас есть отзывы, мы рекомендуем добавить специальную разметку: в Product для этого есть свойство AggregateRating , а в микроформатах есть тип hReview .

В Google на основе разметки формируются специальные сниппеты .

Для этого необходимо указать значение поля AggregateRating :

"Смартфон Apple iPhone 6 4.7" 16Gb Space Gray


Для страницы с контактами подходит разметка Organization от Schema.org или микроформат hCard . C их помощью можно участвовать в партнерской программе Яндекса : попасть в справочник и улучшить ответы не только в поиске, но и на Яндекс.Картах.

При использовании микроформата необходимо указать название организации, адрес и телефон:

Онлайн-мегамаркет OZON.ru: год за годом

Офис в Москве

125252 , г. Москва, Чапаевский переулок, д. 14


И, на наш взгляд, на всех страницах стоит использовать Open Graph , чтобы покупатели могли наглядно делиться вашим интернет-магазином и его товарами у себя на страницах и в личных сообщениях.

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


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

Сковороды Rondell

{{totalModelsCount}} {{currentModelsCount}}

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

СМИ

Александр Ломакин, технический директор Lenta.ru :
В Lenta.ru мы используем три типа семантической разметки: это Open Graph , Twitter Cards и Schema.org .
С первыми двумя стандартами от Facebook и Twitter все просто - наши материалы достаточно много «шерят» и «лайкают», поэтому в социальных сетях они должны выглядеть ничуть не хуже, чем на основном сайте. С помощью разметки мы это контролируем, размечая фотографию, заголовок, и краткое описание.


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

Детский театральный фестиваль "Большая перемена" открывается в Москве

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

Платформа «Острова» находится на стадии бета-тестирования

На страницу с контактами можно добавить разметку Organization или hCard .

Видеохостинги

Денис Чудинов, руководитель направления оптимизации Ivi.ru :
Мы начали задумываться над внедрением микроразметки лишь в 2012 году, в то время как Яндекс еще в 2010 году стал учитывать первые типы микроразметки. Но лучше поздно, чем никогда:) Однако оказалось, что и в 2012 году в Рунете не было практически никаких примеров ее использования, все были только наслышаны о ней, но совершенно не понимали, как и что внедрять. Поэтому учиться приходилось на собственном опыте: нам ничего не оставалось делать, как самим рассматривать разные варианты, изучать документацию имеющихся стандартов и подсматривать у западных коллег. В общем, экспериментировали. В итоге решили внедрить два типа: Open Graph и Schema.org/Movie , так как они помогают передавать данные поисковым системам и красиво отображаться в социальных сетях.

Для нас это внедрение проходило непросто как с точки зрения разработки, так и с точки зрения понимания, зачем она нужна - на тот момент было не очень очевидно, что даст микроразметка. В общем было ясно только то, Open Graph нужен для социальных сетей, а Schema.org для поисковиков. Кроме того, на тот момент у нас не было отдельной метрики для измерения эффективности разметки, да и не очень было понятно, как эффект именно от ее внедрения можно измерить. Однако прошло немного времени, и мы стали замечать, что из текста сниппетов в Яндексе стали пропадать «левые тексты», они стали более информативными. И это же стали замечать наши пользователи, что не могло наc не радовать.

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

Все видеоматериалы можно подробно описать с помощью типа VideoObject от Schema.org или расширения Open Graph от Яндекса. Разметка позволит участвовать в партнерских программах Яндекса и Google и хорошо отображаться как в результатах большого поиска, так и в поиске агрегаторов видео.

В разметке указываются данные видео: название, длина, номер серии и так далее.


А с помощью разметки Schema.org/Movie можно получить структурированные сниппеты с описанием фильмов в Яндексе:

Для этого необходимо разметить подробную информацию о фильме:

Кавказская пленница, или Новые приключения Шурика

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

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

На данный момент 30% страниц, известных Яндексу, имеют семантическую разметку. Ответы представителей сайтов - небольшая, но очень показательная часть опыта использования разметки. Если у вас он тоже есть - делитесь в комментариях!

Мы благодарим наших партнеров за ответы и содействие в составлении этой статьи.

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

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

У некоторых по этому поводу есть целые видеокурсы, которые длятся около часа, я же решил всё вместить в небольшом материале, всего лишь этой статье. Итак, давайте разберемся, как сделать самому микроразметку schema.org , и для чего она нужна.

Зачем нужна микроразметка

Микроразметка – это своего рода словарь, который позволяет поисковой системе дать понять, что именно необходимо взять для индексирования. Когда поисковой робот заходит на страницу сайта, то видит он её совсем по-другому, не так как мы. Вот вам наглядный пример:

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

Делаем микроразметку

На самом деле, можно не поручать это дело фрилансерам и вебмастерам, особенно, если ваш сайт работает на WordPress. У этой cms уже по умолчанию настроена микроразметка Hatom, но она не принята, к примеру, у Яндекса. Таким образом, некоторые веб-мастера для валидности кода и его оптимизации делают микроразметку от Schema.

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

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

itemscope itemtype=http://schema.org/WPHeader – указывает на общий контент
itemscope itemtype=http://schema.org/Article – указывает на тело статьи
itemprop=»name» – обозначает заголовок
itemprop=»author» – авторство
itemprop=»datePublished» (Обязательно время в формате «Y-m-d») – дата публикации
itemprop=»articleBody» – текст статьи
itemprop=»articleSection» – рубрика
itemprop=»image» – если есть изображение

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


Здесь наш контент

Значит нам необходимо внести вот такие коррективы:


Здесь наш контент

Любой вебмастер хорошо знаком с HTML-разметкой. Обычно HTML-теги указывают браузеру, как отображать информацию, заключенную в тег. Например, тег

Аватар

означает, что строку «Аватар» следует отображать в формате заголовка первого уровня. Однако HTML-тег не предоставляет никакой информации о смысловом значении этой строки: «Аватар» может относиться к чрезвычайно успешному 3D-фильму или к картинке в пользовательском профиле. Это усложняет поисковым системам задачу нахождения информации, адекватной запросу пользователя.

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

itemprop="name" >Аватар

Режиссер: itemprop="director" >Джеймс Кэмерон (род. 16 августа 1954 г.) itemprop="genre" >Фантастика itemprop="trailer" >Трейлер

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

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

Вложенные сущности

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

Аватар

itemprop="director" itemscope itemtype="http://schema.org/Person" >Режиссер: Джеймс Кэмерон (род. 16 августа 1954 г.)
Фантастика Трейлер

Типы и свойства schema.org

Кроме типов Movie и Person, упомянутых в разделе , schema.org описывает множество разнообразных типов сущностей, для каждого из которых определен набор свойств.

Наиболее обобщенный тип сущности - это Thing (нечто), у которого есть четыре свойства: name (название), description (описание), url (ссылка) и image (картинка). Более специализированные, частные типы имеют общие свойства с более универсальными. Например, Place (место) - частный случай Thing, а LocalBusiness (местная фирма) - частный случай Place. Частные типы наследуют свойства родительского типа. (Более того, тип LocalBusiness является и частным случаем Place, и частным случаем Organization, поэтому наследует свойства обоих родительских типов.)

Вот список некоторых популярных типов сущностей:

Дополнительно: машиночитаемая версия информации

Многие страницы можно разметить, используя только атрибуты itemscope , itemtype и itemprop (описанные в разделе Как размечать контент с помощью микроданных) вместе с типами и свойствами schema.org (описанными в разделе Как использовать словарь schema.org).

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

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

Не всегда роботам удается правильно понять дату и время. Например, «04/01/11» - это 11 января 2004 г., 4 января 2011 г. или 1 апреля 2011 г.? Чтобы однозначно задать дату, используйте тег

04/01/11

Время суток задается в формате hh:mm либо hh:mm:ss , с префиксом T . Время может быть указано вместе с датой:

8 мая, 19:30

Рассмотрим пример в контексте: HTML-код с информацией о концерте, который состоится 8 мая 2011 г. Разметка типа Event включает название события, описание и дату.

itemscope itemtype="http://schema.org/Event" >
itemprop="name" >Spinal Tap
itemprop="description" >Одна из самых громких музыкальных групп всех времен воссоединится для незабываемого двухдневного шоу. Концерт состоится 8 мая в 19:30

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

H обозначает количество часов, а M - количество минут.

Форматы даты, времени и длительности соответствуют стандарту ISO 8601 .

Перечисления и ссылки на канонические страницы: используйте тег link с атрибутом href

    Перечисления

    Некоторые свойства имеют ограниченный набор возможных значений. Программисты называют их перечислениями. Например, интернет-магазин может использовать тип сущности Offer для подробного описания товарного предложения. Свойство availability (наличие) обычно имеет одно из нескольких возможных значений: In stock (в наличии), Out of stock (отсутствует), Pre-order (на заказ) и т. д. Значения перечисляемых свойств можно указывать в виде URL, аналогично типам сущностей schema.org.

    Вот товарное предложение, размеченное как сущность типа Offer, с соответствующими свойствами:

    Blend-O-Matic $19.95 Уже в продаже!

    А вот то же самое предложение, размеченное с использованием и href , что позволяет однозначно указать одно из допустимых значений свойства availability:

    Blend-O-Matic $19.95 Уже в продаже!

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

    Над пропастью во ржи Автор itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Страница в Википедии

    Как видите, атрибут itemprop="url" можно использовать для ссылки на страницу другого сайта (в этом случае, Википедии), которая описывает ту же самую сущность. Ссылки на сторонние сайты помогают поисковым системам лучше понимать, о чем речь на вашей странице.

    Над пропастью во ржи Автор

Недостающая или неявная информация: используйте тег с атрибутом content

Иногда важная информация не может быть размечена из-за способа ее отображения на странице. Например, информация представлена на рисунке (изображение рейтинга 4 звезды из 5) или во Flash-объекте (например, длительность видеоролика) либо она подразумевается, но не указана на странице в явном виде (например, валюта цены).

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

Blend-O-Matic $19.95 25 оценок

А вот тот же пример с размеченной информацией о рейтинге.

Blend-O-Matic $19.95
itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating" > itemprop="ratingCount" >25 оценок

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

Расширение schema.org

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

В мире, где правит Интернет и поисковые системы (Google, Bing, Yahoo!, Yandex, Baidu), поиск абсолютно любой информации — дело нескольких минут. Значение поисковых систем в нашей жизни сложно недооценить, поэтому неудивительно, что их развитие идет огромными темпами. Если вчера любой вебмастер мог полагаться исключительно на простую HTML-разметку, то сегодня этого будет уже недостаточно.

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

, то сегодня этим уже не обойдешься. Почему?

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

В данной статье мы поговорим о том:

    что такое микроразметка;

    какие бывают виды микроразметки;

    чем полезна микроразметка;

    как описывать данные с помощью Schema.org;

    как микроразметка влияет на поисковую выдачу и используется в поисковой оптимизации;

    что такое расширенные сниппеты для Google и Yandex и как их использовать;

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

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

О микроразметке

Словарь микроданных Schema.org появился в 2011 году, когда Google, Microsoft и Yahoo! (позже к ним присоединился и российский Yandex) решили унифицировать схемы семантической разметки. Schema.org — единый словарь тегов, который может использоваться вебмастерами для разметки страниц так, чтобы поисковые системы Google, Yandex, Bing и Yahoo! могли “читать” информацию на них.

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

    Микроданные . Используется с HTML и Schema.org для описания специальных данных. Например, если это фильм, то мы можем специально прописать его название, жанр, режиссера, актеров, рейтинг и т.п.

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

    RDFa . То же используется вместе с сущностями, свойствами и элементами. Используется не так часто, как микроданные и микроформаты, так как уступает им в функциональности.

Отметим, что в данной статье мысделаем акцент на микроданных и словаря Schema.org.

Описываем данные с помощью Schema.org

Теперь, когда Вы примерно представляете, что такое микроразметка, начнем углубляться в детали. Для начала поговорим о том, как описать данные с помощью Schema.org. Почему мы выбрали Schema.org и микроданные? Дело в том, что это наиболее популярный, надежный и эффективный способ микроразметки. Он не так сложен как RDFa и, к тому же, рекомендован Google.

Микроформаты и Schema.org

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

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

    Itemtype . Этот атрибут работает в паре с itemscope и определяет тип выделенной сущности с помощью иерархии типов в Schema.org.

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

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

Властелин колец: Возвращение короля

Режиссер: Питер Джексон Фэнтези Смотреть фильм

Выделим блок, который посвящен фильму, с помощью itemscope.

Властелин колец: Возвращение короля

Режиссер: Питер Джексон Фэнтези Смотреть фильм

Теперь поисковой робот будет понимать, что всю информацию между

и
надо рассматривать как одно целое.

Властелин колец: Возвращение короля

Режиссер: Питер Джексон Фэнтези Смотреть фильм

Властелин колец: Возвращение короля

Режиссер: Питер Джексон Фэнтези Смотреть фильм

Обратите внимание, что тегами с атрибутом itemprop в большинстве случаев надо оборачивать конкретный текст. В примере выше мы добавили дополнительную пару тегов , чтобы поисковые роботы не рассматривали слово “режиссер” в качестве самого режиссера.

Что еще нужно знать о микроданных и Schema.org?

    в Schema.org есть много схем с заданными свойствами (о самых популярных из них мы поговорим ниже). Их количество постепенно увеличивается.

    основных свойств четыре (в реальности их гораздо больше — см.свойства Thing): name, description, URL и image. Дочерние сущности и схемывсегдаполучают свойства “родителей”.

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

    при разметке надовсегдаиспользовать ожидаемый тип и текст, обращайте внимание на вложенные сущности, дочерние и родительские типы. Например, у Вас есть цепочка Thing — Place — TouristAttraction. Задавая схему TouristAttraction, будьте готовы использовать свойства, принятые в данной цепочке. Если этого не делать, то поисковые системы просто не смогут “понять”, что Вы им хотели сказать.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Популярные схемы микроразметки

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

Итак, какие же схемы микроразметки являются самыми популярными и могут помочь SEO? Если верить данным, предоставленным компаниейSimilarTech , то получается, что самыми популярными в мире являются схемы:

  • AggregateRating Schema

  • SearchAction Schema

    MobileApplication Schema

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

Offer Schema

На русский язык “offer” переводится “предложение”. Фактически, суть Offer Schema состоит в предложении чего-то. Например, сайт предлагает купить такую-то книгу или фильм, арендовать квартиру, посмотреть сериал онлайн, отремонтировать машину и т.п. Одно из таких предложений Вы можете увидеть на расширенном сниппете ниже.

Пример сниппета

Offer Schema является дочерней сущностью Intangible, которая, в свою очередь, закреплена за самой общей сущностью Thing.

WebPage Schema

WebPage Schema, как можно догадаться, является схемой микроразметки для отдельной веб-страницы. В Schema.org предполагается, что эта схема может “захватывать” некоторые присущие странице свойства (например, breadcrumb — хлебные крошки). Даже если свойство не выделено в блоке микроразметки с помощью itemscope, но находится на странице, то поисковые боты все равно “поймут”, что оно относится к блоку. Отметим, однако, что лучше задавать свойства отдельно.

WebPage Schema является дочерней сущностью CreativeWork, которая, в свою очередь, закреплена за самой общей сущностью Thing.

AggregateRating Schema

AggregateRating Schema — это средний рейтинг сайта или веб-страницы, который вычисляется на основе различных оценок и отзывов, оставленных клиентами и пользователями. Отображается в виде звездочек; рядом указывается количество отзывов, на основе которых вычислен рейтинг. Из этого следует, что AggregateRating Schema всегда используется в паре с Review Schema. Смотри расширенный сниппет ниже.

Пример сниппета

AggregateRating Schema является дочерней сущностью Rating.

Product Schema

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

пример сниппета

Product Schema является дочерней сущностью Thing.

Review Schema

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

пример сниппета

Review Schema является дочерней сущностью CreativeWork, которая, в свою очередь, закреплена за самой общей сущностью Thing.

Rating Schema

Rating Schema позволяет отобразить рейтинг сайта или веб-страницы в цифровом выражении. Например, рейтинг такого-то ресторана — 3,5 звезды, а такого-то магазина — 4 звезды. В отличие от AggregateRating, Rating вычисляется только на основе оценок и без учета отзывов.

Rating Schema является дочерней сущностью Intangible, которая, в свою очередь, закреплена за самой общей сущностью Thing. Rating — родительская схема для AggregateRating Schema.

SearchAction Schema

SearchAction Schema позволяет совершить поиск по ресурсу прямо из выдачи. Топовые сайты в США делают акцент именно на этой схеме (по даннымSimilarTech). Смотри расширенный сниппет ниже.

пример сниппета

SearchAction Schema является дочерней сущностью Action, которая, в свою очередь, закреплена за самой общей сущностью Thing. SearchAction — родительская схема для FindAction Schema.

MobileApplication Schema

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

Mobile Application Schema является дочерней сущностью SoftwareApplication, которая, в свою очередь, является дочерней сущность CreativeWork, а та закреплена за Thing.

WebSite Schema

WebSite Schema — схема для отображения набора связанных веб-страниц или других элементов, которые размещены на едином веб-домене и имеют один URL.

WebSite Schema является дочерней сущностью CreativeWork, которая, в свою очередь, закреплена за самой общей сущностью Thing.

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

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

    Structured Data Testing Tool . Этот инструмент от Google прост в использовании и позволяет довольно быстро проверить разметку как на целом сайте, так и в части HTML-кода.

    Валидатор микроразметки . Этот инструмент от Yandex работает так же, как и вышеописанный Structured Data Testing Tool: введите URL сайта или часть HTML-кода, нажмите кнопку “Проверить” и наслаждайтесь.

    Structured Data Linter . Этот инструмент в целом похож на два вышеописанных. Единственным отличием является возможность загружать файл с HTML-кодом сайта для анализа.

Надеемся, что эти инструменты принесут Вам пользу.

Вывод

Итак, что можно сказать напоследок? Микроразметка уже здесь, ей активно пользуются все больше и больше вебмастеров и SEO специалистов для более грамотной и эффективной поисковой оптимизации. Микроразметка хороша для всех: пользователь получает доступ к более релевантной и структурированной информации; поисковые боты лучше “читают” и индексируют сайт; вебмастер и SEO специалист получают удовольствие от возросшего трафика и большего количества правильных посетителей.

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

С чего начать? Если Вы читаете данную статью, то, думаем, очевидно, что начать надо с 9 схем микроразметки, которые были описаны выше. Если у Вас нет времени на все 9, то остановитесь хотя бы на самых нужных для Вашего бизнеса. Например, если Вы держите Интернет-магазин, то логичнее будет начать с Offer, Product, Review, Rating и SearchAction. Если Вы владеете корпоративным сайтом, то начните с WebSite и WebPage. В общем, решать Вам.

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

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

Загрузка...