Привет, Хабр! Начнём неделю с разговора о том, как сочетать в работе 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'];
  });

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

Комментарии (5)


  1. nazarpc
    06.04.2015 10:08
    +4

    Ребята, я всё понимаю, но я это уже переводил здесь.


    1. HabrAndrey Автор
      06.04.2015 10:11
      -13

      Это замечательно. В следующий раз, возможно, Вы обратитесь за разрешением, прежде чем использовать чужой материал.


      1. nazarpc
        06.04.2015 10:24
        +5

        Уважаемый, то есть вы решили ещё и наехать на меня?
        Я опубликовал свой материал, если вы о самом переводе, переводил его я лично, у вас не крал.
        К вашему сведению, я соизволил упомянуть в статье лицензию, под которой опубликована статья.
        Если вы перед публикацией перевода лицензию не читали — у вас есть уникальная возможность сделать это прямо сейчас: creativecommons.org/licenses/by/3.0/
        Приведу здесь цитату:

        You are free to:

        Share — copy and redistribute the material in any medium or format
        Adapt — remix, transform, and build upon the material
        for any purpose, even commercially.

        The licensor cannot revoke these freedoms as long as you follow the license terms.

        Under the following terms:

        Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.

        No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.

        То есть в данном случае, в отличии от меня, вы нарушили лицензию статьи, не указав её лицензию, а так же ссылку дали вместо статьи на на совсем другую страничку.


        1. HabrAndrey Автор
          06.04.2015 13:46
          +1

          Также уважаемый, мы кажется с Вами, как говорят англичане, начали не с той ноги. Давайте попробуем ещё раз.
          Я по определению не могу нарушить лицензию этой статьи, так как её опубликовала сотрудник Google на ресурсе Google, после чего разместила короткое уведомление об этом в блоге для веб-мастеров Google, которое мы и приводим тут, в блоге Google, для удобства русскоязычных пользователей вкупе с отрывком из полной статьи, также для удобства.
          Если бы Вы уведомили Еву (или меня) о своем переводе (спасибо, за него кстати!), я бы, зная о нём, мог отсюда сослаться на него, а не вступать с Вами в пререкания. Что же касается «наездов», Вы ещё раз перечитайте свой первый комментарий. Откуда я могу знать, что и где Вы публиковали?
          Давайте попробуем начать разговор ещё раз. Я предлагаю вставить ссылку на Ваш полный перевод в тело самой статьи и в будущем продолжать делиться информацией. Если Вам интересно публиковать переводы материалов с html5rocks, мы с удовольствием будем ссылаться на них в своих русскоязычных ресурсах (на форуме и в сообществе для веб-мастеров и так далее).


          1. nazarpc
            06.04.2015 14:49
            +3

            Да, что-то у меня тоже резкое начало получилось, прошу прощения.

            Оригинальная статья здесь: updates.html5rocks.com/2015/03/creating-semantic-sites-with-web-components-and-jsonld
            Под статьей написано:

            Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License.

            Здесь вполне четко указано, под какой лицензией опубликована статья и код к ней, по ссылке выше и в цитате есть условия — одно из них это
            You must give appropriate credit, provide a link to the license, and indicate if changes were made

            Я указал автора, ссылку на оригинал, указал что это перевод, и в конце статьи оставил ссылку на лицензию — вроде, ничего не нарушил, никого уведомлять не обязан.
            На счёт
            я бы, зная о нём, мог отсюда сослаться на него

            На хабре есть поиск, я потратил несколько минут и перебрал все возможные варианты написания JSON-LD, и проверил все статьи, которые попали в результаты поиска, это дало мне уверенность, что статью ещё никто не публиковал. То есть в целом я бы просил вас следующий раз проверить таким образом, была ли здесь уже подобная публикация, давайте вместе уменьшать энтропию)

            На счёт содействия полностью поддерживаю, не сразу заметил что у вас только отрывок статьи, и вообще микс нескольких страниц получился.