Кейс: впровадження AMP на сайт WordPress
У 2020 році більшість користувачів інтернету за замовчуванням очікують, що завантаження мобільних версій сайту буде виконуватися так само швидко, як і їхні десктопні еквіваленти. великих компаній, таких як Amazon, лише підтверджують це: наприклад, лише 1 зайва секунда у завантаженні сторінок може призвести до відчутного зниження річного виторгу компанії — на $1,6 млрд.
Для більш швидкого завантаження сторінок на мобільних пристроях Google у жовтні 2015 року , проект із відкритим вихідним кодом. Тоді ж виникла думка, що 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 на даній платформі, долучаючи до цього дедалі більше користувачів та власників сайтів.
В 2020 году большинство пользователей интернета по умолчанию ожидает, что загрузка мобильных версий сайта будет выполняться так же быстро, как и их десктопных эквивалентов. крупных компаний, таких как Amazon, лишь подтверждают это: например, всего 1 лишняя секунда в загрузке страниц может привести к ощутимому снижению годовой выручки компании — на $1,6 млрд.
Для обеспечения более быстрой загрузки страниц на мобильных устройствах Google в октябре 2015 года , проект с открытым исходным кодом. Тогда же возникло мнение, что 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 раза.
Благодаря такому привлечению мобильного трафика общая посещаемость сайта поднялась на 25%, увеличилась и динамика роста.
Читайте также:
Кейс: рост мобильного трафика с помощью внедрения AMPКак внедрить AMP страницы на WordPress
Под WordPress разработано огромное количество плагинов для внедрения AMP-технологии. Однако подобное внедрение подвергает сайт кардинальным переменам в структуре, что может привести к упрощению дизайна, «сломанной» вёрстке, конфликтности с общими методами оптимизации и другими плагинами. Для минимизации конфликтов рекомендуется придерживаться основ технологии AMP.
Чтобы не столкнуться с вышеперечисленными проблемами и уменьшить затраты на разработку, нужно учитывать некоторые ограничения технологии и требования к применению:
- необходимо использовать для загрузки только асинхронные скрипты;
- необходимо использовать только одну поддерживаемую библиотеку AMP JS;
- нельзя применять стили с помощью обычного<style> по конкретному месту применения: их необходимо загружать в этом же HTML-файле в теге <style amp-custom>, где и добавляется специальный тег amp-custom, включающий стили для файла;
- размер подключаемых стилей не должен превышать 50 Кб;
- параметры ширины и высоты («width» и «height» соответственно) внешних ресурсов (например, изображений) указываются внутри HTML-файла;
- шрифты загружаются по прямой ссылке в HTML-файле или же через CSS-правило @font-face.
AMP HTML
- начинаться с
<!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>; - содержать
<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 проводить проверку напрямую – для этого нам понадобится другой .
Вводим нужный нам URL, нажимаем «Проверить» и смотрим – соответствует или не соответствует страница критериям AMP. Все остальные действия по устранению проблем и ошибок аналогичны действиям через Google Search Console.
Устранив все ошибки, можно проверить скорость загрузки ускоренных и стандартных мобильных страниц с помощью соответствующего инструмента, например, PageSpeed Insights.
Что в итоге?
Специалисты нашей компании считают, что ускоренные мобильные страницы могут помочь вашему сайту подняться в поиске. Ведь по факту AMP – это общедоступный путь веб-оптимизации, современный и активно продвигаемый в массы самим Google, в то время как тот же Facebook Instant Articles остаётся всё ещё технологией только “для элиты” и не имеет такого охвата.
Мы также рады, что и непосредственные разработчики WordPress, и независимые студии и отдельные специалисты развивают и улучшают интеграцию AMP на данной платформе, приобщая к этому всё больше пользователей и владельцев сайтов.
