Главная страница » HTML » 40. Микроразметка

40. Микроразметка

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

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

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

Преимущества микроразметки

Улучшение SEO:
- Микроразметка помогает поисковым системам лучше понимать содержание страницы и отображать более точные и привлекательные сниппеты в результатах поиска.
Улучшение доступности:
- Она помогает вспомогательным технологиям (например, экранным читалкам) лучше интерпретировать и передавать информацию.
Богатые сниппеты:
- Позволяет создавать более информативные и привлекательные сниппеты в поисковых системах, например, рейтинги, отзывы, события и другие элементы.

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

Schema.org:

Один из наиболее популярных форматов микроразметки. Schema.org предоставляет стандартизированные схемы для различных типов данных (например, продукты, организации, отзывы).

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

				
					<div itemscope itemtype="http://schema.org/Book">
  <h1 itemprop="name">Введение в веб-разработку</h1>
  <p>Автор: <span itemprop="author">Иван Иванов</span></p>
  <p>Издательство: <span itemprop="publisher">Издательство Пример</span></p>
  <p>Год издания: <span itemprop="datePublished">2024</span></p>
  <p>ISBN: <span itemprop="isbn">978-5-00000-000-0</span></p>
</div>

Microdata:

Подмножество HTML5, которое позволяет встроить дополнительные данные непосредственно в HTML-структуру.

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

				
					<div itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Смартфон</h1>
  <p>Цена: <span itemprop="price">299.99 USD</span></p>
  <p>Производитель: <span itemprop="brand">ПримерБренд</span></p>
</div>

RDFa (Resource Description Framework in Attributes):

Расширение HTML5, которое позволяет добавлять аннотации к содержимому с использованием атрибутов.

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

				
					<div vocab="http://schema.org/" typeof="Product">
  <h1 property="name">Смартфон</h1>
  <p>Цена: <span property="price">$299.99</span></p>
  <p>Производитель: <span property="brand">ПримерБренд</span></p>
</div>

Примеры использования микроразметки

Рецепт:

				
					<div itemscope itemtype="http://schema.org/Recipe">
  <h1 itemprop="name">Яблочный пирог</h1>
  <p>Ингредиенты:</p>
  <ul>
    <li itemprop="recipeIngredient">3 яблока</li>
    <li itemprop="recipeIngredient">200 г сахара</li>
    <li itemprop="recipeIngredient">150 г муки</li>
  </ul>
  <p itemprop="recipeInstructions">1. Нарежьте яблоки. 2. Смешайте с сахаром и мукой. 3. Выпекайте 40 минут при 180°C.</p>
</div>

Событие:

				
					<div itemscope itemtype="http://schema.org/Event">
  <h1 itemprop="name">Концерт группы Пример</h1>
  <p>Дата: <time itemprop="startDate" datetime="2024-09-15T20:00">15 сентября 2024 года</time></p>
  <p>Место проведения: <span itemprop="location">Клуб Пример</span></p>
  <p>Цена: <span itemprop="price">500 рублей</span></p>
</div>

Заключение

Микроразметка помогает улучшить понимание содержания веб-страницы как пользователями, так и поисковыми системами. Использование стандартов, таких как Schema.org, Microdata и RDFa, позволяет добавить структурированные данные в HTML-документы, что может привести к улучшению SEO, доступности и пользовательского опыта.

Тестовое задание

Создайте HTML-документ, используя микроразметку для описания:

Книги:
- Название
- Автор
- Издательство
- Год издания
- ISBN
События:
- Название события
- Дата и время
- Место проведения
- Цена билета

Пример:

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Микроразметка</title>
</head>
<body>
  <h1>Примеры микроразметки</h1>
  
  <div itemscope itemtype="http://schema.org/Book">
    <h2 itemprop="name">Книга по HTML</h2>
    <p>Автор: <span itemprop="author">Алексей Петров</span></p>
    <p>Издательство: <span itemprop="publisher">Издательство Пример</span></p>
    <p>Год издания: <span itemprop="datePublished">2023</span></p>
    <p>ISBN: <span itemprop="isbn">978-1-23456-789-0</span></p>
  </div>

  <div itemscope itemtype="http://schema.org/Event">
    <h2 itemprop="name">Выставка искусства</h2>
    <p>Дата: <time itemprop="startDate" datetime="2024-11-05T10:00">5 ноября 2024 года</time></p>
    <p>Место проведения: <span itemprop="location">Галерея Пример</span></p>
    <p>Цена: <span itemprop="price">1000 рублей</span></p>
  </div>
</body>
</html>

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