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

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
(Динамічна гео-персоналізація)
(Відсутність кастомних скриптів)
 
(не показано 30 проміжних версій цього учасника)
Рядок 3: Рядок 3:
 
</center>
 
</center>
  
'''Accelerated Mobile Pages'''
+
==Accelerated Mobile Pages==
 
Accelerated Mobile Pages (AMP) –  це технологія з відкритим вихідним кодом, що дозволяє створювати веб-сторінки, які швидко завантажуються в мобільному браузері. Використовуючи AMP-версії цільових сторінок, ви підвищуєте зручність роботи з вашим сайтом для мобільних користувачів.  
 
Accelerated Mobile Pages (AMP) –  це технологія з відкритим вихідним кодом, що дозволяє створювати веб-сторінки, які швидко завантажуються в мобільному браузері. Використовуючи AMP-версії цільових сторінок, ви підвищуєте зручність роботи з вашим сайтом для мобільних користувачів.  
 
Створено компанією Google в 2015 році.
 
Створено компанією Google в 2015 році.
Рядок 16: Рядок 16:
  
 
Вперше протестувати технологію користувачам вдалося в лютому 2016 року, коли Google почав показувати версії AMP веб-сторінок у результатах мобільного пошуку. Ссылки AMP в пошукової системі Google ідентифікуються значком. У лютому 2017 року, через рік після публічного запуску AMP, компанія Adobe повідомила, що на AMP-сторінках припадає 7% всього веб-трафіка для провідних видань у Сполучених Штатах. У травні 2017 року компанія Google повідомила, що глобальне охоплення технологією швидкого завантаження сторінок складає більше 2 мільярдів AMP-сторінок, опублікованих у всьому світі. В червні 2017 року Twitter розпочав посилання на сторінки AMP від ​​своїх прикладних програм для iOS та Android.
 
Вперше протестувати технологію користувачам вдалося в лютому 2016 року, коли Google почав показувати версії AMP веб-сторінок у результатах мобільного пошуку. Ссылки AMP в пошукової системі Google ідентифікуються значком. У лютому 2017 року, через рік після публічного запуску AMP, компанія Adobe повідомила, що на AMP-сторінках припадає 7% всього веб-трафіка для провідних видань у Сполучених Штатах. У травні 2017 року компанія Google повідомила, що глобальне охоплення технологією швидкого завантаження сторінок складає більше 2 мільярдів AMP-сторінок, опублікованих у всьому світі. В червні 2017 року Twitter розпочав посилання на сторінки AMP від ​​своїх прикладних програм для iOS та Android.
 +
 +
==Як зв'язати оголошення з AMP-сторінкою==
 +
AMP-сторінку можна вибрати як цільову для оголошення, як і будь-яку іншу мобільну сторінку. Вам потрібно лише вказати відповідну URL-адресу в полі "Мобільний URL" для оголошення або ключового слова. Після цього користувачі, натиснувши на оголошення, перейдуть на AMP-сторінку.
  
 
==Переваги використання AMP-сторінок в Google Рекламі==
 
==Переваги використання AMP-сторінок в Google Рекламі==
 +
 +
 +
[[Файл: АМР_ua.jpg|700px]]
 +
 
AMP-сторінки завантажуються швидше будь-яких інших (крім максимально оптимізованих HTML-сторінок). Використання AMP дозволяє скоротити час відклику за оголошенням до перегляду сайту. В цілому це зменшує кількість переривань і відмов, потенційно підвищуючи кількість конверсій і загальну ефективність реклами.
 
AMP-сторінки завантажуються швидше будь-яких інших (крім максимально оптимізованих HTML-сторінок). Використання AMP дозволяє скоротити час відклику за оголошенням до перегляду сайту. В цілому це зменшує кількість переривань і відмов, потенційно підвищуючи кількість конверсій і загальну ефективність реклами.
  
 
==Відсутність кастомних скриптів==
 
