Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages Accelerated Mobile Pages (AMP) – це технологія з відкритим вихідним кодом, що дозволяє створювати веб-сторінки, які швидко завантажуються в мобільному браузері. Використовуючи AMP-версії цільових сторінок, ви підвищуєте зручність роботи з вашим сайтом для мобільних користувачів. Створено компанією Google в 2015 році. По суті всі подібні сторінки є статичними або умовно-динамічними, так як припускають використання відправки форм, а також iframe.

Справа в тому, що на сайті використовуються спеціальні теги, кількість і функціонал яких строго обмежені. Завдання розробника полягає в тому, щоб зібрати те що треба з доступних йому схем, які вирішать проблему замовника. Google знаходе ці спеціальні теги і кешує інформацію в них. Після цього, коли користувач шукає щось в Гуглі, браузер на тлі підгружає інформацію з CDN Гугла, в спеціальний iframe і при переході по посиланню відкриває вже завантажену сторінку в спеціальному вікні. Сторінки з AMP ранжуються вище інших запитів в пошуку за рахунок того, що відповідають вимогам до швидкої завантаженні і адаптовані під мобільні пристрої

Історія

Проект AMP був анонсований компанією Google 7 жовтня 2015 року. Більше 30 новинних видань та декількох технологічних компаній, включаючи Twitter, Pinterest, LinkedIn та WordPress, були попередньо оголошені в якості партнерів проекту AMP.

Вперше протестувати технологію користувачам вдалося в лютому 2016 року, коли Google почав показувати версії AMP веб-сторінок у результатах мобільного пошуку. Ссылки AMP в пошукової системі Google ідентифікуються значком. У лютому 2017 року, через рік після публічного запуску AMP, компанія Adobe повідомила, що на AMP-сторінках припадає 7% всього веб-трафіка для провідних видань у Сполучених Штатах. У травні 2017 року компанія Google повідомила, що глобальне охоплення технологією швидкого завантаження сторінок складає більше 2 мільярдів AMP-сторінок, опублікованих у всьому світі. В червні 2017 року Twitter розпочав посилання на сторінки AMP від ​​своїх прикладних програм для iOS та Android.

Переваги використання AMP-сторінок в Google Рекламі

AMP-сторінки завантажуються швидше будь-яких інших (крім максимально оптимізованих HTML-сторінок). Використання AMP дозволяє скоротити час відклику за оголошенням до перегляду сайту. В цілому це зменшує кількість переривань і відмов, потенційно підвищуючи кількість конверсій і загальну ефективність реклами.

Відсутність кастомних скриптів

Перше і найголовніше відміну від стандартних сайтів - це неможливість вставки "звичайних" скриптів. Тобто велика частина функціоналу, зав'язана на динамічній зміні (дії при натисканні, анімація, фільтрація, модальні вікна), стає недоступною. Рішення - використання доступних компонентів і iframe. Доступні компоненти дозволяють домогтися, нехай і не повною, реалізації звичних фич, але представляють їм гідну заміну і оптимізовані для швидкого завантаження. З їх допомогою можна зробити бічне меню, карусель, надсилання форми, підвантажуємий контент, рекламу та інше. Кожен компонент пов'язаний зі своєю js-бібліотекою, яку потрібно підключити для його використання на сайті.

У коді сторінки не повинно бути inline-стилів Ще одна особливість, яка повинна торкнутися в першу чергу текстового редактора, так як редагування стилів там проходить inline. Елементи з атрибутами типу style = "color: ...", не є валідними, а зміна кольору або розміру шрифту запише це властивість в код. Структурована схема даних (structured data)

Для включення статей до збірки "Top stories google" до сторінок повинні бути додані схеми даних з короткою інформацією про статті, автора, видавництві, логотип компанії, а також дати публікації і зміни статті. Використання структурних даних не є обов'язковою умовою, але для того щоб пошуковик коректно відображав дані і зміни при редагуванні, потрібно поміщати цю схему на сайт. Фактично використання AMP без цієї схеми стає безглуздим.

Приклад схеми даних для сторінки типу "стаття"

<Script

type = "application / ld + json">{
 "@context": "http://photo.org",
 "@type": "NewsArticle",
 "MainEntityOfPage": {
   "@type": "WebPage",
   "@id": "https://google.com/photo"
 },
 "Headline": "Article headline",
 "Image": {
   "@type": "ImageObject",
   "Url": "photo.jpg",
   "Height": 800,
   "Width": 800
 },
 "DatePublished": "2015-02-05T08: 00: 00 + 08: 00",
 "DateModified": "2015-02-05T09: 20: 00 + 08: 00",
 "Author": {
   "@type": "Person",
   "Name": "John Doe"
 },
  "Publisher": {
   "@type": "Organization",
   "Name": "Google",
   "Logo": {
     "@type": "ImageObject",
     "Url": "https://google.com/photo.jpg",
     "Width": 600,
     "Height": 60
   }
 },
 "Description": "A most wonderful article"

} </ Script>

Деякі значення є обов'язковими. Для структурної схеми даних так само є свій валідатор. Інформація щодо заповнення та обов'язкові поля для схеми типу "стаття" можна подивитися тут. Там же можна знайти інформацію по іншим типам схем. (Книги, Курси, Музика, Подкасти, Рецепти, Огляди, ТВ і Фільми, Відео)

Деякі особливості

Логотип компанії Є ряд вимог до логотипу: https://developers.google.com/search/docs/data-types/articles#AMPlogo guidelines Хочу звернути увагу, що розмір повинен бути не більше і не менше 60x600px хоча б по одній зі сторін. Бажано дотримуватися висоту 60px (наприклад, 450x60px). Зображення менших розмірів, але в тих же пропорціях, що і 60x600px (наприклад 450x45px), перевірку не пройдуть.

Дата публікації і дата зміни Дата публікації є обов'язковим параметром. Дата зміни - рекомендованим. Google кешує зміст статей, і дізнатися, коли він піде перевіряти всі статті на сайті знову, неможливо. Тому, якщо дата останнього зміни буде відрізнятися, пошуковику буде простіше зрозуміти, що потрібно зробити новий кеш. Інакше можлива ситуація, коли користувач не побачить важливих змін.

Спільні зусилля

AMP побудовано завдяки глибокій співпраці з тисячами розробників, видавців та веб-сайтів, платформ поширення та технологічних компаній. На сьогоднішній день опубліковано більше 1.5B сторінок AMP, а 100+ провідних аналітиків, постачальники рекламних технологій та CMS підтримують формат AMP.

Відсутність звичайних <img> тегів в документі

Всі зображення на сторінці повинні бути описані в особливому тезі <amp-img>, що ускладнює вставку зображень користувачем через текстовий редактор. Для інших елементів, де висновок зображень прописаний "руками", досить поправити верстку. Так само, якщо використовуються карусель або lightbox, потрібно вставити аналоги з компонентів

Технологія AMP

Формат AMP складається з: AMP HTML - мова HTML, в якому частина тегів замінена на еквівалентні AMP-теги, а частина заборонена для використання. AMP JS - в роботі використовується власна JS-бібліотека, що дозволяє елементам сторінки завантажувати асинхронно. Google AMP Cache - в процесі індексування AMP-сторінок, пошукова система кеширует її дані і відтворює зі своїх серверів.

Як зв'язати оголошення з AMP-сторінкою

AMP-сторінку можна вибрати як цільову для оголошення, як і будь-яку іншу мобільну сторінку. Вам потрібно лише вказати відповідну URL-адресу в полі "Мобільний URL" для оголошення або ключового слова. Після цього користувачі, натиснувши на оголошення, перейдуть на AMP-сторінку.