Веб студія » Блог » Що таке 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-документ повинен включати в себе наступні компоненти:

  • Наявність тега верхнього рівня <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 буде не повністю виправдано. Буде досить нормального адаптивного дизайну або мобільної версії.

Колесніков Дмитро
Технічний директор, студії BRAINLAB

Залишити відповідь

Ваш e-mail не буде опублікований. Обов'язкові поля позначені *

Хочете зробити щось велике?
Дозвольте допомогти вам.
Чи готові? Зв'яжіться сьогодні.

Зв'яжіться з нами!

info@brainlab.com.ua

Наш офіс

Україна, Київ

вулиця Євгена Сверстюка, 19

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

38 (095) 307 888 5

Ми в соцмережах

Калькулятор вартості сайту Brainlab

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

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

Детальніше про сайт
Landing Page

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

Детальніше про сайт
Корпоративний
сайт

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

Детальніше про сайт
Сайт-каталог

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

Детальніше про сайт
Інтернет магазин

Інтернет-магазин, який містить каталог товарів компанії, з можливістю фільтрації і сортування. Користувачі можуть оформити замовлення, оплатити онлайн, зареєструватися, брати участь в програмі лояльності.

Детальніше про сайт
2. Дизайн
3. Верстка
4. Движок CMS
Тип сайту: Не вибрано
0 $
Дизайн: Не вибрано
0 $
Верстка: Не вибрано
0 $
Движок CMS: Не вибрано
0 $
Приблизна вартість:0 $
Зразкові терміни:0 днів

Хочете зробити щось велике?
Дозвольте нам допомогти вам.

Чи готові? Зв'яжіться сьогодні.
Заповніть поле
Заповніть поле
Заповніть поле
Дякую за заявку!

Наші менеджери зв'яжуться з вами найближчим часом.