РАЗМЕТКА

Блог о поулярных разметках

Разметка

Большинство веб-мастера знакомы с HTML-тегов на своих страницах. Как правило, HTML-теги сообщают браузеру, как отображать информацию, содержащуюся в теге. Например, <h1> Аватар </h1> сообщает браузеру, чтобы отобразить текстовую строку "Аватар" в формате заголовка 1. Тем не менее, HTML тег не дает никакой информации о том, что текстовая строка "Аватар" может относиться к чрезвычайно важной 3D фильм, или он может относиться к типу изображения профиля, и это может сделать его более трудным для поиска двигатели для частью отображения данной страницы.

Schema.org предоставляет набор общих словарей веб-мастеров, которые можно использовать для разметки свои страниц для коректного отображения в основных поисковых системах: Google, Microsoft, Yandex и Yahoo!

Хотя это руководство сосредотачивается на микроданных, большинство примеров показаны с примерами в RDFa и JSON-LD.

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

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

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

itemscope и itemtype

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

<div>
    <h1>Avatar</h1>
    <span>Director: James Cameron (born August 16, 1954)</span>
    <span>Science fiction</span>
    <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Прежде всего, определить часть страницы, которая "о" фильме Avatar. Для этого нужно добавить элемент itemscope в HTML-тег, который охватывает информацию о предмете:

<div itemscope>
    <h1>Avatar</h1>
    <span>Director: James Cameron (born August 16, 1954) </span>
    <span>Science fiction</span>
    <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

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

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

<div itemscope itemtype="http://schema.org/Movie">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>
CRGHOME PRESENT