ADVANCED! Прогрессивные веб-приложения и AMP SEO и технические детали

AMP и Progressive Web Apps сейчас в моде. Это легкие, ТАК быстрые, мобильные и новые технологии. ...
Краткое примечание по AMP, PWA и SEO
Diving Deeper - прогрессивные веб-приложения и AMP: что такое PWA?
Прогрессивные веб-приложения и AMP - зачем интегрировать PWA с AMP?
Как интегрировать прогрессивные веб-приложения и AMP
AMP как PWA
AMP для PWA
AMP в PWA
Завершение интеграции AMP и PWA

AMP и Progressive Web Apps сейчас в моде. Это легкие, ТАК быстрые, мобильные и новые технологии.

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

Прогрессивные веб-приложения и AMP

Скорее всего, вы слышали слова « AMP »И« PWA »в наши дни очень часто встречаются.

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

Но они наиболее эффективны, когда работают вместе.

В этой статье я расскажу обо всем, что вам нужно знать о AMP и PWA, а также о том, как объединить их для расширенного мобильного веб-интерфейса.

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

Краткое примечание по AMP, PWA и SEO

Важно отметить, что AMP и прогрессивные веб-приложения очень новы, и их техническая реализация SEO развивается.

Прямо сейчас, вот что вам нужно знать.

Страницы AMP относятся к другой странице в 99% случаев. Это означает, что Google не полагается на них в рейтинге. Если у вас есть адаптивный дизайн сайта, страница AMP будет канонической для этого URL. Если у вас есть мобильный поддомен, он будет каноническим для мобильного домена.
В настоящее время создается только несколько сайтов AMP. В этом случае они индексируются Google. Так что нет канонического. И конечно, эти страницы могут ранжироваться и в основном работать по тем же принципам, что и обычные HTML-страницы. Им нужны все те же вещи.
Прогрессивные веб-приложения начинают лучше восприниматься Google, но это все еще немного попало. Если вы хотите, чтобы контент индексировался PWA для целей ранжирования SEO, неплохо было бы иметь базу HTML и загружать прогрессивное веб-приложение поверх этого, использовать такой инструмент, как prerender.io и / или pushstate.
Возможно иметь только AMP и сайт на основе PWA, но для целей SEO вы должны убедиться, что AMP имеет те же качества, что и обычный высокопроизводительный сайт SEO.
Наилучший сценарий на данный момент - иметь легкую CMS, которая доставляет элементы HTML, элементы PWA загружаются поверх этого, но не до такой степени, что происходит маскировка, и AMP устанавливается на страницах, которые связаны с новостями или имеют ограниченную функциональность.

Diving Deeper - прогрессивные веб-приложения и AMP: что такое PWA?

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

Согласно Википедии «Прогрессивные веб-приложения - это гибрид обычных веб-страниц (или веб-сайтов) и мобильного приложения. Эта новая модель приложения пытается объединить функции, предлагаемые большинством современных браузеров, с преимуществами мобильного опыта ».

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

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

Зачем использовать PWA? Потому что компании больше не могут полагаться на пользователей для загрузки своих приложений. Фактически, более 50% пользователей смартфонов в Америке загружают ноль приложений в месяц, а 80% времени пользователя тратится в их топ-3 приложениях.

Фактически, более 50% пользователей смартфонов в Америке загружают ноль приложений в месяц, а 80% времени пользователя тратится в их топ-3 приложениях

Прогрессивные веб-приложения и AMP

Для предприятий это означает доллары, потраченные на рекламу и т. Д. С небольшой отдачей.

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

Чтобы считаться PWA, приложение должно быть:

Прогрессивный - работа для каждого пользователя, независимо от выбора браузера, потому что он построен с прогрессивным улучшением в качестве основного принципа.
Отзывчивый - подходит для любого форм-фактора, настольного компьютера, мобильного телефона, планшета или любого другого устройства.
Независимость от подключения - улучшена благодаря работникам служб для работы в автономном режиме или в сетях низкого качества.
Подобный приложению - используйте модель оболочки приложения для обеспечения навигации и взаимодействия в стиле приложения.
Свежий - всегда актуальный благодаря процессу обновления работника сервиса.
Безопасный - подается через HTTPS, чтобы предотвратить отслеживание и гарантировать, что контент не был подделан.
Обнаруживаемый - Идентифицируются как «приложения» благодаря манифестам W3C и области регистрации сервисных работников, позволяющей поисковым системам их находить.
Возможность повторного включения - облегчите повторное взаимодействие с помощью таких функций, как push-уведомления.
Устанавливается - позволяет пользователям «держать» приложения, которые они находят наиболее полезными, на своем домашнем экране без хлопот магазина приложений.
Linkable - легко обмениваться по URL и не требует сложной установки.

