Разметка schema org: настраиваем микроразметку без программиста / Хабр

Содержание

Как сделать микроразметку 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

Главное

Основные тезисы материала:

  1. Микроразметка позволяет поисковым роботам эффективней проверять страницы и создавать расширенные сниппеты.

  2. Schema.org — это словарь, который содержит описание всех сущностей в микроразметке.

  3. Существует несколько видов синтаксиса Schema.org, самые популярные — микроданные (microdata) и JSON-LD.

  4. Google и «Яндекс» поддерживают любой синтаксис Schema.org, но для Google лучше размечать через JSON-LD, а для «Яндекс» — через микроданные (microdata).

  5. Используйте сервисы и плагины для автоматического создания кода в JSON-LD.

  6. Для создания кода в микроданных (microdata) используйте ручной метод или ищете специалистов через сервис Workspace.

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

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.
Представленные здесь базовые идеи (типы, свойства и т. д.) применимы не только к микроданным — взгляните на
примеры, чтобы увидеть, как детали сравниваются.

  1. Как разметить свой контент с помощью микроданных
    1. Зачем использовать микроданные?
    2. itemscope и itemtype
    3. элементпроп
    4. Встраиваемые элементы
  2. Использование словаря schema. org
    1. типы и свойства schema.org
    2. Ожидаемые типы, текст и URL-адреса
    3. Проверка вашей разметки
  3. Дополнительная тема: Машинопонятные версии информации
    1. Даты, время и продолжительность
    2. Перечисления и канонические ссылки
    3. Отсутствует/неявная информация
    4. Расширение schema.org

1. Как разметить контент с помощью микроданных

1a. Зачем использовать микроданные?

Ваши веб-страницы имеют скрытое значение, которое люди понимают, когда читают веб-страницы. Но поисковые системы имеют ограниченное представление о том, что обсуждается на этих страницах. Добавляя дополнительные теги в HTML-код своих веб-страниц — теги, которые говорят: «Эй, поисковая система, эта информация описывает этот конкретный фильм, или место, или человека, или видео», — вы можете помочь поисковым системам и другим приложениям лучше понять ваш контент. и отображать его в полезной, релевантной форме. Микроданные — это набор тегов, представленных в HTML5, которые позволяют вам это делать.

1б. itemscope и itemtype

Давайте начнем с конкретного примера. Представьте, что у вас есть страница о фильме «Аватар» — страница со ссылкой на трейлер фильма, информация о режиссере и так далее. Ваш HTML-код может выглядеть примерно так:

.
<дел>
 

Аватар

Режиссер: Джеймс Кэмерон (родился 16 августа 1954 г.) Научная фантастика Трейлер

Для начала определите раздел страницы, посвященный фильму «Аватар». Для этого добавьте элемент itemscope в HTML-тег, содержащий информацию об элементе, например:

.
itemscope >

Аватар

Режиссер: Джеймс Кэмерон (родился 16 августа 1954 г.) Научная фантастика Трейлер

Добавляя itemscope , вы указываете, что HTML-код, содержащийся в блоке

. ..

, относится к конкретному элементу.

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

 
itemtype="https://schema.org/Movie" >

Аватар

Режиссер: Джеймс Кэмерон (родился 16 августа 19 г.54) Научная фантастика Трейлер

Указывает, что элемент, содержащийся в div, на самом деле является фильмом, как определено в иерархии типов schema.org. Типы элементов предоставляются в виде URL-адресов, в данном случае https://schema.org/Movie .

Наверх

1c. itemprop

Какую дополнительную информацию мы можем предоставить поисковым системам о фильме Аватар? У фильмов есть интересные свойства, такие как актеры, режиссер, рейтинги. Чтобы пометить свойства элемента, используйте атрибут itemprop . Например, чтобы определить режиссера фильма, добавьте itemprop="director" к элементу, содержащему имя режиссера. (Полный список всех свойств, которые вы можете связать с фильмом, можно найти на странице https://schema.org/Movie.)

 

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

Режиссер: itemprop="director" >Джеймс Кэмерон (родился 16, 19 августа)54) itemprop="genre" >Научная фантастика itemprop="trailer" >Трейлер

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

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

