Микроразметка сайта: уникальные примеры и важность для SEO-оптимизации

1. Что такое микроразметка
2. Популярные микроразметки
3. Сниппеты
4. Как внедрить микроразметку
5. Микроформаты для сайта
6. Как проверить правильность микроразметки
7. Частые ошибки
8. Как отслеживать техническое состояние и эффективность микроразметки?
9. Подборка схем разметки под тематику интернет-магазина
10. Актуальные схемы
11. Выводы

Максим Дроздовский

SEO - специалист

Задать вопрос

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

Мы также предоставим практические примеры и код, которые помогут вам внедрить микроразметку на своем сайте.

Что такое микроразметка

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

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

Что дает микроразметка

Можно выделить 5 непосредственных выигрышей, которые приносит внедрение микроразметки на вашем веб-ресурсе:

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

---

2. Улучшенное понимание контента роботами.
   Поисковые системы лучше понимают структуру вашей информации благодаря микроразметке. Это позволяет им более точно интерпретировать и ранжировать ваш контент.

---

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

---

4. Лучшее понимание контента аудиторией.
   Микроразметка помогает пользователям быстрее понимать содержание страницы еще до ее посещения. Например, для рецептов можно указать калорийность, время приготовления и даже количество порций.

---

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

Для чего нужна микроразметка сайта при SEO продвижении?

Микроразметка нужна для SEO продвижения сайта по нескольким причинам:

1. Помогает поисковым системам лучше понимать смысл и контекст информации на странице.

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

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

Например, на странице с описанием курсов микроразметка показывает, что это образовательный курс, а не просто статья.

3. Улучшает структурированные данные в поисковой выдаче - название, описание, изображение. Это повышает CTR сниппета в выдаче.
4. Положительно влияет на поведенческие факторы - время на сайте, отказы. Пользователь быстрее находит нужное.

Популярные микроразметки

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

Они существуют в нескольких популярных форматах, каждый из которых имеет свои преимущества и области применения. Далее подробнее рассмотрим термины и форматы микроразметок.

Отличие словарей и синтаксисов

Представим, что мы готовим особый рецепт для приготовления пирога.

В этом случае:

• Словарь — это список всех необходимых ингредиентов и шагов приготовления. Например, "мука", "яйца", "сахар" - все эти пункты представляют словарь.
• Синтаксис — это как мы оформляем наш рецепт. Мы можем использовать разные форматы и правила. Например, мы можем описать рецепт в виде списка, использовать номера для шагов, или даже создать таблицу с ингредиентами.

В контексте микроразметки, словарь — это набор типов и свойств (например, "Книга", "Автор", "Дата Публикации"), а синтаксис — это способы встраивания этих метаданных в HTML-код (например, JSON-LD, RDFa, Microdata).

Синтаксисы

Синтаксисы микроразметки — это способы форматирования и встраивания метаданных в HTML-код веб-страницы.

Чтобы было понятнее, представим, что наша веб-страница — это книга, а метаданные — это специальные заметки о книге. Эти заметки помогают нам быстро понимать, о чем эта книга.

Теперь о разных способах писать эти заметки:

1. JSON-LD — Это как краткие записи о книге, написанные на специальном языке. Они хранятся в отдельном блоке, как если бы мы записали их на отдельном листочке.
2. RDFa - Этот способ похож на то, как мы добавляем пометки в наш текст карандашом или цветными маркерами. Мы используем специальные теги, чтобы сказать, что это важная информация.
3. Microdata - Здесь мы прямо в тексте книги добавляем метаданные, как если бы мы подчеркивали важные слова или фразы.

Микроданные (MicroData)

Микроданные (Microdata) — это один из способов помечать данные на веб-страницах, чтобы облегчить их понимание компьютерами, в том числе поисковыми системами.

Основные атрибуты синтаксиса: Itemscope, itemtype и itemprop

Itemscope: Это как контейнер или ящик, в который помещаются данные о чем-то. Например, если речь идет о книге, то все данные о книге могут быть помещены в этот контейнер.

Itemtype: Это как ярлык на контейнере, который говорит, что внутри находятся данные о конкретном объекте или сущности. Например, если у нас есть контейнер с данными о книге, то этот ярлык скажет, что внутри - данные о книге.

Itemprop: Это как этикетки на отдельных вещах внутри контейнера, таких как заголовок книги, имя автора и описание. Они говорят, что это за информация и где ее найти внутри контейнера.

Пример:

			 
				<html lang="en">
				<head>
					<meta charset="UTF-8">
					<meta name="viewport" content="width=device-width, initial-scale=1.0">
					<title>Моя Книга</title>
				</head>
				<body>
					<div itemscope itemtype="http://schema.org/Book">
						<h1 itemprop="name">Моя Замечательная Книга</h1>
						<p>Автор: <span itemprop="author">Иван Иванов</span></p>
						<p itemprop="description">Здесь краткое описание книги.</p>
					</div>
				</body>
				</html>
			
		

<div itemscope itemtype="http://schema.org/Book&quot;&gt; — Это указание компьютеру или поисковому боту на то, что это так называемый контейнер, на котором наклейка словаря "книга" от производителя schema.org.

<h1 itemprop="name">Моя Замечательная Книга</h1> - Представим, что робот - это провинциальный парень с района, не знающий английского (совсем!), и он видит этот "name" и думает, может это "морковка", "крыса", "1101110110000111011011100101", обращается в словарь и понимает, что это "ИМЯ", а раз смотрит в словарь "книга", то значит, что это "название книги".

RDFa

RDFa (Resource Description Framework in attributes) — это подход к добавлению структурированных данных на веб-страницы с использованием атрибутов HTML.

По сути, RDFa, как и Microdata, встраивает метаданные о контенте непосредственно в код страницы. Однако в RDFa для этого применяется свой синтаксис на базе расширенных атрибутов, таких как vocab, resource, typeof, property и др.

Основные атрибуты RDFa:

1. xmlns: Этот атрибут указывает пространство имен (namespace) RDFa. Он говорит браузеру, где найти дополнительную информацию о том, как интерпретировать метаданные;
2. vocab: Используется в HTML5 для указания словаря в атрибуте (так проще);
3. about: Указывает на то, к какому объекту относится текущий блок данных. Это как ярлык на ящик с данными;
4. property: Указывает, какой атрибут объекта мы описываем. Например, если описываем книгу, то это может быть "название" или "автор";
5. content: Содержит фактическое значение атрибута. Например, если мы описываем название книги, то здесь будет само название;
6. typeof: Указывает, какого типа объект мы описываем. Например, это может быть "Книга" или "Статья".

Пример использования RDFa в связке с Dublin Core:

			 
				<html xmlns="http://www.w3.org/1999/xhtml" xmlns:dc="http://purl.org/dc/terms/">
				<head>
					<title>Моя Книга</title>
				</head>
				<body>
					<div typeof="dc:Book" about="#book">
					<h1 property="dc:title" content="Моя Замечательная Книга"></h1>
					<p>Автор: <span property="dc:author" content="Иван Иванов"></span></p>
					<p property="dc:description" content="Здесь краткое описание книги."></p>
					</div>
				</body>
				</html>
			
		

Пояснение:

• xmlns - В данном случае, мы используем стандартные пространства имен, а xmlns:dc указывает на словарь.
• typeof="dc:Book" говорит, что текущий блок данных относится к объекту типа "Книга"
• about="#book" ссылается на уникальный идентификатор этой книги.
• property="dc:title" content="Моя Замечательная Книга" говорит, что внутри блока есть свойство "Заголовок" (dc:title) и его значение - "Моя Замечательная Книга".
• property="dc:author" content="Иван Иванов" говорит, что внутри блока есть свойство "Автор" (dc:author) и его значение - "Иван Иванов".
• property="dc:description" content="Здесь краткое описание книги." говорит, что внутри блока есть свойство "Описание" (dc:description) и его значение - "Здесь краткое описание книги."

Пример использования RDFa в связке с Schema.org:

			 
				<html lang="en">
				<head>
					<meta charset="UTF-8">
					<meta name="viewport" content="width=device-width, initial-scale=1.0">
					<title>Моя Книга</title>
				</head>
				<body>
					<div vocab="http://schema.org/" typeof="Book">
						<h1 property="name">Моя Замечательная Книга</h1>
						<p>Автор: <span property="author">Иван Иванов</span></p>
						<p property="description">Здесь краткое описание книги.</p>
					</div>
				</body>
				</html>
			
		

JSON-LD

JSON-LD (JavaScript Object Notation for Linked Data) - очередной, но кардинально отличающийся способ встраивания метаданных в веб-страницы.

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

Основные элементы JSON-LD

Рассмотрим пример JSON-LD, описывающего информацию о книге:

			 
				{
					"@context": "http://schema.org/",
					"@type": "Book",
					"name": "1984",
					"author": {
					"@type": "Person",
					"name": "George Orwell"
					},
					"genre": "Dystopian fiction",
					"publisher": {
					"@type": "Organization",
					"name": "Penguin Books"
					},
					"datePublished": "1949-06-08",
					"isbn": "978-0451524935"
				 }
			
		

