- Но что именно такое PWA
- Почему PWA в принципе оптимизированы для SEO?
- Небольшая антология кулис, найденная на PWA, якобы созданная для ссылки
- Полный контрольный список для PWA
- Создайте свои веб-приложения, такие как веб-сайты, а не приложения
С тех пор, как Google популяризировал концепцию в 2015 году, Progressive Web Apps привлекает все больше и больше участников, и наши клиенты теперь регулярно просят нас сопровождать их по этому вопросу.
Одним из аргументов, побуждающих владельцев сайтов создавать PWA вместо мобильных приложений (или в дополнение к мобильным приложениям), является тот факт, что контент (и услуги), отображаемые в Страницы с прогрессивными веб-приложениями изначально доступны для ссылки и, следовательно, доступны для поиска по запросу, выполненному в поисковой системе.
А поскольку запросы, сделанные в Google, намного, намного более многочисленны, чем запросы, сделанные в App Store, это сразу же дает гораздо большую видимость приложению . Так что до свидания индексация приложений, разочаровывающие результаты и долгое время живые веб-приложения!
Да, за исключением того, что когда разработчиков приложений просят создавать Progressive Web Apps, они в основном забывают основы. В результате содержимое PWA часто не сканируется, не индексируется или плохо индексируется!
Короче говоря, это хуже, чем приложение, для которого у нас есть хотя бы приложение индексирования для ссылки на контент!
Итак, как вы проектируете PWA, чтобы быть действительно сканируемым и индексируемым?
Но что именно такое PWA
Прогрессивные веб-приложения - это концепция, популярная в Google с 2015 года, которая основана на использовании возможностей HTML5 и последних версий браузеров для кодирования веб-страниц, которые ведут себя как приложения:
- они могут быть установлены как приложение (или почти)
- они могут работать в автономном режиме, храня информацию
- они могут получить доступ (в большей или меньшей степени) к сенсорам и ресурсам смартфонов
и т. д.
PWA также позволяет push-уведомления, такие как приложение.
Изначально только Chrome на Android мог создавать прогрессивные веб-приложения, охватывающие весь спектр возможных функций. В других средах PWA работали в ухудшенном режиме (или сильно ухудшались в Safari / iOS). Со временем большинство браузеров и ОС начали поддерживать функции, необходимые для PWA: например, «работники служб», необходимые для автономной работы, будут интегрированы в версию Safari, доступную в ближайшие недели.
Вопрос о поддержке функций PWA браузерами: те, которые на темно-зеленом фоне имеют рейтинг совместимости более 80%
Почему PWA в принципе оптимизированы для SEO?
Нативные приложения и их содержимое по своей природе вне досягаемости поисковых роботов. Поэтому необходимо использовать индексацию приложений, чтобы предоставить ботам доступ к их содержимому и ссылаться на них. В PWA контент и сервисы генерируются с помощью HTML / Javascript / CSS-кода, выполняемого в браузере. Боты (которые запрашивают содержимое через встроенный навигатор) имеют собственный доступ к содержимому веб-приложения при условии, что они могут обнаружить URL-адрес. Короче говоря, содержание PWA ссылается точно так же, как страницы веб-сайта. Но пока PWA действительно разработан как веб-сайт, и это часто проблема -
Небольшая антология кулис, найденная на PWA, якобы созданная для ссылки
Хорошо, чтобы начать, вы должны разработать PWA, действительно похожий на веб-сайт, с несколькими страницами, по одной странице на контент, и URL для каждой страницы!
Хотя рефлекс разработчика, который разработал только приложения, заключается в создании SPA (одностраничного приложения), который будет иметь только одну страницу!
Создание реального дерева веб-сайтов недостаточно, также необходимо, чтобы URL-адреса были просматриваемыми и индексируемыми: поэтому нет синтаксиса AJAX с параметрами позади # (" https://www.domaine.com/#ref_contenu ). Опять же, бот увидит только один URL ( https://www.domaine.com/ ). И, очевидно, не блокируйте сканирование страниц (или ключевых ресурсов) с помощью robots.txt, который я уже видел три раза!
Очевидно, что для удобства ваш разработчик / интегратор будет широко использовать фреймворки javascript для кодирования вашего PWA. Но если все генерируется на стороне браузера, а не на стороне сервера, ваш контент может не учитываться ботом. Короче говоря, если он не разработан в SSR (Server Site Rendering), это гарантированный флоп! Гибридный рендеринг в порядке, за исключением того, что контента, сгенерированного на стороне сервера, достаточно для SEO.
Демонстрационный сайт PWA, индексируемый в гибридном исполнении: https://hybrid-dot-indexable-pwa.appspot.com/
Другим следствием массового использования и не всегда освоенных библиотек JavaScript является влияние на производительность. Существует большой риск наличия медленных PWA, настолько медленных, что их шансы на правильное сканирование и индексацию упадут. Поэтому важно обратить внимание на этот критерий.
Более того, медлительность PWA совсем не неизбежна: когда мы объединяем, например, код AMP и PWA, у нас есть веб-приложение, которое загружается со скоростью света, поэтому производительность действительно вопрос дизайна и качества кода.
Наконец (кажется очевидным, но все еще часто забываемым), на страницах PWA вы должны подумать о добавлении всех метаданных, которые вы обычно добавляете на веб-страницу: оптимизированный тег заголовка, мета и обычные рекомендации по SEO (hreflang, canonical, robots, next / prev, alternate ...) и разметка schema.org ,
Добавление канонических тегов часто является обязательным, поскольку возможно, что контент, размещенный через PWA, также существует на веб-сайте с другими URL-адресами.
Есть другие детали, о которых нужно позаботиться, у вас есть список, почти полный ниже.
Полный контрольный список для PWA
https://developers.google.com/web/progressive-web-apps/checklist
Расширение Chrome Lighthouse также позволяет вам проверить, что PWA работает по многим критериям
Создайте свои веб-приложения, такие как веб-сайты, а не приложения
Вывод: чтобы воспользоваться преимуществами PWA для SEO, вы должны создать их как веб-сайт, а не приложение.
Можно задаться вопросом: не стоит ли нам отдавать предпочтение интеграторам HTML / Js / Css, привыкшим к созданию веб-сайтов, разработке PWA, а не доверять их разработчикам приложений, которые обязательно из-за отсутствия рефлексов упустите важный элемент веб-сайта и создайте свой проект.
В любом случае, не считайте, что PWA обязательно "SEO Friendly". Вы рискуете серьезным разочарованием.
Так что ладить, Поиск Форсайт есть для этого!
И вы увидите, хорошо продуманный PWA - это здорово. Это даже смысл истории.
Чтобы узнать больше:
Сообщение в блоге от Google для веб-мастеров, напоминающее правила создания индексируемой PWA
https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
Очень полные страницы на PWA сайта «разработчиков» Google:
https://developers.google.com/web/progressive-web-apps/
Итак, как вы проектируете PWA, чтобы быть действительно сканируемым и индексируемым?