Веб студия » Блог » Что такое AMP страницы? Нужны ли AMP вашему сайту?
Дата публицакии: 16 марта 2020

Что такое AMP страницы? Нужны ли AMP вашему сайту?









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

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

Плюсы технологии амр:

Моментальная загрузкаСайты с технологией ускорения загружаются в разы быстрее, чем обычный сайт
Конверсия и показатель отказовСкорость загрузки веб-страницы улучшает показатель конверсии и снижает количество отказов
Open sourceНе обязательно создавать страницы АМР вручную. Специальные плагины делают это за вас

Что такое AMP и для чего используется?

Создать страницы сайта, которые будут с легкостью открывать мобильные устройства – звучит легко. Но это только звучит так.

На самом деле AMP – это особый стандарт разработки с открытым исходным кодом. Основная задача технологии заключается в ускорении загрузки сайта. Сама аббревиатура расшифровывается как Accelerated Mobile Pages (ускоренные мобильные страницы). Над этим проектом работали десятки IT-компаний с мировым именем.

Что такое AMP страницы? Нужны ли AMP вашему сайту? — компания «Brainlab». Фото 1

Ускорение достигается в основном тем, что AMP версия страницы избавляется от всего лишнего. То есть получается урезанная версия стандартной HTML-страницы. Для понимания: существуют теги, которые необходимо использовать при разработке сайтов, а есть те, которые вы не можете использовать с АМР.

Пример: тег «изображения» IMG преобразуется в AMP-IMG. По такой несложной схеме меняются и другие теги.

Многих, неопытных людей в этом вопросе, пугает тот факт, что нужно создавать две отдельные версии сайта. Но спешим вас обрадовать – делать этого не надо.

То есть, создавайте сайт только на основе AMP HTML и загружайте на веб-сервер только эту версию. Хотя не будем скрывать, многие эксперты предлагают создавать именно две версии сайта для более эффективной совместимости и улучшения работы инструментов SEO.

Что такое AMP страницы? Нужны ли AMP вашему сайту? — компания «Brainlab». Фото 2

Как создать AMP-версию

Конечно, любой сайт можно сделать целиком на АМР, но реальность такова – мало кто захочет разрабатывать целевые страницы и сервисы в таких строгих ограниченных рамках. Сложно представить, что развивающиеся веб-технологии резко начнут регрессировать и «переводиться» в АМР.  Нужно понимать, что в технологии amp есть четкая сфера применения.

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

Еще один момент, переводить весь сайт целиком в АМР – нерационально, ведь это может привести к снижению конверсии. То есть, нужно внедрять эту технологию локально. Например, хорошим выбором будет амр для блога или новостей.

Для начала создаем отдельный шаблон для сайта, который будет использовать теги из спецификации АМР. Дальше решаем для себя: делать вручную АМР-версию каждой новой страницы, или настраиваем автоматическую генерацию. Второй вариант явно упростить вашу жизнь: качаем плагин (найдя его по положительным отзывам), устанавливаем и активируем. После, вносим правку в файл «.htaccess» и указываем атрибут rel=«canonical».

Для того, чтобы поисковые системы, которые поддерживают АМР, могли переключаться на мобильную версию сайта, в исходном коде нужно прописать специальный тег «link rel» тег с указанием на АМР-страницу. И наоборот: все АМР-страницы должны иметь тег канонической ссылки на исходную версию страницы в обычном HTML.

AMP HTML-документ должен включать в себя следующие компоненты:

  • Начало – <!doctype html>.
  • Наличие тега верхнего уровня <html> или <html amp>.
  • Содержать теги <head> и <body>.
  • Внутри <head> должно быть <meta charset=«utf-8»>.
  • В качестве атрибута href тега <link rel=«canonical» href=«$SOME_URL» /> внутри контейнера <head> содержать ссылку на сайт;
  • Внутри <head> содержать теги <meta name=»viewport» content=«width=device-width,minimum-scale=1»> и <style amp-boilerplate>.
  • Перед закрывающим тегом </head> содержать тег<script async src=«https://cdn.ampproject.org/v0.js»></scrip> для подключения АМР JS.
Что такое AMP страницы? Нужны ли AMP вашему сайту? — компания «Brainlab». Фото 3

Использование AMP-JS и AMP CDN

Безусловно JS представляет собой мощный инструмент, который может изменить практически любой аспект страницы. Но его единственный минус – он замедляет рендеринг страницы сайта, блокируя блоки DOM.

Но коль мы с вами говорим о технологии ускорения страницы, то AMP-JS обеспечивает более быструю загрузку страниц, предполагая использование AMP-тегов. Выше мы писали, что меняются теги картинки, видео,.аудио. Просто добавляется «аmр» (amp-img).Конечно, не все являются профессионалами разработчиками и мало кто имеет необходимые навыков. Тем не менее каждый владелец интернет-магазина или блога, должен создать сайт с внедрением АМР – технологий.

