Кейс: впровадження AMP на сайт WordPress
У 2020 році більшість користувачів інтернету за замовчуванням очікують, що завантаження мобільних версій сайту буде виконуватися так само швидко, як і їхні десктопні еквіваленти. Підрахунки великих компаній, таких як Amazon, лише підтверджують це: наприклад, лише 1 зайва секунда у завантаженні сторінок може призвести до відчутного зниження річного виторгу компанії — на $1,6 млрд.
Для більш швидкого завантаження сторінок на мобільних пристроях Google у жовтні 2015 року анонсував AMP , проект із відкритим вихідним кодом. Тоді ж виникла думка, що AMP став своєрідною спробою Google конкурувати з новими розробками конкурентів — миттєвими статтями Facebook Instant Articles і швидшими мобільними програмами, що забезпечують високу швидкість роботи браузера.
Так чи інакше, AMP це нові можливості для створення швидких версій сайтів для мобільних телефонів. У нашому сьогоднішньому кейсі ми розглянемо досвід впровадження та налаштування AMP на WordPress на прикладі власного сайту нашої компанії.
Що таке AMP-сторінки
Accelerated Mobile Pages (прискорені мобільні сторінки) — це сторінки, створені таким чином, щоб завантажуватись максимально швидко на мобільних пристроях. Найчастіше це «урізана» версія звичайної HTML-сторінки, яка містить весь основний контент (включаючи вбудовані елементи на кшталт відео та реклами), але з неї «вирізані» блоки та фрагменти коду, що уповільнюють завантаження.
Але їх швидке завантаження пояснюється не тільки цим: AMP-сторінки зберігаються в окремому кеші Google, завдяки чому вони завантажуються неймовірно швидко – на 15-80% швидше за звичайні сторінки! Немаловажним бонусом є те, що при пошуку через мобільні браузери вони відображаються в топі результатів Google Search, зсуваючи “традиційні” сторінки вниз рейтингу.
Як сторінки AMP впливають на SEO
Google віддає перевагу сайтам із високою швидкістю завантаження та хорошими поведінковими факторами. Швидке завантаження контенту на AMP-сторінках дозволяє знизити відсоток відмов, за умови, що ваш контент корисний і відповідає на поставлене користувачем питання. Однак наявність AMP-сторінки не враховується як сигнал ранжирування — важлива саме швидкість.
Швидкі сторінки – щасливі відвідувачі. Щасливі відвідувачі частіше залишаються на сайті, читають та взаємодіють контентом. Google любить таку поведінку. Таким чином, ефект на SEO просування від впровадження AMP-сторінок непрямий, але результат може вас порадувати.
Наприклад, після впровадження технології AMP на сайт Вебнавтів у нас спостерігалося різке зростання відвідуваності з мобільних пристроїв – за 5 місяців трафік з Google зріс у 3 рази.
Як впровадити AMP сторінки на WordPress
- необхідно використовувати для завантаження лише асинхронні скрипти;
- необхідно використовувати лише одну підтримувану бібліотеку AMP JS;
- не можна застосовувати стилі за допомогою звичайного
- починатися з
<!doctype html>; - містити тег верхнього рівня
<htmlабо
><html amp>; - містити
<head>та<body>; - на перших позиціях всередині
<head></head>має стояти посилання<link rel="canonical" href="$SOME_URL" />, яка вказує на звичайну версію сторінки; - утримувати
<meta name="viewport" content="width=device-width,minimum-scale=1">всередині<head>;< /li> - містити
<style amp-boilerplate>всередині<head>; - перед закриваючим
</head>повинен стояти<script async src="https://cdn.ampproject.org/v0.js"></script>, який включає бібліотеку JS для AMP; - і додаткова можливість, необов’язкова до застосування: у
<head>можна підключати стилі.
Основні вбудовані компоненти AMP HTML
amp-ad— це контейнер для рекламних блоків. Підтримує лише рекламні оголошення по каналу HTTPS і вимагає певного скрипту. Також підтримує вбудовані стилі та низку рекламних сервісів.amp-img— керована та контрольована через runtime amp-версія стандартного тегу<img>з підтримкою стилів.amp-pixel— елемент для відстеження перегляду сторінок. Не підтримує стилі.amp-video— amp-версія тегу<video>з HTML5. Цей компонент можна використовувати лише для прямої вставки відео HTML5. Для вставки відео з YouTube використовується окремий скрипт та окремий тег.
Налаштування AMP за допомогою модуля WordPress
Достатньо просто перейти до репозиторію плагінів та вибрати будь-яке з популярних рішень. Для сайту нашої компанії ми зупинилися на “AMP для WP – Прискорені мобільні сторінки” за авторством Ахмеда та Мохаммеда Калуді. Плагін знаходиться у стадії активної розробки та супроводжується щотижневими оновленнями. На прикладі розглянемо інтеграцію AMP на WordPress-сайт.
Після встановлення та активації плагіна AMP-сторінки будуть створені автоматично, але для більш точного і тонкого калібрування все одно доведеться залізти в налаштування.
Спочатку плагін пропонує на вибір два варіанти: конфігуратор, який поетапно дозволяє налаштувати плагін в загальних рисах, або “просунуте” налаштування, яке нам і потрібне.
Розглянемо опції дещо докладніше.
- На вкладці «General» налаштовується те, для яких сторінок вашого сайту будуть створені AMP-версії, визначаються кастомні таксономії та інше.
- Вкладки «Advertisement» та «SEO» конфігурують рекламні блоки та мета-інформацію для пошукових систем.
- «Page Builder» — включає або вимикає конструктор AMP-сторінок.
- «PWA» — Progressive Web App або «Прогресивний веб-додаток» — як свідчить Вікіпедія, «технологія у веб-розробці, яка додає сайтам можливості додатків для мобільних пристроїв, трансформує сайт у додаток, гібрид сайту та програми для мобільних пристроїв, продукт спільної еволюції мобільного сайту та класичного нативного застосування».
Взагалі, взаємодія AMP і PWA – це досить цікавий результат еволюції веб-розробки, що породив початок епохи Mobile first, але про це ми розповімо в інший раз.
- Вкладка «Performance» привносить невеликі оптимізації. Включити їх можна на додаток до будь-якого з плагінів, що використовуються на вашому сайті, спрямованих на підвищення продуктивності.
- «Веб-аналітика» дозволяє підтримувати різні метрики та профільні сервіси.
- «Structured Data» – додає розмітку Google Rich Snippets відповідно до рекомендаціями Schema.org для структурування вашого сайту для SEO.
- «Notice Bar & GDPR» – налаштування щодо Загального регламенту захисту персональних даних.
- «Push Notifications», «Contact Form», «Comments» – вкладки, які відповідають за налаштування пуш-повідомлень, форм зворотного зв’язку та коментарів.
- «Instant Articles» – налаштування інтеграції та взаємодії з функціоналом Facebook, що дозволяє переглядати матеріали інтернет-видань у мобільному додатку Facebook без переходу на зовнішню веб-сторінку ресурсу.
- «Tools» і «Advance Settings» – важливі розділи опцій, що дозволяють вирішувати проблемні моменти в інтеграції, наприклад, помилкові перенаправлення з різних категорій і тегів на сайті до потрібних AMP-версіям, ролі редакторів та інше.
- «E-Commerce» – налаштування опцій інтеграції та взаємодії з плагінами електронної комерції, такими як WooCommerce та Easy Digital Downloads.
- «Translation Panel» – вкладка для локалізації елементів навігації та повідомлень AMP-сторінок.
Наступна важлива і не менша за налаштуваннями вкладка — «Design». Її Назва говорить сама за себе – вона дозволяє налаштовувати зовнішній вигляд AMP сторінок на вашому сайті. Докладного опису що й до чого приводити нічого очікувати, т.к. тут уже все обмежено вашою фантазією.
Як перевірити сторінки на валідність
Після того, як ви реалізували AMP-сторінки та провели їх налаштування, необхідно провести перевірку через Google Search Console — до цього моменту вона вже має бути сполучена з вашим сайтом. Для цього увійдемо до Google Search Console і натиснімо на «Вид у пошуку > Пришвидшені мобільні сторінки (AMP)». Тут ми побачимо кількість проіндексованих сторінок та сторінок із помилками.
Будь-які помилки та попередження, пов’язані з АМП, відобразяться у цьому звіті. Вивчивши подробиці та усунувши помилки, проводимо перевірку знову, щоб переконатися, що все гаразд.
Також можна не чекати звіту в Google Search Console проводити перевірку безпосередньо – для цього нам знадобиться інший сервіс. перевірки AMP-сторінок від Google.
Вводимо потрібну нам URL, натискаємо «Перевірити» та дивимося – відповідає чи не відповідає сторінка критеріям AMP. Всі інші дії щодо усунення проблем та помилок аналогічні діям через Google Search Console.
Усунувши всі помилки, можна перевірити швидкість завантаження прискорених та стандартних мобільних сторінок за допомогою відповідного інструменту, наприклад PageSpeed Insights .
Що зрештою?
Фахівці нашої компанії вважають, що прискорені мобільні сторінки можуть допомогти вашому сайту піднятися у пошуку. Адже за фактом AMP – це загальнодоступний шлях веб-оптимізації, сучасний і активно просувається в маси самим Google, тоді як той же Facebook Instant Articles залишається все ще технологією тільки для еліти і не має такого охоплення.
Ми також раді, що і безпосередні розробники WordPress, і незалежні студії та окремі фахівці розвивають та покращують інтеграцію AMP на даній платформі, долучаючи до цього дедалі більше користувачів та власників сайтів.
