Микроразметка в яндексе. Адреса и организации. Как удалить отдельный тег
А также разобрали, в каких продуктах она используется .
Теперь мы решили показать, как микроразметка участвует в жизни существующих сайтов: сделали обзор всех возможностей, которые она дает интернет-магазинам, сайтам СМИ и видеохостингам, и узнали, насколько они пользуются спросом у крупнейших проектов рунета.
Люди, которые отвечают за разработку и всю техническую часть таких сайтов, как Holodilnik.ru , Ozon.ru , Lenta.ru , Interfax.ru и Ivi.ru , ответили на вопросы о том, как на практике происходит внедрение микроразметки и каких результатов она позволяет добиться. А мы со своей стороны рассказали, какие типы мы бы порекомендовали таким сайтам и для чего.
Интернет-магазиныДенис Егоров, руководитель направления интернет-маркетинга Holodilnik.ru :На сайте holodilnik.ru мы решили внедрить сразу два типа разметки, Open Graph и 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% страниц, известных Яндексу, имеют семантическую разметку. Ответы представителей сайтов - небольшая, но очень показательная часть опыта использования разметки. Если у вас он тоже есть - делитесь в комментариях!
Мы благодарим наших партнеров за ответы и содействие в составлении этой статьи.
На этом серия обучающих постов, посвященных семантической разметке, подходит к концу. Мы писали о различных словарях и о стандартах синтаксиса , о продуктах на основе разметки , а в этой статье рассмотрели живые примеры сайтов Рунета, использующих и рекомендующих разметку.
Надеемся, что эти статьи помогли вам понять, что из себя представляет семантическая разметка и какую пользу может принести вам. В свою очередь, мы, команда семантического веба в Яндексе, будем продолжать создавать продукты и инструменты, способные помочь в работе с семантической разметкой, и продолжать писать о ней.
Теги: Добавить метки
26.05.2017 Время прочтения: 30 минут
Одно из самых сокровенных желаний владельцев сайтов и SEO-специалистов - это выделить свой сайт в результате поиска, чтобы он отличался от конкурентов, и пользователи чаще переходили на него. Самый действенный метод достижения этой цели – работа со структурированными данными. В этой статье мы постараемся разобраться, что же такое структурированные данные и как их можно внедрить на свой сайт.
С чего все началось?Единая схема форматов семантической разметки сайтов, которую мы сейчас все знаем и применяем, появилась в 2011 году при поддержке таких гигантов, как «Google», «Yahoo!» и «Microsoft» (позже присоединился четвертый игрок – «Яндекс»). До этого разметка данных существовала в разных форматах и не было единой структуры. К примеру, у «Yahoo!» был сервис под названием «SearchMonkey», который уже в 2008 г. позволял размечать данные на странице и формировать уникальные сниппеты в поисковой выдаче своего поисковика.
Перед корпорациями стояла глобальная цель – разработать общий формат структурированных данных, которые бы улучшали отображение сайтов в поисковых машинах и повышали качество поиска. Поставленных задач инициаторы добились, в результате чего на свет появился словарь schema.org, который объединяет в себе огромное количество правил для микроразметки данных на сайте.
Что такое структурированные данные?Структурированные данные – это информация, которая представлена в единой и корректной форме с соблюдением определенного комплекса правил.
Расписывать принципы работы с каждым словарем мы не будем, разберем подробнее лишь три из них: Json-ld, Opne Graph и schema.org.
Начнем с популярного словаря по микроразметке schema.org. Результат коллаборации Google, Yahoo!, Microsoft и Яндекса активно развивается и регулярно обновляется и по сей день. На момент создания статьи в словаре имеются описания для 589 типов документов, 860 свойств объектов и 114 специфичных значений. Полный список всех свойств перечислен в виде разветвленной иерархии на этой странице.
Основной высший тип сущности в словаре schema.org - Thing , который, в свою очередь, делится на несколько других подтипов. Некоторые из них:
- CreativeWork – общий набор правил для описания творческой деятельности: статьи, книги, фильмы, фотографии, программное обеспечение, и т.д.;
- Event – набор правил для событий, которые произошли или произойдут в определенный период времени: встречи, концерты, выставки и т.д.;
- Intangible - сервисный класс, который включает в себя несколько нематериальных вещей, таких как размеры, рейтинги, описания рабочих вакансий, услуг и т.д.;
- Organization – набор правил для разметки организаций, полный список разных видов бизнеса перечислен на странице localBusiness . Также можно посмотреть этот список в справке Яндекса https://yandex.ru/support/webmaster/supported-schemas/address-organization.html ;
- Person – сущность используется для описания живых, умерших, вымышленных личностей или персонажей;
- Place – набор правил для чего-то, что имеет фиксированное физическое положение (здание, парк, памятник и т.д.);
- Product – это все, что создается для продажи. Например, пара обуви, билет или автомобиль.
Каждый подтип включает в себя большое количество тегов для описания, поэтому практически любой вид бизнеса найдет для себя необходимый вид разметки.
У большинства тегов в словаре есть варианты применения в виде примерного куска HTML-кода или JSON-LD скрипта. Ниже мы рассмотрим примеры разметок страницы со статьей (article), товаром (product) и организацией (organization).
Шаблон микроразметки статьи с помощью schema.orgЧаще всего размечаются такие микроданные как URL, datePublished, dateModified, headline, image, author, publisher и др. Рассмотрим на конкретном примере:
Примеры микроразметки статьи с помощью schema.org ИМЯ ФАМИЛИЯ "ШИРИНА ЛОГО В ПИКСЕЛЯХ" height= "ВЫСОТА ЛОГО В ПИКСЕЛЯХ" src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ ЛОГОТИПА" alt= /> НАЗВАНИЕ СТАТЬИ ОПИСАНИЕ СТАТЬИ ИМЯ АВТОРА ЗАГОЛОВОК H1 "ШИРИНА ПРЕВЬЮ В ПИКСЕЛЯХ" height= "ВЫСОТА ПРЕВЬЮ В ПИКСЕЛЯХ" src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ ПРЕВЬЮ" alt= "АЛЬТЕРНАТИВНОЕ ОПИСАНИЕ ПРЕВЬЮ" /> ОСНОВНОЙ ТЕКСТ СТАТЬИ ДОЛЖЕН БЫТЬ ЗДЕСЬ
Подобной схемы придерживаются большинство размеченных статей. Стоит обратить внимание, что в данном примере часть тегов указываются в разделе (мета-описание и ссылка на автора в g+), а остальная часть прописывается в теле HTML-документа. Некоторые теги использовать не обязательно, к примеру, статья отлично будет себя чувствовать и без разметки тегами articleBody или publisher , но тогда вряд ли пройдет проверку на валидность в инструментах Яндекса или Google .
Изображение 3. Пример страницы в выдаче с микроразметкой статьи в Google. Рядом со статьей отображается дата публикации.
Изображение 4. Пример страницы в выдаче по тому же запросу, что и на изображении 3, только в Яндексе. Дата отображается справа, сверху указывается дата публикации или создания, а ниже дата изменения.
Шаблон микроразметки товарной карточки с помощью schema.orgСледующий вид микроразметки, который мы рассмотрим, будет product или, другими словами, семантическая разметка товарной карточки.
СОДЕРЖАНИЕ H1 "ССЫЛКА НА ИЗОБРАЖЕНИЕ" title= "СОДЕРЖАНИЕ H1" > СТОИМОСТЬ В РУБЛЯХ УКАЗЫВАЕМ ДОСТУПНОСТЬ ТОВАРА ОПИСАНИЕ ТОВАРА
Уделяйте особое внимание формату цен, так как большинство ошибок в микроразметке товарных карточек кроется именно там. Текстом мы можем писать любую стоимость в любом формате, а непосредственно в самом теге price цену указываем строго в денежном формате, иначе поисковики проигнорируют эту строку.
Изображение 5. Пример из выдачи Google с указанием цены в формате «ОТ» и «ДО».
Шаблон микроразметки организации с помощью schema.orgПоследний шаблон, который мы рассмотрим, – это разметка организации (organization). Обычно эту разметку применяют для структурирования информации на странице контактов.
НАЗВАНИЕ ОРГАНИЗАЦИИ УЛИЦА , ГОРОД , ОБЛАСТЬ . "ССЫЛКА НА ЛОГОТИП" /> Телефон: НОМЕР ТЕЛЕФОНА
У schema.org весьма объемный словарь. Из-за этого во время работы с ним могут возникать трудности, но далеко не все теги в разметке обязательны и от большинства можно отказаться. В приведенных примерах я указал самые основные теги, которые могут использоваться во время работы с разметкой schema.org, однако их может быть намного больше.
У Google есть специальный инструмент для разметки страниц по словарю schema.org. С его помощью создавать разметку страниц намного проще.
Изображение 6. Пример из Яндекса. Дополнительная информация об организации отображается под описанием страницы и может быть внедрена как вручную, с помощью разметки, так и с помощью сервиса Яндекс.Справочник.
Плюсы и минусы микроразметки schema.org- Большой словарь, который постоянно обновляется;
- Поддерживается всеми популярными поисковыми системами;
- Код не скрыт скриптами и целиком находится в контенте страницы;
- Улучшает отображение сниппетов в поисковой выдаче;
- Можно найти разметку практически для каждого сайта;
- Существуют плагины для автоматизации формирования микроразметки;
- Активно развивается и дополняется.
- Большое количество схем микроразметки может отпугнуть неподготовленного пользователя;
- Нужны начальные знания верстки и изменения кода страниц;
- Усложняет HTML-код, что замедляет разработку сайта;
- Вся официальная справочная документация на английском языке;
- Не для всех свойств есть примеры использования на официальном сайте.
В работе с микроразметкой schema.org пригодятся такие сервисы, как:
- Инструмент для проверки структурированных данных от Google;
- Помощник по микроразметке страниц по словарю schema.org от Google. По итогу получаем HTML-код страницы с уже внедренной микроразметкой;
- Проверка семантической разметки от Яндекса;
- Официальный сайт разметки;
- Неофициальный перевод сайта schema.org на русский язык;
- «All In One Schema.org Rich Snippets », «Wprichsnippets.com », «Schema App Structured Data » - плагины для WordPress, которые формируют семантическую разметку schema.org автоматически;
- Notepad++ - или любой другой текстовый редактор.
Данный протокол разработал «Facebook» для улучшения отображения сниппетов ссылок с внешних сайтов в социальных сетях. Это, наверное, один из самых простых и небольших словарей микроразметки. Начать внедрение разметки можно с четырех основных свойств:
- og:title - заголовок страницы.
- og:type - тип объекта, например, «music.album»(альбом). В зависимости от типа поддерживаются и другие свойства. Все возможные характеристики тега type перечислены на официальном сайте .
- og:image - URL изображения.
- og:url - канонический URL объекта.
Все теги разметки «Open Graph» прописываются в контейнере .
Помимо основных свойств также можно указать дополнительные, которые улучшат отображение ссылок в социальных сетях:
- og:audio – URL на аудиофайл, если при открытии страницы воспроизводится музыка.
- og:determiner - слово, которое появляется перед названием этого объекта в предложении. Тип enum (a, an, the, "", auto). Если выбрано auto, потребитель данных должен выбирать между "a" или "an". По умолчанию - " " (пусто). Тег наиболее актуален для англоязычного сегмента в связи с использованием различных артиклей вида «a», «the», «an» и т.д.
- og:description – описание страницы, разрешенное количество символов от 160 до 295 знаков.
- og:locale – язык и страна. Формат отображения language_TERRITORY, по умолчанию стоит en_US. Для русскоязычного сегмента прописывается тег ru_RU.
- og:locale:alternate – альтернативный язык или страна.
- og:site_name – название сайта.
- og:video – URL видео.
Ниже представлен пример HTML-кода со всеми возможными свойствами, на практике часть из указанных тегов не указывается и хватает стандартных четырех свойств:
ЗАГОЛОВОК СТРАНИЦЫ ...
Последний вид разметки и структурирования данных, который мы рассмотрим, – JSON-LD. Расшифровывается это страшное название как «JavaScript Object Notation Linked Data». За разработку формата ответственен «Консорциум Всемирной Паутины» или, другими словами, «W3C». Данный формат выполняет все ту же функцию, что и schema.org, но немного другим способом: он структурирует данные помощью JavaScript, что в несколько раз облегчает работу.
Один из плюсов этого формата в том, что для описания данных используется словарь schema.org. Таким образом, с помощью скриптов JSON-LD мы можем описать любой вид сущностей и улучшить отображение своего сайта в поисковой выдаче, затратив на это минимальное количество времени. Причем сделать это можно без внедрения HTML-тегов в тело страницы, нужно лишь указать в контейнере , а затем расписать все необходимые условия разметки и закрыть скрипт .
Для наглядности сравним разметку schema.org и JSON-LD:
Кроссовки
Кроссовки { "@context" : "https://schema.org/" , "@type" : "Product" , "price" : "100.00" } Кроссовки
Шаблон разметки статьи с помощью JSON-LDПример разметки с помощью JSON-LD я взял на основе микроразметки статьи в schema.org из этого же материала выше. Использованы все те же свойства.
НЗАГОЛОВОК СТАТЬИ //Указывается тип скрипта, в нашем случае это ld+json { "@context" : "https://schema.org" ,//Прописывается библиотека, которой будет размечена страница "@type" : "Article" ,//Указывается тип сущности "mainEntityOfPage" : { //Прописывается ID статьи, обычно просто указывается ссылка на статью "@type" : "WebPage" , "@id" : "ССЫЛКА НА СТАТЬЮ" }, "url" : "ССЫЛКА НА СТАТЬЮ" ,//Прописывается каноничная ссылка на статью "datePublished" : "ДАТА ПУБЛИКАЦИИ" ,//Указывается дата публикации "dateModified" : "ДАТА ИЗМЕНЕНИЯ" , //Указывается дата изменения "headline" : "ЗАГОЛОВОК H1" , //Прописывается заголовок "image" : { "@type" : "ImageObject" , "url" : "ССЫЛКА НА ПРЕВЬЮ" , //Вставляется ссылка на изображение для превью статьи "height" : ВЫСОТА ПРЕВЬЮ В ПИКСЕЛЯХ , //Прописывается высота и ширина изображения в пикселях "width" : ШИРИНА ПРЕВЬЮ В ПИКСЕЛЯХ }, "articleBody" : "" , "author" : { "@type" : "Person" , "name" : "ИМЯ АВТОРА" ,//Указывается имя автора "url" : "ССЫЛКА НА ПРОФИЛЬ АВТОРА (G+, ПЕРСОНАЛЬНАЯ СТРАНИЦА НА САЙТЕ)" //Прописывается ссылка на профиль автора в Google Plus или на персональную страницу на сайте }, "publisher" : { "@type" : "Organization " , "name" : "НАЗВАНИЕ ОРГАНИЗАЦИИ" ,//Указывается название организации "logo" : { "@type" : "ImageObject" , "url" : "ССЫЛКА НА ЛОГОТИП" ,//Указывается ссылка на логотип компании "height" : ВЫСОТА ЛОГОТИПА , //Прописывается высота и ширина логотипа "width" : ШИРИНА ЛОГОТИПА } } } ЗАГОЛОВОК СТАТЬИ
Возникает закономерный вопрос: что же лучше schema.org или JSON-LD? Тут нельзя дать однозначный ответ. Работать с микроразметкой в формате JSON-LD проще и приятнее, чем все с тем же словарем schema.org в HTML-формате, но и у него есть свои минусы. Например, поисковик Google советуют использовать эту технологию для разметки своих страниц. А вот с Яндекс ом есть проблемы: данный вид разметки пока не отображается в результатах поиска из-за скриптов, хотя страницы с разметкой JSON-LD и проходят проверку на валидность.
Поисковая система Яндекс не показывает в поисковой выдаче информацию, размеченную с помощью мета-языка JSON-LD.
Изображение 8. Письмо из техподдержки Яндекса по поводу планов насчет JSON-LD. За скриншот спасибо пользователю Oleh Holovkin .
В данном случае нужно правильно расставить приоритеты. Если нужны расширенные сниппеты в Яндексе и Google, то используем старую добрую разметку schema.org; если мы ориентируемся на Запад и наша основная поисковая система только Google, то разметку JSON-LD нужно брать и внедрять без промедлений.
Плюсы и минусы микроразметки JSON-LD- Формат несколько проще по сравнению с schema.org;
- Рекомендуется Google;
- Для движка WordPress есть качественные плагины для работы;
- Благодаря JavaScript разметка «невидима» для рядового пользователя в отличие от HTML;
- Скрипт помещается только в контейнер без внедрения дополнительных строчек кода в тело сайта;
- Проходит валидацию в официальных инструментах проверки Яндекса и Google.
Те способы разметки, что перечислены выше, относятся к непосредственному вмешательству в исходный код страницы, однако есть и другие методы структурирования данных. Это Data Highlighter (Маркер) от Google и «Товары и цены» от Яндекса. С помощью этих инструментов можно напрямую из панели веб-мастеров расширить сниппеты страниц в поисковой выдаче.
Изображение 9. «Маркер» в Search Console и сервис «Товары и цены» от Яндекса.
Маркер GoogleДля того, чтобы начать разметку, нужно:
- Мероприятия
- Местные организации
- Обзоры книг
- Приложения
- Продукты
- Рестораны
- Статьи
- Телесериалы
- Фильмы
Изображение 10. Панель выбора типа информации для разметки в Search Console.
Изображение 12. Кнопка для удаления неверно определённой страницы для разметки в Search Console.
Изображение 13. Пример списка уже размеченных страниц с помощью Маркера Google.
На этом разметка с помощью Маркера Google заканчивается. В данном случае абсолютно не нужно знать HTML или JavaScript, достаточно вручную разметить каждую страницу, и Google сам обработает данные и внесет корректировки в поисковые сниппеты. Но и у Маркера есть свои плюсы и минусы.
Плюсы и минусы микроразметки с помощью Маркера от Google- Разметка без вмешательства в исходный код страниц;
- Инструмент находится непосредственно в Google Search Console;
- Страницы размечаются полуавтоматически;
- Можно группировать страницы по типам;
- Разметка будет отображаться только в поисковой выдаче Google;
- Инструмент не всегда корректно размечает информацию;
- При разметке крупного сайта много ручной работы.
Сам по себе этот инструмент не совсем относится к привычному понимаю микроразметки страниц, так как обычно в Яндексе он применяется для загрузки информации о товаре в Яндекс.Маркет в YML-формате. Как ни странно, Яша смог найти применение данному виду информации о товаре, и сейчас в органической выдаче часто встречаются сайты, размеченные с помощью этого сервиса. Главная особенность «Товаров и цен» – это отображение в поисковой выдаче Яндекса цены на товар/услугу справа от ссылки на сайт.
Изображение 14. Пример отображения цены услуги в выдаче Яндекса с подключенным сервисом «Товары и цены».
Применять сервис «Товары и цены» могут не только интернет-магазины, но и организации, которые предоставляют услуги. В данном случае придется создавать YML-документ вручную.
Итак, для того, чтобы подключить сервис «Товары и цены» в Яндексе, нужно:
Изображение 15. Яндекс предлагает ознакомиться с форматом YML и руководством по подключению.
Плюсы и минусы инструмента «Товары и цены» Яндекса
- Сильно отличает сайт от других конкурентов в поиске, увеличивает CTR;
- Пользователь до перехода на сайт получает информацию о стоимости услуги/товара;
- Помимо цены в YML-документе указываются другие параметры, которые также учитываются при формировании сниппета;
- В большинстве популярных движков сайтов генерация файла происходит в автоматическом или полуавтоматическом режиме.
- Результаты с ценами будут видны только в выдаче Яндекса;
- Выгрузка YML-документа предусмотрена не во всех CMS;
- При частой смене цен на сайте требуется регулярная генерация документа;
- Трудозатратно, если нужно разметить большое количество страниц вручную.
В отличие от Маркера Google для работы с YML-файлом потребуется следующие инструменты для работы:
- Список движков сайтов с возможностью выгрузки YML-документов;
- Генератор YML-документа для формирования файла вручную;
Внедрение разметки структурированных данных – это важный шаг, который впоследствии может повысить CTR сайта в поиске и улучшить отображение контента в поисковой выдаче. Существует несколько способов разметить свой сайт, но на сегодняшний момент самым проверенным считается внедрение разметки schema.org, так как остальные методы имеют либо ограниченный функционал, либо размечаются в пределах одной поисковой системы.
У каждого способа разметки данных есть свои достоинства и недостатки, перед началом внедрения следует трезво оценить свои возможности и выбрать наилучший вариант. Отдельные методы разметки можно комбинировать друг с другом, к примеру, Open Graph с schema.org и «Товарами и ценами» от Яндекса. И помните: наличие микроразметки на сайте не гарантирует изменение поискового сниппета в выдаче, в первую очередь это облегчает сканирование сайта поисковиками.
Статью подготовил: Абдуллин Константин, Технолог SEO-эксперт компании сайт
Размеченный сниппет со структурированной информацией притягивает внимание и повышает количество переходов на сайт со страницы поиска. Валидатор микроразметки определяет правильность прописания тегов в коде.
Сниппет с микроразметкойОтображение сниппета с микроразметкой кардинально отличается. Это будет полноценное описание с указанием адреса, телефона, часов работы, цены. Для рецептов будут отображаться фотографии. Вид сниппета зависит от типа контента.
Простой сниппет
Детальный сниппет
Есть типы контента, для которых микроразметка обязательна:
видеоролики;
фильмы;
рецепты;
мероприятия;
отзывы;
товары;
программы;
рефераты;
рестораны.
Яндекс рекомендует микроразметку Schema.org. Это стандарт семантической разметки, принятый в 2011 г. корпорациями Google, Yahoo и Bing для улучшения структурированности информации на сайте, передачи ее смысла поисковым роботам.
Он использует микроданные для семантической разметки документа.
Микроданные - теги, употребляемые в языке HTML5.
Имеет множество сущностей, список которых пополняется. Необходимо применять специальные сущности для разных типов страниц и информации.
Соответствие контента и сущностей
Мероприятие |
|
Организация |
|
Товарное предложение |
|
Несколько товаров |
|
Ресторан |
|
Картинки |
|
Программы |
SoftwareApplication |
Мобильные приложения |
MobileApplication |
Интернет-программы |
|
Вопросы и ответы |
Question и Answer |
Как делают микроразметку
Прописывают ее прямо в html-коде. Используют три основных атрибута:
Itemscope – указывает роботу о присутствии микроразметки.
Itemtype - описывает тип сущности.
Itemprop - указывает свойства сущности.
Первые два атрибута применяются совместно. Для itemprop прописывают значения разных полей. Стандартные: name, description, image, url. Другие поля - специальные и зависят от сущности контента.
Пример кода с разметкой для организации.
Проверяем корректность микроразметки в Яндексе Еще в 2012 г. Яндекс запустил инструмент, с помощью которого можно проверить микроразметку. Валидатор доступен в «Яндекс.Вебмастер».
Нужно скопировать адрес страницы или вставить часть кода, если сайт еще не запущен.
После проверки валидатором доступен перечень несоответствий, которые делятся на ошибки и предупреждения. Яндекс публикует расшифровку результатов. Валидатор микроразметки от Яндекса - не единственный. Также можно проверить с помощью validator.ru и Structured Data Linter. Однако Яндекс поддерживает микроформаты, микроданные, RDFa, OpenGraph и рекомендуемую schema.org, а также проверяет на соответствие требованиям своих сервисов и партнерской программы.
Используя язык микроразметки на страницах своего сайта у Вас есть отличная возможность уже в выдаче обратить на себя внимание потенциального клиента и привлечь ещё больше трафика из поиска на свой сайт. Микроразметка позволяет направить информацию, представленную на странице, поисковым роботам для соответствующей обработки . Как следствие, в выдаче пользователю открываются дополнительные данные о компании, что позволяет найти всё самое актуальное быстро и просто.
Словари для микроразметки начали создаваться сразу двумя разными источниками: Open Graph и Schema.org. Родоначальниками Open Grapf стали сотрудники facebook. Основная цель, которую они преследовали создавая данный словарь - сделать так, чтобы любой сайт мог быть частью социальной сети facebook и корректно в ней отображаться. Равным образом Schema.org создавалась поисковыми системами для того, чтобы можно было делать удобные сниппеты с данными.
Так что же такое микроразметка?Микроразметка — единый язык семантической оптимизации, который одинаково понимают и интерпретируют поисковые роботы Google , Яндекс , Bing , Yahoo . Этот язык включает в себя определённые специальные теги, например, такие как , и их содержимое. С помощью микроразметки можно показать роботам, что определенный текст или другие элементы на странице важны и принадлежат к определенному типу данных.
Например, на странице « Контакты » компании X стоит обозначить микроразметкой блок с контактными данными. Тогда, на запрос пользователя «контакты компании X» робот безошибочно покажет нужную страницу и нужные данные. Грамотное продвижение сайта - залог эффективного привлечения клиентов .
Начнем со словарейКак уже упоминалось выше, наиболее распространенными словарями микроразметки являются Open Graph и Schema.org .
По статистическим данным Яндекса известно, что словарь Open Graph используют 15% всех сайтов рунета. Этот показатель является преобладающим среди всевозможных словарей для микроразметки. Сегодня разметку Open Graph понимает не только facebook, как это планировалось сначала, но и многие другие популярные социальные сети, такие как Google+, Twitter, Вконтакте и т.д. На своем официальном сайте создатели Open Graph заявляют, что создание данного словаря - это возможность представления данных веб-страницы как социальных граф. Стоит отметить, что язык строился на основании уже существующих технологий.
В свою очередь, язык микроразметки Schema.org создавался совместно с крупнейшими поисковыми компаниями Google, Yandex, Bing, Yahoo!. Основная цель, которую преследовали разработчики - дать пользователю возможность увидеть в сниппете выдачи дополнительные данные о компании не заходя на сайт, и, таким образом, сделать поиск более быстрым и удобным. Со Schema.org сниппет содержит более полное описание страницы, может включать рейтинг, выводить стоимость «от и до», включать разметку хлебных крошек и т.д.
Если рассмотреть принцип работы словаря микроразметки Schema.org более детально, то можно увидеть, что веб-страница представляет собой схему из разных типов данных. Каждый такой тип соединен с набором свойств. Типы иерархически организуются в схемы. На официальном сайте Schema.org можно найти утверждённые и действующие типы и их свойства. Для примера рассмотрим alternateName , description , image .
В свойстве alternateName, в основном, излагается текстовая информация, в которой указываются псевдонимы (алиасы) описываемого объекта. В свойстве description представляется описание того объекта, о котором идет речь, а в image может отображаться изображение или ссылка на изображение товара (услуги) о котором(ой) идет речь.
Словарь включает различные свойства, содержимое и атрибуты. Для каждого из них используется свой тег:
- itemscope - описывает каждый блок отдельно, позволяет описать информацию на уровне сущности;
- itemtype - указывает тип сущности;
- itemprop - позволяет указать дополнительные свойства. Например, сущность — кинопремьера. В таком случае можно указать название, дату, место проведения.
Помимо Open Graph и Schema.org . существуют и другие, менее популярные словари:
- FOAF (Friend of a Friend) - словарь основан на идее связей между людьми, вещами, их отношением друг к другу;
- Data-Vocabulary.org - словарь разрабатывался командой Google до Schema.org. На сегодня разработка данного словаря остановлена, а разработчики Data-Vocabulary.org перешли в Schema.org;
- Dublin Core - словарь, созданный для библиотечных нужд в далеком 1995 г., имеет набор базовых параметров;
- Good Relations - словарь, созданный для описания товаров из сферы торговли в интернете, позволяет описывать товар, его цену, место, где его можно приобрести.
Как мы уже говорили, чаще всего микроразметка используется для улучшения сниппета сайта в выдаче поисковых систем, но это далеко не все ее возможности. Далее мы более подробно разберем пользу семантической разметки для контента разных типов сайтов.
Интернет-магазинКак правило, интернет-магазин состоит из каталога товаров/услуг, продуктовых страниц, информации о доставке и оплате, контактов. Разместив эти данные в сниппете , можно не только улучшить представление пользователя о товаре/услуге на этапе поиска, но и повысить вероятность того, что он перейдёт на сайт интернет-магазина.
Товарные страницыВ Schema.org для разметки товарных страниц используются схемы Product и Offer или AggregateOffer в Schema.org/Product . Информация продуктовых страниц может быть представлена в виде структурированных сниппетов с описанием товара и ценой в выдаче Яндекса.
Для этого необходимо в коде указать поля name, offers, price, pricecurrency и т.д. Например:
КонтактыКонтакты размечаются при помощи свойства Organization . Эта разметка позволяет сайту отображаться при поиске пользователем на Яндекс Картах, а также позволяет компаниям попасть в справочник Яндекса.
ОтзывыЕсли на страницах товаров есть отзывы, их также можно разметить при помощи свойства AggregateRating в Product . В результате в выдаче Google в сниппете появится рейтинг и отзывы:
Код выглядит следующим образом:
КартинкиПоиск по картинке дает возможность увеличить трафик на сайт при помощи визуализации. Для того, чтобы попасть в поиск по изображениям Google и Яндекс, необходимо применить на сайте микроразметку schema.org/ImageObject и указать ссылку на изображение, его название, описание, размеры и подпись.
Код выглядит следующим образом:
А чтобы пользователи могли лайкать и делиться Вашим контентом в социальных сетях, необходимо установить виджет. Виджет - это небольшой анонс внешней ссылки с изображением и описанием. Для того, чтобы данная информация не искажала исходный материал и корректно отображалась на странице, необходимо использовать словарь микроразметки Open Graph. В коде нужно будет указать заголовок, картинку и описание:
Информационные порталы и СМИМикроразметка для СМИ - чрезвычайно значимый элемент оптимизации. Информационные и новостные ресурсы проходят ранжирование и индексацию специальными быстророботами. Чтобы ускорить этот процесс используют семантическую разметку.
Новостные страницы в большинстве своем используют мультимедийный контент. Поэтому, наиболее часто используемый язык микроразметки Schema.org/Article размечается следующими атрибутами:
- 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» - изображение.
Для сайтов с внушительным количеством видеоконтента, необходима разметка роликов при помощи типа VideoObject от Schema.org или расширения Open Graph. Вследствие такой разметки, доступна следующая информация о ролике на страницах поисковой выдачи: заставка, заголовок, текстовое описание, продолжительность, возможность предварительного просмотра, авторские права и прочее.
Соответственно, код будет представлен следующим образом:
Также, не стоит забывать, что не всегда пользователи ищут фильм конкретно по названию. В поисковую строку они могут вводить имя актёра или режиссёра, к примеру. Поэтому, для того, чтобы сайт показывался в выдаче по данным запросам, необходимо использовать разметку Schema.org/Movie , которая позволит получить структурированный сниппет в Яндексе. Для этого необходимо указать подробные данные о фильме: название, жанр, описание, актеров и т.д.
Для коммерческих сайтов, помимо уже описанных выше микроразметок отзывов, картинок, видео и контактов, можно разметить раздел с вопросами и ответами (если такой имеется на сайте), чтобы привлечь еще и низкочастотный трафик из поиска.
Для этого, в коде данные необходимо размечать с помощью атрибутов Question и Answer от Schema.org:
Адекватность семантической разметки на страницах сайта можно проверить при помощи Валидатора микроразметки от Яндекса или Google . Они поддерживают все известные форматы микроразметки, в том числе OpenGraph и Schema.org.
Schema.org - это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года.
Цель семантической разметки – сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного её представления в результатах поиска.
Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов и не требует создания отдельных экспортных файлов.
Используя семантическую разметку, вы можете улучшить представление сниппета вашего сайта в результатах поиска.
Сравните сниппеты в поисковой выдаче для страницы сайта, участвующего в партнерской программе Яндекс.Словарей – неразмеченного и размеченного семантической версткой.
Стандарт представляет из себя набор классов, описывающих всевозможные сущности и их свойства. Сейчас их уже несколько сотен. Постоянно идет работа по улучшению стандарта, добавляются новые свойства, уточнятся существующие.
Познакомиться с описанием стандарта можно на официальном сайте в разделе документация .
Также существует неофициальный и пока неполный перевод стандарта на русский язык на сайте: http://ruschema.org/ .
Основные принципы разметкиЛюбая разметка Schema.org производится в два шага:
Оборачивание описания определенного типа в контейнер с указанием схемы разметки:
...
Разметка отдельных свойств с указанием на конкретное свойство схемы:
Льва Толстого, 16
Документ без разметки Яндекс Контакты: Адрес: Льва Толстого, 16, 119021, Москва, Телефон: +7 495 739–70–00, Факс: +7 495 739–70–70, Электронная почта: [email protected] Документ с разметкой Schema.org Яндекс Контакты: Адрес: Льва Толстого, 16 119021 Москва, Телефон:+7 495 739–70–00, Факс:+7 495 739–70–70, Электронная почта: [email protected] Как начать использовать schema.org Инструменты внедрения микроразметки Как Яндекс использует размеченные данныеСемантическая разметка контента используется различными сервисами Яндекса:
- Разметка рецептов помогает Поиску формировать специальные сниппеты для страниц с такой разметкой.
- Разметка описаний фильмов помогает Поиску формировать специальные сниппеты для страниц с такой разметкой.
- Разметка творческих работ помогает Поиску формировать специальные сниппеты для страниц с такой разметкой.
Разметка товаров и их стоимости
Разметка информации о программах (приложениях, компьютерных программах, играх и т. д.) помогает Поиску формировать специальные сниппеты для страниц с такой разметкой.