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

Версія за 11:25, 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 і Фільми, Відео)

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

Логотип компанії

Є ряд вимог до логотипу: 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-consent>

Реалізації DoubleClick і AdSense <amp-ad> тепер підтримують <amp-consent>, включаючи не персональну рекламу. Перегляньте детальну документацію про те, коли і як подавати не персоналізовані оголошення з DoubleClick і AdSense.

<amp-ima-video> підтримка <amp-consent> Видавці тепер можуть збирати згоду, використовуючи компонент <amp-ima-video>. Використання параметра <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-consent> підтримка в історіях AMP Незабаром <amp-consent> буде доступний для використання з <amp-story>. Для випадку <amp-story> лише для випадку, більшість інтерфейсу користувача буде попередньо налаштовано, хоча для вибору виразів, що висвітлюють, для виду і відчуття, крім повного контролю над текстовим вмістом, існують вигідні варіанти. Крім того, всі інтерфейси користувача <amp-consent> в історіях AMP будуть блокувати (тобто користувацький інтерфейс для згоди не матиме додаткової кнопки закриття).

Нові функції в <amp-consent> support checkConsentHref для пар основних значень: ця функція дозволяє кінцевій точці checkConsentHref реагувати на пари ключових значень, які можуть бути поширені та використані для реалізації рекламної мережі. Це корисно для видавців, які хочуть передавати додаткову інформацію про конфігурацію в рекламні мережі для показу відповідних оголошень. Ця інформація доступна для компонентів AMP, які очікують на <amp-consent> для вирішення.

Тайми в <amp-consent>: За допомогою цієї функції видавці можуть розблокувати компоненти, які очікують на згоду після певного тайм-ауту. Функція також дозволяє видавцям налаштувати стан згоди, який буде отримано компонентами AMP, заблокованими за згодою.

Динамічна гео-персоналізація

Документи AMP часто подається з сторонньої кеш-пам'яті; це означає, що не завжди зрозуміло, як підтримувати динамічний або персоналізований вміст. Існує цілий ряд компонентів і методів для досягнення багатьох з цих випадків використання ( amp-list , amp-state , amp-форма та amp-iframe, щоб назвати декілька), але існують деякі спільні випадки, які може зробити команда AMP набагато простіше

Зокрема, підприємства часто хочуть змінювати вміст за географічним розташуванням користувача. Найкращий спосіб зробити це для сторінок на різних мовах - це використання атрибута hreflang , але це не найкраще рішення для сторінок із невеликою гео-залежною варіацією, як-от реклама для певного мовного каталогу. Ось чому ми створили компонент amp-geo, який готовий до тестування та націлений на повний реліз наступного тижня.

amp-geo amp-geo дозволяє легко змінювати невеликі розділи веб-вмісту для користувачів на основі наближення розташування користувачів на рівні країни, подібно до рівня ISO-коду країни . Як розробник, є лише кілька кроків:

1. Включіть сценарій amp-geo

In the document <body>:

<amp-geo layout=”nodisplay”></amp-geo>

2. Включіть amp-geo тег

In the document <body>:

<amp-geo layout=”nodisplay”></amp-geo>

3. Позначте свій документ за допомогою CSS, щоб змінити вміст на основі приблизного місце знаходження користувача

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>:

Групи в amp-geo

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

1. Як зазначено вище, включіть сценарій amp-geo у вашому документі

2. Замість того, щоб просто включити порожній тег amp-geo, налаштуйте ISOCountryGroups для зменшення кількості коду, який ви повинні написати, щоб вказати поведінку в декількох локалах.

In the document <body>:

<amp-geo layout=”nodisplay”>

<script type="application/json">{

“ISОСountrуGroups”

</amp-geo>


3. Як і в попередньому прикладі, позначте документ CSS, щоб змінити вміст на основі приблизного місце знаходження користувача

In the <style amp-custom> tag:

/* defaults */

.football:after { content: 'football';}

/* override */

.amp-geo-group-soccer .football:after { content: 'soccer' }

In the document <body>:

Якщо користувач перебуває в будь-якому з локалей, налаштованих на "футбол", то в тексті буде показано "Гра називається футболом!" В іншому випадку текст буде читати "Гра називається футболом!" Ви можете знайти інший, більш складний приклад на AMP за прикладом , і дізнатись про більш розширені можливості функції в офіційній документації ; Наприклад, ви можете інтегрувати amp-geo з вашою аналітикою за допомогою змінної заміни або використовувати його в більш складних взаємодіях через amp-bind.

Технологія AMP

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

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

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