==Відсутність кастомних скриптів==
Перше і найголовніше відміну від стандартних сайтів - це неможливість вставки "звичайних" скриптів. Тобто велика частина функціоналу, зав'язана на динамічній зміні (дії при натисканні, анімація, фільтрація, модальні вікна), стає недоступною.
+
Перше і найголовніше на відміну від стандартних сайтів - це неможливість вставки "звичайних" скриптів. Тобто велика частина функціоналу, зав'язана на динамічній зміні (дії при натисканні, анімація, фільтрація, модальні вікна), стає недоступною.
 
Рішення - використання доступних компонентів і iframe.
 
Рішення - використання доступних компонентів і iframe.
Доступні компоненти дозволяють домогтися, нехай і не повною, реалізації звичних фич, але представляють їм гідну заміну і оптимізовані для швидкого завантаження.
+
Доступні компоненти дозволяють домогтися, нехай і не повною, реалізації звичних фіч, але представляють їм гідну заміну і оптимізовані для швидкого завантаження.
З їх допомогою можна зробити бічне меню, карусель, надсилання форми, підвантажуємий контент, рекламу та інше.
+
З їх допомогою можна зробити бокове меню, карусель, надсилання форми, під-завантажений контент, рекламу та інше.
 
Кожен компонент пов'язаний зі своєю js-бібліотекою, яку потрібно підключити для його використання на сайті.
 
Кожен компонент пов'язаний зі своєю js-бібліотекою, яку потрібно підключити для його використання на сайті.
  
Рядок 32: Рядок 39:
  
 
Для включення статей до збірки "Top stories google" до сторінок повинні бути додані схеми даних з короткою інформацією про статті, автора, видавництві, логотип компанії, а також дати публікації і зміни статті.
 
Для включення статей до збірки "Top stories google" до сторінок повинні бути додані схеми даних з короткою інформацією про статті, автора, видавництві, логотип компанії, а також дати публікації і зміни статті.
Використання структурних даних не є обов'язковою умовою, але для того щоб пошуковик коректно відображав дані і зміни при редагуванні, потрібно поміщати цю схему на сайт. Фактично використання AMP без цієї схеми стає безглуздим.
+
Використання структурних даних не є обов'язковою умовою, але для того щоб пошуковик коректно відобразив дані і зміни при редагуванні, потрібно поміщати цю схему на сайт. Фактично використання AMP без цієї схеми стає безглуздим.
  
==Приклад схеми даних для сторінки типу "стаття"==<br />
+
Приклад схеми даних для сторінки типу "стаття"<br />
  
<Script>
+
<Script>
 
  type = "application / ld + json">{
 
  type = "application / ld + json">{
 
   "@context": "http://photo.org",
 
   "@context": "http://photo.org",
Рядок 68: Рядок 75:
 
   },
 
   },
 
   "Description": "A most wonderful article"
 
   "Description": "A most wonderful article"
}
+
}
</ Script><br />
+
</ Script>  
  
 
Деякі значення є обов'язковими. Для структурної схеми даних так само є свій валідатор. Інформація щодо заповнення та обов'язкові поля для схеми типу "стаття" можна подивитися тут.
 
Деякі значення є обов'язковими. Для структурної схеми даних так само є свій валідатор. Інформація щодо заповнення та обов'язкові поля для схеми типу "стаття" можна подивитися тут.
Там же можна знайти інформацію по іншим типам схем. (Книги, Курси, Музика, Подкасти, Рецепти, Огляди, ТВ і Фільми, Відео)
+
Там же можна знайти інформацію по іншим типам схем. (Книги, Курси, Музика, Підкасти, Рецепти, Огляди, ТV і Фільми, Відео)
  
