HTML5 - микроданные

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

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

Группы называются items, и каждая пара имя-значение представляет собой property. Предметы и свойства представлены обычными элементами.

пример

Чтобы создать предмет, itemscope атрибут используется.
Чтобы добавить свойство к элементу, itemprop атрибут используется в одном из потомков элемента.

Здесь есть два элемента, каждый из которых имеет свойство «имя» -

<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
      
   </body>
</html>

Это даст следующий результат -

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

Глобальные атрибуты

Микроданные вводят пять глобальных атрибутов, которые будут доступны для любого элемента и дают контекст для машин о ваших данных.

Sr. No.	Атрибут и описание
1	itemscope Это используется для создания предмета. Атрибут itemscope - это логический атрибут, который сообщает, что на этой странице есть микроданные, и именно здесь они начинаются.
2	itemtype Этот атрибут является допустимым URL-адресом, который определяет элемент и предоставляет контекст для свойств.
3	itemid Этот атрибут является глобальным идентификатором элемента.
4	itemprop Этот атрибут определяет свойство элемента.
5	itemref Этот атрибут дает список дополнительных элементов, которые нужно сканировать, чтобы найти пары имя-значение элемента.

Свойства Типы данных

Свойства обычно имеют значения, которые являются строками, как указано в примере выше, но они также могут иметь значения, являющиеся URL-адресами. В следующем примере есть одно свойство, «изображение», значением которого является URL -

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

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

<html>
   <body>
      
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
      
   </body>
</html>

Это даст следующий результат -

Свойства также могут быть группами пар имя-значение, если поместить атрибут itemscope в элемент, который объявляет свойство.

Поддержка Microdata API

Если браузер поддерживает API микроданных HTML5, для глобального объекта документа будет функция getItems (). Если браузер не поддерживает микроданные, функция getItems () будет неопределенной.

function supports_microdata_api() {
   return !!document.getItems;
}

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

Стандарт микроданных HTML5 включает как разметку HTML (в первую очередь для поисковых систем), так и набор функций DOM (в первую очередь для браузеров).

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

Определение словаря микроданных

Для определения словаря микроданных вам понадобится URL-адрес пространства имен, который указывает на рабочую веб-страницу. Например, https://data-vocabulary.org/Person можно использовать в качестве пространства имен для личного словаря микроданных со следующими именованными свойствами:

name - Имя человека в виде простой строки
Photo - URL-адрес изображения человека.
URL - Веб-сайт, принадлежащий человеку.

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

<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
         
            <p>
               <img itemprop = "photo" 
                  src = "http://www.tutorialspoint.com/green/images/logo.png">
            </p>
            
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
      
   </body>
</html>

Это даст следующий результат -

Google поддерживает микроданные в рамках своей программы Rich Snippets. Когда поисковый робот Google анализирует вашу страницу и находит свойства микроданных, которые соответствуют словарю http://datavocabulary.org/Person, он разбирает эти свойства и сохраняет их вместе с остальными данными страницы.

Вы можете протестировать приведенный выше пример с помощью инструмента тестирования Rich Snippets, используя http://www.tutorialspoint.com/html5/microdata.htm

Для дальнейшего развития микроданных вы всегда можете обратиться к микроданным HTML5 .