вход на сайт

Имя пользователя :
Пароль :

Восстановление пароля Регистрация

Лучшие практики SEO для разработчиков

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

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

Оглавление

Компонент PageMeta

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

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

<html> <head> <title> Зелья Мерлина </ title> <meta name = "description" content = "Добро пожаловать в Зелья Мерлина. Интернет-поставщик Камелота номер 1 для зелий, книг, ингредиентов и многого другого." /> </ head> <! - и т. д. -> </ html>

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

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

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

// Компонент PageMeta доступен из каталога импорта локального компонента PageMeta из '../../components/page-meta' const MyPage = () => {return (<div className = "t-my-page"> {/ * * Несмотря на то, что это определено в теле приложения, * ему все же удается обновить только заголовок сайта. * /} <PageMeta title = "Название моей страницы" description = "Описание моей страницы" /> { / * и т. д. * /} </ div>)}

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

// File: // web / app / container / app / container.jsx const defaultTitle = 'Имя моего сайта' // Таким образом, если заголовок не указан, тег заголовка будет отображаться как «Мой // Имя сайта». Но если указан заголовок, он будет отображаться вместо

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

// Файл: // web / app / container / app / container.jsx const siteTitleTemplate = `% s | Имя моего сайта` // Таким образом, если текущий заголовок будет выглядеть как «Зелья», заголовок // будет отображаться как: «Зелья | Имя моего сайта». Если заголовок не указан, // вместо него будет отображаться заголовок по умолчанию (см. Выше).

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

// Файл: // web / app / Containers / app / container.jsx import {Helmet} из 'Reaction-шлем' // Где-то в разметке контейнера приложения (обычно близко к вершине) ... <Helmet defaultTitle = { defaultTitle} titleTemplate = {siteTitleTemplate} />

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

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

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

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

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

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

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

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

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

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

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

// Пример базового продукта render () {const {имя, изображение, цена, описание} = возвращение this.props (<div itemScope itemType = "http://schema.org/Product"> <h1 itemProp = "name"> {name} </ h1> // Требуется свойство itemProp. Без него изображение не будет // считаться частью данных продукта. Однако если у вас есть // другие изображения, не связанные с продуктом, то эти // изображения могут исключать `itemProp` <img itemProp =" image "src = {image.src} alt = {image.alt} /> <p itemProp =" description "> {description} </ p> <div itemProp = "offer" itemScope itemType = "http://schema.org/Offer"> $ <span itemProp = "price"> {price} </ span> <meta itemProp = "priceCurrency" content = "USD" /> < / div> </ div>)}

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

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

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

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

// Пример базового продукта render () {const {имя, изображение, цена, описание, breadcrumbItems} = this.props return (<div itemScope itemType = "http://schema.org/Product"> <h1 itemProp = "name "> {name} </ h1> // Помните, что требуется` includeMicroData`! <Breadcrumbs items = {breadcrumbItems} includeMicroData /> // Обратите внимание, что теперь это компонент `Image`, а не //` img тег. Помните, что реквизит itemProp по-прежнему необходим! <Image itemProp = "image" src = {image.src} alt = {image.alt} /> <p itemProp = "description"> {description} </ p> <div itemProp = "offer" itemScope itemType = "http://schema.org/Offer"> $ <span itemProp = "price"> {price} </ span> <meta itemProp = "priceCurrency" content = " USD "/> </ div> </ div>)}

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

Data Beyond Products

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

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

Итак, как мы можем получить контроль над тегом head?
Поиск по сайту
Меню
Реклама на сайте
Архив новостей
Реклама на сайте

Реклама на сайте







Архив сайта
Информация
www.home-4-homo.ru © 2016 Copyright. Все права защищены.

Копирование материалов допускается только с указанием ссылки на сайт.