- Що таке AMP
- Які переваги та недоліки AMP технології
- Як впровадити AMP сторінки на сайт
- Як перевірити AMP сторінки
- Чи обов'язково використовувати AMP технологію
На позиції сайту в пошуковій видачі та рейтинг доменого імені величезний вплив має користувацький досвід, покращити який допомагає оптимізація швидкості завантаження сторінок. Світові компанії постійно впроваджують нові технології, щоб веб-ресурси завантажувалися якомога швидше, особливо на мобільних пристроях. Однією з найефективніших вважають AMP, яка допомагає створити сторінки з миттєвим завантаженням на смартфонах та планшетах. Однак, попри величезну кількість переваг, Accelerated Mobile Pages має ряд обмежень, які можуть зашкодити вашому інтернет-проекту.
Що таке AMP
AMP (Accelerated Mobile Pages) — це технологія прискорення завантаження HTML сторінок на смартфонах та планшетах, яка створена компанією Google у 2015 році. В лютому 2016 року було проведене тестування користувачами, коли такі сторінки почали з'являтися в результатах мобільного пошуку. Власники Гугл тоді відразу почали активно популяризувати прискорені мобільні сторінки, наприклад, позначали їх спеціальним значком «блискавка» та надавали їм невелику перевагу при ранжуванні.
AMP сторінки відрізняються від стандартних відсутністю та/або заміною класичних HTML тегів. Наприклад, замість тегу «зображення» IMG використовується AMP-IMG. Стандартний JavaScript теж заборонений, натомість існує бібліотека AMP JS, яка має обмежений набір функцій, але забезпечує оптимізований рендеринг. Прискоренню сприяє і система Google AMP Cache: кешування сторінок сайту відбувається безпосередньо у пошуковій системі. В результаті сторінки завантажуються за 0.3-0.5 секунд навіть у користувачів з повільним інтернет-з'єднанням.
Читайте також: Показник відмов на сайті — як його аналізувати та зменшити
Які переваги та недоліки AMP технології
В 2024 році доля мобільного трафіку становила понад 62%, при цьому в багатьох країнах досі доступний максимум 3G доступ. Звідси випливає головна перевага AMP сторінок — миттєве завантаження. Оцінка по PageSpeed Insights нерідко складає 95-98, а контент завантажується дійсно за лічені секунди. Тобто технологія буквально виводить всіх користувачів на один рівень, дозволяючи миттєво отримувати доступ до корисного та цікавого контенту незалежно від швидкості інтернет-з'єднання.
До інших важливих переваг AMP сторінок слід віднести:
- Покращений користувацький досвід. Користувачі отримують доступ переважно до тексту, тобто їх не відволікають форми, спливаючі вікна, інтерактивні рекламні банери.
- Менший показник відмов. Швидше завантаження сторінок та відсутність важких інтерактивних елементів підвищує вірогідність того, що відвідувачі будуть більше часу проводити на вашому веб-ресурсі.
- Спрощене SEO-просування. Алгоритми пошукових систем віддають перевагу швидким сайтам. З цією технологією сторінки інтернет-проекту завантажуються миттєво, відповідно, він має більше шансів зайняти перші позиції у видачі.
- Можливість автоматичного впровадження. Самостійно створювати та редагувати AMP непросто, однак процес спрощують безкоштовні CMS плагіни.
Технологія дає змогу створити спрощені версії веб-сторінок, тим самим обмежує функціонал сайту. Звідси випливають наступні недоліки AMP сторінок:
- спеціалізований JS — зменшує кількість доступних до реалізації функцій;
- максимальний розмір CSS 75 КБ — змушує мінімізувати стилі, що нерідко ускладнює дизайн;
- обмежена монетизація — інтерактивні банери часто працюють некоректно або не відображаються, через що власники інтернет-проектів втрачають до 20-30% від реклами порівняно з традиційними мобільними сторінками;
- менше брендованого трафіку — користувач ділиться не вашим доменом, а кешованою версією сторінки Google;
- ризик дублювання контенту — потрібно уважно слідкувати за правильно налаштованими rel=“canonical”, інакше пошукові системи будуть індексувати AMP версію замість основної сторінки;
- залежність від Гугл — кешування сторінок відбувається на серверах компанії, тобто вона має більший контроль над вашим контентом.
В 2017-2018 роках власники сайтів були готові витрачати додатковий час на створення та керування AMP сторінками з урізаним функціоналом, тому що отримували натомість кращі позиції в пошуковій видачі та могли виділити свій веб-ресурс. Зараз Google не робить наявність цієї технології ключовим фактором ранжування, характерний значок більше не відображається, тому варто оцінювати користь виключно з урахуванням особливостей свого інтернет-проекту.
Онлайн-магазини та портали з високою інтерактивністю здебільшого використовують класичні методи оптимізації мобільної версії, тому що AMP суттєво обмежує їхній функціонал. Але контентні сайти (журнали, блоги, новинні веб-ресурси) з великою кількістю статей активно застосовують технологію для покращення доступності на мобільних пристроях.
Читайте також: SEO на мінімалках — що власник сайту може зробити самостійно для просування сайту без залучення спеціалістів
Як впровадити AMP сторінки на сайт
При впровадженні AMP технології потрібно створити звичайну та спрощену версію сторінки. Щоб пошукові системи правильно розуміли їх зв'язок, на кожній в розділі «head» обов'язково має бути спеціальний тег. В код звичайної сторінки додаємо:
<link rel="amphtml" href="https://example.com/article-amp.html">
В код AMP версії вставляємо:
<link rel="canonical" href="https://example.com/article.html">
Далі ми розглянемо цей момент при створенні спрощених сторінок як вручну, так і за допомогою плагінів. Однак завжди перевіряйте наявність вищевказаних тегів, адже без них пошукові системи можуть вважати AMP сторінку дублікатом контенту.
Спосіб 1 — Створення AMP вручну
Самостійно створювати кожну Accelerated Mobile Pages доцільно при наявності невеликого сайту або необхідності повного контролю окремих сторінок, наприклад, новин або статей в блозі. В цьому випадку беремо готовий шаблон та наповнюємо його наявним контентом, замінюючи класичні HTML, CSS та JS на відповідні AMP теги.
Детальну покрокову інструкцію ви можете знайти на сайті amp.dev, а ми розглянемо ключові моменти для кращого розуміння впровадження AMP на сайт.
Починаємо з базової розмітки спрощеної версії сторінки:
<!doctype html>
<html amp lang="uk">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1 id="hello">Hello AMPHTML World!</h1>
</body>
</html>
Зверніть увагу на тег <html amp lang="uk">. Він містить <html amp>, який повідомляє пошуковим роботам, що це саме AMP сторінка. Якщо сайт не українською мовою, потрібно замінити uk на відповідне скорочення, наприклад, en для англійської версії. І не забудьте відредагувати тег <link rel="canonical" href="$SOME_URL">: href має вказувати на основну версію сторінки.
Далі додаємо зображення за допомогою тегу <amp-img>, наприклад:
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400"></amp-img>
Перевагою AMP технології є спрощене впровадження адаптивних зображень. Вам достатньо додати layout="responsive" до тегу <amp-img>. Зробимо це з нашою попередньою картинкою:
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
Повний перелік спеціальних тегів можна знайти на цій сторінці сайту amp.dev.
Далі переходимо до стилізації документу. При використанні технології не можна додавати зовнішні CSS файли, тому стилі прописують всередині <style amp-custom>:
<style amp-custom>
h1 {
margin: 1rem;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: blue;
}
</style>
При бажанні можна додати користувацький JavaScript через спеціалізований <amp-script> компонент. Так вдасться написати та запустити власний JS, при цьому дотриматися вимог технології. Є можливість також вручну додати загальні віджети та унікальні веб-елементи, акції та події — код для кожної функції є на сайті amp.dev.
Коли створите спрощену версію сторінки, не забудьте додати тег на AMP на стандартній HTML сторінці:
<link rel="amphtml" href="https://example.com/article-amp.html">
Тепер залишається лише перевірите готову спрощену сторінку через Google AMP Validator (пізніше ми детальніше розглянемо цей інструмент).
Спосіб 2 — Створення AMP за допомогою плагінів
Вручну створювати спрощену мобільну версію кожної сторінки ризиковано, складно та займає чимало часу, особливо з великими інтернет-проектами. Власникам сайтів на системах управління контенту використовувати цю технологію набагато простіше, адже існують безкоштовні AMP плагіни для CMS:
- WordPress. Офіційне розширення AMP for WP здатне автоматично генерувати спрощені мобільні версії сторінок сайту та постів.
- Joomla. wbAMP автоматично створює AMP-версії ваших сторінок, підтримує Google Analytics та налаштування дизайну. JAMP дозволяє генерувати AMP-версії для статей та блогів.
- Drupal. Перетворити стандартні сторінки на спрощені допомагає AMP Module.
- Magento. Plumrocket AMP створює спрощені версії продуктів, категорій та інших сторінок. Ідентичну задачу виконує Magefan AMP Extension.
Розглянемо, як створити AMP сторінки на WordPress сайті. Переходимо в панель керування, заходимо в розділ «Плагіни» та натискаємо «Додати новий». Вказуємо в пошуку назву, завантажуємо та активуємо потрібний.
Після активації відразу з'явиться вікно для вибору способу налаштування. Нам потрібне базове рішення для новачків.
Тепер можемо налаштувати кожен момент окремо. Ви можете вибрати тип сторінок для AMP, встановити аналітику, монетизацію тощо. Особливу увагу зверніть на пункт Where do you need AMP?: можете перевести відразу весь блог або сторінки продуктів на вказану технологію, однак краще самостійно налаштовувати кожну сторінку.
Для цього переходимо в розділ «Пости» або «Сторінки», в залежності від типу контенту, з яким ви збираєтесь працювати. Наприклад, додамо новий пост в блог.
Натискаємо Start the AMP Page Builder.
Відразу відкривається конструктор зі зручною системою створення AMP сторінки. Вам достатньо спочатку перетягнути потрібну кількість колонок, а потім туди ж — модуль, наприклад, текст.
Щоб відредагувати модуль, натисніть біля нього на іконку шестирні.
Ви можете навіть скористатися готовими шаблонами, достатньо натиснути Pre-built AMP Layouts.
В безкоштовній версії є лише один простий макет, в платній — 9, однак треба платити $89 щороку. Нам вистачить безкоштовного варіанту, тим паче його можна відредагувати.
Ви можете видалити, змінити, додати будь-яку колонку та модуль з встановленого шаблону. Тільки не забудьте налаштувати основну версію через класичний редактор та опублікувати сторінку.
Результати перевірки стандартної сторінки по PageSpeed Insights.
Результати перевірки AMP сторінки по PageSpeed Insights.
Як перевірити AMP сторінки
Найпростіший спосіб переконатися в коректній роботі AMP сторінки — використати відповідний сервіс від Google. Вставляємо посилання, натискаємо «Перевірити сторінку» та миттєво отримуємо звіт.
Ми перевірили AMP сторінку, яку зробили за допомогою офіційного WordPress плагіну.
Наша спрощена версія може без помилок відображатись у результатах пошуку Google.
Ми взяли стандартну сторінку з іншого сайту та теж перевірили на цьому сервісі.
Читайте також: Як покращити SEO свого сайту за допомогою Yoast SEO
Чи обов'язково використовувати AMP технологію
Необов'язково, адже існують різноманітні методи оптимізації мобільних сторінок сайту, які дозволяють досягти гарної швидкості завантаження без жорсткого обмеження функціоналу. Наприклад, вибір хостингу з достатньою кількістю ресурсів, кешування, видалення зайвого коду, оптимізація зображень, Lazy Loading («Ліниве завантаження»).
До 2021 року мільйони власників інтернет-проектів впроваджували AMP, тому що це давало змогу виділити сторінки у видачі за допомогою характерної іконки, плюс потрапити в карусель Google News. На момент написання статті «блискавка» більше не відображається в пошуковій видачі, пріоритету немає, а потрапити в карусель новин може будь-який інтернет-проект. Перевага технології у збільшенні швидкості веб-ресурсу, однак цього можна досягти і без таких жорстких обмежень функціоналу.
Сподобалася стаття? Розкажіть про неї друзям: 
