Учебники

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

Август 22, 2018

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

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

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

пример

  • Для создания элемента используется атрибут itemscope .

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

Для создания элемента используется атрибут itemscope .

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

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

Live Demo

<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

тип элемента

Этот атрибут является допустимым URL-адресом, который определяет элемент и предоставляет контекст для свойств.

3

Itemid

Этот атрибут является глобальным идентификатором для элемента.

4

itemprop

Этот атрибут определяет свойство элемента.

5

itemref

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

itemscope

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

тип элемента

Этот атрибут является допустимым URL-адресом, который определяет элемент и предоставляет контекст для свойств.

Itemid

Этот атрибут является глобальным идентификатором для элемента.

itemprop

Этот атрибут определяет свойство элемента.

itemref

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

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

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

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

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

Live Demo 

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

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

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

Поддержка API микроданных

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

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

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

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

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

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

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

  • имя — имя человека в виде простой строки

  • Фото — URL-адрес изображения человека.

  • URL — сайт, принадлежащий человеку.

имя — имя человека в виде простой строки

Фото — URL-адрес изображения человека.

URL — сайт, принадлежащий человеку.

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

Live Demo 

<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 Testing Tool, используя http://www.tutorialspoint.com/html5/microdata.htm

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

57
Share: