Pull to refresh
0
Google Developers
Build anything with Google

Web Components и JSON-LD в помощь веб-разработчику

Reading time 3 min
Views 7.8K
Original author: Ева Гасперович (Ewa Gasperowicz), инженер, Мано Маркс (Mano Marks), разработчик, Пьер Фар (Pierre Far), аналитик Webmaster Trends
Привет, Хабр! Начнём неделю с разговора о том, как сочетать в работе JSON-LD и Web Components. JSON-LD – это формат структурирования данных на сайте для их отображения в результатах поиска Google и других поисковых систем. Например, если на сайте представлен список событий, мест или людей, то в HTML-код можно добавитьразметку этих данных при помощи конструкций словаря schema.org в виде кода JSON-LD. Структурирование данных помогает Google лучше понимать содержание ваших страниц и выделять его в результатах поиска. Так можно сообщить о предстоящих мероприятиях посредством функции «Сеть знаний» или показать расширенное описание страниц в поисковой выдаче.

html5rocks

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

На странице два виджета: карта с булавкой для каждого офиса и раскрывающееся меню со списком адресов. Очень важно, чтобы оба виджета представляли пользователю одинаковую информацию, а страница была доступна для сканирования поисковикам.
Пример карты с JSON-LD
В этом примере мы используем элементы 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'];
  });

Подробнее об этих технологиях читайте в следующих материалах:
Tags:
Hubs:
-1
Comments 5
Comments Comments 5

Articles

Information

Website
developers.google.com
Registered
Founded
Employees
over 10,000 employees
Location
США