Якщо мобільна версія вашого сайту повільна як равлик, ви не перетворите користувачів на своїх клієнтів. Ми розповімо, як завоювати довіру користувачів і Google, використовуючи прискорені мобільні сторінки.

Мобільний трафік виріс на 500% за 10 років — такий висновок в дослідженні зробила платформа hostingtribunal.com. Це означає, що ми живемо в епоху, коли смартфони перемогли десктоп. Оптимізація мобільних браузерів важлива як для користувачів, так і для SEO. Google знаходить сторінки з повільною завантаженням або високим показником відмов і знижує рейтинг в пошуковій видачі.

Про що піде мова

Що таке Google AMP?

Accelerated Mobile Pages (прискорені мобільні сторінки) — це платформа з відкритим вихідним кодом. Google випустив APM в 2016 році з метою зробити революцію в споживанні контенту. Передусім для сайтів новин і онлайн-журналів.

Google AMP
Зверніть увагу на позначку блискавки. Вони означають, що сторінка швидко відкриється на мобільному телефоні

Зайшовши на платформу, кожен може безкоштовно полегшити мобільну версію свого сайту до базових елементів і прискорити її завантаження до швидкості світла.

Головна мета Google AMP — миттєво завантажувати цільові сторінки зі смартфонів, прибавлюючи користувачів швидким і зручним доступом до мобільного контенту. AMP-сторінки не такі привабливі: без графіки, відео, гифок, віджетів, форм і блоків рекомендованого контенту. По суті це текст і зображення оптимальної якості. Зате такі сторінки швидкі, їх завантаження економить мобільний трафік. Погодьтеся, це зручно в роумінгу або в поході в гори, або у відпустці, коли наявність мережі 3G — то вже щастя.

Сторінки Google AMP завантажуються в чотири рази швидше —
за 0,7 секунди

Regular vs AMP

Фактор надшвидкості завантаження контенту буде штофхати людей до пошуку сторінок з блискавкою (в числі яких може бути і ваша).

Порівняйте різні варіанти відображення однієї й тієї ж сторінки:

AMP Повна десктоп-версія
Повна десктоп-версія
Mobile AMP

Зверніть увагу, що в AMP-версії є кнопки для скачування програми і переходу на головний сайт. В основній версії — автор з активним посиланням і дзвоник сповіщень.

Як працює Google AMP?

Google AMP використовує полегшений HTML-код, JavaScript і CSS. А також кешування, пріоритетне завантаження контенту над згином, одночасне завантаження елементів і скриптів, попереднє завантаження окремих цільових сторінок.
Порівняння звичайної сторінки та AMP

Кому потрібен Google AMP?

Ми вже говорили, що AMP може поліпшити SEO, але не є рятувальним кругом для всіх сайтів без винятку. Зорієнтуватися — чи потрібен Google AMP для просування вашого бізнесу — допоможуть наші рекомендації:

  • AMP точно буде корисний контентним сайтам з активним блогом, де багато та часто публікуються новини та лонгріди.
  • Google AMP не потрібен, якщо на сайті вже є CDN (мережа доставки контенту) з оптимізацією продуктивності. Наприклад, функція відкладеного завантаження: спочатку завантажується текст, а потім зображення.
  • Прискорені сторінки читати легше та простіше, але деякі плагіни JavaScript можуть зіпсувати рейтинг. Після впровадження AMP-сторінки потрібно протестувати — чи працюють всі форми, бо швидкість-швидкістю, а ліди теж треба збирати.
  • AMP не є фактором ранжування Google. AMP не підніме ваш сайт у топ, а стане лише частиною складної стратегії завоювання любові Google і користувачів, на смартфонах яких ваш сайт завантажиться швидше, ніж у конкурентів.

Переваги Google AMP

Окрім прискореного завантаження та зручного контенту без відволікання, Google AMP пропонує ще кілька додаткових переваг.

Збільшення коефіцієнта залученості

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

Більше 50% користувачів тікають з мобільної версії сайту, якщо вона завантажується довше трьох секунд.

number for list two

Зростання рейтингу і трафіку

У AMP — пріоритет в пошукових алгоритмах Google, бо час завантаження сторінки — фактор ранжування. З двох одночасно відкритих сайтів виграє той, який швидше завантажиться.

Якщо мобільна версія вашого сайту повільна як равлик, ви не перетворите користувачів в клієнтів

number for list three

Високий рейтинг кліків

AMP-сторінки відображаються в каруселі мобільної пошукової видачі Google. А значить, на них клацають більше разів, ніж на інші сайти.

number for list four

Низький показник відмов

Чим швидше завантажується контент AMP-сторінок, тим більше часу користувачі проведуть на сайті. Більше часу на сайті — більше конверсий.

Рентабельність реклами

Висока швидкість завантаження привертає більше людей, які побачать рекламу.

Недоліки Google AMP

Обмеження скриптів і стилів. Функціональність в AMP важливіша за естетику, не всі UX-елементи наявні в бібліотеці JavaScript. Це мінус для сайтів з акцентом на візуальний контент.

Доведеться завантажити шрифти та схвалені AMP-розширення для використання відеоконтенту.

На сторінках плагіна AMP не можна використовувати форми.

На AMP-сторінці можна розмістити тільки одне рекламне оголошення. Що зв’язує руки контентним сайтам, які заробляють саме на рекламі.

У форматі AMP-сторінки ваш бренд може загубитися серед контенту, бо домен Google займає адресний рядок. Лого та назва хоч і зафіксовані у верхній частині сторінки, але візуально мало помітні.

