Семантическая разметка

Материалы подготовленные:

Yandex, ЧаВо от Google, Русский любительский перевод Schema.org

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

Schema.org — это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года.

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

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

Яндекс с осени 2011 года понимает этот формат и поддерживает его в некоторых партнерских программах.

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

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

      1. Оборачивание описания определенного типа в контейнер с указанием схемы разметки:

          <div itemscope itemtype="http://schema.org/Organization" >

          ...

          </div>
      2. Разметка отдельных свойств с указанием на конкретное свойство схемы:
        <span itemprop="streetAddress">Льва Толстого, 16</span>

        Пример документа до разметки schema.org:

        <div>

        <span>Яндекс</span>

        Контакты:

        <div>

        Адрес: Льва Толстого, 16,

        119021,

        Москва,

        </div>

        Телефон: +7 495 739—70—00,

        Факс: +7 495 739—70—70,

        Электронная почта: pr@yandex-team.ru

        </div>

        Документ после разметки:

        <div itemscope itemtype="http://schema.org/Organization">

        <span itemprop="name">Яндекс</span>

        Контакты:

        <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">

        Адрес:

        <span itemprop="streetAddress">Льва Толстого, 16</span>

        <span itemprop="postalCode"> 119021</span>

        <span itemprop="addressLocality">Москва</span>,

        </div>

        Телефон:<span itemprop="telephone">+7 495 739—70—00</span>,

        Факс:<span itemprop="faxNumber">+7 495 739—70—70</span>,

        Электронная почта: <span itemprop="email">pr@yandex-team.ru</span>

        </div>

        Пример семантической разметки “Адреса и организации”.

        Хлебные крошки:

        Исходный вариант

        <a href="http://www.example.com/platya">Платья</a> "

        <a href="http://www.example.com/platya/gotovie">Готовые платья</a> "

        <a href="http://www.example.com/platya/gotovie/zelenie">Готовые зеленые платья</a>  
        После применения формата микроразметки:

        <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

        <a href="http://www.example.com/dresses" itemprop="url">

        <span itemprop="title">Платья</span>

        </a> "

        </div>

        <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

        <a href="http://www.example.com/dresses/real" itemprop="url">

        <span itemprop="title">Готовые платья</span>

        </a> "

        </div>

        <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

        <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">

        <span itemprop="title">Готовые зеленые платья</span>

        </a>

        </div>

Пример семантической разметки “Хлебных крошек” 


Инструменты для проверки правильности оформления семантической разметки:


Используемые типы разметки Яндексом
:


Google Маркер

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

Сегодня  инструмент поддерживает следующие типы данных:

Инструмент простой и удобный. Благодаря маркеру от Google не нужно вносить дополнительные атрибуты Schema.org в код. Понадобится лишь заиметь права администратора сайта в инструментах для вебмастера: просто выделите нужные элементы страницы и присвойте им соответствующие свойства.

https://support.google.com/webmasters/answer/2692911?hl=ru

Для изучения:

 

Подписаться Подписаться Подписаться