1. Оглавление
2. Структурированные данные
3. Внешняя документация
4. Детали продукта и список контейнеров
5. Панировочные сухари и компоненты изображения
6. Data Beyond Products

Вы хотите, чтобы ваши пользователи находили ваше Progressive Web App в результатах поиска, но для этого вы должны оптимизировать свое приложение для поисковых роботов. В этом руководстве рассматриваются функции разработчика, встроенные в экосистему PWA: компонент PageMeta и встроенные структурированные данные.

Оглавление

Компонент PageMeta

Одним из основных требований для хорошего SEO является то, что все страницы сайта (включая PWA) имеют тег заголовка (<title>), а также метатеги (<meta>) с полезным и описательным текстом. Эти теги используются поисковыми системами для создания результатов поиска. Рассмотрим следующий пример типичного результата поисковой системы:

Вы можете увидеть на скриншоте выше, что у каждого результата есть заголовок страницы и описание. Эти тексты взяты из заголовков и метатегов страниц, как показано ниже:

Однако PWA - это одностраничное веб-приложение, и этот факт создает проблемы, когда речь идет об управлении содержимым тега head документа. Например, тег head не обновляется сам по себе при переходе от страницы к странице, потому что имитация навигации по страницам в одностраничном приложении!

Итак, как мы можем получить контроль над тегом head? Мы используем компонент PageMeta для этой цели. С реагировать-шлем Библиотека под капотом, это дает нам возможность динамически обновлять тег head.

Чтобы использовать компонент PageMeta, импортируйте его в свой контейнер и передайте ему заголовок и описание:

Желательно, чтобы текст заголовка и мета-описание были предоставлены на всех страницах (все контейнеры). Но если по какой-то причине они опущены, PWA будет использовать некоторые простые значения по умолчанию. Эти значения по умолчанию определяются в контейнере приложения с использованием defaultTitle и siteTitleTemplate и передаются экземпляру реагирующего шлема. Вы можете настроить их следующим образом:

Если есть определенный формат, которому вы хотите следовать за своими заголовками, вы можете предоставить шаблон заголовка, используя siteTitleTemplate (также передаваемый экземпляру реагирующего шлема). % S заменяется текущим заголовком.

Наконец, переменные, описанные в вышеприведенных примерах, передаются в экземпляр шлема реакции следующим образом:

Структурированные данные

Согласно Google, структурированные данные определяются следующим образом:

Структурированные данные - это стандартизированный формат для предоставления информации о странице и классификации содержимого страницы; например, на странице рецепта, какие ингредиенты, время и температура приготовления, калории и так далее.
- Введение в структурированные данные

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

Обратите внимание, что термин микроданные также используется в этом документе. Микроданные Спецификация HTML5 для структурированных данных. Другими словами, микроданные являются одним из типов структурированных данных. Существуют и другие типы структурированных данных, но в этом документе особое внимание уделяется микроданным.

Внешняя документация

Прежде чем обсуждать, как именно структурированные данные используются в Progressive Web App, важно понять, как работает формат. Следующие ресурсы полезны для изучения основ структурированных форматов данных, таких как микроданные:

Примечание. Любая разметка, написанная для использования микроданных, может быть проверена с использованием Инструмент тестирования структурированных данных Google

Детали продукта и список контейнеров

Информация о продукте и список контейнеры использование Технические характеристики Schema.org ,

Поскольку контейнеры полностью настраиваемы, вы можете изменять разметку по своему усмотрению и форматировать микроданные в соответствии с вашими потребностями, используя данные из Redux Store , Ниже приведен очень простой пример того, как это может выглядеть:

Google демонстрирует больше примеров структурированных данных для продуктов. Кроме того, они описывают множество полезных рекомендаций и некоторые рекомендации по форматированию продуктов.

Панировочные сухари и компоненты изображения

Компонент панировочных сухарей использует Schema.org BreadcrumbsList spec и Компонент изображения использует Спецификация ImageObject для Schema.org ,

Важное замечание: обратите внимание, что необходимо включить опцию includeMicroData для хлебных крошек и itemProp = "image" для компонентов Image. Без этих реквизитов их данные не будут считаться частью структурированных данных и будут игнорироваться сканерами. Ниже приведен базовый пример:

Google демонстрирует больше примеров структурированных данных для панировочных сухарей. Он включает в себя различные варианты использования, рекомендации и основные рекомендации.

Data Beyond Products

Хотя Progressive Web App поставляется из коробки, включая некоторые базовые структурированные данные для продуктов, вы, как разработчик, можете свободно расширять приложение настолько большим количеством структурированных данных, сколько вам нужно. Документация Schema.org имеет широкий спектр структур данных для вас на выбор, включая события, людей, места, обзоры и многое другое!

Только не забудьте проверить свои структурированные данные с помощью таких инструментов, как Инструмент тестирования структурированных данных Google ,

Похожие

Комментарии