AMP не підтримує багато віджети. Якщо ви робите ставки на соціалки, майте на увазі: в полегшеній версії немає віджета Facebook та інших соціалок.

Важко відслідковувати аналітику. AMP підтримує тільки Google Analytics, до того ж за допомогою плагінів або спеціального коду для моніторингу.

Доведеться постійно тестувати прискорені сторінки на коректність відображення, тому що AMP-дизайн — це окрема сторінка, яка не створюється автоматично: її потрібно переробити з основної, а краще — зверстати заново.

У некоректно впровадженого AMP більше мінусів, ніж у правильно налаштованого — плюсів.

AMP: за и против

Як перевіряти AMP

Сервіс від Google:

Сервіс перевірки AMP від Google

Сервіс від спільноти:

Сервіс перевірки AMP від спільноти

Важно: при проверке смотрите в инструментах не только на главную, но и на страницы категории, товара, услуги, страницу со статьей по отдельности.

Отже, ви надихнулися перевагами прискорених мобільних сторінок, врахували можливі обмеження та вирішили впровадити Google AMP. Для цього вам знадобляться спеціальні плагіни.

AMP для WordPress

У WordPress існує два варіанта установки плагінів.

Варіант №1. Йдемо до сайту WordPress та обираємо офіційний плагін — перший зі списку з поміткою півмільйона завантажень.

AMP для WordPress

Відкриваємо його та завантажуємо:

Скачати AMP для WP

Переходимо до установки плагінів і завантажуємо:

Завантажити плагін для WP

Встановлюємо:

Встановити плагін для WP

І проводимо активацію:

Активувати плагін для WP

Варіант №2. Шукаємо AMP прямо в админці WP, встановлюємо як на скріні:

AMP в админці WP

Перевірка AMP для WordPress

Перовіряємо окремі сторінки за допомогою сайтів:
https://search.google.com/test/amp
та
https://validator.ampproject.org/

Якщо на сайті кожен вид послуги — це окремо зверстана сторінка, то кожну сторінку треба перевірити окремо.

Важливо!
Іноді сервіс показує, що все круто:

valid amp page

Але не забувайте тиснути на «дивитись докладніше»:

valid amp page check

Виявилося, що офіційний плагін від спільноти в нашому випадку спрацьовує некоректно через те, що тема була прописана вручну:

Перестала працювати форма, потрібна додаткове допрацювання:

Перевірка AMP для WordPress

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

Для сайтів з кастомним верстанням дизайну потрібен інший плагін, який можна налаштовувати, підключати форми або вставляти свій код.

Налаштування AMP для WordPress

А вот плагін AMP for WP можна налаштовувати додатково. Є два варіанти як запровадити AMP.


За допомогою кастомного коду

Можна попросити переписати код, який буде валідним для AMP. Але доведеться доплатити за верстання кожної сторінки:

Налаштування AMP для WordPress

За допомогою вбудованого AMP Page Builder

Можна побудувати AMP-версію з нуля. Наприклад, заново накидати блоки на сторінку:

AMP Page Builder

Загальні налаштування AMP for WP

Можна заповнити рядки самостійно або подружити форми з платним плагіном.

AMP for WP

На WordPress краще взагалі не встановлювати AMP. Якщо його залити неправильно, можна зламати сайт і завалити показники конверсії. Тому тестуйте окремо всі сторінки.

Для додаткової оптимізації зовнішнього вигляду, функціоналу й аналітики використовуйте плагін AMP для WP. Для цього перейдіть в меню налаштувань AMP-сторінок в адмінпанелі.

AMP для Magento

Створити AMP-версію головної сторінки сайту, сторінок категорій і товарів допоможе платний плагін AMP.

Зазвичай сайти на Magento обслуговують розробники, які самостійно можуть встановити AMP в найкращому форматі.

AMP для Magento

AMP для OpenCart

Для сайта на OpenCart використовують плагіни:

Можна купити плагін і перевірити його працездатність. Якщо протягом тестового періоду він буде працювати некоректно, можна повернути гроші.

AMP для Magento

AMP для PrestaShop

Створити прискорені сторінки для сайту на PrestaShop можна за допомогою платного модуля AMP для PS. Прискорити можна головну сторінку сайту, а також сторінки категорій і карток окремих товарів.

Завантажити плагіни можна за посиланнями:

AMP для PrestaShop

Головні тезіси

Навіщо потрібні AMP?

Миттєво завантажувати цільові сторінки зі смартфонів, приваблюючи користувачів швидким і зручним доступом до мобільного контенту.

Як працює AMP?

АMP відображає сторінки за допомогою спрощених HTML, JavaScript і CSS.

Кому потрібен AMP?

Точно контентим сайтам. Й усім, хто хоче заробляти! Блискавичний дохід (аналогічний швидкості завантаження) AMP не гарантує, але допомогти в просуванні — може.

Які переваги AMP?

Високий рейтинг. Увага користувачів. Низький відсоток відмов. Привабливі умови для реклами.

Які недоліки AMP?

Багато функціональних обмежень, головна з який така: заради швидкості доведеться принести в жертву зовнішній вигляд.

Як зробити AMP?

AMP сторінки робляться за допомогою спеціальних плагінів (платних або безкоштовних), в залежності від платформи.

Як перевірити чи працюють AMP?

Сервісами тестування від Google і AMP Project.

Теги цієї статті:
Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *