Прогрессивные веб-приложения (PWA) и поисковая оптимизация (SEO)

Progressive Web App (PWA) — это прикладное программное обеспечение, доставляемое через Интернет. Он построен с использованием стандартных веб-технологий, таких как HTML, CSS, JavaScript и т. д. PWA обычно используются для повышения коэффициента конверсии и трафика веб-сайта. С 2021 года PWA поддерживаются (полностью или частично) Google Chrome, Apple Safari, Firefox для Android и Microsoft Edge.

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

В целом, согласно отчету TOP 30 PWA, «средний коэффициент конверсии для прогрессивных веб-приложений был на 36% выше, чем для нативных мобильных приложений».

PWA — отличные помощники, когда дело доходит до онлайн-маркетинга. Именно поэтому они популярны среди SEO-специалистов. Однако, как и в случае с React и SEO, комбинация PWA SEO имеет свои трудности. В этой статье мы прольем свет на то, как PWA работают с SEO.

Примеры и основные преимущества PWA

Любой веб-сервис может быть PWA. Для этого есть три основных требования:

1. Работает под HTTPS.
2. Включает манифест веб-приложения.
3. Реализует сервис-воркер.

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

1. PWA приносит новые возможности и рост буквально любому бизнесу. Он сочетает в себе лучшие качества приложений и веб-приложений, отзывчивость и возможность работать на любом устройстве, и ему не обязательно требуется скоростная сеть.
2. Безопасность транспортного уровня делает его безопасным.
3. Service worker (специальный скрипт, который ваш браузер запускает в фоновом режиме) позволяет PWA работать в автономном режиме.

Давайте посмотрим на некоторые из лучших примеров внедрения PWA:

Рекомендуется для вас: самые популярные платформы для создания прогрессивных веб-приложений (PWA).

1. Старбакс

PWA системы заказов Starbucks проста и удобна для пользователя. Оно выглядит так же, как их собственное приложение, но имеет возможность работать в автономном режиме, когда пользователь просматривает меню и добавляет товары в корзину. Наилучшим преимуществом такого решения является тот факт, что PWA почти в два раза меньше стандартного приложения Starbucks. Из-за этого компания значительно увеличила количество пользователей сети.

2. Пинтерест

После того, как было обнаружено, что только 1% мобильных пользователей Pinterest загружают приложение и входят в систему из-за его низкой производительности, мобильное приложение было перестроено на основе технологии PWA. Благодаря этому такие показатели, как потраченное время, доход от рекламы и основная вовлеченность, увеличились до 40–60%.

3. Убер

Веб-приложение Uber было преобразовано в PWA с целью обеспечения быстрого обслуживания в низкоскоростных сетях и на старых смартфонах, несовместимых с родным приложением Uber. Благодаря этому сверхлегкое основное приложение загружается примерно за 3 секунды в сетях 2G.

Важность SEO

SEO — это оптимизация вашего сайта для поисковых систем (SE). Его основная цель — повысить рейтинг сайта в результатах поиска и привлечь посетителей. Он основан на алгоритмах SE и использует ключевые слова, чтобы помочь поисковым системам отображать релевантный контент и привлекать целевую аудиторию на веб-сайты. Вот как SEO может привлечь органический трафик на ваш сайт, который является лучшим в своем роде. В отличие от прямого и платного трафика, он способен превратить большинство ваших посетителей в ваших клиентов и заказчиков.

SEO для прогрессивных веб-приложений: в чем проблема?

Несмотря на все преимущества PWA, многие владельцы веб-сайтов все еще не решаются внедрять эту технологию. Тому есть две основные причины:

1. Страх изменить существующую систему, которая уже хорошо работает.
2. Плохое понимание того, как PWA работает с SEO.

Как заявил Джон Мюллер (аналитик Google), «в настоящее время PWA не имеют никаких преимуществ в поиске Google».

Многие PWA создаются с использованием фреймворков JS, которые не известны своей дружественностью к SEO.

Таким образом, в отличие от традиционных веб-сайтов на основе HTML, PWA, зависящие от JavaScript, сложны для SEO. Вот почему они не предлагают никаких преимуществ с точки зрения возможности поиска. Однако, вопреки распространенному мнению, это не означает, что прогрессивные веб-приложения не могут быть проиндексированы поисковыми системами. Просто для этого нужно использовать разные техники.

Рендеринг на стороне сервера и рендеринг на стороне клиента

Большинство веб-сайтов используют рендеринг на стороне сервера (SSR). Это самый простой подход, при котором страница отображается на стороне сервера, а не в браузере. Однако весь HTML-код загружается каждый раз, когда пользователь запрашивает страницу, что может быть проблематично, если интернет-соединение недостаточно стабильное или быстрое.

PWA на основе JavaScript используют рендеринг на стороне клиента (CSR), когда контент отображается в браузере клиента. Он не отправляет всю HTML-страницу каждый раз, когда пользователь запрашивает страницу. Файл JavaScript отображает только необходимую часть информации со страницы в браузере клиента. Именно поэтому страница загружается быстрее даже при плохом интернет-соединении.

Однако почему многие владельцы сайтов до сих пор отказываются от использования CSR? Проблема в ботах Google. Он может читать содержимое веб-сайта в коде, который полностью виден в HTML-документе. CSR в данном случае полностью зависит от способности поисковой системы обрабатывать JavaScript. Вот почему бытует мнение, что CSR-приложения нельзя индексировать. Однако на самом деле среди всех поисковых систем Google лучше всех обрабатывает JavaScript.

