Pull to refresh

Создание семантических сайтов с помощью веб-компонентов и JSON-LD

Reading time 4 min
Views 7.5K
Original author: Ewa Gasperowicz
С ростом популярности веб-компонентов и связанных библиотек вроде Polymer, польовательские элементы стали привлекательным способом создания UI. Изначальная инкапсуляция пользовательских элементов делает их особенно полезными в создании независимых виджетов.

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

В Polymer пользовательские элементы декларативные, то есть они импортируются в проект, их очень просто подключить и настроить прямо в HTML, то есть передавать данные через атрибуты.

Было бы здорово избежать повтора и быть уверенными в согласованности данных повторно используя те же сниппеты для разных виджетов, а так же информируя поисковые системы и других потребителей о содержимом на странице. Мы можем достичь этого используя стандарт schema.org и JSON-LD формат для наших данных.

Заполнение компонентов структурированными данными


Обычно JSON достаточно удобный способ передачи данных в конкретный виджет. С растущей поддержкой JSON-LD, мы можем повторно использовать одни и те же структуры данных для UI, поисковых систем и других потребителей структурированных данных о точном значении содержимого страницы.

Комбинируя веб-компоненты с JSON-LD бы можем создать четко определённую архитектуру приложения:

  • schema.org и JSON-LD предоставляют слой данных, schema.org предоставляет словарь для данных, а JSON-LD определяет формат и передачу данных
  • пользовательские элементы предоставляют слой представления, настраиваемый и отделённый от самых данных

Пример


Давайте рассмотрим следующий пример — страница с перечнем адресов некоторых офисов Google: http://polymerlabs.github.io/structured-data-web-components/demo/combined-demo.html

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



Здесь мы используем сущности LocalBusiness для выражения смысла наших данных, это географическое размещение некоторых офисов Google.

Лучший способ проверить как Google видит и индексирует страницу — через новый улучшенный инструмент тестирования структурированных данных. Введите URL демо-страницы в разделе Fetch URL и кликните Fetch and validate. Справа вы увидите разобранные данные полученные со страницы, а так же любые возникшие ошибки. Это очень удобный способ проверки вашей JSON-LD разметки на корректность обработки Google.



Вы можете прочитать больше об инструменте и нововведениях в статье блога Webmaster Central.

Связываем компоненты и структурированный источник данных.


Код примера и используемых веб-компонентов есть на 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 (он будет вызван когда все компоненты готовы к использованию). Так как элементы можно настраивать с помощью атрибутов, достаточно присвоить наши 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 в связке с технологией веб-компонентов позволяет создавать повторно используемые, инкапсулированные частички UI, которые дружественны и разработчику, и поисковой системе.

Создавайте ваши компоненты


Вы можете попробовать примеры на Github или почитать руководство Polymer по созданию повторно используемых компонентов для того, чтобы начать писать свои собственные.
Посмотрите документацию по структурированным данным на developers.google.com чтобы вдохновиться различными сущностями которые вы можете разметить с помощью JSON-LD.

Рассмотрите размещение ваших блестящих новых элементов на customelements.io на радость другим пользователям, и маякните нам на @рolymer или +Polymer community чтобы показать что классного у вас получилось.

Статья под Creative Commons Attribution 3.0 License
Код под Apache 2.0 License

P.S. Это мой первый перевод, опечатки и ошибки в переводе пишите в личку.
Tags:
Hubs:
+2
Comments 1
Comments Comments 1

Articles