Головна » Мобільний телефон » 10 Важливі прискорені компоненти мобільних сторінок (AMP), які ви повинні знати
10 Важливі прискорені компоненти мобільних сторінок (AMP), які ви повинні знати
Прискорені мобільні сторінки або AMP є ініціативою Google для зробити мобільний Інтернет швидшим. Для досягнення цієї мети стандарти AMP обмежують, як можна використовувати HTML, CSS, і JavaScript, і управляє завантаженням зовнішніх ресурсів, такі як зображення, відео та оголошення за допомогою власної середовища виконання.
Це тягне за собою те, що ви не можна використовувати або будь-який JavaScript (авторський письмовий або сторонній) або будь-які інші HTML-елементи, пов'язані з ресурсами, такі як зображення та відео в документах AMP.
Для подолання розриву між потребами користувачів та найкращими методами роботи AMP має конкретні компоненти ти можеш використовувати замість цих виключених елементів.
Компоненти AMP є певні теги HTML. Вони ведуть себе подібно до звичайних HTML-тегів: у них є відкриваючі та закриваючі теги, атрибути, і більшість з них можуть бути стилізовані за допомогою CSS. Їх можна легко розпізнати, як вони завжди починати з amp- префікс.
Існує два типи компонентів AMP: вбудований і розширено Компоненти.
Вбудовані компоненти AMP
Вбудовані пристрої вбудовані до середовища виконання JavaScript AMP, тому їх не потрібно окремо включати.
1. amp-img
замінює тег у документах HTML AMP. Потрібно додати src і alt атрибути так само, як і при роботі з звичайним елемент.
також має два інші необхідні атрибути: вам завжди потрібно вкажіть ширина і висота атрибути у значеннях цілого пікселя, оскільки це дозволяє виконувати AMP Розрахуйте розкладку заздалегідь.
Якщо ти хочеш зробити зображення чуйним, додайте layout = "responsive" атрибут. The макет атрибут керує макетом в документах AMP, і він може бути доданий до будь-яких компонентів AMP (докладніше про це можна дізнатися в системі AMP Layout System).
Ви також можете використовувати srcset атрибут на тег вказати різні зображення для різних вікон та щільності пікселів. Він працює так само, як і з зображеннями, які не є AMP.
2. amp-video
можна використовувати безпосередньо вставляти відео HTML у документах HTML AMP. Він замінює у файлах AMP. The тег ледачий завантажує відео для оптимізації продуктивності.
Джерело відео необхідно подавати через протокол HTTPS. Ви повинні додати ширина і висота атрибути, подібно до компонент.
The тег має багато додаткових атрибутів, таких як автоматичне відтворення і плакат яку можна вказати для точного налаштування відображення вашого відео HTML5.
підтримує mp4, webm, ogg та всі інші формати, які підтримує HTML5
Якщо хочете, ви також можете додайте запасні відео для користувачів з веб-переглядачами, які не підтримують HTML5-відео, використовуючи відступати атрибут і Тег HTML.
Ваш браузер не підтримує відео HTML5.
3. amp-ad і amp-embed
надає вам пісочниці iframe в якому ви можете відображати ваші оголошення. Потрібно показувати свої об’яви через протокол HTTPS.
Ви не можете самостійно запускати сценарії, надані вашою рекламною мережею. Натомість час виконання AMP виконує JavaScript цієї мережі всередині пісочниці. ти потрібно лише вказати, яку мережу ви використовуєте, і додати свої дані.
The компонент вимагає від вас додати розміри оголошення за допомогою ширина і висота атрибути.
Можна визначити рекламну мережу, яку ви використовуєте з тип атрибут. Перегляньте список підтримуваних рекламних мереж.
Кожна рекламна мережа має свою дані- * атрибути також потрібно додати. Щоб дізнатися, який вам потрібний, натисніть на рекламну мережу у наведеному вище списку.
є псевдонімом , документація не говорить багато про неї, окрім як вона може бути використана замість коли це семантично більш точні. Оскільки Google обіцяє з часом розвивати компоненти AMP, пов'язані з рекламою, це може змінитися в майбутньому.
4. amp-pixel
С , ти можеш додати піксель відстеження до HTML-документів AMP кількість переглядів сторінок. Вона має тільки один атрибут, необхідний src атрибут, в якому потрібно вкажіть URL-адресу, що належить пікселю відстеження.
The тег дозволяє стандартні заміни URL-адрес, це означає, що ви можете генерувати випадкове значення URL для відстеження кожного показу.
Див. Посібник із заміни URL-адреси AMP, якщо ви хочете використовувати цей компонент. Зверніть увагу, що ви не можете ввести стиль компонент.
Розширені компоненти AMP
Як розширені компоненти AMP не є частиною часу виконання JavaScript, ти завжди потрібно імпортувати їх в сторінки AMP, на якій ви хочете їх використовувати.
Примітка: версії компонентів можуть змінюватися в майбутньому, тому не забувайте перевірте поточну версію в документації.
5. amp-аудіо
замінює HTML5 і дає можливість безпосередньо вставляти аудіофайли HTML5 на сторінках AMP.
Щоб скористатися нею, потрібно вказати src, ширина і висота атрибути, а також можна додати три необов'язкові атрибути: автоматичне відтворення, петлі і вимкнено.
Це також може бути гарною ідеєю додайте запасні аудіо файли для користувачів з браузерами, які не підтримують HTML5. Це можна зробити за допомогою відступати атрибут і як і з вищезгаданим компонент.
The Компонент AMP підтримує ті ж аудіоформати, що і Тег HTML5.
Ваш браузер не підтримує звук HTML5.
Використовувати , включити наступний сценарій у розділу документа AMP:
6. amp-iframe
відображає iframe в документах AMP. було зроблено більш безпечним, ніж звичайні фрейми HTML. Тому вони є заблоковано за умовчанням.
Є деякі правила, пов'язані з необхідно пройти перевірку.
Необхідно вказати ширина, висота, і пісочниці атрибути. The пісочниці за замовчуванням порожній атрибут, але ви можете надати йому різні значення, щоб змінити поведінку iframe, наприкладsandbox = "allow-scripts"дозволяє iframe запускати JavaScript. Ви також можете використовувати атрибути стандартних фреймів.
Поки розміри попередньо визначені ширина і висота атрибутів, є спосіб змінити його розмір під час виконання. Для використання компонент, додайте наступний скрипт на сторінку AMP:
7. amp-акордеон
Акордеони є частим шаблоном інтерфейсу в мобільному дизайні, оскільки вони економить простір, але все ще відображає вміст доступним способом. дозволяє швидко додайте акордеони на сторінки AMP.
Розділи гармошки повинні використовувати Тег HTML5 і повинен бути прямі діти з тег.
Кожен розділ повинні мати двох прямих дітей:
один для заголовка
один для вмісту (вміст також може бути зображенням)
Використовувати розширено атрибут у будь-якому розділі, який потрібно розгорнути за замовчуванням.
Розділ 1
Зміст розділу 1
Розділ 2
Зміст розділу 2
Розділ 3
Зображення для розділу 3
Для використання компонент у вашому документі AMP, включіть такий сценарій:
8. amp-lightbox
додає лайтбокс на різні елементи (у більшості випадків, зображення) на прискорених мобільних сторінках.
Коли користувач взаємодіє з елементом, наприклад, натискає на нього, лайтбокс розширює і заповнює весь вікно. Тобі потрібно додати кнопку або інший елемент керування яку користувач може натиснути.
Зверніть увагу на це amp-lightbox можна використовувати лише з nodisplay макет.
Для використання компонент, потрібно імпортувати його за допомогою наступного коду:
9. ампер-карусель
Каруселі часто використовуються в мобільному дизайні, як вони дозволяють відображення численних схожих елементів (найчастіше зображення) вздовж горизонтальної осі. Результати AMP також представлені у форматі каруселі в Пошуку Google.
The компонент дозволяє додавати каруселі до вашого сайту. The прямі діти з компонент буде розглядатися як елементи каруселі. Ви повинні визначити розміри каруселі за допомогою ширина і висота атрибути.
Можна використовувати додатковий тип атрибут для визначення як відобразити елементи каруселі. Якщо тип атрибут приймає "карусель" значення, елементи будуть показані як суцільна смуга (це за замовчуванням), у той час як "слайди" Значення буде відображати елементи у форматі слайдів.
The тег також має інші необов'язкові атрибути, які допоможуть вам точно налаштувати результат.
У наведеному нижче прикладі зверніть увагу, що і карусель, і всі його елементи використовувати те ж саме ширина і висота значення.
The компонент вимагає додавання наступного сценарію:
10. amp-analytics
можна використовувати збирати аналітичні дані на сторінках AMP. В даний час, підтримує чотири типи відстеження подій, однак це може змінитися в майбутньому:
Перегляд сторінки
Якірні кліки
Таймер
Прокрутка
Використовувати , тобі потрібно додати об'єкт конфігурації JSON всередині a
Додайте наступний сценарій до на сторінці AMP HTML для імпортування компонент:
Заключні слова
У цій посаді ми розглянули всі вбудовані компоненти AMP, а деякі - розширені. Оскільки прискорені мобільні сторінки все ще нові, багато що може змінитися в майбутньому, тому варто стежити за документацією на Github або на офіційному сайті AMP.
Оскільки ці компоненти AMP є відкритими, ви також можете внести свій внесок у розвиток створення власного компонента. Якщо ви хочете побачити, як виглядає повна сторінка AMP з різними компонентами, ви можете перевірити ці кілька прикладів на Github.