==Деякі особливості==
+
==Технологія AMP==
'''Логотип компанії''' 
+
Формат AMP складається з:
Є ряд вимог до логотипу: https://developers.google.com/search/docs/data-types/articles#AMPlogo guidelines
+
AMP HTML - мова HTML, в якому частина тегів замінена на еквівалентні AMP-теги, а частина заборонена для використання.
Хочу звернути увагу, що розмір повинен бути не більше і не менше 60x600px хоча б по одній зі сторін. Бажано дотримуватися висоту 60px (наприклад, 450x60px). Зображення менших розмірів, але в тих же пропорціях, що і 60x600px (наприклад 450x45px), перевірку не пройдуть.<br />
+
AMP JS - в роботі використовується власна JS-бібліотека, що дозволяє елементам сторінки завантажувати асинхронно.
 
+
Google AMP Cache - в процесі індексування AMP-сторінок, пошукова система кеширует її дані і відтворює зі своїх серверів.
Дата публікації і дата зміни
+
Дата публікації є обов'язковим параметром.
+
Дата зміни - рекомендованим.
+
Google кешує зміст статей, і дізнатися, коли він піде перевіряти всі статті на сайті знову, неможливо. Тому, якщо дата останнього зміни буде відрізнятися, буде простіше зрозуміти, що потрібно зробити новий кеш. <br />
+
Інакше можлива ситуація, коли користувач не побачить важливих змін.
+
  
==Спільні зусилля==
+
'''Відсутність звичайних <img> тегів в документі'''
AMP побудовано завдяки глибокій співпраці з тисячами розробників, видавців та веб-сайтів, платформ поширення та технологічних компаній. На сьогоднішній день опубліковано більше 1.5B сторінок AMP, а 100+ провідних аналітиків, постачальники рекламних технологій та CMS підтримують формат AMP.
+
  
 
==Відсутність звичайних <img> тегів в документі==
 
 
Всі зображення на сторінці повинні бути описані в особливому тезі <amp-img>, що ускладнює вставку зображень користувачем через текстовий редактор. Для інших елементів, де висновок зображень прописаний "руками", досить поправити верстку. Так само, якщо використовуються карусель або lightbox, потрібно вставити аналоги з компонентів
 
Всі зображення на сторінці повинні бути описані в особливому тезі <amp-img>, що ускладнює вставку зображень користувачем через текстовий редактор. Для інших елементів, де висновок зображень прописаний "руками", досить поправити верстку. Так само, якщо використовуються карусель або lightbox, потрібно вставити аналоги з компонентів
 
==Інтеграція рекламної мережі з компонентом <amp-consent>==
 
  
Реалізації DoubleClick і AdSense <amp-ad> тепер підтримують <amp-consent>, включаючи не персональну рекламу. Перегляньте детальну документацію про те, коли і як подавати не персоналізовані оголошення з DoubleClick і AdSense.
+
==Як підключити AMP==
'''<amp-ima-video> підтримка <amp-consent>'''
+
  
Видавці тепер можуть збирати згоду, використовуючи компонент <amp-ima-video>.
+
AMP-сторінки використовуються в першу чергу новиними та інформаційними сайтами. Але в зарубіжному сегменті відзначають, що впровадження технології для E-commerce не тільки можливо, але і необхідно, воно призводить до реального підвищення конверсії. Наприклад, для сайту AliExpress була збільшена конверсія на 4%. Комерційний гігант eBay також відзначає переваги застосування Accelerated Mobile Pages.
Використання параметра <amp-geo> для конфігурації на основі геолокації <amp-consent>
+
AMP надає спосіб налаштування <amp-consent> з віддаленим викликом, використовуючи поле checkConsentHref . Якщо ви хочете включити логіку на основі геолокації для <amp-consent>, вам потрібно буде вирішити геолокацію на стороні сервера та відповідно налаштувати відповідь checkConsentHref . До цих пір було неможливо мати логіку на основі геолокації без встановлення віддаленого сервера.
+
  
'''Компонент <amp-geo>'''  нещодавно запущений, щоб увімкнути зміст змісту, виходячи з приблизного місцезнаходження користувачів, на рівні коду країни ISO. Тепер ви можете використовувати цю функцію в поєднанні з <amp-consent>, що також означає, що ви можете пропустити implementation checkConsentHref, якщо ваші потреби в конфігурації не виходять за межі географічного розташування. Оформити замовлення за зразком ampbyexample.com  <amp-geo> або документацію <amp-consent> .
+
==Як реалізувати AMP==
  
