static_rocket_468x60.jpg

Сниппет hand made или как выделить сайт в поиске.

schema.org

Всем известно что поисковики составляют сниппеты из содержания страницы, не обращая внимание на description. Использование мета тегов было когда-то не плохим способом обратить на себя внимание в серпе. Лишившись одного способа выделиться у нас появился другой. Кроме текста в сниппет может попасть картинка, рейтинг(звёзды) и другая дополнительная информация.

На Webonlife есть статья о разметке Open Graph и Twitter Card для соц. сетей. Используя специальные атрибуты тегов в разделе head мы указываем соц. сетям что нужно брать в сниппет. Что-то вроде мета тегов для FB. Для поисковиков тоже есть специальная микроразметка указывающая какие данные могут быть отражены в сниппете, но в отличии от Open Graph располагается она в теле документа и размер словаря гораздо больше.

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

schema.org появилась в результате объединённых усилий Google, Microsoft и Yahoo. Целью было создание единой схемы разметки страниц. Такая разметка помогает поисковикам находить нужную информацию на странице и создавать расширенные сниппеты.
Если вы знакомы с HTML то разобраться как это работает не составит труда. Вся разметка располагается в тегах, выполняя роль дополнительных меток говорящих поисковикам что находиться внутри тега.
Первая метка это атрибут itemscope. Своим присутствием указывает что в теге содержится объект из словаря schema.org. Как правило этот атрибут используется с другим itemtype. itemtype указывает тип элемента, в качестве параметра выступает url где описан данный тип элемента.

  1. <div itemscope itemtype="http://schema.org/Person" >
  2. ...
  3. </div>

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

  1. <div itemscope itemtype="http://schema.org/Person" >
  2. ...
  3. <span itemprop="email">mail@mail.ru</span>
  4. ...
  5. </div>

Объекты могут быть вложены один в другой. Например в описании организации может быть свойство основатель организации, которое в свою очередь может являться типом Person со своими свойствами. Подробную инструкцию и полный список поддерживаемых типов смотрите на сайте schema.org.

schema.org на вашем сайте

Чтобы добавить schema.org на сайт воспользуемся модулем microdata. Есть замечательное видео в котором Lin Clark рассказывает как работать с этим модулем. Видео на английском но разобраться можно. В общих чертах процесс добавления проходит следующим образом. Определяете тип данных для типа контента, а для полей свойства. Обратите внимание что для типа данных нужно записывать адрес страницы на сайте schema.org где описан соответствующий тип, а для свойств достаточно названия свойства.

Эта статья была в какой-то степени продолжением статьи о fivestar поэтому процесс разметки рейтинга опишу отдельно, тем более что он немного отличается от того что показано в видео. Дело в том что модули fivestar и microdata дружат и позволяют настроить микроразметку в один клик. Для этого переходим в управление полями и редактируем поле голосования. Отмечаем внизу schema.org и кликаем на кнопку. Все настройки заполнятся автоматически.

микроразметка для рейтинга

Также разметку можно произвести перейдя конфигурация→веб службы→microdata setting.

Если вы по каким-то причинам не хотите или не можете изменить код сайта воспользуйтесь маркером Гугла. В этом случае красивый снипет будет только в Гугле, у Яндекса такого инструмента к сожалению нет. Подробнее о маркере https://support.google.com/webmasters/answer/2692911

И на последок ссылки на страницы где вы можете проверить свою разметку
webmaster.yandex.ru/microtest.xml
www.google.com/webmasters/tools/richsnippets
Буду рад если поделитесь своими способами улучшения сниппета

оценить статью: 
Средняя: 4.5 (8 оценок)

Комментарии

13
Аватар пользователя Надежда Давыдова

Надежда Давыдова пн, 06/09/2014 - 21:55

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

Аватар пользователя Oleg

Oleg вт, 06/10/2014 - 21:57

Для WordPress есть модуль так что в код лезть не обязательно. Только сначала попробуйте на каком нибудь тестовом сайте. Мало ли что

Аватар пользователя Сергей

Сергей ср, 10/29/2014 - 16:46

