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

itemscope and itemtype

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

<div>
  <h1>Аватар</h1>
  <span>Режиссер: Джеймс Кэмерон (родился 16 августа, 1954г.)</span>
  <span>Научная фантастика</span>
  <a href="../movies/avatar-theatrical-trailer.html">трейлер</a>
</div>

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

<div itemscope>
  <h1>Аватар</h1>
  <span>Режиссер: Джеймс Кэмерон (родился 16 августа, 1954г.)</span>
  <span>Научная фантастика</span>
  <a href="../movies/avatar-theatrical-trailer.html">трейлер</a>
</div>

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

Также полезно указать, к какой области относится контент внутри. Делается это с помощью атрибута itemtype сразу после itemscope.

<div itemscope itemtype="https://schema.org/Movie">
  <h1>Аватар</h1>
  <span>Режиссер: Джеймс Кэмерон (родился 16 августа, 1954г.)</span>
  <span>Научная фантастика</span>
  <a href="../movies/avatar-theatrical-trailer.html">трейлер</a>
</div>

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

itemprop

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

<div itemscope itemtype="https://schema.org/Movie">
  <h1 itemprop="name">Аватар</h1>
  <span>Режиссер: <span itemprop="director">Джеймс Кэмерон</span> (родился 16 августа, 1954г.)</span>
  <span itemprop="genre">Научная фантастика</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">трейлер</a>
</div>

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

Теперь поисковые системы могут понимать не только то, что данная страница - это URL-адрес, но также и то, что это URL-адрес трейлера научно-фантастического фильма «Аватар», снятого Джеймсом Кэмероном.

Встроенные элементы

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

<div itemscope itemtype="https://schema.org/Movie">
  <h1 itemprop="name">Аватар</h1>
  <div itemprop="director" itemscope itemtype="https://schema.org/Person">
    Режиссер: <span itemprop="name">Джеймс Кэмерон</span>
    (родился <span itemprop="birthDate">16 августа, 1954г.</span>)
  </div>
  <span itemprop="genre">Научная фантастика</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">трейлер</a>
</div>