Теперь разберем, что здесь происходит:

1. "@context": "http://schema.org/&quot; — Это контекст, который говорит компьютеру, что мы используем схему (набор правил) от сайта schema.org. Это как "словарь" (а точнее он и есть) для интерпретации данных;
2. "@type": "Book" - Здесь мы говорим, что эти данные описывают книгу;
3. "name": "1984" — Это просто имя книги;
4. "author": { "@type": "Person", "name": "George Orwell" } - Здесь мы говорим, что автор — это человек (Person), а его имя - Джордж Оруэлл;
5. "genre": "Dystopian fiction" - Это жанр книги;
6. "publisher": { "@type": "Organization", "name": "Penguin Books" } - Здесь мы указываем, что издатель - это организация (Organization), а её имя - Penguin Books;
7. "datePublished": "1949-06-08" — Дата публикации книги;
8. "isbn": "978-0451524935" - Уникальный номер книги (ISBN).

Словари

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

Schema.org

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

Вот некоторая информация о Schema.org:

• Дата основания: Инициатива Schema.org была запущена в июне 2011 года.
• Инициаторы: Инициатива Schema.org представляет собой совместный проект от крупных поисковых систем, включая Google, Microsoft (включая Bing), Yahoo и Yandex.
• Преимущества: Использование Schema.org позволяет поисковым системам лучше понимать контент страницы и предоставлять более информативные результаты поиска, включая богатые сниппеты и карусели с дополнительной информацией.
• Примеры схем: Некоторые примеры схем включают Person (для описания персоналий), Event (для описания событий), Product (для описания продуктов) и так далее.

Основные принципы разметки Schema.org на примере MicroData

При использовании разметки Schema.org для структурирования данных на сайте следует придерживаться нескольких важных принципов.

• Во-первых, нужно правильно определить тип описываемой сущности - например, Person (Персона), Article (статья), Event(событие) и т.д.
• Во-вторых, выбрать подходящий синтаксис разметки - например, Microdata, JSON-LD или RDFa.

Например, в сочетании с Microdata тип сущности указывается с помощью атрибута itemtype, а её свойства выделяются через itemprop.

"Тип сущности" - в контексте микроразметки, является неким объектом или событием, указывающемся в атрибуте "itemtype"

Если мы размечаем информацию о товаре, то тип сущности будет "Product" (Продукт). Если это описание организации, то тип сущности - "Organization" (Организация). Каждый тип сущности имеет свой набор свойств (например, для товара это может быть название, описание, цена, бренд и так далее), которые помогают точнее описать эту сущность.

Пример:

			 
				<div itemscope itemtype="http://schema.org/person"> 
				// Здесь itemtype указывает, что этот объект представляет собой персону (может быть любым)
				</div>
			
		

Атрибут itemprop указывает на конкретное свойство объекта. Например:

			 
				<div itemscope itemtype="http://schema.org/Person">
					<span itemprop="name">Имя персоны</span> // Здесь itemprop указывает на свойства этой персоны, а именно имя.
					<span itemprop="birthDate">Дата рождения</span>
				</div>
			
		

Даты, время и длительность

			 
				<div itemscope itemtype="http://schema.org/event">
					<span itemprop="name">Вебинар по микроразметке</span>
					<span itemprop="description">Углубленное изучение принципов микроразметки</span>
					<span itemprop="startDate" content="2023-10-15T15:00:00">15 октября 2023, 15:00</span>
					<span itemprop="endDate" content="2023-10-15T17:00:00">15 октября 2023, 17:00</span>
					<span itemprop="duration" content="PT2H">2 часа</span>
				</div>
			
		

Перечисление и ссылки на канонические страницы

			 
				<div itemscope itemtype="http://schema.org/ItemList">
					<span itemprop="name">Лучшие продукты</span>
					<span itemprop="description">Список популярных товаров</span>
					<link itemprop="url" href="https://www.example.com/best-products">
					<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
						<span itemprop="position" content="1">1</span>.
						<span itemprop="item" itemscope itemtype="http://schema.org/Product">
							<span itemprop="name">Продукт 1</span>
							<span itemprop="description">Описание продукта 1</span>
							<link itemprop="url" href="https://www.example.com/product-1" />
						</span>
					</div>
					<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
						<span itemprop="position" content="2">2</span>.
						<span itemprop="item" itemscope itemtype="http://schema.org/Product">
							<span itemprop="name">Продукт 2</span>
							<span itemprop="description">Описание продукта 2</span>
							<link itemprop="url" href="https://www.example.com/product-2"/>
						</span>
					</div>
				</div>
			
		

В этом примере мы размечаем список продуктов (ItemList) с указанием его имени, описания и канонической ссылки на страницу списка.

Затем мы добавляем элементы перечисления (ListItem), каждый из которых представляет отдельный продукт (Product) с его названием, описанием и канонической ссылкой на страницу продукта.

Недостающая или неявная информация

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

Чтобы явно указать такую "невидимую" информацию для поисковиков, используется тег <meta> с атрибутом content. Рассмотрим пример:

			 
				<div itemscope itemtype="http://schema.org/Offer">
					<span itemprop="name">Blend-O-Matic</span>
					<span itemprop="price">$19.95</span>
					<div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
						<img src="four-stars.jpg" alt="4 звезды из 5" />
						<meta itemprop="ratingValue" content="4" />
						<meta itemprop="bestRating" content="5" />
						<span itemprop="ratingCount">25</span> оценок
					</div>
				</div>
			
		

В этом примере мы использовали <meta> для указания ratingValue и bestRating, что позволяет явно предоставить информацию о рейтинге. Обратите внимание на использование атрибута alt у изображения для обеспечения дополнительной доступности.

Вложенные типы сущностей

			 
				<div itemscope itemtype="http://schema.org/Person">
					<span itemprop="name">Джон Уик</span>
					<span itemprop="jobTitle">Наемный убийца</span>
				<!-- Вложенный тип сущности: Контактная информация -->
					<div itemprop="contactPoint" itemscope itemtype="http://schema.org/ContactPoint">
						<span itemprop="contactType">Контактный телефон</span>: <span itemprop="telephone">+1-123-456-7890</span>
						<span itemprop="email">[email protected]</span>
					</div>
				<!-- Вложенный тип сущности: Адрес -->
					<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
						<span itemprop="streetAddress">123 Улица Примерная</span>
						<span itemprop="addressLocality">Город Примерный</span>, <span itemprop="addressRegion">Регион</span>
						<span itemprop="postalCode">12345</span>
						<span itemprop="addressCountry">Страна</span>
					</div>
				</div>
			
		

Разъяснение:

• Начинаем с разметки сущности "Person" с помощью itemscope и указываем тип сущности с помощью itemtype.
• Указываем имя и должность сотрудника с помощью itemprop.
• В этом примере мы включаем два вложенных типа сущностей:
  • Контактная информация (ContactPoint):
    • Указываем тип контактной информации с помощью itemtype.
    • Затем указываем контактный телефон и электронную почту с помощью соответствующих itemprop.
  • Адрес (PostalAddress):
    • Указываем тип адреса с помощью itemtype.
    • Затем указываем улицу, город, регион, почтовый индекс и страну с помощью соответствующих itemprop.

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

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

Разъяснение возможностей расширения стандарта Schema.org для более детальной разметки данных.

Open Graph

Микроразметка Open Graph позволяет определить, каким образом контент будет отображаться в социальных сетях, таких как Facebook, Twitter, LinkedIn и других.

Зачем использовать Open Graph?

1. Улучшенное отображение контента: Open Graph позволяет задать заголовок, описание и изображение для вашей страницы, что делает контент более привлекательным при его публикации в социальных сетях.
2. Увеличение кликов и просмотров: Хорошо оформленная микроразметка Open Graph может привлечь больше внимания к вашему контенту и увеличить количество кликов на ссылку.
3. Улучшение SEO-рейтинга: Хотя Open Graph прямо не влияет на позиции в поисковых результатах, лучшее отображение в социальных сетях может привлечь больше пользователей, что в свою очередь может положительно сказаться на SEO-показателях.

Основные мета-теги Open Graph

1. <meta property="og:title" content="Название вашей страницы">: Устанавливает заголовок контента.

---

2. <meta property="og:type" content="тип контента">: Определяет тип контента (например, website, article, video и т.д.).

---

3. <meta property="og:description" content="Описание контента">: Предоставляет краткое описание контента.

---

4. <meta property="og:image" content="URL_изображения">: Устанавливает ссылку на изображение, которое будет отображаться с контентом.

---

5. <meta property="og:url" content="URL_вашей_страницы">: Указывает на URL страницы.

---

6. <meta property="og:site_name" content="Название вашего сайта">: Задает название вашего сайта.

