Привет, Хабр! Начнём неделю с разговора о том, как сочетать в работе JSON-LD и Web Components. JSON-LD – это формат структурирования данных на сайте для их отображения в результатах поиска Google и других поисковых систем. Например, если на сайте представлен список событий, мест или людей, то в HTML-код можно добавитьразметку этих данных при помощи конструкций словаря schema.org в виде кода JSON-LD. Структурирование данных помогает Google лучше понимать содержание ваших страниц и выделять его в результатах поиска. Так можно сообщить о предстоящих мероприятиях посредством функции «Сеть знаний» или показать расширенное описание страниц в поисковой выдаче.
Web Components – развивающийся набор стандартов для создания виджетов в пользовательском интерфейсе. Любой веб-разработчик может применять их с помощью шаблона, который добавляется в код страницы. Задавать поведение элементов Web Components можно при помощи функции Custom Element. Разработчики могут использовать одни и те же элементы Web Components на разных страницах, а также распространять их, что облегчает процесс веб-дизайна.
JSON-LD и Web Components отлично сочетаются при разработке. Функции Custom Element служат для представления видимого контента, а разметка JSON-LD – для структурирования данных. Custom Element можно использовать с любым типом данных schema.org, например schema.org/Event или schema.org/LocalBusiness.
Структурированные данные, такие как адреса магазинов, хранятся в базе данных. На странице эта информация размещена в виде кода JSON-LD. Это значит, что элементы Custom Element могут показать их пользователям, а робот Googlebot распознает их при индексировании страницы. Представим, что мы хотим создать страницу со списком некоторых офисов Google: polymerlabs.github.io/structured-data-web-components/demo/combined-demo.html
На странице два виджета: карта с булавкой для каждого офиса и раскрывающееся меню со списком адресов. Очень важно, чтобы оба виджета представляли пользователю одинаковую информацию, а страница была доступна для сканирования поисковикам.
В этом примере мы используем элементы LocalBusiness для выражения значения представленных данных: географического положения некоторых из офисов Google.
Чтобы проверить, как Google сканирует и индексирует эту страницу, лучше всего воспользоваться обновлённым Инструментом для проверки структурированных данных. Вставьте в инструмент URL примера, который мы разбираем, а затем нажмите кнопку “Получить и проверить”. Справа вы увидите результат парсинга данных со страницы и возможные ошибки. Удобнее способа проверить правильность реализации разметки JSON-LD и её понимание Google, пожалуй, не придумаешь.
Подробнее об этом инструменте и нововведениях в нём в наше недавней статье на Хабре: Новый инструмент проверки структурированных данных, документация и не только.
Код, который мы используем, выложен на GitHub. Посмотрим на исходный код страницы combined-demo.html.
Сначала внедряем данные на страницу при помощи скрипта JSON-LD:
Так мы облегчаем доступ к данным для прочих систем, поддерживающих стандарт schema.org и формат JSON-LD, например, для поисковых машин.
Затем применяем два веб-компонента для отображения данных:
Теперь импортируем их на нашу страницу с помощью импорта HTML.
После импорта мы можем использовать их на нашей странице:
И наконец мы связываем данные JSON-LD и элементы. Для этого используем polymer-ready callback (этот ивент срабатывает, когда компоненты готовы к использованию). Поскольку элементы можно конфигурировать с помощью атрибутов, достаточно назначить наши JSON-LD данные соответствующему атрибуту компонента:
Подробнее об этих технологиях читайте в следующих материалах:
Web Components – развивающийся набор стандартов для создания виджетов в пользовательском интерфейсе. Любой веб-разработчик может применять их с помощью шаблона, который добавляется в код страницы. Задавать поведение элементов Web Components можно при помощи функции Custom Element. Разработчики могут использовать одни и те же элементы Web Components на разных страницах, а также распространять их, что облегчает процесс веб-дизайна.
JSON-LD и Web Components отлично сочетаются при разработке. Функции Custom Element служат для представления видимого контента, а разметка JSON-LD – для структурирования данных. Custom Element можно использовать с любым типом данных schema.org, например schema.org/Event или schema.org/LocalBusiness.
Пример использования JSON-LD и Web Components для интерактивной карты
Структурированные данные, такие как адреса магазинов, хранятся в базе данных. На странице эта информация размещена в виде кода JSON-LD. Это значит, что элементы Custom Element могут показать их пользователям, а робот Googlebot распознает их при индексировании страницы. Представим, что мы хотим создать страницу со списком некоторых офисов Google: polymerlabs.github.io/structured-data-web-components/demo/combined-demo.html
На странице два виджета: карта с булавкой для каждого офиса и раскрывающееся меню со списком адресов. Очень важно, чтобы оба виджета представляли пользователю одинаковую информацию, а страница была доступна для сканирования поисковикам.
В этом примере мы используем элементы LocalBusiness для выражения значения представленных данных: географического положения некоторых из офисов Google.
Чтобы проверить, как Google сканирует и индексирует эту страницу, лучше всего воспользоваться обновлённым Инструментом для проверки структурированных данных. Вставьте в инструмент URL примера, который мы разбираем, а затем нажмите кнопку “Получить и проверить”. Справа вы увидите результат парсинга данных со страницы и возможные ошибки. Удобнее способа проверить правильность реализации разметки JSON-LD и её понимание Google, пожалуй, не придумаешь.
Подробнее об этом инструменте и нововведениях в нём в наше недавней статье на Хабре: Новый инструмент проверки структурированных данных, документация и не только.
Привязка компонентов к источнику структурированных данных
Код, который мы используем, выложен на GitHub. Посмотрим на исходный код страницы combined-demo.html.
Сначала внедряем данные на страницу при помощи скрипта JSON-LD:
<script type="application/ld+json">
{...}
</script>
Так мы облегчаем доступ к данным для прочих систем, поддерживающих стандарт schema.org и формат JSON-LD, например, для поисковых машин.
Затем применяем два веб-компонента для отображения данных:
- address-dropdown-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 и элементы. Для этого используем polymer-ready callback (этот ивент срабатывает, когда компоненты готовы к использованию). Поскольку элементы можно конфигурировать с помощью атрибутов, достаточно назначить наши 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'];
});
Подробнее об этих технологиях читайте в следующих материалах:
- оригинал статьи с примерами кода на сайте html5rocks.com
- сайт JSON-LD и спецификации W3C;
- документация по Web Components на сайте webcomponents.org;
- сайт schema.org;
- документация Google по структурированным данным.