Руководство по AMP и PWA
Опубликовано: 2021-03-01AMP и PWA наверняка станут двумя наиболее обсуждаемыми темами контент-маркетинга в следующем году. В этом руководстве мы предоставим вам ключевую информацию об обоих, включая краткие определения AMP и PWA, а также о том, как вы можете использовать их для доставки контента. Мы также обсудим различные способы использования AMP и PWA для достижения маркетинговых целей, особенно в отношении SEO.
Что такое проект AMP (проект ускоренных мобильных страниц)?
AMP означает ускоренные мобильные страницы — и, по сути, это то, что он вам дает.
Страницы AMP предоставляют практически тот же контент, что и существующая веб-страница, например онлайн-статья. Контент доставляется мобильным пользователям в упрощенном формате, основанном на уникальном языке AMP HTML, который сочетает в себе простые элементы HTML и CSS и ограничивает использование JavaScript. Это означает, что страницы AMP загружаются намного быстрее, чем исходные веб-страницы, на которых они обычно основаны.
Пользователи мобильного поиска впервые получили доступ к AMP-контенту в феврале 2016 года, когда Google начал предоставлять AMP-версии веб-страниц в результатах поиска. На момент написания AMP-контент на страницах результатов мобильного поиска доставлялся как в формате карусели, так и в формате избранных историй, что в каждом случае позволяло пользователю просматривать соответствующий контент из нескольких источников. Контент отмечен в результатах поиска Google значком AMP, изображенным в виде белой молнии в синем круге.
Самый простой способ создать AMP-контент, подходящий для доставки в функции поиска Google AMP, — это отредактировать HTML-код существующего контента в AMP-HTML, затем проверить страницу и подготовить ее для обнаружения. Amp.dev предлагает разработчикам простое руководство по преобразованию HTML-страницы в HTML-страницу AMP.
Страницы AMP почти всегда канонически связаны с другими страницами. Это означает, что их URL-адрес имеет «канонический» тег rel, который сообщает поисковым системам, что страница совпадает со страницей на вашем веб-сайте. Версия страницы без AMP имеет приоритет с точки зрения SEO.
Есть ключевое исключение из этого правила в виде веб-сайтов только для AMP, которые в настоящее время создаются некоторыми онлайн-издателями.
Джон Мюллер, аналитик тенденций Google для веб-мастеров, сообщил веб-мастерам, что веб-сайты, поддерживающие только AMP, могут быть полезными:
«Я не вижу проблем с использованием сайта только на AMP — это отличный фреймворк для относительно простого создания быстрых сайтов. Поскольку это, по сути, HTML, он будет работать так же, как и любая другая HTML-страница. Удивительно видеть, что появляется больше сайтов только с AMP, это может сделать вещи намного проще (сканирование, индексирование и SEO в целом), когда у вас есть только один URL-адрес для каждого фрагмента контента!»
Если вы хотите протестировать собственный сайт, поддерживающий только AMP, мы рекомендуем настроить его на WordPress и использовать плагин AMP for WP — Accelerated Mobile Pages.
AMP — это постоянный проект с открытым исходным кодом, в котором есть приложения для электронной почты и рекламы, а также веб-контент. Для получения полной актуальной информации о проекте посетите сайт Amp.dev.
Что такое PWA и почему мне следует начать их использовать?
Прогрессивное веб-приложение (PWA) — это веб-приложение, которое дополняет веб-страницу функциями и элементами взаимодействия с пользователем (UX), которые традиционно использовались в основном в нативных приложениях. Другими словами, они заставляют веб-контент действовать как контент приложения.
Пользовательский интерфейс PWA состоит из следующих шагов:
- Пользователь открывает страницу PWA через свое мобильное устройство. Он действует как обычная веб-страница;
- Пользователь получает приглашение добавить страницу на главный экран своего устройства;
- Пользователь принимает приглашение. Затем страница появится и будет действовать как приложение на главном экране.
- Текущий UX веб-сайта/PWA имеет элементы, типичные для нативного UX приложения.
Превращение веб-контента в PWA — это работа для вашего веб-разработчика, требующая знаний HTML и JavaScript.
У Google есть обширные критерии того, что представляет собой «базовый» PWA или «образцовый» PWA.
Базовые PWA:
- Обслуживаются через HTTPS
- Отзывчивы на планшетах и мобильных устройствах
- Содержат URL-адреса, которые будут загружаться в автономном режиме.
- Предоставьте метаданные для «Добавить на главный экран»
- Быстрая загрузка даже в 3G
- Работать кроссбраузерно (в т.ч. в Chrome, Edge, Firefox и Safari)
- Обеспечьте быстрый переход между страницами
- Иметь выделенный URL для каждой страницы
Удовлетворение этим критериям имеет решающее значение для жизнеспособности PWA (или потенциального PWA) и потенциального охвата в Google Chrome.
Критерии образцовых PWA более подробные. Полную информацию см. в контрольном списке прогрессивных веб-приложений Google.
PWA предлагают ряд преимуществ. После первой загрузки они обычно загружают контент быстрее, чем большинство традиционных веб-страниц. Это помогает удерживать внимание пользователя, когда он перемещается по нескольким элементам контента, поскольку это сужает окно времени, когда они могут уйти из-за медленной загрузки контента. Если вы хотите, чтобы пользователи последовательно потребляли ряд элементов контента, было бы разумно доставлять этот контент через PWA.
Еще одно ключевое преимущество заключается в том, что PWA могут обеспечить постоянное присутствие брендов на главном экране мобильного устройства пользователя. Это своевременная возможность, так как многие издатели изо всех сил пытаются конкурировать на переполненном рынке нативных приложений, где процент удержания приложений через 90 дней составляет всего 4%, а пользователи тратят 77% общего времени использования приложения на свои 3 лучших приложения (источник: Статистика загрузки и использования приложений (2019 г.) — Business of Apps).
PWA могут изменить правила игры для издателей, ориентированных на любителей роскоши или читателей из сельской местности, поскольку они могут загружать контент, когда пользователь находится в автономном режиме.
Одним из потенциальных недостатков PWA является то, что иногда кажется, что они непредсказуемо работают в результатах поиска Google.
Согласно Ignite Visibility, сайты, стремящиеся индексировать контент с помощью PWA для целей SEO, должны «либо иметь базу HTML и загружать поверх нее прогрессивное веб-приложение, [или] использовать такой инструмент, как prerender.io и/или pushstate».
Веб-сайт PWA Stats, управляемый сообществом, ведет оперативный список статистических данных о результатах, достигнутых брендами благодаря переходу на PWA, от сокращения времени загрузки Tinder до увеличения доходов Best Western.
В чем разница между AMP и PWA?
Существует распространенное заблуждение, что AMP и PWA — конкурирующие технологии, служащие одной и той же цели.
Хотя верно то, что ключевая роль обеих технологий заключается в более быстрой загрузке контента для пользователя, AMP и PWA имеют различные сильные и слабые стороны и тактическое использование с точки зрения маркетолога.
Страницы AMP предлагают непревзойденно быстрое время загрузки при первом нажатии. Это делает их идеально подходящими для привлечения новых читателей, так как снижается вероятность отказа пользователей из-за медленной загрузки. Они также имеют отличную возможность обнаружения в результатах поиска Google. Однако AMP не поддерживает расширенные функции платформы, такие как динамический контент и push-уведомления.
Страницы PWA загружаются относительно медленно при первой загрузке, но затем загружаются очень быстро после второй загрузки, что может улучшить время загрузки и снизить показатель отказов в постоянных отношениях между читателем и вашим контентом. Кроме того, PWA могут поддерживать расширенные функции платформы, такие как динамический контент, автономный просмотр и push-уведомления, тем самым предоставляя маркетологам больше способов влиять на пути пользователей и повышать конверсию.
Онлайн-издатели могут сочетать преимущества AMP и PWA, используя эти две технологии вместе. Instapage описывает один из таких подходов в своей статье о PWA и AMP:
«[Думайте] о своей AMP-странице как о привязке к вашему веб-сайту. Он ловит пользователя мгновенной загрузкой, а затем наматывает его в ваше прогрессивное веб-приложение. Это позволяет комбинировать быстро загружаемые AMP-страницы с [..] динамическим PWA».
Другой вариант — включить функции PWA на странице AMP.
В качестве альтернативы вы можете разработать PWA с использованием AMP. Этот метод основан на написании PWA в формате AMP HTML и использовании компонента amp-install-serviceworker для включения расширенных функций PWA.
Какой вариант лучше для SEO и поискового рейтинга: AMP или PWA?
На наш взгляд, ответ заключается в том и другом, поскольку AMP и PWA по-разному помогают в SEO.
PWA делают контент сайта более привлекательным и, следовательно, могут повысить уровень потребления контента пользователями. Между тем, AMP снижает показатель отказов, значительно увеличивая скорость загрузки мобильных страниц.
В обоих случаях наблюдается улучшение обратной связи с Google по ключевым факторам ранжирования веб-страницы, которые играют роль в определении поискового рейтинга и общей видимости страницы и ее домена в поиске.
Таким образом, лучшим подходом с точки зрения SEO может быть использование комбинации AMP и PWA, как обсуждалось в предыдущем разделе этой статьи.
Что я слышу о спорах вокруг AMP?
Хотя нет никаких сомнений в том, что AMP является мощным инструментом для распространения веб-контента и ускорения его загрузки, вы должны помнить, что вокруг проекта ведутся серьезные споры.
Некоторые комментаторы рассматривают AMP как способ Google свести на нет веб-сайты онлайн-издателей и узурпировать их контент, ограничивая пользователей опытом, оптимизированным для Google и основанным на нем.
Как пишет автор The Register Скотт Гилбертсон:
«Дело не в скорости. Как и все, что избегает стандартов для своей модифицированной версии, речь идет о блокировке. Тонны страниц в разметке Google AMP означают тонны страниц, оптимизированных специально для Google, проиндексированных в первую очередь Google и показываемых в первую очередь пользователям Google. Это попытка Google соответствовать платформе Facebook. И да, Facebook намного хуже, чем AMP, но это не делает Google AMP хорошей идеей. По крайней мере, Facebook не пытается делать вид, будто он открыт».
Кроме того, страницы AMP отображаются без собственного URL-адреса издателя и элементов их собственного бренда, что эффективно отделяет контент от его издателя.
Возможно, самый сильный аргумент в пользу использования AMP — для издателей. Его используют многие ведущие мировые производители медиа-контента, от основных поставщиков новостей, таких как The Guardian и Daily Mail, до специализированных издателей, таких как Wired и Social Media Today. Возникает вопрос: если ведущие издатели в вашей области используют AMP, может ли ваше издание позволить себе этого не делать?
Чтобы получить больше информации о полемике вокруг AMP, ознакомьтесь с выпуском нашего подкаста по цифровому маркетингу о том, как создавать быстрые веб-сайты, в котором есть интервью с соучредителем Raven Tools Джоном Хеншоу.
Являются ли прогрессивные веб-приложения (PWA) будущим приложений?
В декабре 2019 года TechCrunch сообщил об удивительном открытии, согласно которому 80% новых загрузок приходится на 1% лучших издателей магазинов приложений.
Это рисует мрачную картину для цифровых издателей, которые хотят получить доступ к преимуществам, которые могут принести приложения, включая устойчивое присутствие бренда на мобильных устройствах пользователей, более активное участие пользователей, владение платформой, полный доступ к аналитике и, возможно, самое главное, оптимальные мобильные устройства. UX.
В контексте сокращения числа загрузок нативных приложений PWA, кажется, предлагают лучший способ для всех, кроме крупнейших онлайн-издателей, получить доступ к этим преимуществам. Они обходят нежелание веб-пользователей устанавливать приложение из магазина приложений, вместо этого переводя их в приложение в рамках обычного взаимодействия с веб-страницей.
Нативные приложения по-прежнему растут с точки зрения глобальных загрузок и времени использования, и в этом смысле они, возможно, остаются будущим приложений. Это связано с оговоркой, что рост обусловлен влиятельным меньшинством ведущих издателей.
Тем не менее, похоже, что PWA могут сыграть огромную роль в будущем потребления мобильного контента — области, в которой UX-преимущества PWA могут стимулировать более широкое использование технологии как читателями, так и издателями.
Вывод: как маркетологи должны действовать в отношении AMP и PWA?
Доказанный потенциал AMP и PWA для улучшения аспектов производительности контента и UX предполагает, что эти технологии являются важным направлением для изучения онлайн-издателями.
AMP легче тестировать в ограниченном масштабе: вы можете просто преобразовать несколько страниц контента в AMP HTML и наблюдать за результатами (в рамках относительно ограниченной аналитики, которую Google предоставляет для издателей AMP). PWA неявно обязывает издателя постоянно предоставлять своим читателям опыт работы в стиле приложения, и поэтому к нему нельзя относиться легкомысленно.
С другой стороны, PWA, кажется, предлагают относительно неразбавленные преимущества по сравнению с AMP. Возвращающиеся читатели получают более быстрое время загрузки, а также расширенные функции в стиле приложений, которых нет в AMP. Важно отметить, что издатель сохраняет больший контроль и право собственности на контент.
Мы советуем интернет-издателям, рассматривающим AMP и PWA, начать с тестирования AMP на нескольких страницах с контентом и тщательно изучить возможность масштабного развертывания PWA. Независимо от того, используются ли они по отдельности или в комбинации, эти две технологии, вероятно, будут влиять на то, как мобильные пользователи будут потреблять веб-контент в ближайшие годы.
получите бесплатное членство прямо сейчас - кредитная карта не требуется
- Набор инструментов цифрового маркетинга
- Эксклюзивные обучающие видео-сессии в прямом эфире
- Полная библиотека подкаста по цифровому маркетингу
- Инструменты сравнительного анализа цифровых навыков
- Бесплатные обучающие онлайн-курсы