Прогрессивные веб-приложения и AMP - зачем интегрировать PWA с AMP?

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

Но здесь есть одна загвоздка: эта скорость не срабатывает до второй загрузки.

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

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

И как мы все знаем, чем медленнее время загрузки сайта, тем выше показатель отказов :

Задержка в 100 миллисекунд может снизить скорость преобразования на целых 7%.
Задержка загрузки страницы в две секунды может увеличить показатель отказов более чем на 100%.
53% мобильных пользователей оставят страницу, загрузка которой занимает более 3 секунд

К сожалению, большинство сайтов не приближаются к этим цифрам: среднее время загрузки страницы составляет 19 секунд, при этом 77% мобильных сайтов загружаются более 10 секунд.

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

И вот где AMP входит в ,

AMP означает ускоренные мобильные страницы, и он разработан для быстрой загрузки веб-страниц. Действительно быстро

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

Как отмечает Google Двое ранее работали в конфликте. Но если бы они были интегрированы, это позволило бы им «обеспечить быструю начальную загрузку и надежную производительность при втором посещении, а также расширенные функции, такие как чтение в автономном режиме и более богатое обращение с интерфейсом».

Вот краткая разбивка каждого:

AMP
- Надежная, мгновенная доставка
- Оптимизированное обнаружение
- Нет JavaScript
- Статическое содержание
PWA
- Первая доставка может быть медленнее
- Не легко встраивается
- Доступ к последним веб-API
- Поддержка динамического контента

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

Оба работают хорошо сами по себе, но они, несомненно, сильнее вместе. Это потому, что они обеспечивают то, что хотят клиенты: быстрое время загрузки и беспроблемный опыт.

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

Как интегрировать прогрессивные веб-приложения и AMP

Теперь, когда мы рассмотрели «почему», давайте перейдем к «как».

Существует три способа объединения PWA и AMP:

AMP как PWA
AMP для PWA
AMP в PWA

AMP как PWA

Для сайтов, которые имеют статическую активность и не имеют много интерактивности, вы можете иметь AMP это также PWA ,

Например, Mynet, ведущий издатель в Турции, использовал страницу AMP в качестве PWA и увидел следующие результаты:

+ 25% более высокий доход за просмотр страницы статьи
4x выше скорость загрузки страницы
+ 43% больше среднего времени на сайте
+ 34% больше просмотров страниц за сеанс
-24% ниже показатель отказов

Но имейте в виду, что для использования AMP в качестве PWA вам придется жить в пределах AMP. Используя его в качестве PWA, вы по-прежнему будете иметь Service Worker, который будет предоставлять пользователям автономный доступ и т. Д., И по-прежнему будет отображать баннер «Добавить на домашний экран».

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

Динамические функции, которые требуют Javascript
Компоненты, которые настроены / относятся только к вашему сайту

Чтобы добавить PWA на свой сайт AMP, вам нужно добавить Манифест веб-приложения , Это гарантирует, что пользователи могут установить ваш сайт на главном экране.

Для этого вы сначала создадите манифест:

Затем перейдите по ссылке с заголовка вашей страницы AMP:

Далее вы установите Service Worker. Чтобы сделать это, вам нужно включить скрипт сервисного работника на своей странице:

Затем добавьте следующий код в тело вашей страницы:

Оттуда вы можете изменить ответ через выборку Service Workers, чтобы получить любой ответ, который вы хотите.

AMP для PWA

Иногда возможностей AMP просто недостаточно. Если вы ищете другой опыт работы с PWA, вы все равно можете воспользоваться AMP.

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

Прогрессивные веб-приложения и AMP

Процесс включает в себя три этапа:

Пользователь обнаруживает контент
Сервисный работник устанавливает в фоновом режиме
Пользователь мгновенно обновляется до PWA

Использование AMP для PWA позволяет:

Все «листовые» страницы контента (те, которые имеют конкретный контент, а не обзорные страницы) публикуются в виде AMP для почти мгновенной загрузки.
Эти AMP используют специальный элемент AMP <Ампы-установка-serviceworker> прогреть кеш и оболочку PWA, пока пользователь наслаждается вашим контентом.
Когда пользователь нажимает другую ссылку на вашем веб-сайте (например, призыв к действию внизу для более удобной работы приложения), работник службы перехватывает запрос, перехватывает страницу и вместо этого загружает оболочку PWA.

