Проблемы PWA SEO: что мешает вашему сайту PWA ранжироваться?

Благодаря более высокой скорости и лучшему пользовательскому интерфейсу и взаимодействию с пользователем, PWA может повысить ваши показатели Google Core Web Vitals, тем самым улучшив вашу поисковую оптимизацию. Многие технологические блоги и новости (включая SimiCart) заявляют об этом.

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

За 10 лет разработки веб-сайтов PWA мы столкнулись с несколькими случаями, когда PWA негативно влияет на эффективность SEO.

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

Основная проблема с PWA SEO

Это восходит к базовым знаниям в области разработки веб-сайтов: HTML и Javascript. Мы держим пари, что даже если вы совсем не разбираетесь в технологиях, вы должным образом слышали об этих двух языках программирования раньше.

Короче говоря, HTML — это самый простой язык кодирования, который используется для создания структуры веб-сайта.

Между тем, Javascript — более продвинутый, который отвечает за большее количество спецэффектов.

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

(кредит: Реддит)

PWA, известный своим живым интерфейсом UI/UX, как вы можете догадаться, использует много Javascript.

Вот проблема: Google и многие другие поисковые системы не так хорошо отображают веб-сайты Javascript. Веб-сайты на основе Javascript часто сложнее и тяжелее в обработке, чем веб-сайты HTML. На самом деле, не только поисковые системы, но и социальные сети, такие как Twitter или Facebook, тоже не очень любят Javascript.

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

Поэтому для оптимизации веб-сайта, чтобы он был оптимизирован для SEO, требуется опытный эксперт, который понимает PWA наизнанку.

6 препятствий при оптимизации PWA для SEO.

1. Проблемы с производительностью

«Но PWA должен быть быстрым?» – Вы можете спросить.

Да, это не значит, что у PWA нет проблем с производительностью.

В PWA все еще есть некоторые заметные проблемы, связанные со скоростью. Однако PWA может работать молниеносно, если оно правильно оптимизировано.

Как и Усэйн Болт, несмотря на то, что он родился супер-пупер талантливым, он не может быть чемпионом, если у него нет тренера, который понимает его способности и хорошо его тренирует.

Рассмотрим подробнее каждую проблему:

Проблемы

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

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

Кроме того, поскольку сервисному работнику PWA для работы требуются сертификаты HTTPS и SSL, это может сделать ваш сайт медленнее, чем его HTTP-версия.

Решения

Некоторые распространенные методы повышения скорости включают внедрение AMP (ускоренных мобильных страниц) вместе с PWA, а также использование HTTP/2 с HTTPs.

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

2. Ошибки Javascript

Проблема

При синтаксическом анализе браузеры, такие как Google Chrome, могут автоматически исправлять синтаксис HTML, например закрывающие теги. Однако это не то же самое с ошибками Javascript.

Как следствие, любые ошибки в Javascript могут помешать роботам поисковых систем сканировать и индексировать ваши веб-страницы.

Решения

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

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

3. Гиперссылка/изображение не просканировано из-за маскировки содержимого.

Маскирующий контент — это контент, видимый человеческим глазам, но не поисковым системам. Например, текст, спрятанный за кнопкой «показать больше», или ссылки в меню отложенной загрузки. Часто это динамический контент и ссылки, написанные на Javascript.

Проблема

Поскольку у Google все еще есть некоторые трудности с пониманием Javascript, может быть некоторый контент Javascript PWA, к которому Google не сможет получить доступ.

Если ваш контент (например, важная ссылка, изображение продукта) невидим для поисковых систем, они не смогут его проиндексировать. Следовательно, это плохо повлияет на ваш SEO-рейтинг.

Решение

Вы всегда можете положиться на такие инструменты, как Sitechecker или Small SEO, чтобы увидеть, содержит ли ваша веб-страница какой-либо скрытый контент. Убедитесь, что весь ключевой контент, такой как тексты, изображения и ссылки, доставляемые вашим пользователям, соответствует тому, что предоставляется роботу Googlebot.

4. Совместимость модулей

Проблема

Будучи относительно новой технологией, PWA часто использует новейшие модули. Это может конфликтовать с Google или другими браузерами, которые обычно полагаются на менее современные модули. Некоторыми яркими примерами этого являются ES6, Fetch API или новые синтаксисы или методы.

Решение

