Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

Упрощение разработки веб-сайтов с помощью веб-компонентов и JSON-LD

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

Веб-компоненты — это зарождающийся набор технологий для определения пользовательских, повторно используемых виджетов пользовательского интерфейса и их поведения. Любой веб-разработчик может создать веб-компонент. Вы начинаете с определения шаблона для отдельной части пользовательского интерфейса, который вы импортируете на страницы, на которых вы хотите использовать веб-компонент. Для определения поведения веб-компонента используется Пользовательский элемент. Поскольку вы объединяете отображение и логику части пользовательского интерфейса в веб-компонент, вы можете поделиться пакетом и повторно использовать его на других страницах и с другими разработчиками, тем самым упрощая веб-разработку.

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

Тогда ваша архитектура будет выглядеть следующим образом. Ваши структурированные данные хранятся в вашей базе данных, например, местоположения магазинов в вашей сети. Эти данные встроены в вашу веб-страницу в виде фрагмента в формате JSON-LD, что означает, что они доступны для использования пользовательским элементом для отображения посетителю-человеку и для извлечения роботом Googlebot для индексации Google.

Чтобы узнать больше и начать работу с собственными пользовательскими элементами, пожалуйста, прочитайте:

  • Наша последняя статья о HTML5 Rocks и сопутствующих примерах кода.
  • Веб-сайт в формате JSON-LD и спецификация W3C
  • Вики веб-компонентов и сообщество веб-компонентов на webcomponents.org
  • schema.org
  • Документация Google по структурированным данным