Пример микроразметки Open Graph:

			 
				<!DOCTYPE html>
				<html lang="en">
				<head>
					<meta charset="UTF-8">
					<meta name="viewport" content="width=device-width, initial-scale=1.0">
					<title>Мой Заголовок Страницы</title>
				<!-- Мета-теги Open Graph -->
					<meta property="og:title" content="Заголовок контента">
					<meta property="og:type" content="article">
					<meta property="og:description" content="Описание контента">
					<meta property="og:image" content="URL_изображения.jpg">
					<meta property="og:url" content="https://www.example.com/страница">
					<meta property="og:site_name" content="Название сайта">
				</head>
				<body>
					<!-- Содержимое страницы -->
				</body>
				</html>
			
		

Микроформаты (Microformats)

Микроформаты (Microformats) — это один из форматов микроразметки, который использует семантические HTML-классы для выделения и описания информации на веб-странице.

Зачем использовать Microformats?

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

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

Описание для сайта в подарок

Создадим сайт с конверсией выше чем у конкурентов от 170 000 рублей

Нами протестированы сотни элементов, которые влияют на конверсию и мы готовы внедрить их на Ваш сайт

Узнать стоимость

Средняя посещаемость сайтов — 33 000/месяц

Разрабатываем с 2012 года

Создали 200+ проектов

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

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

Доступные типы микроформатов

1. hCard: Для представления контактной информации о людях, организациях и местах.
2. hCalendar: Для описания событий, встреч и расписаний.
3. hReview: Позволяет оценивать и писать обзоры товаров, услуг и других объектов.
4. hProduct: Для представления информации о продуктах.
5. hRecipe: Для рецептов и кулинарных инструкций.

Пример использования микроформата hReview для оценки и обзора продукта:

			 
				<div class="hreview">
					<h3 class="summary">Отличный продукт</h3>
					<p class="description">Этот продукт действительно удивителен! Очень рекомендую.</p>
					<div class="rating">
						<span class="value">5</span> звезд
					</div>
					<div class="item">
						<span class="fn">Примерный Продукт</span>
					</div>
					<div class="reviewer">
						<span class="fn">Иван Иванов</span>
					</div>
				</div>
			
		

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

В нем содержатся следующие элементы:

• hreview: Класс для общего контейнера обзора.
• summary: Заголовок обзора.
• description: Описание продукта.
• rating: Оценка продукта (в данном случае, 5 звезд).
• item и .fn: Информация о продукте (название).
• reviewer и .fn: Информация о рецензенте (имя).

Data-Vocabulary

Data-Vocabulary - один из первых стандартов микроразметки данных, предшествовавший Schema.org. Однако в 2020 году Google прекратила его поддержку, перейдя на более современные решения. За ним последовал и Яндекс.

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

Twitter Cards

• Twitter Card - это формат разметки, предоставляемый Twitter (Нынче "X"), который позволяет вам улучшить отображение ссылок, размещенных в твитах. Он позволяет прикреплять более информативные элементы к вашим твитам, такие как изображения, заголовки, описания и другие метаданные.

Данная разметка основана на стандарте Open Graph, поэтому смешивание обоих словарей не повлечет за собой ошибок и конфликтов.

Существует несколько типов Twitter Cards:

1. Summary Card: Отображает заголовок, описание и изображение. Это базовый тип карточки.
2. Summary Card with Large Image: Также отображает заголовок, описание и изображение, но в большем размере.
3. App Card: Позволяет представить мобильное приложение в твите.
4. Player Card: Позволяет встраивать медиаконтент (аудио, видео) в твит.
5. Product Card: Предназначен для отображения информации о продуктах, включая изображение, название, описание и цену.

Пример оформления разметки для Product Card:

			 
				<!DOCTYPE html>
				<html lang="en">
				<head>
					<meta charset="UTF-8">
					<meta name="viewport" content="width=device-width, initial-scale=1.0">
					<title>Ваша Страница</title>
					<! -- Мета-теги Twitter Card -->
					<meta name="twitter:card" content="product">
					<meta name="twitter:site" content="@yourtwitterhandle">
					<meta name="twitter:title" content="Название продукта">
					<meta name="twitter:description" content="Описание продукта">
					<meta name="twitter:image" content="ссылка_на_изображение.jpg">
					<meta name="twitter:data1" content="Цена $10">
					<meta name="twitter:label1" content="Цена">
					<meta name="twitter:data2" content="В наличии">
					<meta name="twitter:label2" content="Статус">
					<meta name="twitter:url" content="ссылка_на_продукт">
				</head>
				<body>
					<!-- Содержимое вашей страницы -->
				</body>
				</html>
			
		

После того как метаданные были добавлены следует пройти валидацию, и только после одобрения страницы, пост получит расширенный вывод с картинкой, ценой и т.д.

Dublin Core

Dublin Core (Дублинское ядро) — это набор из 15 элементов метаданных, предназначенный для описания различных информационных ресурсов. Он был разработан в 1995 году на встрече в Дублине, отсюда и название.

Цель Dublin Core - как и у всех остальных микроразметок, предоставить простой стандарт для описания ресурсов, который понятен не только людям, но и компьютерам.

Пример meta-тегов с использованием Dublin Core:

<meta name="DC.Title" content="Заголовок страницы">

<meta name="DC.Creator" content="Иванов И.И.">

<meta name="DC.Subject" content="Ключевые слова">

Поисковые системы, такие как Google и Яндекс, не поддерживают элементы Dublin Core и вряд ли помогут вам в улучшении результатов поиска. Но знать, что такая разметка существует будет не лишним. Вдруг станет популярной!

Good Relations (schema)

GoodRelations (schema) - это язык разметки для веб-страниц (не путать с Schema.org), разработанный, внезапно, для описания продуктов и услуг компанией Google в 2008 году, как и Data-Vocabulary, не рекомендуется для внедрения на сайт так как устарела, предпочтение так же отходит в сторону Schema.org.

Geo

Geo - это один из типов микроразметки Schema.org, который позволяет вам добавлять географические данные, такие как местоположение предприятия или организации, к вашей веб-странице.

Это полезно для предоставления информации о физическом местоположении вашего бизнеса или для обозначения местоположения события.

Пример:

			 
				<div itemscope itemtype="http://schema.org/Place">
					<span itemprop="name">Название места</span>
						<span itemprop="description">Описание места</span>
						<span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
						<meta itemprop="latitude" content="53.349805"> // широта
						<meta itemprop="longitude" content="-6.26031"> // долгота
					</span>
				</div>
			
		

Микроразметки используемые поисковиками

Подборка наиболее релевантных и популярных словарей и синтаксисов микроразметки используемых как Google, так и Яндекс:

Словари: Schema.org, Open Graph, Микроформаты (Microformats), Twitter Cards

Синтаксисы: JSON-LD, Микроданные (MicroData)

Обоснование:

• Schema.org - самый популярный и универсальный словарь структурированных данных, поддерживается всеми поисковиками;
• Open Graph - важен для корректного отображения страниц в социальных сетях;
• Микроформаты - старейший стандарт, до сих пор актуален;
• Twitter Cards - важны для отображения карточек при добавлении ссылок в Твиттере;
• JSON-LD и MicroData - самые популярные синтаксисы разметки данных, поддерживаются поисковиками.

Сниппеты

Добавление микроразметки на сайт позволяет добиться от поисковиков вывода расширенных сниппетов в выдаче. Далее немного разберемся в вопросе "кто этот сниппет такой?".

Сниппет (snippet) — это небольшие фрагменты кода, текста, или другой информации, которые представляют собой краткое описание, обзор или обрывок более крупного контента.

Существуют различные типы сниппетов:

1. Текстовый сниппет: Включает в себя краткое описание контента страницы, содержащее ключевые слова из запроса пользователя.
2. Сниппет с изображением: Кроме текста, может включать изображение, связанное с контентом страницы.
3. Видео-сниппет: Показывает видео вместе с кратким описанием и ссылкой.
4. Сниппет "Вопрос-Ответ" (FAQ): Если на странице есть структурированный контент в формате вопрос-ответ, поисковая система может выделить эту информацию в виде специального сниппета.
5. Сниппеты со звёздами и рейтингами: Когда страница имеет оценки, рейтинги и отзывы, поисковая система может включить эту информацию в сниппет.

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

Отличия расширенного сниппета от обычного

Например, если вы ищете отзывы о ресторане, расширенный сниппет может показать оценку ресторана, количество отзывов, средний чек, часы работы и т.д. ещё до того, как вы перешли на страницу.

1. Обычный сниппет:
   • Это краткое описание страницы, которое появляется в результатах поиска;
   • Обычно состоит из заголовка, URL и краткого описания контента страницы;
   • Отображается в стандартном формате без дополнительных выделений.

1. Расширенный сниппет:
   • Представляет собой более информативный результат поиска, который может включать дополнительные элементы, такие как оценки, рейтинги, цены, авторы, даты публикации и т.д.;
   • Расширенные сниппеты обогащают обычный текстовый результат более детальной информацией;
   • Они предоставляют пользователю больше контекста о том, что он может найти на странице.

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

Эмодзи в сниппетах

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