Чтобы настроить его, выполните те же действия, что и выше, чтобы установить работника службы на все ваши AMP.

Затем на этапе установки сервисных работников вы кешируете любые ресурсы, которые понадобятся PWA:

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

Если вы соединяете свои канонические страницы со страницами AMP

Это наиболее распространенный способ использования AMP, и это означает, что все ссылки на вашей странице ссылаются на каноническую версию вашего сайта. Если ваш канонический сайт - это ваш PWA, ваша работа выполнена.

Если ваш канонический сайт AMP.

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

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

Это будет выглядеть так:

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

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

В качестве примера давайте рассмотрим рецепт сайта Ракутен. Используя этот метод, компания увидела:

+ 50% времени, проведенного на сайте на пользователя
CTR в 3,6 раза выше на странице AMP
Благодаря функции добавления на главный экран они увидели:
1.7x больше уникальных посещений
3.1x больше просмотров страниц

AMP в PWA

Эта последняя версия использует ваши страницы AMP в качестве источника данных для питания вашего PWA.

Традиционно Progressive Web App - это «одностраничное приложение, которое подключается к JSON API через Ajax».

Но вместо того, чтобы использовать JSON API, пользователи могут упростить разработку, используя свои существующие страницы AMP.

Зачем? Так как AMP-страницы - это не просто веб-страницы ; это «ультрапортативные, встраиваемые блоки контента, которые могут работать самостоятельно». Благодаря этому AMP HTML может использовать как AMP, так и PWA.

Для этого Google рекомендует включить Shadow DOM в свой PWA.

На практике процесс выглядит так:
PWA угоняет навигационные клики
Получить запрашиваемую страницу AMP
Поместите контент в новый теневой корень
Вызовите attachShadowDoc

Лучшая часть? Если у вас уже есть AMP-страницы, вы можете вставить Shadow Dom через час.

Первым шагом является включение Shadow Dom в заголовок вашей страницы. Это должно выглядеть так:

Затем, после загрузки AMP, вы получите документ AMP с помощью запроса XMLHTTP и вернете HTML-код ответа.

Для этого вы будете рендерить его с помощью Shadow AMP, а это значит, что вы будете:

Создать новый теневой корень
Позвольте AMP визуализировать документ
Верните обещание, чтобы уведомить, когда будете готовы

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

Для получения дополнительной информации о том, как использовать и настроить Shadow AMP, проверьте эти руководства ,

Или посмотрите его в действии с демонстрацией команды AMP, поддельным журналом путешествий под названием Scenic. Вы можете просмотреть его на GitHub ,

Завершение интеграции AMP и PWA

Мы рассмотрели здесь много вопросов, поэтому давайте посмотрим на Основные моменты ,

AMP / PWA всегда быстр - несмотря ни на что
Он имеет большой встроенный дистрибутив
Прогрессивно улучшается
Один бэкэнд, чтобы управлять ими всеми
Меньшая сложность клиента, меньше целей развертывания

Помните, что это все еще очень новое, и мы только начинаем разбираться с тем, что может означать интеграция AMP / PWA для бизнеса.

Но пока все признаки указывают на успех.

Итак, что такое Advanced Barnacle SEO и как вы можете его использовать?
Итак, что такое Advanced Barnacle SEO и как вы можете его использовать? Обычно я не решаюсь поделиться этим с SEO, потому что я видел, как некоторые SEO используют это для зла. Хорошая новость заключается в том, что с продвинутыми алгоритмами Google я чувствую себя все более и более комфортно каждый день, когда люди, которые пытаются манипулировать этим, будут пойманы. При этом давайте перейдем прямо. Усовершенствованная SEO Barnacle, на мой взгляд, намного больше влияет на традиционные

Само «О» в «SEO» - это оптимизация, и уже поговорим об этом @ 365tipu находится в Что такое SEO?
Итак, что такое Advanced Barnacle SEO и как вы можете его использовать? Обычно я не решаюсь поделиться этим с SEO, потому что я видел, как некоторые SEO используют это для зла. Хорошая новость заключается в том, что с продвинутыми алгоритмами Google я чувствую себя все более и более комфортно каждый день, когда люди, которые пытаются манипулировать этим, будут пойманы. При этом давайте перейдем прямо. Усовершенствованная SEO Barnacle, на мой взгляд, намного больше влияет на традиционные