Для сайтов на WordPress, Opencart

Если вы имеет популярный движок WordPress, то вам повезло: ускорить страницу можно за считанные минуты. Достаточно установить плагин AMP или Accelerated Mobile Pages. Все страницы, созданные с помощью данных плагинов проходят проверку в валидаторе амр.

Что такое AMP страницы? Нужны ли AMP вашему сайту? — компания «Brainlab». Фото 4

Данные плагины необходимо настраивать для того чтобы расширить функциональность и улучшить внешний вид ускоренных страниц. 

Чтобы ускорить страницу под управлением OpenCart достаточно воспользоваться модулем Accelerated Mobile Pages. Но готовьтесь к тому, что он платный. Есть еще один вариант, бесплатный, модуль AMP for Product Pages, но, как показывает практика, заставить его работать – сложно.

Как проверить AMP-страницы

Ускоренные AMP-документы можно протестить несколькими способами, однако все они приводят к одному и тому же результату. Выбирайте любой.

Способ 1

Самый просто вариант проверки – сервис от Google. Здесь все просто: заходим на сайт https://search.google.com/test/amp. Там мы видим форму для ввода интернет адреса. Вставляем туда URL любой АМР-страницы вашего сайта и нажимаем кнопку «проверить». Процедура анализа займет примерно 30 секунд.

Логично, что если страница соответствует всем нормам и стандартам, то на экран будет выведено соответствующее сообщение зеленым цветом. 

Что такое AMP страницы? Нужны ли AMP вашему сайту? — компания «Brainlab». Фото 5

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

Что такое AMP страницы? Нужны ли AMP вашему сайту? — компания «Brainlab». Фото 6

Способ 2

Есть еще один способ проверки:

  • Откройте AMP-страницу в браузере
  • Добавьте к URL элемент #development=1 (например так: http://localhost:8000/released.amp.html#development=1)
  • Откройте консоль разработчика Chrome и проверьте страницу на наличие ошибок

Ошибки будут выглядеть примерно так:

Что такое AMP страницы? Нужны ли AMP вашему сайту? — компания «Brainlab». Фото 7

Какие преимущества AMP дают для SEO

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

Преимущества АМР для SEО:

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

Итоги

Технология АМР обладает высокой скоростью загрузки, что открывает особые горизонты для проектов. Именно скорость загрузки формирует поведенческий фактор на веб-портале. Согласитесь, если сайт грузиться больше 3 секунд, мы уходим с него. Да, скорость стоит на первом месте.

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

В остальных случаях AMP будет не полностью оправдано. Будет достаточно нормального адаптивного дизайна или мобильной версии.

Вопросы и ответы

Что такое AMP страницы?

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

Как работает технология AMP?

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

Как внедрить AMP страницы на свой сайт?

Чтобы внедрить AMP страницы на свой сайт, необходимо создать отдельные версии страниц, используя AMP HTML и AMP CSS. Затем добавить соответствующие метки и ссылки на эти страницы в свой код.

Как определить, нужны ли AMP страницы для моего сайта?

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

3/5 - (2 голоса)
Технический директор, студии BRAINLAB

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Хотите сделать что-то великое?
Позвольте помочь вам.
Готовы? Свяжитесь сегодня.

Обсудить ваш проект

manager@brainlab.com.ua

Другие вопросы (партнерство, вакансии...)

info@brainlab.com.ua

Номер телефона

+380633746749

Мы в соц.сетях

Калькулятор стоимости сайта Brainlab

Интересует стоимость разработки сайта? Наш калькулятор дает возможность изучить стоимость каждого этапа и подобрать подходящий под бюджет вариант.
1. Тип сайта
Сайт визитка

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

Подробнее о сайте
Landing Page

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

Подробнее о сайте
Корпоративный
сайт

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

Подробнее о сайте
Сайт-каталог

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

Подробнее о сайте
Интернет магазин

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

Подробнее о сайте
2. Дизайн
3. Вёрстка
4. Движок CMS
Тип сайта: Не выбрано
0 $
Дизайн: Не выбрано
0 $
Вёрстка: Не выбрано
0 $
Движок CMS: Не выбрано
0 $
Примерная стоимость: 0 $
Примерные сроки: 0 дней

Хотите сделать что-то великое?
Позвольте нам помочь вам.

Готовы? Свяжитесь сегодня.
Заполните поле
Заполните поле
Заполните поле
Спасибо за заявку!

Наши менеджеры свяжутся с вами в ближайшее время.

Ошибка при отправке!