'''<amp-consent> підтримка в історіях AMP'''
+
Для AMP-сторінок потрібно підготувати шаблон, який відповідає вимогам специфікації. Для кожного документа, який потрібно прискорити, по ньому створюється окрема AMP-версія. Щоб пошукова система про неї дізналася, потрібно зробити зв'язок зі звичайною. Для цього на неї додається посилання <link rel = "amphtml" href = "шлях до швидкої версії">, а на прискореної <link rel = "canonical" href = "адреса основний">.
Незабаром <amp-consent> буде доступний для використання з <amp-story>. Для випадку <amp-story> лише для випадку, більшість інтерфейсу користувача буде попередньо налаштовано, хоча для вибору виразів, що висвітлюють, для виду і відчуття, крім повного контролю над текстовим вмістом, існують вигідні варіанти. Крім того, всі інтерфейси користувача <amp-consent> в історіях AMP будуть блокувати (тобто користувацький інтерфейс для згоди не матиме додаткової кнопки закриття).
+
  
'''Нові функції в <amp-consent>'''
+
Генерацію документів за шаблоном можна зробити автоматичною, допрацювавши використовувану CMS.
support checkConsentHref для пар основних значень:  ця функція дозволяє кінцевій точці checkConsentHref реагувати на пари ключових значень, які можуть бути поширені та використані для реалізації рекламної мережі. Це корисно для видавців, які хочуть передавати додаткову інформацію про конфігурацію в рекламні мережі для показу відповідних оголошень. Ця інформація доступна для компонентів AMP, які очікують на <amp-consent> для вирішення.  
+
  
'''Тайми в <amp-consent>:'''
+
Для сайтів на популярних системах управління контентом є готові рішення, що дозволяють легко і швидко впровадити технологію:
За допомогою цієї функції видавці можуть розблокувати компоненти, які очікують на згоду після певного тайм-ауту. Функція також дозволяє видавцям налаштувати стан згоди, який буде отримано компонентами AMP, заблокованими за згодою.
+
  
==Динамічна гео-персоналізація== 
+
*WordPress - плагін і надбудова;
Документи AMP часто подається з сторонньої кеш-пам'яті; це означає, що не завжди зрозуміло, як підтримувати динамічний або персоналізований вміст. Існує цілий ряд компонентів і методів для досягнення багатьох з цих випадків використання ( amp-list , amp-state , amp-форма та amp-iframe, щоб назвати декілька), але існують деякі спільні випадки, які може зробити команда AMP набагато простіше
+
  
Зокрема, підприємства часто хочуть змінювати вміст за географічним розташуванням користувача. Найкращий спосіб зробити це для сторінок на різних мовах - це використання атрибута hreflang , але це не найкраще рішення для сторінок із невеликою гео-залежною варіацією, як-от реклама для певного мовного каталогу. Ось чому ми створили компонент amp-geo, який готовий до тестування та націлений на повний реліз наступного тижня.<br />
+
*Joomla - плагін wbAMP або JAmp;
  
'''amp-geo'''
+
*Drupal - модуль (для нього потрібні плагіни Token і Chaos Tools), тема, бібліотека;
amp-geo дозволяє легко змінювати невеликі розділи веб-вмісту для користувачів на основі наближення розташування користувачів на рівні країни, подібно до рівня ISO-коду країни . Як розробник, є лише кілька кроків:
+
  
'''''1. Включіть сценарій amp-geo''''' ''
+
*OpenCart - модуль;
  
<code>In the document <body>:
+
*Magento - плагін;
  
<amp-geo layout=”nodisplay”></amp-geo></code>
+
*PrestaShop - модуль.
  
'''''2. Включіть amp-geo тег''''' ''
+
Багато рішень для CMS генерують AMP-сторінки для окремих розділів сайту, а не всього ресурсу в цілому. Але цього достатньо, тому що специфічність технології і не вимагає реалізації на всіх доступних документах.
 