Тем не менее, это еще не означает, что проблема с JavaScript и SEO решена: Google признает, что обработка JS не идеальна. А именно, процесс сканирования страницы на основе JavaScript занимает больше времени, чем процесс сканирования HTML-страницы. На самом деле это означает, что вам придется ждать больше времени, пока JavaScript-контент появится на страницах результатов поисковой системы.

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

Как внедрить PWA без потери поисковой оптимизации?

Вам может понравиться: Magento PWA Studio: Инструмент прогрессивного веб-приложения для Magento!

1. Примените динамическую визуализацию

Динамический рендеринг показывает разные версии контента для разных источников. Посетитель получает версию CSR, а сканер получает версию, обработанную на стороне сервера. Это позволяет улучшить индексацию страниц на основе JavaScript ботом Google. Таким образом, вы обеспечите максимально удобный пользовательский интерфейс для своих клиентов, не рискуя SEO-оптимизацией веб-сайта.

2. Объедините SSR и CSR

Убедитесь, что сканер увидит наиболее важные части контента (которые обязательно должны быть переданы поисковым системам) с помощью рендеринга на стороне сервера. Эта информация будет выбрана сканером, как только он обнаружит страницу. Остальная информация будет автоматически обрабатываться посредством рендеринга на стороне клиента на втором этапе процесса.

3. Создайте свой PWA, используя оптимизированный для SEO фреймворк JavaScript.

Мы рекомендуем GatsbyJS. Используя эту структуру, довольно легко создать веб-сайт PWA (а также превратить существующий веб-сайт Gatsby в PWA). Он предварительно визуализирует ваш веб-сайт на этапе сборки для блестящей работы без задержек, даже если подключение к Интернету медленное. Благодаря этому ваши посетители получают опыт просмотра, подобный приложению.

4. Прибегайте к готовым решениям PWA

Сегодня PWA доступны как никогда. Итак, если вы не хотите тратить много времени и ресурсов на разработку PWA, вы можете воспользоваться готовыми решениями PWA, которые сделаны по принципам SEO и тщательно протестированы, поэтому вы можете быть уверены в качестве. кода.

5. Студия PWA

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

6. СкандиПВА

ScandiPWA — это решение с открытым исходным кодом, основанное на React и Redux. Он разработан с целью улучшить скорость веб-сайтов и возможность работать в автономном режиме. Он также постоянно обновляется, поэтому вы всегда будете получать новые функции.

7. Витрина магазина Vue

Это одно из первых PWA-решений, доступных на рынке. На самом деле Vue Storefront — это универсальное решение «все в одном», но оно требует дополнительных ресурсов для обслуживания.

Как избежать ошибок, связанных с SEO, при внедрении PWA?

Чтобы разработать хорошо продуманное PWA, которое поможет вам выиграть в SEO, предоставив улучшенный пользовательский интерфейс, вы должны:

1. Проведите SEO-аудит. Это поможет обнаружить и исправить все проблемы, связанные с SEO.
2. Проконсультируйтесь с SEO-специалистами. Когда вы создаете PWA с помощью React (например), ваши SEO-специалисты должны точно знать, как сочетать React и SEO. Так вы избежите большинства возможных проблем, которые могут возникнуть после внедрения.
3. Придерживайтесь основных принципов SEO при разработке PWA. В статье, посвященной Progressive Web Apps SEO, опубликованной Google, компания дает советы о том, как создавать индексируемые PWA. Некоторые из них таковы:
   • Каждая страница должна быть доступна по определенному URL-адресу. Благодаря этому каждая страница будет сканироваться независимо.
   • Сайт должен иметь адаптивный дизайн и быть оптимизированным для мобильных устройств.
   • Используйте прогрессивное улучшение. Благодаря этой стратегии PWA хорошо работают даже в старых браузерах.
   • Регулярно проверяйте, как Google отображает вашу страницу с помощью Google Search Console. Таким образом, вы всегда будете знать, когда пора что-то обновить или изменить.
   • Следите за временем загрузки страницы. Google измеряет скорость загрузки каждой страницы, и если скорость загрузки вашей страницы замедляется, Google понижает ее рейтинг.

Вам также может понравиться: React Native vs Flutter vs PWA: битва за трендовые фреймворки для мобильных приложений.

Нижняя линия

Оптимизация PWA предлагает множество возможностей для онлайн-маркетинга и способствует росту подавляющего большинства предприятий. Фактически, лучшая практика SEO, обычно применяемая PWA, — это удобный интерфейс: он отзывчив, структурирован и быстро отображается. Тем не менее, PWA по-прежнему не дают прямого преимущества SEO, а проблемы, связанные с SEO, — это то, что мешает многим продавцам внедрять PWA на свои веб-сайты. Вот почему важно быть осторожным и использовать различные методы, такие как динамический рендеринг, сочетание SSR и CSR или готовые к использованию решения PWA. Также с самого начала следует привлечь к процессу SEO-специалистов.

Как видите, вы можете использовать как SEO, так и PWA, успешно комбинируя их. Также следует отметить, что PWA — это молодой, инновационный тип программного обеспечения, поэтому следует ожидать улучшений.

 Эта статья написана Иваном Джонсом. Иван — SEO-специалист в Clockwise.Software с более чем 5-летним опытом работы в отрасли. Он знает нюансы, которые помогли ему годами удерживать веб-сайты на вершине результатов поиска Google. Будучи заядлым учеником, он стремится тестировать новые подходы, которые могут принести пользу результатам SEO.