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

1. микроформатами
2. На практике
3. Вклад HTML5
4. в microdatas
5. Новые атрибуты
6. Примеры использования
7. Схема "Корпорация"
8. Диаграмма "Статья"
9. Проверьте свои схемы

Микроданные остаются очень малоизвестными, несмотря на то, что они существуют уже несколько лет. Я уже говорил об этом 3 года назад разные специализированные блоги , С тех пор многое не изменилось: очень редко можно увидеть микроформаты, в том числе микроданные на веб-сайте.

микроформатами

Немного истории

Трудно найти конкретную дату, но кажется, что они существуют примерно с 2003 года с появлением XFN и принимают различные формы.

Микроформаты не имеют правил, в том смысле, что ни одна организация не установила никаких стандартов - даже microformats.org, который является «только» вики, где собраны практики - речь идет о открытый формат, который развивается в соответствии с практикой в ​​Интернете. Поэтому они являются попыткой кодифицировать обычные практики. Microformats.org удалось собрать ряд «профилей» XMPD, которые вы найдете на вики ,

На практике

В целом, µF использует существующие атрибуты (классы, rel) HTML и стремится упростить использование определенных данных программами (программным обеспечением), которым они адресованы. Например, если я пытаюсь отформатировать контент для адресной книги, я отформатирую существующий контент HTML как «карточку контакта» (профиль hCard ).

Информация может быть помечена по-разному:

Чтобы пойти дальше, я приглашаю вас прочитать статьи Jojaba и микроформатами и микроформаты 2 на Alsacréations.

Например, хорошо известная CMS WordPress использует микроформаты в течение нескольких лет (более 8 лет на дату написания этих строк) в своих темах по умолчанию, что отчасти является его эффективностью в естественные ссылки на ваши статьи или страницы, созданные с помощью этого инструмента.

Вклад HTML5

HTML5 добавляет новые значения в атрибут rel, а также новые элементы, такие как <time> и <article>, семантика предоставляется элементами HTML. Но я не буду говорить об этом в этой статье, я сосредоточусь на микроданных .

в microdatas

Прибывшие с HTML5, микроданные кажутся попыткой стандартизации, предлагающей новые атрибуты, специально разработанные для этого случая, их значения маркировки будут зависеть от выбранной схемы (или типа) данных и не могут отклоняться от них.

Подобие структуры, которая заставит нас быть более строгими в нашем подходе к «метаданным».

Новые атрибуты

Микроданные добавляют новые атрибуты в наш инструментарий интегратора (или SEO).
Каждый блок микроданных называется элементом и работает по принципу «имя-значение»:

• itemscope : позволяет назначить блок микроданных (создает элемент)
• itemtype : связанный с itemscope, он позволяет определить тип данных элемента благодаря справочному документу. (Я обычно работаю с Shema.org )
• itemprop : позволяет указать отмеченные данные благодаря значению, соответствующему объявленному типу
• itemref : позволяет связать нисходящий блок данных предметной области.
• itemid : Определяет глобальный идентификатор для элемента микроданных, такого как ISBN книги. Используйте itemid в том же элементе, что и носитель атрибутов itemscope и itemtype.

Возможно, он не говорит с вами на самом деле, но мы увидим примеры вместе.

Примеры использования

Для постоянных пользователей микроформатов и профилей, предлагаемых microformats.org, существует возможность плавного перехода к микроданным.
Возьмите пример hCard которая представляет собой карточку контакта, например визитную карточку.

Наш справочный документ, заполненный атрибутом itemtype, позволяет объявить схему, соответствующую принципам дочерних элементов itemprop.
Как видно из двух ссылок, использующих значение itemprop url, можно составить элемент с несколькими данными одного типа.

Будучи одним из первых упоминаний в микроформатах, профили microformats.org были пересмотрены Google, Yahoo, Bing и Yandex, чтобы предложить своего рода стандарт для веб-мастеров.
Из этого пересмотра и по взаимному согласию пришло schema.org , набор схем, используемых для структурирования богатых данных на основе микроданных.

Метод, предложенный HTML5 в сочетании с schema.org для структурирования данных, приносит определенное богатство и большую гибкость.
Давайте рассмотрим два примера вместе, чтобы получить инструмент в руки.

Схема "Корпорация"

схема корпорации (общество) является подмножеством Схема организации соответствующий компании, ассоциации, школе, организации вкратце ...
Есть только одно свойство в дополнение к его родителю.

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

Вот краткая презентация компании, взятой наугад. (да, да, да!)
Давайте проанализируем страницу схемы корпорации и попробуем перепроверить информацию.

Маркировка этих данных является одним из способов продолжения.
Действительно, я позаботился о том, чтобы расширить информационный адрес с созданием элемента Тип Почтовый адрес это личный выбор, который вообще не был обязательным. Я также мог бы расширить событие KiwiParty, используя Событие схемы , Все зависит от потребностей вашей презентации.

Этот пример иллюстрирует то, что называется Embedded Items . Это возможность вложить схему данных в другую схему.
Для этого необходимо объявить новый элемент с атрибутом itemscope и указать новую схему, используемую с атрибутом itemtype. Этот новый вложенный элемент все еще содержит итерацию, связанную с его родительским элементом.

Диаграмма "Статья"

Как следует из названия, он позволяет отмечать данные, относящиеся к статье (например, блог).
Вы скажете мне, BlogPosting схема больше подходит для блога, но, как ни странно, этот не предлагает ничего, кроме статья схемы ... но будьте осторожны, мы используем BlogPosting.

Представьте себе зонирование блога в этой форме:

Здесь основная часть статьи находится в части сайта. Дополнительную информацию можно найти далее, но также на боковой панели или почему бы не в нижнем колонтитуле.
Придется использовать атрибут itemref, который связывает предметную область с информацией вне ее.

Давайте посмотрим на пример кода, соответствующий предыдущей иллюстрации.

Это предложение по форматированию позволяет связать два элемента с основным элементом благодаря вмешательству атрибута itemref в сочетании с атрибутами id блоков, на которые делается ссылка. Эти «включенные» элементы должны оставаться согласованными с родительской схемой, здесь BlogPosting, и, следовательно, предлагать ожидаемый itemprop.

Проверьте свои схемы

Google предоставляет инструмент тестирования вставки Rich Snippets для проверки соответствия реализации значений schema.org.
Структурированные данные: инструмент тестирования

Этот инструмент часто развивается, и схемы schema.org уже были пересмотрены, особенно в связи с обязательством упоминать определенные данные для полной проверки схемы. Будьте в курсе как можно больше.

Также возможно восстановить JSON-форматирование микроданных с помощью Микроданные Live ,

Поделиться постом "HTML5 - Микроданные: некоторые примеры"

Похожие

Комментарии