+
<code>In the document <body>:
+
 
+
<amp-geo layout=”nodisplay”></amp-geo></code>
+
 
+
'''''3. Позначте свій документ за допомогою CSS, щоб змінити вміст на основі приблизного місце знаходження користувача''''' ''
+
 
+
<code>In the <style amp-custom> tag:
+
 
+
/* defaults */
+
 
+
.flag { background-image: "./starsandstripes.png"; }
+
 
+
/* override */
+
 
+
.amp-iso-country-ca .flag { background-image: "./mapleleaf.png"; }
+
 
+
In the document <body>:
+
 
+
<div height=”300” width=”500” layout=”responsive” class=”flag”>
+
 
+
</div><br /></code>
+
 
+
 
+
'''Групи в amp-geo'''
+
Ось трохи більш розширений випадок, де ви можете скористатись функцією групування в amp-geo, щоб змінити аспект англійського діалекту за географічним розташуванням.
+
 
+
'''1. Як зазначено вище, включіть сценарій amp-geo у вашому документі'''
+
 
+
'''2. Замість того, щоб просто включити порожній тег amp-geo, налаштуйте ISOCountryGroups для зменшення кількості коду, який ви повинні написати, щоб вказати поведінку в декількох локалах.'''
+
 
+
<code>In the document <body>:
+
 
+
<amp-geo layout=”nodisplay”>
+
 
+
<script type="application/json">{
+
 
+
"“ISОСountrуGroups ”
+
 
+
{ "soccer": [ "au", "ca", "ie", "nz", "us", "za" ]
+
 
+
"football": [ "unknown" ]}
+
 
+
}</script>
+
 
+
</amp-geo><br /></code>
+
 
+
'''3. Як і в попередньому прикладі, позначте документ CSS, щоб змінити вміст на основі приблизного місце знаходження користувача'''
+
 
+
<code>In the <style amp-custom> tag:
+
 
+
/* defaults */
+
 
+
.football:after { content: 'football';}
+
 
+
/* override */
+
 
+
.amp-geo-group-soccer .football:after { content: 'soccer' }
+
 
+
In the document <body>:
+
 
+
<div>
+
 
+
The game is called <span class='football'></span>!
+
 
+
</div></code>
+
 
+
Якщо користувач перебуває в будь-якому з локалей, налаштованих на "футбол", то в тексті буде показано "Гра називається футболом!" В іншому випадку текст буде читати "Гра називається футболом!"
+
Ви можете знайти інший, більш складний приклад на AMP за прикладом , і дізнатись про більш розширені можливості функції в офіційній документації ; Наприклад, ви можете інтегрувати amp-geo з вашою аналітикою за допомогою змінної заміни або використовувати його в більш складних взаємодіях через amp-bind.
+
 
+
==Технологія AMP==
+
Формат AMP складається з:
+
AMP HTML - мова HTML, в якому частина тегів замінена на еквівалентні AMP-теги, а частина заборонена для використання.
+
AMP JS - в роботі використовується власна JS-бібліотека, що дозволяє елементам сторінки завантажувати асинхронно.
+
Google AMP Cache - в процесі індексування AMP-сторінок, пошукова система кеширует її дані і відтворює зі своїх серверів.
+
==Як зв'язати оголошення з AMP-сторінкою==
+
AMP-сторінку можна вибрати як цільову для оголошення, як і будь-яку іншу мобільну сторінку. Вам потрібно лише вказати відповідну URL-адресу в полі "Мобільний URL" для оголошення або ключового слова. Після цього користувачі, натиснувши на оголошення, перейдуть на AMP-сторінку.
+

Поточна версія на 12:01, 8 листопада 2018

Accelerated Mobile Pages.jpg

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-сторінкою

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

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

АМР ua.jpg

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-сторінки для окремих розділів сайту, а не всього ресурсу в цілому. Але цього достатньо, тому що специфічність технології і не вимагає реалізації на всіх доступних документах.