Відмінності між версіями «Accelerated Mobile Pages (AMP)»

Версія за 12:00, 8 листопада 2018

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>

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

Технологія AMP

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

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

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

Як підключити AMP

AMP-сторінки використовуються в першу чергу новиними та інформаційними сайтами. Але в зарубіжному сегменті відзначають, що впровадження технології для E-commerce не тільки можливо, але і необхідно, воно призводить до реального підвищення конверсії. Наприклад, для сайту AliExpress була збільшена конверсія на 4%. Комерційний гігант eBay також відзначає переваги застосування Accelerated Mobile Pages.

Як реалізувати AMP

Для AMP-сторінок потрібно підготувати шаблон, який відповідає вимогам специфікації. Для кожного документа, який потрібно прискорити, по ньому створюється окрема AMP-версія. Щоб пошукова система про неї дізналася, потрібно зробити зв'язок зі звичайною. Для цього на неї додається посилання <link rel = "amphtml" href = "шлях до швидкої версії">, а на прискореної <link rel = "canonical" href = "адреса основний">.

Генерацію документів за шаблоном можна зробити автоматичною, допрацювавши використовувану CMS.

Для сайтів на популярних системах управління контентом є готові рішення, що дозволяють легко і швидко впровадити технологію:

• WordPress - плагін і надбудова;

• Joomla - плагін wbAMP або JAmp;

• Drupal - модуль (для нього потрібні плагіни Token і Chaos Tools), тема, бібліотека;

• OpenCart - модуль;

• Magento - плагін;

• PrestaShop - модуль.

Багато рішень для CMS генерують AMP-сторінки для окремих розділів сайту, а не всього ресурсу в цілому. Але цього достатньо, тому що специфічність технології і не вимагає реалізації на всіх доступних документах.