Если можно, просьба...
Как правильно совместно и одновременно использовать несколько разметок? именно для ПС.

schema.org хоть и обще признана, и как бы обще принята, НО она самая молодая, и дяди ЯША с ГОШЕЙ не совсем её отображают!!! или вообще не отопражают на просторах РУНЕТА... (покрайней мере ограничено). Вот и вопрос: может есть смысл в этот переходной момент, использовать несколько разметок? 2-3? так чтоб они неконфликтовали, и чтоб ПСы уж наверняка поняли что на сайте, и как это показывать...

Аватар пользователя Oleg

Oleg ср, 10/29/2014 - 18:00

Насколько мне известно всё у них нормально с отображением. Гугл один из инициаторов создания разметки. Яндекс тоже принимает участие. Если посмотреть в помощи вебмастера микроразметку то schema рулит. например для интернет магазина http://help.yandex.ru/webmaster/supported-schemas/goods-prices.xml

Конфликтовать разметки не будут так как по разному размечают документ, но на мой взгляд это лишнее

Я использую две разметки только потому что соц сети не понимают микроразметку им нужна своя.

Аватар пользователя Сергей

Сергей ср, 10/29/2014 - 18:16

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

А Гугл, хоть и один из инициаторов данной разметки, свои примеры разметки в schema.org выкладывает с использованием data-vocabulary.org https://support.google.com/webmasters/answer/146750

Дело в том, что я разметку сделал очень давно, но изменений сниппета в результатах выдачи не видно до сих пор. Хотя и Яша в валидаторе и Гоша в инструментах проверки структурных данных ошибок не видят. + проверял на многих других ресурсах, и все говорят ОК.

Аватар пользователя Oleg

Oleg ср, 10/29/2014 - 18:46

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

Кстати здесь https://support.google.com/webmasters/answer/99170?hl=ru&ref_topic=4600154 гугл рекомендует использовать микроданные

 

Аватар пользователя Сергей

Сергей ср, 10/29/2014 - 18:58

О чем я и говорил Выше!

Да гугл рекомендует микроданные, и если нажать на ссылку "микроданнуе"на странице которую вы предоставили, то пример будет в data-vocabulary.org.

Если на предоставленной Вами странице Выбрать пример разметки Продукт (товар), то на следующей же странице будут рекомендовать schema.org, и пример опять же в data-vocabulary.org.... Я вот об этом говорю.....
Но всёравно большое спс за потраченное время на переписку, У Вас очень интересный блог, буду его читать время от времени...

Аватар пользователя Галина

Галина чт, 02/18/2016 - 19:50

Тоже недавно решила заморочиться микроразметкой. Но морочусь я ооочень медленно) Сначала меню разметила, через месяц кое-что в статьях. Нудная она)

Аватар пользователя Oleg

Oleg пт, 02/19/2016 - 09:23

Размечал статьи из-за снипета. Теперь разметка стала фактором ранжирования и придётся добавлять новые обекты и свойства. Впоследнне время куда ни плюнь всё фактор ранжирования уже не знаеш что убирать что оставлять.

Аватар пользователя KolambaPync

KolambaPync пн, 04/18/2016 - 04:46

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

Аватар пользователя Андрей

Андрей ср, 05/04/2016 - 20:16

Здравствуйте! Пожалуйста подскажите, где я ошибся в разметке: http://pixmedia.ru/neyming-razrabotka-nazvaniya-kompanii-brenda-tovara-ili-uslugi
Сайт на друпале, использовал модули: Schema.org, fivestar, voting API. Проиндексировались точно, смотрел через Search Console. В ручную разметить нет возможности, статей 200+ Заранее спасибо за ответ!

Аватар пользователя Oleg

Oleg ср, 05/04/2016 - 22:54

Не заметил у Вас микроразметки. При проверке в вебмастере должна быть что-то вроде

aggregaterating

  • aggregaterating
    • itemType = http://schema.org/AggregateRating
    • ratingvalue = 4.3
    • ratingcount = 6

Аватар пользователя Oleg

Oleg ср, 05/04/2016 - 22:59

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

Добавить комментарий