Микроразметка сайта для поисковых систем Яндекс и Google в формате Schema.org, JSON-LD и Open Graph. Разметку старался делать без js, т.к. Яндекс ее не учитывает. Микроформат Schema.org подходит для Яндекс/Google. Преимущество данного метода - не нужно ждать бота, который придет, просканирует страницу с включенным js и поймет что там находится. Ускоряет обработку данных в микроданных.   Всем привет. Меня зовут Толстенко Александр. Я частный SEO специалист. В сфере разработки и продвижения бизнеса в интернете я с 2009 года. Ознакомиться с другими статьями и кейсами, можно в профиле habr.  Занимаясь SEO продвижением одного крупного СМИ портала, была необходимость собрать по максимуму определенные виды микроразметок и внедрить их на сайт, чтобы Яндекс и Google корректно понимали какой контент находится на сайте и данные в ней побыстрее попадали в сниппеты результатов выдачи, делая сайт заметным на поиске.  У Яндекса есть проблемы с пониманием JSON-LD, а Google сканирует сайт не сразу с включенным js, из-за чего данные в микроформате не сразу учитываются роботом.  Поэтому, пришлось собирать нужную разметку и переделывать JSON-LD в Schema.org, чтобы все поисковые машины смогли распознать информацию на сайте корректно. Как так, в валидаторе же, при проверке данные видны? Пример проверки js микроразметки на скрине. Специально, задал этот вопрос техподдержке Яндекса. Ответ на скрине ниже. Итак, погнали. Начну с определения и немного примеров, потом будет мясо.  Микроразметка — это способ семантической разметки данных на сайте, который помогает поисковым роботам лучше понимать какая информация размещена на страницах сайта.  Цель семантической разметки – сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного ее представления в результатах поиска.  Из справки Яндекс https://yandex.ru/support/webmaster/schema-org/  С помощью семантической разметки документа, можно выделить сайт в результатах выдачи поисковых систем. Сравните результаты поисковой выдачи ниже. Сайты у которых есть микроразметка, намного заметнее, чем без нее. Следовательно, у таких сайтов будет больше переходов из поиска, клиентов и продаж. Некоторые примеры из выдачи Яндекса Некоторые примеры из выдачи Гугл В детали, виды и синтаксис словарей вдаваться не буду, там много чего можно написать. Вряд ли только кому это будет интересно, т.к. скорее всего вы ищете именно разметку. Для продвижения сайта в Яндекс и Google SEOшники используют только три вида разметки: Schema.org, Open Graph, JSON-LD, чтобы объяснить роботу какой текст, находится в каком блоке на сайте и по возможности (алгоритмы постоянно меняются), эта информация попала в описание площадки на поиске. Другие встречаются очень редко. Формат Schema.org рекомендует использовать Яндекс, JSON-LD - Google.  Open Graph хоть и разработан социальной сетью Facebook (на момент публикации, запрещенная соцсеть в РФ), но на сайт его тоже интегрируют, чтобы сделать более привлекательное отображение площадки, когда делятся ссылками в сообщениях. Пример, на скрине ниже. Ниже примеры разметки. Она может не подходить под текущую структуру верстки на сайте, нужно применить примеры к текущему формату разметки. Там где она есть, проверить. В случае надобности скорректировать/добавить отсутствующие поля разметки. В Яндексе: https://webmaster.yandex.ru/tools/microtest/ - некоторая разметка в может показываться с ошибкой в онлайн сервисе проверки. В Google ошибок не было. В Гугле: https://search.google.com/structured-data/testing-tool P.S.: При проверки примеров микроразметки в Яндлекс.Вебмастере, кое какая будет выдавать ошибку, в Гугл - ошибки не будет. Проверял все по Гуглу. Если, где то будет ошибка, прошу строго не судить, я не прогер, за обратную связь буду благодарен. Ниже находятся примеры разных методов разметки данных. По максимуму старался сделать в формате Schema.org, но использовал и другие. Разметка подойдет для сайта услуг, блога, информационного портала СМИ. Что то можно взять и для интернет магазина. Кому надо, берите правьте под себя. P.S.: в коде, где прописан класс DisplaNone - нужно css стилями скрыть лишную техническую информацию от глаз пользователей. Все пояснения заменить на нужную информацию. Комменты, можно удалить при необходимости. Добавить в блок head микроразметку для og и twitter. Пример кода: Подробнее можно в справке тут: https://developers.google.com/search/docs/data-types/sitelinks-searchbox?hl=ru Сделать хлебные крошки и их микроразметку — ПОСЛЕДНЮЮ КРОШКУ, НЕ ДЕЛАТЬ ССЫЛКОЙ! Для меню в шапке Для меню в футере (другая верстка) Для новостей заменить http://schema.org/Blog на http://schema.org/NewsArticle Для новостей заменить http://schema.org/Article на http://schema.org/NewsArticle Подробнее в справке  https://developers.google.com/search/docs/appearance/structured-data/qapage?hl=ru#микроданные Подробнее в справке https://developers.google.com/search/docs/appearance/structured-data/how-to?hl=ru SaleEvent (Распродажа/Бонус)  Разметка Логотипа Разметка голосового поиска (Speakable)   Добавить документу доп поле, в котором можно будет написать информацию о чем этот текст.  Рекомендации поисковых систем: текст должен быть не больше 2-3 предложений, чтобы озвучка текста не занимал более 30 секунд. Подробнее о разметке можно почитать тут https://developers.google.com/search/docs/data-types/speakable?hl=ru Для продвижения конкретного ресурса нужна была не вся микроразметка. Если что то не нашли, можно разметку структурированных данных, которая поддерживается в Google Поиске, можно посмотреть тут: https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ru  Со всеми свойствами и примерами схемы schema.org, можно ознакомиться на официальном сайте https://schema.org/ и собрать нужную самостоятельно при необходимости. На этом все, спасибо за внимание. Если будут вопросы, задвавайте в комментариях или пишите в личку   Маркетинг. SEO, контекст, таргет, разработка сайта