Содержание
Как сделать микроразметку Shema на сайте
Поисковые роботы с каждым апдейтом все лучше и лучше понимают содержимое страниц в интернете, но без микроразметки они делают это менее эффективно. В статье разберем, как сделать микроразметку в микроданных и JSON-LD самостоятельно.
Что такое микроразметка и зачем она нужна
Микроразметка нужна для поисковиков. Google и «Яндекс», которые лучше понимают содержание сайтов, если указать им куда «смотреть». Например, что на странице находится товар определенного бренда, у которого есть характеристики, cтоимость, рейтинг.
Пример микроразметки. Сущность «AggregateRating» указывает на наличие рейтинга у компании
Стандарт семантической разметки данных называется Schema.org. Он появился более в 2011 году с подачи поисковиков Google, Yahoo и Microsoft. Все современные поисковики ее поддерживают, включая «Яндекс».
Одно из преимущество микроразметки — расширенный сниппет. Она делает карточку сайта более заметной, что в теории может повысить количество кликов. Правда, не факт, что поисковик выдаст сниппет, но робот в любом случае считает его данные. Подробнее — в статье «Как сделать расширенные сниппеты в выдаче „Яндекса“ и Google».
Карточки, которые получили расширенный сниппет в выдаче Google из-за наличия разметки
Микроразметка прямо не влияет на выдачу, но более структурированные описания сайтов могут подниматься выше. Например, вот как «Яндекс» использует данные из разметки:
Для товаров, медиа, рецептов, организаций формируются специальные сниппеты.
Для вопросов и ответов поиск выделяет лучшие ответы.
Изображения и видео с разметкой лучше предоставляются в поиске.
В Google разметка позволяет более точнее анализировать данные сайта и открывает особые функции.
Читайте также:
Поведенческие факторы: накрутить или улучшить сайт
Какие виды микроразметки бывают
Schema. org — не единственный стандарт микроразметки. Кроме него, существует другие:
Microformats. Открытый стандарт, который появился в 2007 году. Изначально был простым, но сейчас с ним взаимодействовать не так эффективно, как с Schema.org.
The Open Graph protocol. Разметка для соцсетей, чтобы правильно считывать данные из шапок статей во время репоста в ленту.
«Дублинское ядро». Разметка для электронных библиотек и документов.
FOAF. Используется для нетворкинга в интернете и поиске связей между людьми.
Далее будем только Schema.org, как наиболее популярный. У него четыре вида синтаксиса (микроданные, RDF, микроформаты, JSON-LD), но нас интересуют только два:
Микроданные. Работает на HTML. Принцип строится на создании «контейнеров» и помещении в них данных.
JSON-LD. Работает на JavaScript. Принцип написания — давать команды словарю. Содержит меньше строчек кода, рекомендован Google и виден только поисковым роботам.
Важно: Schema.org — это словарь, а, например, JSON-LD — это ситаксис. Синтаксис — это набор тегов и правил для обращения к словарю. У каждого синтаксиса он свой.
Google рекомендует использовать JSON-LD, но «Яндекс» его не поддерживает. Валидацию в обоих поисковиках проходят оба, поэтому для сайтов лучше ставить .
Как сделать и вставить микроразметку на сайт
Микроразметка создается тегами с помощью дополнительных атрибутов. Чтобы использовать микроразметку знать код не обязательно. В помощь — маркеры, сервисы и плагины.
Маркеры данных от Google
У Google есть «Мастер разметки структурированных данных». В нем вы указываете сайт или HTML-код, выбираете сущность и прописываете данные. После — выгружаете готовый код и вставляете в шапку сайта.
Плюсы:
Можно загрузить ссылку на сайт и разметить теги прямо на ней.
Простая визуализация и интуитивно понятный интерфейс.
Код можно выгрузить в микроданных или JSON-LD.
Минусы:
Микроразметка статьи в «Маркере данных»
Кроме «Мастера» существует инструмент «Маркер» с расширенным функционалом. Для его использование нужно подключить свой сайт к сервису Google Search Console, внедрение кода будет происходить автоматически.
Плагины для CMS
Если ваш сайт работает на WordPress, «Битриксе» или «Тильде», то для вас уже подготовлены удобные плагины или инструкции:
All In One Schema Rich Snippets — бесплатный плагин для WordPress, размечает Schema в семантике микроданных (microdata).
Schema — плагин для WordPress, размечает в JSON-LD. Есть бесплатная версия с ограниченными функциями.
Микроразметка Schema.org — плагин для ресурсов, созданых на «1С-Битрикс».
Инструкция — для сайтов на Tilda.
Читайте также:
Самые популярные CMS в Рунете
Ручной способ
Готовая микроразметка в шапку страницы внутри тегов <head> </head>. Полный список всех атрибутов и сущностей есть на сайте Schema.org. В JSON-LD для сущностей используют команды @contex, @type, а свойства указывается через кавычки.
Каркас для микроразметки JSON-LD
Набирать код в JSON-LD вручную не обязательно, есть генераторы:
Schema Markup Generator. Бесплатный конструктор, набор сущностей ограничен.
Schema App. Платный конструктор, поддерживает все сущности.
Конструктор микроразметки в JSON-LD
В микроданных (microdata) сущности указывают через команду itemscope, а itemtype и itemprop помогают определить тип и значение.
Каркас для микроданных (microdata) в Schema
Если в случае JSON-LD прописывать вручную код не обязательно, то для микроданных (microdata) нормальных конструкторов и сервисов нет — вам придется писать код самостоятельно, либо обратиться к верстальщику. Найти специалиста поможет сервис Workspace — сделайте техническое задание, бесплатно разместите его в разделе «Задачи» и выбирайте исполнителей по откликам.
Как проверить микроразметку
Перед тем, как вставлять код на сайт, его нужно проверить. Если будет даже одна ошибка, то поисковый робот не считает всю разметку.
Используйте валидаторы:
Schema Markup Validator. Рекомендованный сервис от Google для проверки кода или сайта с микроданными (microdata) или JSON-LD. Показывает структурность данных.
Валидатор микроразметки. Сервис от «Яндекса» для проверки кода или сайта с микроданными (microdata). Умеет показывать структуру списком.
Онлайн валидатор JSON. Простой сервис для быстрой проверки кода на JSON-LD.
Как проверять код? Загрузите сайт или код, нажмите тест и проверьте результат. В случае обнаружение ошибки валидатор подскажет, в чем проблема и на какой строчке. Например, на скриншоте ниже не указан тип данных, чтобы это исправить, нужно поставить сущность «отель» или «организация».
Проверка микроразметки с помощью валидатора
Примеры микроразметки
Разберем основные типы сущностей и код.
Микроразметка для компаний
Микроразметка указывает на адрес и контактную информацию организации. Посмотреть полный список можно на стра разметку для комнаты в отеле на странице Hotel и в подробном гайде Markup for Hotels.
Пример в микроданных (microdata) Schema.org. Можно использовать общий тип «Organization», либо указать точную сферу деятельности. Используем, например, отель. Обратите внимание на атрибут address и его вариации — это может быть Locality (город), Region (область), Country (страна). Также можно добавить координаты с помощью атрибута «geo».
Микроразметка в микроданных (microdata) Schema.org для организаций
Микроразметка в JSON-LD для организаций
Микроразметка для товаров и услуг в онлайн-магазинов
Для разметки используют тип данных Product. Это может быть телефон, билет на концерт, запись в салон красоты или цифровой товар.
Пример в микроданных (microdata) Schema.org. Полезные атрибуты:
aggregateRating — указывает рейтинг товара
offers — указывает на продажу товара
priceCurrency и price — показывает тип валюты и стоимость
availability — говорит о наличии товара. Например, In Stock (в наличии), Out Of Stock (нет в наличии). Есть еще другие варианты: Online Only, Pre-order, Sold out и т. д.
Разметка в микроданных (microdata) Schema.org для товара
Разметка в JSON-LD для товара
Микроразметка для рецептов и кулинарных сайтов
Разметка по shema.org помогает поисковым работам выделиль ключую информацию о рецепте — ингредиенты, количество калорий, время приготовления.
Пример в микроданных (microdata) Schema.org. Атрибуты prepTime, cookTime и totalTime покажут время на готовку — данные ставятся в формате AM и PT. Описание можно сделать через recipeInstructions или HowToStep.
Микроразметка для рецепта в микроданных (microdata)
Микроразметка для рецепта в JSON-LD
Микроразметка для статей и публикаций на сайт
Атрибуты указывают на название статьи, автора статьи, дату публикации. Подробнее об этой разметке и полный список атрибутов смотрите в разделе Article.
Пример в микроданных (microdata) Schema.org. Наиболее часто используют Article, как универсальный тип данных. Кроме него существует:
Пример разметки статей в микроданных Schema.org
Пример разметки статей в JSON-LD
Микроразметка для хлебных крошек
Эта сущность помогает указать подразделы сайта — будет актуально для маркетплейсов, онлайн-магазинов и сайтов-каталогов.
Выдача «хлебных крошек» с микроразметкой и без нее
Посмотреть атрибуты можно на странице BreadcrumbList, а в нашей статье «Все о „хлебных крошках“» рассказываем, как их делать.
Пример в микроданных (microdata) Schema.org.
Указываем тип «BreadcrumbList» и далее через ListItem ставим позицию, название и ссылку на подраздел сайта.
Микроразметка (microdata) хлебных крошек в Schema.org
Микроразметка хлебных крошек в JSON-LD
Микроразметка для отзывов и рейтингов
Наличие отзывов и их содержание часто напрямую влияет на решение о покупке. Исследование AliExpress показало, что каждая пятая покупка в интернете была совершенно именно из-за отзывов. Микроразметка поможет поисковым роботам найти рейтинги, дату публикации и авторов отзывов. Полный список атрибутов — в разделе Review на сайте schema.org.
Пример в микроданных (microdata) Schema.org. На примере ниже размечен автор, дата публикации и «тело» комментария. Обратите внимание на атрибут reviewRating (Rating): он позволяет выставить оценку, указов диапазон и общее колличество отзывов.
Микрораазметка (microdata) отзыва в Schema.org
Микроразметка отзыва в JSON-LD
Микроразметка для вопросов и ответов
Посмотреть все атрибуты можно в разделе FAQPage. Также существует QAPage, где ответы или отзывы опубликованы от лица пользователей. Также обратите внимание на HowTo — ее атрибуты позволяют разметить шаги в инструкции.
Пример в микроданных (microdata) Schema.org. Количество ответов может быть любым, но вряд-ли стоит добавлять более десяти. За формирование вопросов и ответов отвечает связка mainEntity + acceptedAnswer.
FAQ-микроразметка может выводиться как расширенный сниппет в Google
Микроразметка вопросов и ответов в Schema.org
Разметка FAQ в JSON-LD
Микроразметка для мероприятия
Микроразметка события поможет показать поисковым роботам где будет проходить мероприятие, сколько оно стоит и как купить билеты.
Разметка показывает дату, место и цену мероприятия, выводится первой в сниппете
Пример в микроданных (microdata) Schema.org. Уникальная черта микроразметки для событий — указание даты начала и конца мероприятия. В остальном используются атрибута Place и Offers, которые мы приводили в примерах для организаций и товаров. Полный список атрибутов — в Event.
Микроразметка (microdata) для сайта мероприятия
Микроразметка для сайта мероприятия в JSON-LD
Микроразметка для изображений
Помогает проиндексировать картинки, изображения и иллюстрации.
Пример в микроданных (microdata) Schema.org. За разметку картинок отвечает ImageObject. Он позволяет быстрее выводить их в поиске, а еще добавлять спецификацию фотографий по выдержке, формату, дате, локации и т.д.
Микроразметка (microdata) картинок в Schema.org
Микроразметка изображений в JSON-LD
Микроразметка для видео
За разметку видеороликов отвечает VideoObject. В Google микроразметка может дать расширенный сниппет, если указать ключевые моменты ролика через атрибуты Clip или SeekToAction.
Микроразметка видеоролика с ключевыми моментами
В «Яндексе» есть возможность выводить плеер в поиск атрибутом embedUrl. Правда, он доступен только для хостингов, у которых более 500 роликов.
Пример в микроданных (microdata) Schema.org.
Микрразметка видео в Schema.org
Микроразметка видео в JSON-LD
Главное
Основные тезисы материала:
Микроразметка позволяет поисковым роботам эффективней проверять страницы и создавать расширенные сниппеты.
Schema.org — это словарь, который содержит описание всех сущностей в микроразметке.
Существует несколько видов синтаксиса Schema.org, самые популярные — микроданные (microdata) и JSON-LD.
Google и «Яндекс» поддерживают любой синтаксис Schema.org, но для Google лучше размечать через JSON-LD, а для «Яндекс» — через микроданные (microdata).
Используйте сервисы и плагины для автоматического создания кода в JSON-LD.
Для создания кода в микроданных (microdata) используйте ручной метод или ищете специалистов через сервис Workspace.
Проверяйте микроразметку через валидаторы перед публикацией. Наличие одной ошибки делает нечитабельным весь код для поисковых роботов.
Workspace.LIVE — мы в Телеграме
Новости в мире диджитал, ответы экспертов на злободневные темы, опросы, статьи и многое другое.
Подписывайтесь:
https://t. me/workspace
Что такое микроразметка Schema и как её правильно использовать?
Определение разметки Schema
Микроразметка Schema.org – это просто код, который вы должны разместить на своем сайте, чтобы поисковая система предоставляла больше информации вашим пользователям о страницах. Если вы знаете о рич-сниппетах или даже использовали их, тогда этот инструмент не будет для вас чем-то новым. Например, на странице выдачи результатов поиска Google, страница с микроразметкой Schema отображается следующим образом:
Использование микроразметки указывает поисковикам, что именно означают данные
Как вы знаете, все данные на вашем сайте индексируются, а затем выдаются в результатах поиска. Но если вы используете встроенную микроразметку, то процесс будет немного отличаться. Это происходит потому, что разметка данных объясняет поисковой системе, что означают эти данные. Как? Давайте возьмем фразу «Стив Смит», которая была использована в тексте. Когда поисковик обнаружит это имя, он создает с ним запись в поисковой выдаче. Если вы используете соответствующие структурированные данные с этим именем, любая поисковая система узнает, что это автор этой самой статьи, а не простое имя, упоминаемое в тексте. Это приведет к более глубоким результатам, которые поисковая система будет показывать при поиске за фразой «Стив Смит». Именно поэтому в микроразметке следует указать поисковикам, нужные данные, такие как: тип веб-страницы, автор публикации, название организаци, заголовок h2 и другое.
Вот объяснение schema.org по этому поводу:
Многие администраторы сайтов знают о HTML мета-тегах, которые используются на их веб-страницах. Они объясняют браузеру, как показывать данные, из которых состоит тэг. Например, содержание «Звездные войны», заключено в тег h3, объясняет браузеру, что «Звездные войны» – это заголовок второго уровня. Но здесь нет информации о том, что такое «Звездные войны». Это может быть фильм, игра или просто изображение, поэтому поисковик не может выбрать соответствующее наполнение.
Разметка использует уникальный морфологический словарь в форме микроданных
Нет необходимости быть программистом, чтобы использовать разметку, поскольку формат HTML поддерживает это кодирование. Вам просто нужно добавить словарь schema.org.
Кстати, известно ли вам, что сайт schema.org, который может помочь вам с микроразметкой, создавался совместно Yahoo, Google и Bing?
Раз в сто лет случается такое, что конкуренты создают что-то вместе, но этот сайт является исключением.
Пользователи являются основной целью при внедрении структурированных данных
Если используется Schema Markup, вы можете легко увидеть в различных результатах поиска, что перед вами за сайт и какую-то дополнительную информацию, например, цену, предоставляемые им услугу и т. д. Это очень ориентированный на пользователей инструмент, который помогает им облегчить процесс поиска.
Действительно ли это важно?
Этот инструмент помогает улучшить результаты ранжирования сайтов во всех типах контента. Он используется, когда вы публикуете такие форматы:
- Тексты
- Телесериалы
- Кафе
- Небольшие региональные компании
- Программы
- Продукты
- Обзоры разных книг
- Фильмы
- События
Существуют тысячи типов разметки, поэтому, если у вас есть тематический веб-сайт, вы можете найти тот, который вам подойдет. Доказано, что компании, которые используют для своих сайтов Schema Markup, имеют более высокий рейтинг в результатах поиска. Согласно последним исследованиям, сайт с разметкой будет размещен на 4 позиции выше, чем без нее. Не только этот фактор может привести к такому результату, но, по всей видимости, здесь есть прямая корреляция.
Согласно статистике третья часть результатов поиска в Google используют рич-сниппеты совместно с микроразметкой Schema.
Но Searchmetrics заявляет, что только 0,3% сайтов объединяют эти разметки. И даже больше, есть еще сотни сайтов, которые недооценивают потенциал этого инструмента оптимизации. Поэтому, если вы его используете, то на пять шагов опережаете своих конкурентов.
Как использовать микроразметку?
Пошаговый алгоритм действий при внедрении разметки будет такой:
1. Обратитесь к специальному инструменту Google.
Вот как выглядит этот помощник по разметке:
2. Выберите данные
Здесь у вас есть несколько вариантов. Хотя список элементов не является полным, мы используем «Статьи» в качестве примера, потому что этот тип контента является одним из самых популярных.
3. Следующий шаг – вставить URL-адрес статьи, для которой вы хотите использовать разметку
Если вы используете HTML, то можете добавить его вместо URL-адреса. Когда вы это сделали, нажмите кнопку “Start Tagging”.
Затем ваша веб-страница будет загружена в инструмент, а следующим шагом станет тегирование элементов страницы. Дальше вы увидите две панели, на левой будет показана ваша страница, а справа – данные.
4. Выберите и выделите элементы, которые хотите разметить
В нашем примере мы выделим название статьи, таким образом появится разметка «Имя». Как только мы закончим с этим, выберем «Имя».
Как только мы выберем опцию «Имя», программа добавит её в окно «Элементы данных», которое вы можете увидеть справа.
5. Не прекращайте добавлять
Вы можете использовать каталог элементов в качестве образца, после чего выбрать другие части вашего текста для разметки. Хотя, возможно, что вы не сможете добавить себе каждый элемент из списка, попробовать точно стоит.
6. HTML
На следующем этапе кликните “Create HTML” (Создать HTML).
Здесь вы можете увидеть кодировку HTML-сайта со всеми микроданными, которые были выбраны для ваших элементов.
7. Теперь добавьте эти микроданные на свою страницу
Пришло время вернуться к вашей CMS или исходному коду и добавить эти фрагменты, где необходімо. Желтые точки на полосе прокрутки помогут вам найти их.
Пункт «Следующие шаги» появятся после того, как вы кликните на кнопку «Готово».
8. Вы можете использовать Google Structured Data Testing Tool для проверки вида вашей страницы после добавления структурированных данных.
Более того, мы можем проверить каждую из добавленных разметок.
Мы также можем отредактировать код при тестировании в инструменте, а затем еще раз перепроверить его.
Несколько приемов при использовании разметки
Вопросы количества
Инструкция, которую вы можете найти на сайте Schema.org утверждает, что чем больше данных вы отмечаете, тем лучший результат у вас получится. Когда вы поймете значение типов элементов, то увидите, какие форматы на вашей странице возможно разметить. Однако не забывайте, что вы можете отмечать только тот контент, который видят другие пользователи, поэтому не тратьте свое время и не помечайте скрытые элементы.
Будущее структурированных данных
Этот инструмент очень просто использовать, хотя многие компании и бизнесы по-прежнему не замечают преимуществ, которые он дает сайту. Эта SEO техника, несомненно, одно из самых перспективных направлений оптимизации. Сегодня как раз тот самый момент, когда вам стоит начать использовать микроразметку и придать вашему сайту свежий вид.
Начало работы — schema.org
Большинство веб-мастеров знакомы с тегами HTML на своих страницах. Обычно теги HTML сообщают браузеру, как отображать информацию, содержащуюся в теге. Например,
Аватар
указывает браузеру отображать текстовую строку «Аватар» в формате заголовка 1. Однако тег HTML не дает никакой информации о том, что означает эта текстовая строка — «Аватар» может относиться к чрезвычайно успешному 3D-фильму или к типу изображения профиля — и это может затруднить поиск. движки для интеллектуального отображения релевантного контента пользователю.
Schema. org предоставляет набор общих словарей, которые веб-мастера могут использовать для разметки своих страниц способами, понятными основным поисковым системам: Google, Microsoft, Yandex и Yahoo!
Вы используете словарь schema.org вместе с Microdata, RDFa или
JSON-LD для добавления информации к вашему веб-контенту.
Это руководство поможет вам быстро освоиться с микроданными и schema.org, чтобы вы могли начать добавлять разметку на свои веб-страницы.
Хотя это руководство посвящено микроданным,
большинство примеров на сайте schema.org также показывают примеры в RDFa и JSON-LD.
Представленные здесь базовые идеи (типы, свойства и т. д.) применимы не только к микроданным — взгляните на
примеры, чтобы увидеть, как детали сравниваются.
- Как разметить свой контент с помощью микроданных
- Зачем использовать микроданные?
- itemscope и itemtype
- элементпроп
- Встраиваемые элементы
- Использование словаря schema. org
- типы и свойства schema.org
- Ожидаемые типы, текст и URL-адреса
- Проверка вашей разметки
- Дополнительная тема: Машинопонятные версии информации
- Даты, время и продолжительность
- Перечисления и канонические ссылки
- Отсутствует/неявная информация
- Расширение schema.org
1. Как разметить контент с помощью микроданных
1a. Зачем использовать микроданные?
Ваши веб-страницы имеют скрытое значение, которое люди понимают, когда читают веб-страницы. Но поисковые системы имеют ограниченное представление о том, что обсуждается на этих страницах. Добавляя дополнительные теги в HTML-код своих веб-страниц — теги, которые говорят: «Эй, поисковая система, эта информация описывает этот конкретный фильм, или место, или человека, или видео», — вы можете помочь поисковым системам и другим приложениям лучше понять ваш контент. и отображать его в полезной, релевантной форме. Микроданные — это набор тегов, представленных в HTML5, которые позволяют вам это делать.
1б. itemscope и itemtype
Давайте начнем с конкретного примера. Представьте, что у вас есть страница о фильме «Аватар» — страница со ссылкой на трейлер фильма, информация о режиссере и так далее. Ваш HTML-код может выглядеть примерно так:
. <дел>Аватар
Режиссер: Джеймс Кэмерон (родился 16 августа 1954 г.) Научная фантастика Трейлер