Контрольный список SEO для PWA

1. Протестируйте сайт в популярных браузерах
2. Нет «#» в URL
3. Проверка сканирования и визуализации
4. Развивайся медленно + будь проще
5. Выводы

Прогрессивные веб-приложения (PWA) стимулировали развитие мобильных приложений с тех пор, как Google впервые ввел этот термин в общее использование в 2015 году.

В мире, который все больше привязывается к их мобильным устройствам и сопутствующим приложениям, имеет смысл создавать впечатления, которые, как сказал старший инженер-программист из Google Алекс Рассел, «стирают грань между веб-контентом и приложениями».

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

Это дает ряд преимуществ, особенно по сравнению с нативными приложениями. Загрузка не происходит, что делает эти приложения более доступными и даже общедоступными («посмотрите на этот аккуратный PWA, который я только что нашел: https://paperplanes.world/») ,

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

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

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

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

Маяк хром инструмент расширения отлично подходит для базового чтения вашего PWA. Он проверяет следующие компоненты:

• Автономная доступность : это также показывает, насколько хорошо работает приложение, если у пользователя плохой сервис.
• Скорости загрузки страницы: в отчете Lighthouse перечислены различные значения скорости для таких вещей, как «Индекс скорости», «Предполагаемая задержка ввода» и т. Д.
• Безопасность сетевого подключения: проверяет наличие у PWA сертификата SSL для безопасного подключения (проверенный фактор ранжирования).
• Функция «Добавить на домашний экран»: если ваш опыт работы с PWA особенно полезен, пользователи захотят добавить ярлык на свои домашние экраны, поэтому ваше веб-приложение должно разрешить эту функцию.
• Удобный для мобильных устройств дизайн. Определяет, построен ли ваш PWA с адаптивным дизайном для надлежащего функционирования на большем количестве устройств.
• Присутствие сервисного работника: сервисные работники являются основой PWA, поскольку они выполняют ряд функций / функций, синонимичных веб-приложениям, таких как возможность push-уведомлений, автономное кэширование и данные геолокации.

Если Lighthouse обнаружит какие-либо проблемы с его первоначальным чтением, он уведомит вас и, возможно, даст вам понимание решения проблемы.

Протестируйте сайт в популярных браузерах

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

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

Вы можете проверить свою метаинформацию Schema.org с помощью бесплатных сервисов, включенных в инструментарий Google, таких как тест структурированных данных.

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

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

Убедитесь, что, когда ваш PWA используется в социальных сетях, есть соответствующие форматы метаданных, чтобы сделать этот переход плавным. Google рекомендует использовать Инструмент отладчика объектов Facebook , в то время как это руководство от Твиттера является полезным ресурсом для форматирования метаданных Twitter Card.

Нет «#» в URL

По словам Джона Мюллера из Google, робот Google не индексирует URL-адреса с «#» (кроме «#!»). Как только бот нажимает «#», он перестает индексировать что-либо за пределами этого маркера. Таким образом, Мюллер рекомендует использовать традиционные структуры URL которые следуют по пути / имени файла / структуре параметров запроса. Это может быть утомительным для реализации, но помогает гарантировать, что PWA сканируется правильно.

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

Чтобы убедиться, что вы не получаете повторяющихся нарушений содержимого, вы должны проверить, что все ваши повторные страницы имеют необходимые теги <link rel = canonical> , указывающие на канонический источник содержимого.

Проверка сканирования и визуализации

Сквозь Выбрать как инструмент Google в консоли поиска вы можете увидеть, как Google сканирует и «видит» ваш PWA и его страницы. Функция Fetch and Render показывает, как страница выглядит для пользователей. Вы можете сравнить их, чтобы проверить визуальные различия между тем, как бот-обходчик и реальный пользователь видят страницу. Эта тактика также предупредит вас, если robots.txt заблокирует что-либо , например, файлы JavaScript, сторонние API и другие функции PWA.

Если ресурс заблокирован, вы хотите выяснить, возможно ли это исправить. Тем не менее, некоторые сторонние API могут автоматически блокироваться файлом robots.txt. Если это так, посмотрите, как он отображается на стороне пользователя, и убедитесь, что этот заблокированный ресурс не отвлекает от общего опыта приложения.

Если это так, вы можете просто удалить его.

Развивайся медленно + будь проще

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

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

Медленная разработка также предотвращает перегрузку вашего PWA слишком большим количеством встроенных ресурсов. Естественно, вы хотите воспользоваться всеми преимуществами технологии PWA, но слишком большое количество файлов JavaScript или уникальных ответов сервера может привести к сбоям в работе и привести к тайм-аутам, ограниченным ресурсам и плохому UX.

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

Выводы

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

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

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

Похожие

Комментарии