Наверх

1d. Встроенные элементы

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

 

Аватар

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

Наверх

2. Использование словаря schema.org

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

Не все веб-страницы посвящены фильмам и людям — в дополнение к типам Movie и Person, описанным в разделе 1, schema.org описывает множество других типов элементов, каждый из которых имеет собственный набор свойства, которые можно использовать для описания предмета.

Самый широкий тип элемента — вещь, которая имеет четыре свойства: имя , описание , url и изображение . Более конкретные типы имеют общие свойства с более широкими типами. Например, Место — это более конкретный тип Вещи, а Местный Бизнес — это более конкретный тип Места. Более конкретные элементы наследуют свойства своего родителя. (На самом деле LocalBusiness — это более конкретный тип Place , а — более конкретный тип Organization, поэтому он наследует свойства обоих родительских типов. )

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

  • Творческие работы: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries …
  • Встроенные нетекстовые объекты: AudioObject, ImageObject, VideoObject
  • Событие
  • Организация
  • Лицо
  • Место, Местный Бизнес, Ресторан …
  • Товар, Предложение, Совокупное Предложение
  • Обзор, совокупный рейтинг

Вы также можете увидеть полный список всех типов предметов, перечисленных на одной странице.

Наверх

2b. Ожидаемые типы, текст и URL-адреса

Вот несколько замечаний, о которых следует помнить при добавлении разметки schema.org на веб-страницы.

Наверх

2c. Тестирование разметки

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

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

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

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

  • Даты, время и продолжительность: используйте тег time с datetime
  • Перечисления и канонические ссылки: используйте тег link с href
  • Отсутствует/неявная информация: используйте метатег с содержимым .

Наверх

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

Даты и время могут быть трудны для понимания машинами. Рассмотрим дату «01.04.11». Означает ли это 11 января 2004 года? 4 января 2011? Или 1 апреля 2011? Чтобы сделать даты однозначными, используйте тег time вместе с атрибутом datetime . Значением атрибута datetime является дата, указанная в формате ГГГГ-ММ-ДД . Приведенный ниже HTML-код однозначно определяет дату как 1 апреля 2011 г. в день в формате чч:мм или чч:мм:сс . Время начинается с буквы T и может быть предоставлен вместе с датой, например:

   8 мая, 19:30    

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

 
itemscope itemtype="https://schema.org/Event" >
itemprop="name" >Спинномозговая пункция
<промежуток itemprop="description" >Одна из самых громких групп. воссоединяются для незабываемого двухдневного шоу. Дата события: 8 мая, 19:30

Продолжительность можно указать аналогичным образом, используя тег time с атрибутом datetime . Продолжительность начинается с буквы P (расшифровывается как «период»). Вот как можно указать время приготовления по рецепту 1 ½ часа:

    

H используется для обозначения количества часов, а М используется для обозначения количества минут.

Стандарты даты, времени и продолжительности определяются стандартом даты/времени ISO 8601.

Наверх

3b. Перечисления и канонические ссылки: используйте ссылку с href

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

Некоторые свойства могут принимать только ограниченный набор возможных значений. Программисты часто называют это «перечислениями». Например, интернет-магазин с продаваемым товаром может использовать тип товара «Предложение», чтобы указать детали предложения. 9Свойство 0003 наличие обычно может иметь одно из нескольких возможных значений — В наличии , Нет в наличии , Предзаказ и так далее. Подобно тому, как типы элементов указываются в виде URL-адресов, возможные значения для перечисления на schema.org также могут быть указаны в виде URL-адресов.

Вот предмет для продажи, отмеченный типом предложения и соответствующими свойствами:

Смеси-O-Matic 19 долларов США0,95 Доступно сегодня!

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

 
org/ Предложение"> Смеси-O-Matic $19,95 Доступно сегодня!

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

Канонические ссылки

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

  

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

Однако вы можете не захотеть добавлять видимую ссылку на свою страницу. В этом случае вместо этого вы можете использовать элемент link следующим образом:

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

Наверх

3с. Отсутствующая/неявная информация: используйте метатег с содержимым

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

В этих случаях используйте метатег вместе с атрибутом содержимого для указания информации. Рассмотрим этот пример — изображение показывает пользователям оценку 4 из 5 звезд:

 
Смеси-O-Matic $19,95 На основе оценок 25 пользователей

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

 
Смеси-O-Matic $19,95
itemprop="reviews" itemscope itemtype="https://schema.org/AggregateRating" > jpg" /> На основе itemprop="ratingCount" >25 оценок пользователей

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

Наверх

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

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

Что такое разметка схемы и почему она важна для SEO

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

Ведущие поисковые системы, включая Google, Yahoo, Bing и Яндекс, впервые начали сотрудничать для создания Schema.org еще в 2011 году.

Разметка Schema особенно важна в эпоху Hummingbird и RankBrain. То, как поисковая система интерпретирует контекст запроса, определяет качество результатов поиска.

Схема может обеспечить контекст для неоднозначной веб-страницы.

Через Schema.org:

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

Аватар

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

Улучшает ли Schema ваш поисковый рейтинг?

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

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

Согласно исследованию acmqueue, менее трети результатов поиска Google содержат расширенный фрагмент с разметкой Schema.org. Это открывает огромные возможности для остальных.

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

Для чего используется схема?

  • Предприятия и организации
  • События
  • Люди
  • Продукты
  • Рецепты
  • отзывов
  • Видео

Выше приведены некоторые из наиболее популярных вариантов использования схемы. Тем не менее, есть хороший шанс, что если у вас есть какие-либо данные на вашем веб-сайте, у них будет связанный itemscope, itemtype и itemprop.

Добавление схемы на ваши веб-страницы

Использование микроданных

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

Однако у использования микроданных есть один недостаток: вам нужно отмечать каждый отдельный элемент в теле вашей веб-страницы. Как вы можете себе представить, это может быстро запутаться.

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

Например, ваш веб-контент посвящен еде? Музыка? Технология?

После того, как вы определились с типом предмета, теперь вы можете определить, как вы можете пометить его.

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

TechHaven

Лучшие маршрутизаторы, которые вы найдете в Интернете!

Адрес:

459 Humpback Road

Риальто, Калифорния

Тел. : 909 574 3903

< a href="http://www.techhaven.com/menu">Нажмите здесь, чтобы просмотреть наши лучшие маршрутизаторы!

Мы открыты:

Пн-Сб с 8:00 до 22:30

Вс: с 14:00 до 20:00

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

.

Теперь вверху вы можете добавить:

itemscope >

Добавляя этот тег, мы заявляем, что код HTML, содержащийся между блоками

, идентифицирует конкретный элемент.

Затем мы должны определить, что это за элемент, используя атрибут «itemtype», чтобы определить тип элемента, о котором идет речь на нашей веб-странице (технические).

itemtype=»http://schema.org/tech»>

