Що таке AMP сторінки? Чи потрібні AMP вашому сайту?
З кожним днем, кількість людей, які відвідують сайти з мобільного зростає на очах. І тут нема чому дивуватися. У нас для цього є все: хороше інтернет покриття, улюблений смартфон. Загальний трафік зі смартфонів вже в рази перевищив Desktop-трафік (з ноутбуків і комп’ютерів).
Начебто все просто і логічно, але не всі країни в світі можуть похвалитися хорошим, високошвидкісним Інтернетом. 3G і GPRS занадто повільно вантажать інформаційні портали. Виходячи з цього компанія Google запустила проекту AMP, який дозволяє любителям смартфонів безболісно відвідувати сторінки в мережі.
Плюси технології АМР:
| Миттєве завантаження | Сайти з технологією прискорення завантажуються в рази швидше, ніж звичайний сайт |
| Конверсія і показник відмов | Швидкість завантаження веб-сторінки покращує показник конверсії і знижує кількість відмов |
| Open source | Не обов’язково створювати сторінки АМР вручну. Спеціальні плагіни роблять це за вас |
Що таке AMP і для чого використовується?
Створити сторінки сайту, які будуть з легкістю відкривати мобільні пристрої – звучить легко. Але це тільки звучить так.
Насправді AMP – це особливий стандарт розробки з відкритим вихідним кодом. Основне завдання технології полягає в прискоренні завантаження сайту. Сама абревіатура розшифровується як Accelerated Mobile Pages (прискорені мобільні сторінки). Над цим проектом працювали десятки IT-компаній зі світовим ім’ям.
Прискорення досягається в основному тим, що AMP версія сторінки позбувається всього зайвого. Тобто виходить урізана версія стандартної HTML-сторінки. Для розуміння: існують теги, які необхідно використовувати при розробці сайтів, а є ті, які ви не можете використовувати з АМР.
Приклад: тег «зображення» IMG перетворюється в AMP-IMG. За такої нескладної схемою змінюються і інші теги.
Багатьох, недосвідчених людей в цьому питанні, лякає той факт, що потрібно створювати дві окремі версії сайту. Але поспішаємо вас порадувати – робити цього не треба.
Тобто, створюйте сайт тільки на основі AMP HTML і завантажуйте на веб-сервер тільки цю версію. Хоча не будемо приховувати, багато експертів пропонують створювати саме дві версії сайту для більш ефективної сумісності та поліпшення роботи інструментів SEO.
Як створити AMP-версію
Звичайно, будь-який сайт можна зробити цілком на АМР, але реальність така – мало хто захоче розробляти цільові сторінки і сервіси в таких суворих обмежених рамках. Складно уявити, що розвиваються веб-технології різко почнуть регресувати і «переводитися» в АМР. Потрібно розуміти, що в технології amp є чітка сфера застосування.
Хто реально може отримати користь від використання прискорених мобільних сторінок – проект з великою кількістю публікацій, новинні портали та інші контент проекти.
Ще один момент, переводити весь сайт цілком в АМР – нераціонально, адже це може призвести до зниження конверсії. Тобто, потрібно впроваджувати цю технологію локально. Наприклад, хорошим вибором буде АМР для блогу чи новин.
Для початку створюємо окремий шаблон для сайту, який буде використовувати теги з специфікації АМР. Далі вирішуємо для себе: робити вручну АМР-версію кожної нової сторінки, або налаштовуємо автоматичну генерацію. Другий варіант явно спростити ваше життя: качаємо плагін (знайшовши його за позитивними відгуками), встановлюємо і активуємо. Після, вносимо правку в файл «.htaccess» і вказуємо атрибут rel = «canonical».
Для того, щоб пошукові системи, які підтримують АМР, могли перемикатися на мобільну версію сайту, в вихідному коді потрібно прописати спеціальний тег «link rel» тег із зазначенням на АМР-сторінку. І навпаки: все АМР-сторінки повинні мати тег канонічної посилання на вихідну версію сторінки в звичайному HTML.
AMP 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-JS і AMP CDN
Безумовно JS є потужним інструментом, який може змінити практично будь-який аспект сторінки. Але його єдиний мінус – він уповільнює рендеринг сторінки сайту, блокуючи блоки DOM.
Але якщо ми з вами говоримо про технології прискорення сторінки, то AMP-JS забезпечує більш швидке завантаження сторінок, припускаючи використання AMP-тегів. Вище ми писали, що змінюються теги картинки, відео, .аудіо. Просто додається «Аmр» (amp-img) .Звичайно, не всі є професіоналами розробниками і мало хто має необхідні навичок. Проте кожен власник інтернет-магазину або блогу, повинен створити сайт з впровадженням АМР – технологій.
Для сайтів на WordPress, Opencart
Якщо ви має популярний движок WordPress, то вам пощастило: прискорити сторінку можна за лічені хвилини. Досить встановити плагін AMP або Accelerated Mobile Pages. Всі сторінки, створені за допомогою даних плагінів проходять перевірку в валідаторі АМР.
Дані плагіни необхідно налаштовувати для того щоб розширити функціональність і поліпшити зовнішній вигляд прискорених сторінок.
Щоб прискорити сторінку під керуванням OpenCart досить скористатися модулем Accelerated Mobile Pages. Але готуйтеся до того, що він платний. Є ще один варіант, безкоштовний, модуль AMP for Product Pages, але, як показує практика, змусити його працювати – складно.
Як перевірити AMP-сторінки
Прискорені AMP-документи можна протести декількома способами, проте всі вони приводять до одного і того ж результату. Вибирайте будь-який.
Спосіб 1
Самий просто варіант перевірки – сервіс від Google. Тут все просто: заходимо на сайт https://search.google.com/test/amp. Там ми бачимо форму для введення інтернет адреси. Вставляємо туди URL будь АМР-сторінки вашого сайту і натискаємо кнопку «перевірити». Процедура аналізу займе приблизно 30 секунд.
Логічно, що якщо сторінка відповідає всім нормам і стандартам, то на екран буде виведено відповідне повідомлення зеленим кольором.
Якщо перевірка показала безліч помилок, про це вам сповістять червоним кольором. Плюс такої перевірки в тому, що власник сайту може відразу дізнатися про проблеми з кодом: в блоці, де вказують результат перевірки, будуть вказані і проблемні місця.
Спосіб 2
Є ще один спосіб перевірки:
- Відкрийте AMP-сторінку в браузері
- Додайте до URL елемент # development = 1 (наприклад так: http://localhost: 8000/released.amp.html#development=1)
- Відкрийте консоль розробника Chrome і перевірте сторінку на наявність помилок
Помилки будуть виглядати приблизно так:
Які переваги AMP дають для SEO
Очевидно, що впровадження технології прискорення сторінки потрібно не для того, щоб просто зайняти себе чимось. З урахуванням того, що кожна друга людина шукає інформацію через смартфон, це просто необхідність. Крім того, для SEO це теж важливий момент.
Переваги АМР для SEО:
- Така сторінка має високу швидкість завантаження, що в свою чергу покращує користувальницький фактор: підвищується кількість сторінок, збільшується час проведення на сайті, як наслідок зменшується кількість відмов.
- Пошукові системи дають AMP-сторінок перевага в ранжируванні в порівнянні з традиційними сторінками.
Підсумки
Технологія АМР має високу швидкість завантаження, що відкриває особливі перспективи для проектів. Саме швидкість завантаження формує поведінковий фактор на веб-порталі. Погодьтеся, якщо сайт грузиться більше 3 секунд, ми йдемо з нього. Так, швидкість стоїть на першому місці.
Але варто розуміти, що не кожному сайту потрібна дана технологія. В основному АМР-версії використовують контент проекти – новинні портали, блоги і т.д.
В інших випадках AMP буде не повністю виправдано. Буде досить нормального адаптивного дизайну або мобільної версії.
Питання та відповіді
Що таке сторінки AMP?
AMP – це відкрита технологія, розроблена для створення швидких та легких сторінок, які завантажуються миттєво на мобільних пристроях.
Як працює технологія AMP?
Технологія AMP базується на спрощеній версії HTML та обмеженому наборі JavaScript. Сторінки AMP кешуються на серверах Google та інших платформах доставки контенту, що дозволяє миттєво завантажувати їх.
Як запровадити AMP сторінки на свій сайт?
Щоб впровадити AMP сторінки на свій сайт, необхідно створити окремі версії сторінок, використовуючи AMP HTML та AMP CSS. Потім додати відповідні мітки та посилання на ці сторінки до свого коду.
Як визначити, чи потрібні AMP сторінки для мого сайту?
Необхідність AMP сторінок залежить від типу вашого сайту та цілей. Якщо ваш сайт має багато мобільного трафіку, швидкість завантаження важлива і ви хочете покращити користувальницький досвід, то AMP сторінки можуть бути корисні для вашого сайту.