Вот несколько аспектов, которые стоит учитывать:

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

---

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

---

3. Понимание контента.
   Эмодзи помогают быстрее понять тему или содержание страницы. Например, если речь идет о рецепте, использование соответствующего эмодзи (например, ? для бургера) наглядно покажет, что речь идет о еде.

---

4. Компактность и информативность.
   Эмодзи сократят количество символов в сниппете, помогая передать информацию более компактно и выразительно.

---

5. Релевантность и умеренность.
   Эмодзи должны быть релевантными контенту и контексту страницы. Также важно не переусердствовать: слишком много эмодзи может выглядеть навязчиво и ухудшить восприятие.

Пример использования эмодзи с schema.org и JSON-LD:

			 
				{
				"@context": "http://schema.org",
				"@type": "Product",
				"name": "Примерный продукт",
				"description": "Отличный продукт 👍",
					"aggregateRating": {
						"@type": "AggregateRating",
						"ratingValue": "4.5",
						"reviewCount": "10"
					}
				}
			
		

Использовать emoji рекомендуется исключительно в виде десятичного или шестнадцатеричного кода (&#128077; =?);

Санкции против ваших расширенных сниппетов

Санкции от поисковиков могут выражаться по-разному, иногда они просто не отображают ваши emoji, иногда страницу, а бывает санкции накладываются сразу весь сайт.

Рекомендации по избеганию санкций и удалению расширенных сниппетов поисковиками:

1. Соблюдение правил и стандартов поисковых систем:
   • Первое и главное, следует всегда придерживаться правил, предоставленных поисковой системой. Это включает в себя Google, Yandex и других.
2. Качественный и уникальный контент:
   • Убедитесь, что контент на вашем сайте высокого качества, релевантен запросам пользователей и уникален. Избегайте дублирования контента.
3. Избегание манипуляций:
   • Не используйте "черные методы" SEO, такие как накрутка ссылок или скрытый текст.
4. Мониторинг и анализ:
   • Постоянно отслеживайте изменения в алгоритмах и правилах поисковых систем и анализируйте, как они могут повлиять на ваш сайт.

Как внедрить микроразметку

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

Ручное добавление

Чтобы вручную добавить микроразметку на свой сайт, используя, например, Schema.org и MicroData, вам потребуется выполнить следующие шаги:

1. Выберите тип схемы: Сначала определите, какой тип схемы вы хотите использовать. Например, это может быть "Organization" для представления информации о вашей организации или "Product" для представления информации о продуктах.
2. Вставьте HTML-разметку: Вставьте соответствующую HTML-разметку на страницу вашего сайта. Например, если вы хотите добавить схему "Organization", то это может выглядеть так:

			 
				<div itemscope itemtype="http://schema.org/Organization">
					<span itemprop="name">Название вашей организации</span>
					<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
						<span itemprop="streetAddress">Улица, номер дома</span>,
						<span itemprop="addressLocality">Город</span>,
						<span itemprop="addressRegion">Регион</span>,
						<span itemprop="postalCode">Почтовый индекс</span>
					</div> 
					<span itemprop="telephone">Ваш номер телефона</span>
					<a href="ссылка на ваш сайт" itemprop="url">Ссылка на ваш сайт
				</div>
			
		

1. Замените значения: Замените примеры значений на реальные данные вашей организации.
2. Подключите PHP для динамических данных: Если некоторые данные зависят от переменных (к примеру это может быть каталог, где название товара подставляется из переменной "$product_name"), вы можете использовать PHP для вставки этих данных в разметку.

Пример:

			 
				

				<span itemprop="name"><?php echo $product_name;?></span>
				

				или
				

				<span itemprop="name"><?php= $product_name;?></span>
				

			
		

Чек-лист:

1. Разместите код на вашем сайте: Убедитесь, что код разметки находится в нужном месте на вашей веб-странице.
2. Проверьте разметку: После того как вы внесли изменения, рекомендуется проверить вашу разметку с помощью инструментов для тестирования микроразметки, таких как Google's Structured Data Testing Tool.
3. Пересоберите страницу: Если вы используете статические файлы, пересоберите страницу. Если сайт работает на CMS, убедитесь, что изменения были сохранены.
4. Проверьте результаты: После размещения микроразметки на сайте, периодически проверяйте ее с помощью инструментов Google для веб-мастеров, чтобы убедиться, что все данные корректно обрабатываются.

Инструменты внедрения микроразметки

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

Мастер разметки структурированных данных Google

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

Этапы работы:

• Первым делом после перехода по к мастеру разметки необходимо выбрать тип размечаемых данных, в нашем случае это будет статья, и далее вставить url (или html код) той страницы, которую нам следует разметить.
• Следующим этапом будет разметка путем выделения элементов и присваивания им определенных сущностей, в нашем случае заголовок статьи = название, после выделения всего что вы смогли найти, переходим к следующему пункту нажимая "Создать HTML".
• Тут выбираем нужный нам синтаксис, копируем, и внедряем на наш сайт.

Microdata Generator (Генератор микроразметки)

Microdata Generator не является сервисом или программой, какой-то компании, таких сервисов куча в поисковой выдаче, мы выбрали второй сайт из предоставленных результатов.

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

Плагины для CMS

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

WordPress

Для WordPress существует множество плагинов, позволяющих добавлять микроразметку. Однако стоит учитывать, что часть функционала по разметке уже встроена в популярные SEO-плагины (Yoast SEO, The SEO Framework).

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

Далее мы подробнее остановимся на специализированных плагинах для микроразметки:

• Schema - All in One Schema Rich Snippets
• Schema & Structured Data for WP & AMP

1. Schema - All in One Schema Rich Snippets - это бесплатный плагин для WordPress, который позволяет легко добавлять разметку Schema.org на сайт.

Чтобы использовать Schema All in One, следует:

• Установить и активировать плагин в панели плагинов WordPress;
• Опубликовать пост/страницу;
• Проверить сгенерированную разметку валидатором Schema.org.

1. При создании или редактировании поста/страницы, найти внизу редактора блок "Настроить расширенный сниппет";
2. Выбрать нужный тип контента (товар, обзор, рецепт и т.д.) и заполнить соответствующие поля: заголовок, описание, изображение и прочее. Важно соблюдать рекомендуемые размеры изображений;

После добавления, у нас в коде появилась микроразметка формата schema.org (Microdata).

2. Schema & Structured Data for WP & AMP

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

• Произвести стандартную установку, как и с плагином выше;
• Следующим этапом будет настройка глобальных параметров сайта, где можно выбрать страницу "о компании", "контакты", "хлебные крошки" и т.д.
• Далее заполним так называемый "график знаний" (данные компании)
• После следует перейти в "Schema Types" и нажать на верхнюю кнопку "Add Schema Type", где можно будет настроить шаблонный тип схемы для наших нужд, например статьи, а потом просто подключать их к нужным записям.

1C Битрикс

Среди бесплатных модулей для 1С-Битрикс одним из немногих действительно полезных является модуль для генерации микроразметки "Микроразметка Schema.org". Но к сожалению, этот модуль несовместим с последними версиями PHP (8.1 и выше).

Поэтому мы рекомендуем либо разобраться в основах PHP и реализовать генерацию микроразметки самостоятельно, либо обратиться за помощью к специалистам. Например, к веб-студии Willday, которая имеет опыт внедрения "Schema.org".

Проверка в Яндекс

Google в подарок

до 31 мая

Бесплатный SEO-аудит по 205 параметрам

Ответьте на 8 вопросов и мы найдем причину низких позиций в поисковиках.

Получить отчет

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

Таким образом, если вы используете актуальный PHP и хотите качественно внедрить микроразметку Schema - изучение основ разработки или привлечение специалиста будет разумным решением. Это поможет максимально эффективно использовать все преимущества схем для вашего сайта на 1С-Битрикс.

Joomla

JoomSEF

1. Установите и активируйте плагин JoomSEF.
2. В административной панели перейдите в раздел "Компоненты" > "JoomSEF" > "Контроллеры".
3. Выберите контроллер, для которого хотите добавить микроразметку.
4. В разделе "Дополнительные параметры" найдите "SEO - Дополнительные параметры" и заполните необходимые поля.

Для конструкторов

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

Вот три совета, которые помогут разобраться с возможностями добавления микроразметки:

• Изучите документацию и функционал вашего конструктора. У некоторых, например Tilda, есть встроенные инструменты для автоматического добавления микроразметки.
• Пообщайтесь на тематических форумах с другими пользователями этого конструктора. Возможно, кто-то уже разобрался с этим функционалом.
• Свяжитесь со службой поддержки разработчика. Они точно смогут ответить, есть ли возможность добавления микроразметки, и подсказать способы ее реализации.

Микроформаты для сайта

В этом разделе мы сосредоточимся на конкретных сущностях словаря schema.org и предоставим примеры их использования в форматах JSON-LD и (или) MicroData.

Шапка сайта (WPHeader)

Шапка сайта (или верхний колонтитул) — это верхняя часть веб-страницы, которая обычно содержит основные элементы навигации и информацию о сайте. Она расположена над основным содержимым страницы и часто охватывает всю ширину экрана.

			 
		<script type="application/ld+json">
	{
		"@context": "http://schema.org", // Указываем контекст схемы
		"@type": "WPHeader", // Указываем тип сущности
		"name": "Название вашего сайта", // Название сайта
		"url": "https://www.example.com", // URL сайта
		"description": "Краткое описание вашего сайта", // Краткое описание
		"contactPoint": { // Контактная информация
		"@type": "ContactPoint",
		"telephone": "+1-234-567-890", // Номер телефона
		"contactType": "customer support" // Тип контакта
	 }
	}
	</script>
			
		

MicroData:

			 
				<div itemscope itemtype="http://schema.org/WPHeader"> <!-- Указываем тип и сущность -->
					<span itemprop="name">Название вашего сайта</span> <!-- Название сайта -->
					<a href="https://www.example.com" itemprop="url">https://www.example.com</a> <!-- URL сайта -->
					<span itemprop="description">Краткое описание вашего сайта</span> <!-- Краткое описание -->
					<div itemprop="contactPoint" itemscope itemtype="http://schema.org/ContactPoint"> <!-- Контактная точка -->
						Телефон: <span itemprop="telephone">+1-234-567-890</span> <!-- Номер телефона -->
						<meta itemprop="contactType" content="customer support" /> <!-- Тип контакта -->
					</div>
				</div>
			
		

Хлебные крошки (BreadCrumbs)

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

			 
				<script type="application/ld+json">
	{
	 "@context": "http://schema.org",
	 "@type": "BreadcrumbList",
	 "itemListElement": [
	 {
	 "@type": "ListItem",
	 "position": 1,
	 "item": {
	        "@id": "https://example.com",
	 "name": "Главная"
	      }
	 },
	 {
	 "@type": "ListItem",
	 "position": 2,
	 "item": {
	 "@id": "https://example.com/category",
	 "name": "Категория"
	 }
	 },
	 {
	 "@type": "ListItem",
	 "position": 3,
	 "item": {
	 "@id": "https://example.com/category/subcategory",
	 "name": "Подкатегория"
	 }
	 },
	 {
	 "@type": "ListItem",
	 "position": 4,
	 "item": {
	 "@id": "https://example.com/category/subcategory/page",
	        "name": "Текущая страница"
	 }
	 }
	 ]
	}
	</script>
			
		

Мы создаем BreadcrumbList (список хлебных крошек), который содержит список ListItem (элементы списка). Каждый ListItem представляет собой одну крошку. У каждой крошки есть position (позиция) и item (ссылка на текущий элемент).

Примеры разметки меню (SiteNavigationElement)

SiteNavigationElement предоставляет средства для явного указания структуры навигационных элементов (например, бургер-меню) на вашем сайте.

Вот несколько примеров разметки:

1. Простое горизонтальное меню:

			 
				<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
					<ul>
						<li itemprop="name">
							<a href="https://example.com/" itemprop="url">Главная</a>
						</li>
						<li itemprop="name">
							<a href="https://example.com/products" itemprop="url">Продукты</a>
						</li>
						<li itemprop="name">
							<a href="https://example.com/about" itemprop="url">О нас</a>
						</li>
						<li itemprop="name">
							<a href="https://example.com/contact" itemprop="url">Контакты</a>
						</li>
					</ul>
				</nav>
			
		

• Вертикальное меню с подменю:

			 
				<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
				<ul>
					<li itemprop="name">
						<a href="https://example.com/" itemprop="url">Главная</a>
					</li>
					<li itemprop="name">
						<a href="https://example.com/products" itemprop="url">Продукты</a>
						<ul>
							<li itemprop="name">
								<a href="https://example.com/products/category1" itemprop="url">Категория 1</a>
							</li>
							<li itemprop="name">
								<a href="https://example.com/products/category2" itemprop="url">Категория 2</a>
							</li>
							<li itemprop="name">
								<a href="https://example.com/products/category3" itemprop="url">Категория 3</a>
							</li>
						</ul>
					</li>
					<li itemprop="name">
						<a href="https://example.com/about" itemprop="url">О нас</a>
					</li>
					<li itemprop="name">
						<a href="https://example.com/contact" itemprop="url">Контакты</a>
					</li>
				</ul>
			</nav>
			
		

Поиск по сайту (SearchAction)

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

Пример разметки SearchAction:

			 
				<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "SearchAction",
"target": {
	"@type": "EntryPoint",
	"urlTemplate": "https://example.com/search?q={query}"
	},
"query-input": "required name=query"
}
</script>
			
		