Тип элемента представлен в виде URL-адреса (например, http://schema.org/tech). Предположим, например, что ваш сайт посвящен косметическим товарам, а не технологиям. URL-адрес вашего типа элемента может выглядеть следующим образом:

http://schema.org/beauty.

Чтобы упростить задачу, вы можете просмотреть список типов элементов здесь, а также просмотреть расширения, чтобы определить конкретный объект, который вы ищете. Имейте в виду, что этот список не является исчерпывающим, поэтому есть вероятность, что вы не найдете тип товара для своей конкретной ниши.

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

.

Теперь мы будем использовать тег ‘itemrop’, обозначающий свойства элемента:

itemprop=”name” >Tech Haven

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

Например, если у вас есть строка с надписью «Адрес: 1234 w саншайн бульвар », вам нужно применить теги только вокруг самого адреса и ничего больше.

itemprop=»description» >Лучшие маршрутизаторы, которые вы найдете в Интернете!

Адрес:

itemprop=»address» itemscope itemtype=” http://schema.org/PostalAddress”>

itemprop=»streetAddress»> 459 Humpback Road

itemprop=»addressLocality»> Риальто, Калифорния

< /span>

Тел.: 909 574 3903

itemprop=»menu» href=»http://http://www.techhaven.com/menu»>Нажмите здесь, чтобы посмотрите наш вкусный ассортимент блюд!

Мы открыты:

itemprop=»openingHours» >Пн-Сб 8:00 – 22:30

itemprop=»openingHours» >Вс: 14:00–20:00

Этот код может показаться сложным, но schema. org предоставляет примеры использования различных типов элементов, поэтому вы действительно можете увидеть, что должен делать код. Не волнуйтесь, вы не останетесь в дураках, пытаясь понять это самостоятельно!

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

Чтобы использовать этот замечательный инструмент, просто выберите тип элемента, вставьте URL-адрес целевой страницы или контента, на который вы хотите настроить таргетинг, а затем выделите различные элементы, чтобы пометить их.

Использование RDFa

RDFa — это аббревиатура от Структура описания ресурсов в атрибутах . По сути, RDFa — это расширение HTML5, предназначенное для помощи пользователям в разметке структурированных данных.

RDFa считается рекомендацией W3C, что означает, что это веб-стандарт, и его можно использовать для объединения словарей структурированных данных. Это особенно полезно, если вы хотите добавить структурированные данные, выходящие за пределы Schema. org.

Вы можете вздохнуть с облегчением. RDFa мало чем отличается от Microdata.

Подобно микроданным, теги RDFa включаются в уже существующий HTML-код в теле вашей веб-страницы. Для ознакомления мы еще раз посмотрим на технический веб-сайт в качестве примера.

HTML-код вашего технического сайта, скорее всего, выглядел бы так до того, как он был изменен:

Tech Haven

Лучшие маршрутизаторы онлайн!

Адрес:

459 Humpback Road

Риальто, Калифорния

Тел.: 909 574 3903

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

Просто щелкните вкладку RDFa, чтобы просмотреть конкретные примеры RDFa.

Затем вам нужно использовать тег vocab в сочетании с URL-адресом http://schema.org, чтобы определить словарь для разметки. Чтобы определить тип страницы, используйте тег typeof . В отличие от микроданных, которые используют URL для идентификации типов, RDFa использует одно или несколько слов для классификации типов.

vocab=»http://schema.org/» typeof=»technology» >

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

Например, если вы хотите дополнительно расширить свойство адреса, вы можете использовать «PostalAddress» следующим образом:

property=»address» typeof=»PostalAddress»>

Сравнение микроданных и стороны RDFa Кроме того, атрибут typeof эквивалентен атрибуту itemtype , найденному в микроданных. Кроме того, атрибут свойства будет эквивалентен атрибуту itemprop .

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

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

property=»description» >Лучшие маршрутизаторы в Интернете!

Адрес:

property=»address» typeof=»PostalAddress»>

property=»streetAddress»> 459 Humpback Road

property=»addressLocality»> Риальто, Калифорния

Тел: 909 574 3903

property=»menu» href=»http://www.techhaven/menu»> Нажмите здесь, чтобы просмотреть наши лучшие маршрутизаторы!

Мы открыты:

property=»openingHours» >Пн-Сб с 8:00 до 22:30

property=»openingHours» >Вс: с 14:00 до 20:00

В помощь , каждая страница на Schema.

This entry was posted in Популярное