Перед внедрением следует проверить их совместимость. Не будет большой проблемой, если какие-то модули вашего PWA не будут работать с роботом Googlebot, потому что есть инструменты или полифиллы, чтобы это исправить.

Polyfill — это несколько строк кода Javascript, которые позволяют старым браузерам использовать современные функции, даже если они изначально не поддерживают эти функции.

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

К вашему сведению, транспиляция (перевод + компиляция) означает перевод и интерпретацию одного языка программирования на другой. Возьмем в качестве примера модуль ES6. Такие сервисы, как Babel, могут транспилировать современные файлы C6 Javascript в ES5, что позволяет более старым браузерам без проблем работать с ним.

5. Проблема с рендерингом на стороне сервера

Стремясь улучшить отрисовку веб-сайтов на основе Javascript, робот Googlebot использует отрисовку как на стороне сервера, так и на стороне клиента.

Вкратце процесс рендеринга выглядит так:

1. Робот Googlebot впервые сканирует ваш веб-сайт, чтобы найти ссылки и контент.
2. Сервер будет отображать ссылки и контент, найденный после первого обхода. Эти ссылки и содержимое будут проиндексированы вскоре после этого.
3. Google продолжает сканировать веб-сайт во второй, третий раз и т. д.
4. С этого момента остальные ссылки и содержимое будут отображаться клиентом, что означает, что они будут отображаться на устройствах ваших пользователей.
5. После завершения рендеринга Google индексирует ваши веб-страницы.

Проблема

На первый взгляд процесс рендеринга робота Googlebot кажется вполне правдоподобным, но у него есть несколько существенных недостатков:

• Нижняя скорость индексации :

Google может быстро индексировать HTML-файлы с рендерингом на стороне сервера, но индексирование файлов Javascript с рендерингом на стороне клиента может занять несколько дней.

• Отдайте приоритет неправильным страницам :

Представьте, что у вас есть веб-страница, которая ссылается на некоторые другие страницы. Это так называемые внутренние ссылки. Google полагается на структуру этих внутренних ссылок, чтобы понять взаимосвязь между ссылками и ссылки, которым они должны отдавать приоритет.

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

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

• Конфликт между рендерингом на стороне сервера и рендерингом на стороне клиента:

Часто возникают проблемы между рендерингом на стороне сервера и рендерингом на стороне клиента. Например, некоторые важные элементы страницы (метатеги, канонические теги) не индексируются. Более того, эти две фазы могут подавать в Google смешанные сигналы, поэтому поисковая система не знает, что делать с вашими страницами.

Решение

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

Современные технологии также могут помочь нам разрешить конфликт между Javascript и веб-браузерами. Например, изоморфный метод может упростить для браузеров отображение файлов Javascript.

6. Распространенные SEO-ошибки

Существует более 200 факторов ранжирования SEO, некоторые из них являются техническими, например, канонические теги, rebot.txt и т. д. По этой причине продавцы могут легко игнорировать эти конфигурации, что в конечном итоге нанесет ущерб SEO их веб-сайта.

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

>> Подробнее: Лучшие практики Magento SEO

Теперь перейдем к самому щекотливому вопросу:

Должен ли я перейти на PWA?

… Если я не хочу навредить SEO моего сайта.

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

Однако эти проблемы не означают, что боты Google не могут сканировать сайты PWA и не ранжируют сайты PWA по-разному из-за языка программирования.

Просто продавцы должны знать о некоторых технических проблемах при создании оптимизированного для SEO сайта PWA.

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

Итак, с точки зрения SEO, PWA — герой или ноль? Это зависит от того, глубоко ли их разработчики понимают технологию PWA и разработку веб-сайтов.

Еда на вынос

PWA может быть обоюдоострым ножом для SEO-рейтинга вашего сайта. С другой стороны, его повышенная скорость и удобство для клиентов могут помочь повысить основные жизненно важные функции SEO в Интернете. С другой стороны, PWA с его богатым содержанием Javascript более сложны для работы поисковых систем, таких как Google. Таким образом, плохая реализация без глубокого понимания PWA может привести к падению рейтинга.

Вполне возможно создать оптимизированный для SEO веб-сайт PWA. Главное — найти разработчиков PWA, которые знакомы с этими проблемами и знают, как их быстро решить.

Мы уже 10 лет создаем безголовые PWA для Magento.