С ростом популярности веб-компонентов и вспомогательных библиотек, таких как Polymer , пользовательские элементы становятся привлекательным способом создания функций пользовательского интерфейса. Инкапсуляция пользовательских элементов по умолчанию делает их особенно полезными для создания независимых виджетов.
Хотя некоторые виджеты являются автономными, многие из них полагаются на внешние данные для представления контента пользователю - например, текущий прогноз для виджета погоды или адрес компании для виджета карты.
В Polymer пользовательские элементы являются декларативными, что означает, что после их импорта в проект их очень легко включить и настроить в HTML, например, передав данные для заполнения виджета через атрибут.
Было бы здорово, если бы мы могли избежать повторения и обеспечить согласованность данных, повторно используя одни и те же фрагменты данных для заполнения различных виджетов, а также информируя поисковые системы и других потребителей о содержании нашей страницы. Мы можем добиться этого, используя стандарт Schema.org и формат JSON-LD для наших данных.
Заполнение компонентов структурированными данными
Обычно JSON — это удобный способ внедрения данных в конкретный виджет. Благодаря растущей поддержке JSON-LD мы можем повторно использовать одни и те же структуры данных для информирования пользовательского интерфейса, а также поисковых систем и других потребителей структурированных данных о точном значении содержимого страницы.
Объединив веб-компоненты с JSON-LD, мы создаем четко определенную архитектуру приложения:
- Schema.org и JSON-LD представляют уровень данных, причем Schema.org предоставляет словарь для данных, а JSON-LD представляет собой формат и транспортировку данных;
- пользовательские элементы представляют собой уровень представления, настраиваемый и отделенный от самих данных.
Пример
Давайте рассмотрим следующий пример — страницу, на которой перечислено несколько местоположений Google Office: https://github.com/googlearchive/structured-data-web-comComponents/tree/master/demo.
Содержит два виджета: карту с отметкой для каждого офиса и выпадающий список со списком локаций. Важно, чтобы оба виджета предоставляли пользователю одни и те же данные и чтобы страница была доступна для чтения поисковым системам.
В этой демонстрации мы используем сущности LocalBusiness для выражения значения наших данных, то есть географического местоположения некоторых офисов Google.
Лучший способ проверить, как Google читает и индексирует эту страницу, — это новый улучшенный инструмент тестирования структурированных данных . Отправьте URL-адрес демо-версии в разделе «Получить URL-адрес» и нажмите «Получить и подтвердить» . В разделе справа будут показаны проанализированные данные, полученные со страницы, а также любые ошибки, которые могут возникнуть. Это очень удобный способ проверить, правильна ли ваша разметка JSON-LD и ее обрабатывает Google.
Подробнее об этом инструменте и внесенных в него улучшениях можно прочитать в блоге Webmaster Central.
Связывание компонентов со структурированным источником данных
Код демо-версии и веб-компонентов, использованных для ее сборки, находится на GitHub . Давайте посмотрим на исходный код страницы combined-demo.html .
В качестве первого шага мы встраиваем данные на страницу с помощью сценария JSON-LD:
<script type="application/ld+json">
{...}
</script>
Таким образом, мы гарантируем, что данные будут легко доступны другим потребителям, поддерживающим стандарт Schema.org и формат JSON-LD, например поисковым системам.
В качестве второго шага мы используем два веб-компонента для отображения данных:
- адрес-дропдаун-jsonld — этот элемент создает раскрывающийся список со всеми местоположениями, переданными в атрибуте «jsonld».
- google-map-jsonld — этот элемент создает карту Google с отметкой для каждого местоположения, переданного в атрибуте «jsonld».
Для этого мы импортируем их на нашу страницу с помощью HTML-импорта .
<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">
Как только они будут импортированы, мы сможем использовать их на нашей странице:
<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>
Наконец, мы соединяем данные JSON-LD и элементы вместе. Мы делаем это с помощью обратного вызова готовности полимера (это событие, которое срабатывает, когда компоненты готовы к использованию). Поскольку элементы можно настроить с помощью атрибутов, достаточно присвоить наши данные JSON-LD соответствующему атрибуту компонента:
document.addEventListener('polymer-ready', function() {
var jsonld = JSON.parse(
document.querySelector(
'script[type="application/ld+json"]').innerText);
document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
});
JSON-LD, мощный брат JSON
Как вы, наверное, заметили, это работает очень похоже на использование обычного старого JSON для передачи данных. Однако у JSON-LD есть несколько преимуществ, которые напрямую связаны с его совместимостью с Schema.org :
- Данные структурированы однозначным образом с использованием стандарта Schema.org. Это нетривиальное преимущество, поскольку оно гарантирует, что вы сможете предоставить осмысленные и согласованные входные данные для любого веб-компонента с поддержкой JSON-LD.
- Данные могут эффективно использоваться поисковыми системами, что улучшает индексацию страницы и может привести к отображению расширенных фрагментов в результатах поиска.
- Если вы пишете веб-компоненты таким образом, вам не нужно изучать или разрабатывать новую структуру (и документацию) для данных, которые ожидают компоненты — Schema.org уже делает за вас всю тяжелую работу и достижение консенсуса. Это также упрощает создание целой экосистемы совместимых компонентов.
Подводя итог, можно сказать, что JSON-LD и Schema.org в сочетании с технологией веб-компонентов позволяют создавать многократно используемые инкапсулированные части пользовательского интерфейса, удобные для разработчиков и поисковых систем.
Создавайте свои собственные компоненты
Вы можете опробовать примеры на GitHub или прочитать руководство Polymer по созданию повторно используемых компонентов, чтобы начать писать свои собственные. Ознакомьтесь с документацией по структурированным данным на сайте Developers.google.com, чтобы узнать о различных объектах, которые можно разметить с помощью JSON-LD.
Подумайте о том, чтобы рассказать нам на @polymer и продемонстрировать созданные вами пользовательские элементы!