В этом примере:

• @context указывает на контекст схемы данных.
• @type определяет тип действия как SearchAction.
• target указывает на URL, куда будет направлен запрос с поисковой формы. {query} заменяется на фактический запрос пользователя.
• query-input говорит о том, что поле ввода является обязательным, и его имя - query.

Подвал сайта (WPFooter)

Пример использования микроразметки данных в нижней части сайта (WPFooter) с помощью Schema.org:

			 
				<footer>
    <div itemscope itemtype="http://schema.org/WPFooter">
        <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
            <span itemprop="name">Название вашей организации</span>
            <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                <span itemprop="streetAddress">Улица, дом</span>,
                <span itemprop="addressLocality">Город</span>,
                <span itemprop="addressRegion">Регион</span>,
                <span itemprop="postalCode">Почтовый индекс</span>
            </div>
            <span itemprop="telephone">Телефон</span>
            <a href="mailto:[email protected]" itemprop="email">[email protected]</a>
            <a href="https://www.example.com" itemprop="url">www.example.com</a>
        </div>
        <div itemprop="socialMedia" itemscope itemtype="http://schema.org/SocialMediaPosting">
            <a href="https://www.facebook.com/example" itemprop="url">Facebook</a>
            <a href="https://twitter.com/example" itemprop="url">Twitter</a>
            <a href="https://www.linkedin.com/company/example" itemprop="url">LinkedIn</a>
        </div>
        <div itemprop="copyrightHolder" itemscope itemtype="http://schema.org/Organization">
            <span itemprop="name">Название правообладателя</span>
        </div>
    </div>
</footer>
			
		

Микроразметка блога (Blog)

Тип "Blog" используется для описания блогов или веб-журналов.

			 
				{
  "@context": "http://schema.org",
  "@type": "Blog",
  "name": "Название вашего блога",
  "url": "URL вашего блога",
  "description": "Описание вашего блога",
  "publisher": {
    "@type": "Organization",
    "name": "Имя вашей организации или имени автора блога"
  },
  "datePublished": "Дата первой публикации блога",
  "dateModified": "Дата последнего обновления блога"
}
			
		

• "@type": "Blog" указывает, что данная разметка относится к типу "Blog";
• "name" — это название вашего блога;
• "url" - URL вашего блога;
• "description" - описание вашего блога;
• "publisher" — это информация об издателе блога, который может быть организацией или автором блога;
• "datePublished" и "dateModified" - указывают даты первой публикации и последнего обновления блога соответственно.

Разметка списка статей блога (ItemList)

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

             
								{
								"@context": "http://schema.org",
								"@type": "ItemList",
								"name": "Название списка статей",
								"description": "Описание списка статей",
								"itemListElement": 
								[
									{
									"@type": "ListItem",
									"position": 1,
									"item": {
										"@type": "Article",
										"name": "Название статьи 1",
										"url": "URL статьи 1",
										"description": "Описание статьи 1",
										"datePublished": "Дата публикации статьи 1",
										"author": {
											"@type": "Person",
											"name": "Имя автора статьи 1"
										}
									}
								},
								{
									"@type": "ListItem",
									"position": 2,
									"item": {
										"@type": "Article",
										"name": "Название статьи 2",
										"url": "URL статьи 2",
										"description": "Описание статьи 2",
										"datePublished": "Дата публикации статьи 2",
										"author": {
											"@type": "Person",
											"name": "Имя автора статьи 2"
										}
									}
								}
								// Добавьте дополнительные элементы списка статей при необходимости
								]
								}
            
        

Разметка автора на странице (Person)

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

             
                {
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "Имя и фамилия",
  "jobTitle": "Должность или профессия",
  "description": "Краткое описание о человеке",
  "image": "URL изображения человека",
  "url": "Ссылка на профиль (если применимо)",
  "sameAs": [
    "Ссылка на профиль в социальной сети 1",
    "Ссылка на профиль в социальной сети 2"
  ]
}
            
        

Статья детально (BlogPosting и Article)

Sсhema.org определяет два типа структуры для описания контента: "Article" и "BlogPosting".

Вот их основные различия:

1. Article:
   • Article предназначен для описания отдельных статей, рассказов или других подобных текстовых контентов.
   • Обычно, Article имеет определенное название, описание и может иметь одного или нескольких авторов.
   • Article не предполагает жесткой ассоциации с блогом и может существовать в различных контекстах.

Пример разметки Article:

             
                {
  "@context": "http://schema.org",
  "@type": "Article",
  "headline": "Заголовок статьи",
  "description": "Описание статьи",
  "datePublished": "Дата публикации",
  "dateModified": "Дата последнего обновления",
  "author": {
    "@type": "Person",
    "name": "Имя автора"
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "URL статьи"
  }
}
            
        

BlogPosting:

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

Пример разметки BlogPosting:

             
                {
  "@context": "http://schema.org",
  "@type": "BlogPosting",
  "headline": "Заголовок поста в блоге",
  "description": "Описание поста",
  "datePublished": "Дата публикации",
  "dateModified": "Дата последнего обновления",
  "author": {
    "@type": "Person",
    "name": "Имя автора"
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "URL поста"
  },
  "blogPost": {
    "@type": "Blog",
    "name": "Название блога",
    "url": "URL блога"
  }
}
            
        

Инструкции (How-To)

Сущность "How-To" в микроразметке schema.org используется для описания пошаговых инструкций или руководств.

Вот как можно разметить инструкцию с использованием синтаксиса JSON-LD:

             
                {
  "@context": "http://schema.org",
  "@type": "HowTo",
  "name": "Название инструкции",
  "description": "Краткое описание инструкции",
  "steps": [
    {
      "@type": "HowToStep",
      "name": "Шаг 1",
      "text": "Текст шага 1"
    },
    {
      "@type": "HowToStep",
      "name": "Шаг 2",
      "text": "Текст шага 2"
    },
    {
      "@type": "HowToStep",
      "name": "Шаг 3",
      "text": "Текст шага 3"
    }
  ],
  "totalTime": "Время выполнения инструкции",
  "estimatedCost": {
    "@type": "MonetaryAmount",
    "currency": "USD",
    "value": "Стоимость выполнения инструкции"
  }
}
            
        

Здесь:

• "@type": "HowTo" указывает, что данная разметка относится к типу "HowTo".
• "name" — это название инструкции.
• "description" - краткое описание инструкции.
• "steps" — это массив объектов, представляющих отдельные шаги инструкции.
• В каждом шаге ("HowToStep") указывается "name" (название шага) и "text" (текст шага).
• "totalTime" - оценочное время выполнения инструкции.
• "estimatedCost" - оценочная стоимость выполнения инструкции.

Рецепты (Recipe)

Тип "Recipe" используется для описания рецептов блюд.

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

             
                {
  "@context": "http://schema.org",
  "@type": "Recipe",
  "name": "Название рецепта",
  "description": "Краткое описание рецепта",
  "author": {
    "@type": "Person",
    "name": "Имя автора рецепта"
  },
  "image": "URL изображения блюда",
  "recipeIngredient": [
    "Ингредиент 1",
    "Ингредиент 2",
    "Ингредиент 3"
  ],
  "recipeInstructions": "Пошаговые инструкции по приготовлению",
  "prepTime": "Время подготовки",
  "cookTime": "Время приготовления",
  "totalTime": "Общее время приготовления",
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "Количество калорий в одной порции",
    "servingSize": "Размер порции"
  }
}
            
        

Творческая работа (CreativeWork)

Сущность "CreativeWork" предназначена для описания различных творческих работ, таких как книги, фильмы, музыкальные произведения и многое другое.

             
                {
  "@context": "http://schema.org",
  "@type": "CreativeWork",
  "name": "Название творческой работы",
  "description": "Краткое описание творческой работы",
  "author": {
    "@type": "Person",
    "name": "Имя автора"
  },
  "datePublished": "Дата публикации",
  "genre": "Жанр творческой работы",
  "keywords": "Ключевые слова, связанные с работой",
  "publisher": {
    "@type": "Organization",
    "name": "Имя издателя (если применимо)"
  },
  "image": "URL изображения работы",
  "url": "URL страницы с описанием работы",
  "citation": "Ссылка на цитирование работы (если применимо)"
}
            
        

Новость детально (NewsArticle)

"NewsArticle" в микроразметке используется для описания новостей или статей похожих на новость.

             
                {
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "URL статьи"
  },
  "headline": "Заголовок новостной статьи",
  "description": "Краткое описание статьи",
  "datePublished": "Дата публикации",
  "dateModified": "Дата последнего обновления",
  "author": {
    "@type": "Person",
    "name": "Имя автора статьи"
  },
  "image": "URL изображения, связанного с новостью",
  "publisher": {
    "@type": "Organization",
    "name": "Имя издателя",
    "logo": {
      "@type": "ImageObject",
      "url": "URL логотипа издателя"
    }
  }
}
            
        

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

Ответы на часто задаваемые вопросы Q&A (FAQ)

Сущность "Question" используется для представления вопросов, а "Answer" для ответов на веб-страницах. Она может быть полезной для поисковых систем, так как помогает явно указать, что определенная часть контента представляет собой вопрос и соответствующий ответ.

             
                <script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Как создать микроразметку с использованием 
			schema.org?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Рекомендуется использовать JSON-LD для разметки
				схемы schema.org. Он более гибкий и легче
				 внедряется в HTML-код страницы."
      }
    },
    {
      "@type": "Question",
      "name": "Какой синтаксис разметки предпочтительнее, JSON-LD
			или MicroData?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JSON-LD предпочтительнее для разметки схемы
				schema.org, так как он обеспечивает более гибкую
				и легкую интеграцию с веб-страницей."
      }
    },
    {
      "@type": "Question",
      "name": "Какие преимущества микроразметки для SEO?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Микроразметка помогает поисковым системам лучше понимать контент страницы, что может повысить видимость и качество отображения результатов в поисковых результатах."
      }
    }
  ]
} 
</script>
            
        

Микроразметки комментариев (Comment)

Эта разметка позволяет поисковым системам понимать и анализировать комментарии пользователей на веб-странице.

             
                

    
             
                {
  "@context": "http://schema.org",
  "@type": "UserComments",
  "commentCount": 3,
  "comment": [
    {
      "@type": "Comment",
      "author": {
        "@type": "Person",
        "name": "Иван Иванов"
      },
      "datePublished": "2023-11-02",
      "text": "Отличная статья, очень понятно написано!"
    },
    {
      "@type": "Comment",
      "author": {
        "@type": "Person",
        "name": "Мария Петрова"
      },
      "datePublished": "2023-11-03",
      "text": "Спасибо за полезную информацию!"
    },
    {
      "@type": "Comment",
      "author": {
        "@type": "Person",
        "name": "Алексей Сидоров"
      },
      "datePublished": "2023-11-04",
      "text": "У меня возник вопрос, можно уточнить?"
    }
  ]
}
            
        
    

        

            JSON-LD
        
        

            
                Копировать
            
        
    

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

Микроразметка очень полезна для интернет-магазинов, так как позволяет точно структурировать информацию о товарах.

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

И вот вы видите 2 варианта:

Какой вариант предпочтительнее? Думаю, что ответ очевиден!

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

Микроразметка карточки товара (Product)

Данный тип микроразметки предназначен для отдельных товарных позиций.

				 
					{
	  "@context": "http://schema.org",
	  "@type": "Product",
	  "name": "Футболка с коротким рукавом",
	  "description": "Удобная футболка для жарких деньков",
	  "url": "https://example.com/product/1",
	  "image": "https://example.com/images/product1.jpg",
	  "brand": {
		"@type": "Brand",
		"name": "Пример Бренда"
	  },
	  "offers": {
		"@type": "Offer",
		"price": "19.99",
		"priceCurrency": "USD",
		"availability": "В наличии",
		"seller": {
		  "@type": "Organization",
		  "name": "Пример Магазина"
		}
	  }
	}
				
			

Микроразметка категории товаров (Productslist)

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

				 
					{
	  "@context": "http://schema.org",
	  "@type": "ProductsList",
	  "name": "Зимняя коллекция 2024",
	  "description": "Каталог летних товаров 2024 года",
	  "itemListElement": [
		{
		  "@type": "Product",
		  "name": "Рубашка (черная)",
		  "url": "https://example.com/product/1",
		  "description": "Хлопковая летняя рубашка",
		  "image": "https://example.com/images/product1.jpg",
		  "offers": {
			"@type": "Offer",
			"price": "13999",
			"priceCurrency": "РУБ"
		  }
		},
		{
		  "@type": "Product",
		  "name": "Шорты для плавания",
		  "url": "https://example.com/product/2",
		  "description": "Универсальные шорты для пляжа и бассейна",
		  "image": "https://example.com/images/product2.jpg",
		  "offers": {
			"@type": "Offer",
			"price": "3999",
			"priceCurrency": "РУБ"
		  }
		}
	  ]
	}
				
			

Услуга (AggregateOffer)

AggregateOffer в словаре schema.org представляет собой агрегированное предложение, которое объединяет несколько предложений для одного продукта или услуги.

Это может быть полезно, когда на один продукт может быть предложено несколько вариантов с разными характеристиками, например, разные цвета, размеры и т.д.

				 
					{
	  "@context": "http://schema.org",
	  "@type": "Product",
	  "name": "Футболка с коротким рукавом",
	  "description": "Удобная футболка из бамбука",
	  "url": "https://example.com/product/1",
	  "image": "https://example.com/images/product1.jpg",
	  "brand": {
		"@type": "Brand",
		"name": "Пример Бренда"
	  },
	  "aggregateOffer": {
		"@type": "AggregateOffer",
		"lowPrice": "15.99",
		"highPrice": "24.99",
		"offerCount": "3",
		"availability": "InStock"
	  }
	}
				
			

Микроразметка медиафайлов

Разметка медиафайлов поможет вашим фото и видео появится в выдаче google image или Яндекс фото. Рассмотрим основные типы для фото, видео, гифок и даже 3Д моделей

Видео (VideoObject)

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

Пример использования VideoObject с использованием schema и JSON-LD:

				 
					<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "VideoObject",
	  "name": "Название вашего видео",
	  "description": "Описание вашего видео",
	  "thumbnailUrl": "Ссылка на миниатюру видео",
	  "uploadDate": "Дата загрузки видео",
	  "duration": "PT1M30S",  // Продолжительность видео в формате ISO8601 (1 минута 30 секунд)
	  "publisher": {
		"@type": "Organization",
		"name": "Название вашей организации"
	  },
	  "contentUrl": "Ссылка на видео",
	  "embedUrl": "Ссылка на встроенное видео",
	  "interactionCount": "12345"  // Количество взаимодействий с видео (просмотры, комментарии и т.д.)
	}
	</script>
				
			

Изображение (ImageObject)

ImageObject - это элемент микроразметки, разработанный для передачи дополнительной информации о конкретном изображении.

Он включает следующие ключевые атрибуты:

1. contentUrl: Ссылка на само изображение.
2. description: Описание изображения.
3. name: Название изображения.
4. thumbnailUrl: Ссылка на миниатюру (небольшую версию) изображения.
5. uploadDate: Дата загрузки изображения.
6. author: Информация об авторе изображения (если применимо).
7. publisher: Информация о публикующей организации (если применимо).

Пример:

				 
					<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "ImageObject",
	  "contentUrl": "Ссылка на изображение",
	  "description": "Описание изображения",
	  "name": "Название изображения",
	  "thumbnailUrl": "Ссылка на миниатюру изображения",
	  "uploadDate": "Дата загрузки изображения",
	  "author": {
		"@type": "Person",
		"name": "Имя автора изображения"
	  },
	  "publisher": {
		"@type": "Organization",
		"name": "Название вашей организации"
	  }
	}
	</script>
				
			

Фильм (Movie)

Микроразметка для конкретного фильма включает в себя такие атрибуты как:

1. name: Название фильма.
2. description: Описание фильма.
3. director: Режиссер фильма.
4. actor: Один или несколько актеров, участвующих в фильме.
5. genre: Жанр фильма.
6. image: Ссылка на изображение, связанное с фильмом.
7. contentRating: Рейтинг контента (например, PG-13, R и т.д.).
8. duration: Продолжительность фильма в формате ISO8601.
9. datePublished: Дата первой публикации фильма.
10. trailer: Ссылка на трейлер фильма.
11. aggregateRating: Агрегированный рейтинг фильма.

Пример:

				 
					<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "Movie",
	  "name": "Название фильма",
	  "description": "Описание фильма",
	  "director": {
		"@type": "Person",
		"name": "Имя режиссера"
	  },
	  "actor": [
		{
		  "@type": "Person",
		  "name": "Имя актера 1"
		},
		{
		  "@type": "Person",
		  "name": "Имя актера 2"
		}
	  ],
	  "genre": "Жанр фильма",
	  "image": "Ссылка на изображение",
	  "contentRating": "PG-13",
	  "duration": "PT2H30M",  // Продолжительность - 2 часа 30 минут
	  "datePublished": "Год выпуска фильма",
	  "trailer": "Ссылка на трейлер фильма",
	  "aggregateRating": {
		"@type": "AggregateRating",
		"ratingValue": "8.5",
		"reviewCount": "500"
	  }
	}
	</script>
				
			

Рисунок (Painting)

Разметки данных для изображений и произведений искусства, например картины.

				 
					<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "Painting",
	  "name": "Название картины",
	  "description": "Описание картины",
	  "creator": {
		"@type": "Person",
		"name": "Имя художника"
	  },
	  "dateCreated": "Год создания картины",
	  "image": "Ссылка на изображение картины",
	  "artform": "Живопись",
	  "height": "50",  // Высота в сантиметрах
	  "width": "70",   // Ширина в сантиметрах
	  "artMedium": "Масло, холст",
	  "locationCreated": "Место создания картины",
	  "copyrightHolder": {
		"@type": "Person",
		"name": "Имя владельца авторских прав"
	  }
	}
	</script>
				
			

3D модель

Для трехмерной модели (3DModelObject) микроразметка позволяет предоставить дополнительную информацию о конкретной трехмерной модели.

Включает следующие ключевые атрибуты:

				 
					<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "3DModel",
	  "name": "Название трехмерной модели",
	  "description": "Описание трехмерной модели",
	  "contentUrl": "Ссылка на трехмерную модель",
	  "thumbnailUrl": "Ссылка на миниатюру трехмерной модели",
	  "uploadDate": "Дата загрузки трехмерной модели",
	  "interactionCount": "10000",  // Количество взаимодействий с моделью (просмотры и т.д.)
	  "modelFormat": "Формат трехмерной модели (например, OBJ, STL и т.д.)",
	  "modelSize": "Размер трехмерной модели (например, 10MB)",
	  "author": {
		"@type": "Person",
		"name": "Имя автора трехмерной модели"
	  },
	  "license": "Лицензия трехмерной модели (например, CC BY-SA)"
	}
	</script>
				
			

Общие

В разметке существуют общие типы сущностей, например отзывы или рейтинг, которые могут относится, как к фильму, так к продукту, статье или вовсе к услуге.

Далее рассмотрим оставшиеся основные, но не менее полезные типы разметок.

Рейтинг (AggregateRating)

AggregateRating - включает в себя данные о среднем рейтинге, количестве оценок и других связанных деталях.

				 
					<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "AggregateRating",
	  "itemReviewed": {
		"@type": "Product",
		"name": "Название продукта"
	  },
	  "ratingValue": "4.5",
	  "bestRating": "5",
	  "worstRating": "1",
	  "ratingCount": "100",
	  "reviewCount": "50"
	}
	</script>
				
			

Атрибуты:

• itemReviewed указывает на объект, для которого предоставляется рейтинг. В данном случае, это продукт.
• ratingValue указывает на средний рейтинг (в данном примере - 4.5).
• bestRating и worstRating указывают на максимальный и минимальный возможные рейтинги соответственно (в данном случае, 5 и 1).
• ratingCount указывает на общее количество оценок.
• reviewCount указывает на общее количество отзывов.

Отзывы (Review)

				 
					<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "Review",
	  "itemReviewed": {
		"@type": "Product",
		"name": "Название продукта"
	  },
	  "author": {
		"@type": "Person",
		"name": "Имя автора отзыва"
	  },
	  "datePublished": "2023-11-07",  // Дата публикации отзыва
	  "reviewRating": {
		"@type": "Rating",
		"ratingValue": "5",  // Рейтинг отзыва (например, от 1 до 5)
		"bestRating": "5",
		"worstRating": "1"
	  },
	  "description": "Текст отзыва"
	}
	</script>
				
			

В этом примере мы создаем объект Review и заполняем его различными свойствами.

Обратите внимание, что в свойстве "itemReviewed" указывается объект, к которому относится отзыв (в данном случае - продукт).

Событие (Event)

Event - предоставляет подробную информацию о различных событиях, таких как конференции, выставки, вебинары и т.д.

Пример разметки:

				 
					<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "Event",
	  "name": "Название вашего события",
	  "description": "Описание вашего события",
	  "startDate": "2023-11-15T08:00",  // Дата и время начала события в формате ISO8601
	  "endDate": "2023-11-17T18:00",  // Дата и время окончания события в формате ISO8601
	  "location": {
		"@type": "Place",
		"name": "Название места проведения",
		"address": {
		  "@type": "PostalAddress",
		  "streetAddress": "Улица, номер дома",
		  "addressLocality": "Город",
		  "postalCode": "Индекс",
		  "addressRegion": "Регион",
		  "addressCountry": "Страна"
		}
	  },
	  "image": "Ссылка на изображение события",
	  "performer": {
		"@type": "PerformingGroup",
		"name": "Название организатора/исполнителя"
	  }
	}
	</script>
				
			

Микроразметка для страницы контактов, о компании (Organization / LocalBusiness)

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

Organization:

Объект "Organization" предназначен для предоставления информации о вашей организации. Это может включать в себя название, логотип, контактные данные и другую существенную информацию.

				 
					<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "Organization",
	  "name": "Название вашей организации",
	  "description": "Краткое описание вашей организации",
	  "url": "Ссылка на ваш сайт",
	  "logo": "Ссылка на логотип вашей организации",
	  "contactPoint": {
		"@type": "ContactPoint",
		"telephone": "+1-123-456-7890",
		"contactType": "customer service"
	  },
	  "address": {
		"@type": "PostalAddress",
		"streetAddress": "Улица, номер дома",
		"addressLocality": "Город",
		"addressRegion": "Регион",
		"postalCode": "Почтовый индекс",
		"addressCountry": "Страна"
	  }
	}
	</script>
				
			

LocalBusiness:

Является подтипом объекта "Organization", который используется для представления местных бизнесов. Это может быть, например, ресторан, магазин или салон красоты.

				 
					<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "LocalBusiness",
	  "name": "Название вашего бизнеса",
	  "description": "Краткое описание вашего бизнеса",
	  "address": {
		"@type": "PostalAddress",
		"streetAddress": "Улица, номер дома",
		"addressLocality": "Город",
		"addressRegion": "Регион",
		"postalCode": "Почтовый индекс",
		"addressCountry": "Страна"
	  },
	  "telephone": "+1-123-456-7890",
	  "openingHours": "Рабочее время вашего бизнеса",
	  "priceRange": "$$"  // Уровень цен (например, "$" - недорого, "$$" - средний)
	}
	</script>
				
			

Как проверить правильность микроразметки

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

Это можно сделать путем просмотра исходного кода страницы:

• JSON-LD - заходим на нужную нам страницу, и нажимаем клавишу F12, далее, клик по элементу html кода и ctrl+f и в поиске вводим ld+json, находим код (или нет) и сверяем все данные.
• MicroData - тут все немного проще. Находим прямо на странице элемент, который должен быть включен в разметку, например название страницы (h1), кликаем по нему правой кнопкой мыши и из раскрывшегося списка выбираем "посмотреть код", также открывается DevTools и сразу переносит вас к нужному элементу в html коде, где вы и убеждаетесь в наличии или отсутствии микроразметки.

Также можно использовать seo-плагины для браузера, например Alaev SEO Tools.

Затем, используйте инструменты проверки микроразметки, предоставляемые поисковыми системами, такими как Google Search Console или Яндекс.Вебмастер.

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

Частые ошибки

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

Не игнорируйте валидацию микроразметки

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

Несовместимые типы разметок

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

Не рекомендуется использовать одновременно разметку для организации и места, если они не имеют явной связи.

Не добавляйте микроразметку к несуществующему контенту

Важно использовать микроразметку только на реальном и существующем контенте.

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

Не добавляйте микроразметку для конкретной страницы по всему сайту

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

Избегайте массового применения одной и той же разметки ко всем страницам сайта без разбора контента. Каждая страница требует индивидуального подхода.

Не нарушайте рекомендации и правила поисковой системы

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

Копия с конкурентов

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

Пересканирование измененной страницы

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

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

Как отслеживать техническое состояние и эффективность микроразметки?

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

1. Использование инструментов аналитики:


• Google Analytics: Следите за тем, какие страницы с микроразметкой имеют наибольшую посещаемость и какие действия пользователи совершают на них. Это позволяет оценить влияние разметки на поведение посетителей.
• Яндекс.Метрика: При анализе трафика из Яндекса также можно использовать эти инструменты для оценки эффективности разметки.
2. Мониторинг поисковой выдачи:


• Отслеживайте, какие результаты в поисковой выдаче содержат вашу микроразметку. Это позволяет оценить, насколько хорошо поисковая система интерпретирует вашу разметку.
3. Анализ конверсий:


• Используйте цели и события в аналитических системах для отслеживания действий пользователей, связанных с размеченными элементами (например, нажатия на кнопки "Купить" или "Заказать звонок").
4. Проверка на мобильных устройствах:


• Удостоверьтесь, что микроразметка корректно отображается и работает на мобильных устройствах, так как мобильность сейчас играет важную роль в поисковой оптимизации.
5. Оценка CTR:


• Анализируйте кликабельность размеченных результатов в поисковой выдаче. Улучшение CTR может быть признаком эффективности микроразметки.

Подборка схем разметки под тематику интернет-магазина

Данный раздел статьи посвящен типам разметки, подходящим для определенных тематик сайта, где при этом меняется только тип сущности.

Объяснение на примере схемы "AutoPartsStore" (магазин автозапчастей):

Она ничем не отличается от разметки обычного магазина, кроме самого типа ""@type": "AutoPartsStore"", который и скажет поисковой системе, что это магазин, продающий автозапчасти, а не персики и поддельные документы.

Пример:

				 
					<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "AutoPartsStore",
	  "name": "Название вашего магазина автозапчастей",
	  "description": "Краткое описание вашего магазина",
	  "url": "http://www.example.com",
	  "address": {
		"@type": "PostalAddress",
		"streetAddress": "Улица, номер дома",
		"addressLocality": "Город",
		"addressRegion": "Регион",
		"postalCode": "Почтовый индекс",
		"addressCountry": "Страна"
	  },
	  "telephone": "Ваш контактный номер телефона",
	  "openingHours": "Ваши часы работы",
	  "image": "http://www.example.com/logo.png"
	}
	</script>
				
			

Список схем для магазинов:

• Автозапчасти - AutoPartsStore
• Велосипеды - BikeStore
• Книги - BookStore
• Одежда - ClothingStore
• Компьютерный - ComputerStore
• Магазин рядом с домом ("Удобный магазин" — это формат магазина, который предлагает клиентам широкий ассортимент товаров и услуг в небольшом и удобном месте.) - ConvenienceStore
• Универмаг (промтоварный магазин) - DepartmentStore
• Электроника - ElectronicsStore
• Цветочный - Florist
• Мебельный - FurnitureStore
• Товары для сада - GardenStore
• Продуктовый - GroceryStore
• Строительные материалы и хозтовары - HardwareStore
• Товары для хобби (даже для хоббихорсинга) - HobbyShop
• Товары для дома - HomeGoodsStore
• Ювелирный - JewelryStore
• Алкомаркет - LiquorStore
• Мужская одежда (Тут и первое подозрение на сексизм со стороны schema.org, потому что для женской одежды схем нет, мы проверяли) - MensClothingStore
• Телефоны и сопутствующие аксессуары - MobilePhoneStore
• Видеопрокат (привет 80-м и 90-м), аренда видеооборудования - MovieRentalStore
• Музыкальные инструменты - MusicStore
• Оргтехника - OfficeEquipmentStore
• Аутлет-центр (продажа брендовой одежды со скидками) - OutletStore
• Ломбард - PawnShop
• ЗооМагазин - PetStore
• Обувной - ShoeStore
• Спортивные товары - SportingGoodsStore
• Шины и диски - TireShop
• Игрушки - ToyStore
• Оптовый магазин - WholesaleStore
• Медицинские сайты - MedicalClinic

Актуальные схемы

• Мобильное приложение (Mobile Application)

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

Чтобы его появление не осталось незаметным следует использовать данную разметку.

Пример:

				 
					<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "MobileApplication",
	  "name": "Название вашего мобильного приложения",
	  "description": "Краткое описание вашего приложения",
	  "applicationCategory": "Категория вашего приложения",
	  "operatingSystem": "Поддерживаемые операционные системы (например, Android, iOS)",
	  "applicationVersion": "Версия вашего приложения",
	  "softwareRequirements": "Требования к аппаратному и программному обеспечению",
	  "fileSize": "Размер файла приложения",
	  "datePublished": "Дата публикации",
	  "downloadUrl": "Ссылка для загрузки приложения",
	  "aggregateRating": {
		"@type": "AggregateRating",
		"ratingValue": "Рейтинг приложения",
		"ratingCount": "Количество оценок"
	  }
	}
	</script>
				
			

Образовательные курсы (Course)

Образовательные курсы в любой сфере имеют огромную актуальность в современном онлайн-мире. Развитие технологий и в принципе ускоренный прогресс всего мира требует для людей постоянного обновления знаний и навыков.

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

				 
					<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "Course",
	  "name": "Название вашего курса",
	  "description": "Краткое описание курса",
	  "provider": {
		"@type": "Organization",
		"name": "Название организации-поставщика курса",
		"sameAs": "http://www.example.com"
	  },
	  "url": "http://www.example.com/course",
	  "startDate": "Год-месяц-день",
	  "endDate": "Год-месяц-день",
	  "duration": "Продолжительность курса (например, P6W для 6 недель)",
	  "location": {
		"@type": "Place",
		"name": "Место проведения курса",
		"address": {
		  "@type": "PostalAddress",
		  "streetAddress": "Улица, номер дома",
		  "addressLocality": "Город",
		  "addressRegion": "Регион",
		  "postalCode": "Почтовый индекс",
		  "addressCountry": "Страна"
		}
	  }
	}
	</script>
				
			

Выводы

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

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

Часто задаваемые вопросы

Наша жизнь в Telegram

Жизнь агентства и полезные фишки, которые можно применить на сайте и в маркетинге.

Перейти