Что это за отношения сейчас, является предметом споров в социальных сетях и SEO сообществах, но на самом деле, кого это волнует, почему?
Что это за отношения сейчас, является предметом споров в социальных сетях и SEO сообществах, но на самом деле, кого это волнует, почему? Оно работает. Это все, что вам нужно знать. Получите учетные записи в социальных сетях, подходящие для вашего бизнеса, полностью заполните свои профили, добавьте ссылки в нижний колонтитул вашего сайта и пометьте их схемой. Будьте активны и взаимодействуйте со своими клиентами. Я много писал о том, как сделать социальное право (и как полностью

Так значит ли это, что комментировать бессмысленно для SEO?
Так значит ли это, что комментировать бессмысленно для SEO? Ну, если бы это было так, мы могли бы сократить эту статью. Правда заключается в том, что есть еще преимущества продолжать комментировать блоги. Вот некоторые из причин, по которым вы должны продолжать комментировать в рамках своей маркетинговой стратегии: Google - не единственная поисковая система: об этом может быть легко забыть, но есть и другие поисковые системы, которые могут отправлять

Это означает, что если бы пользователь печатал свой запрос так, как он говорил бы: «Сколько лет Бон Джови?
Это означает, что если бы пользователь печатал свой запрос так, как он говорил бы: «Сколько лет Бон Джови?», Google дал бы те же результаты. Что это значит для контент-маркетологов? Это означает, что им следует сосредоточиться на том, чтобы стать наиболее релевантным информационным ресурсом по данной теме, а не на ключевых словах. Ранжирование по ключевому слову на основе точного соответствия больше не будет работать, потому что теперь Google может понять цель поискового запроса

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

Так что же такое SEO?
Так что же такое SEO? В соответствии с Земля Поисковой машины SEO - это процесс «получения трафика от бесплатных, обычных, редакционных или естественных результатов поиска в поисковых системах». Иными словами, SEO предполагает разработку и управление вашим веб-сайтом или блогом таким образом, чтобы он занимал ведущее место на страницах результатов поисковых систем (SERP) таких поисковых систем, как Good, Bing

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

Что такое SEO и почему это важно?
Что такое SEO и почему это важно? Поисковая оптимизация (SEO) - это набор методов и стратегий, которые помогают улучшить веб-сайты и рейтинги контента в результатах поисковых систем, что ведет к повышению видимости и увеличению органического трафика. Это просто метод оптимизации кода и форматирования вашего сайта, чтобы поисковые системы могли его легче найти. Просто подумай об этом. Когда вы ищете что-то в Google, вам нужна только самая актуальная информация для ваших

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

Но что это такое и почему это важно для вас?
Но что это такое и почему это важно для вас? Поисковая оптимизация, или SEO, оптимизирует контент вашего сайта для поисковых систем. Что это значит? Это означает, что Google и другие поисковые системы могут легко проиндексировать ваш контент, классифицировать ваши страницы на основе их контента, а затем сделать эти страницы доступными для людей, ищущих ваш конкретный контент. SEO важно, потому что вы хотите, чтобы люди легко находили ваш контент, продукт или услугу. Для маркетологов

Прогрессивные веб-приложения и AMP - зачем интегрировать PWA с AMP?
Diving Deeper - прогрессивные веб-приложения и AMP: что такое PWA?
Зачем использовать PWA?
Прогрессивные веб-приложения и AMP - зачем интегрировать PWA с AMP?
Зачем?
И действительно ли это касается IP-адресов C-класса?
Сделайте свою домашнюю работу о бизнесе, прежде чем идти на встречу или подготовиться отправить предложение У них есть сайт?
Если да, отзывчив?
Оптимизированы ли их заголовки?
Насколько велика компания?

Рубрики

Полезные материалы

ADVANCED! Прогрессивные веб-приложения и AMP SEO и технические детали

AMP и Progressive Web Apps сейчас в моде. Это легкие, ТАК быстрые, мобильные и новые технологии.

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

Краткое примечание по AMP, PWA и SEO

Diving Deeper - прогрессивные веб-приложения и AMP: что такое PWA?

Прогрессивные веб-приложения и AMP - зачем интегрировать PWA с AMP?

Как интегрировать прогрессивные веб-приложения и AMP

AMP как PWA

AMP для PWA

AMP в PWA

Завершение интеграции AMP и PWA

Похожие

Комментарии