Google AMP — Обзор

Google Accelerated Mobile Pages (Google-AMP) — это новый проект Google с открытым исходным кодом, специально разработанный для создания облегченных веб-страниц с использованием amp html. Основная цель этого проекта — убедиться, что код усилителя работает нормально и быстро загружается на все возможные устройства, такие как смартфоны, планшеты и т. Д.

Что такое AMP?

Accerated Mobile Pages (AMP) — это проект Google с открытым исходным кодом, специально разработанный для того, чтобы сделать веб-страницы мобильными, делая их более быстрыми, плавными и отзывчивыми в любом браузере.

Официальный сайт Google amp — https://www.ampproject.org/

ПОЧЕМУ АМП?

Любой пользователь ожидает, что веб-сайты будут загружать содержимое очень быстро. Однако это может быть не тот случай, когда страницы почти заполнены изображениями, видео, анимацией, социальными виджетами, что делает страницу очень тяжелой и, следовательно, увеличивает время ее загрузки. Такой сценарий может привести к потере пользователей на веб-сайте в долгосрочной перспективе.

Google AMP предназначен для решения этой проблемы. У AMP есть особый способ заботиться об изображениях, iframes, javascript, рекламе, видео, анимации, CSS, шрифтах и ​​т. Д. Содержимое страниц AMP кэшируется в конце Google, поэтому каждый раз, когда пользователь нажимает на результаты поиска, контент подается из кеша. Версия кеша также обновляется своевременно, чтобы пользователь всегда получал свежую обновленную страницу.

Почему выбрать AMP?

В этом разделе рассказывается, почему вы должны выбрать AMP для своего сайта —

Приоритет в поиске Google

Сегодня, когда вы что-то ищете в Google, вы найдете карусель Google, отображаемую вверху со страницами, за которой следует список страниц в ответ на ваш запрос. На карусели новостей отображаются все действующие сайты AMP. Это означает, что Google отдает приоритет страницам усилителей и отображает их в соответствии с рейтингом в новостной карусели.

Здесь приведен пример поиска в Google с ключевым словом « последние новости Индии » —

Все страницы с высоким рейтингом, которые являются страницами AMP, отображаются в начале в карусели Google, как показано на рисунке выше.

Страница Google AMP выглядит, как показано ниже, когда пользователь выполняет поиск в поиске Google. Обратите внимание, что на страницах AMP есть логотип Google AMP.

Более быстрое время загрузки

Когда ваша страница конвертируется в AMP, время загрузки будет намного лучше по сравнению со страницей без усилителя. Более быстрое время загрузки также является важным фактором в рейтинге страниц в поиске Google.

Нет всплывающих окон

Использование Google AMP дает приятный опыт просмотра веб-страниц, поскольку пользователь не увидит никаких нежелательных всплывающих окон для страниц, созданных с помощью Google AMP.

Генерирует трафик

Когда скорость загрузки страниц высокая, она автоматически увеличивает количество зрителей и, следовательно, увеличивается трафик на страницу.

Как работает AMP?

Наиболее важными компонентами, которые используются для создания веб-сайта, являются javascript, изображения, видео, шрифты, CSS и т. Д. Дизайн страницы AMP выполняется с учетом всех этих факторов уникальным способом. В этом разделе давайте кратко обсудим, что именно AMP делает для ускорения работы страниц.

Асинхронный JavaScript

Javascript играет важную роль на странице, так как он помогает добавлять интерактивность на страницу в виде анимации, изменений в DOM и т. Д. Он также добавляет медлительность странице и может блокировать отображение другого содержимого на странице.

Как AMP справляется с JavaScript?

AMP загружает JavaScript асинхронно. Пользовательский JavaScript строго запрещен на странице AMP. Обратите внимание, что в AMP добавлено много компонентов, некоторые из которых являются заменой существующим тегам HTML; например, amp-img, amp-iframe, amp-video, amp-lightbox, amp-animation и т. д.

Для каждого из этих компонентов есть загружаемый файл JavaScript с атрибутом async, добавленным в тег сценария. На этой странице разрешены только файлы JavaScript, связанные с компонентами amp, и любой другой JavaScript внутри страницы AMP или стороннего файла javascript запрещен. Поскольку AMP использует кэш Google AMP, файлы предварительно загружаются из кэша, что ускоряет их загрузку.

Размеры для тегов HTML

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

Социальные виджеты / объявления

Amp предоставляет специальные компоненты: amp-facebook, amp-twitter, amp-ad, amp-sticky, чтобы заботиться о социальных виджетах, которые будут отображаться на странице. Компонент AMP-ad используется для показа рекламы на странице. AMP уделяет особое внимание обращению с компонентами и загружает содержимое в приоритетном порядке в соответствии с требованиями.

CSS

Внешний CSS не допускается на страницах AMP. Пользовательский CSS, если таковой имеется, может быть добавлен в тег style с помощью атрибута amp-custom. Встроенный CSS также допускается. AMP уменьшает HTTP-запросы всеми возможными способами.

шрифты

Шрифты разрешены на страницах усилителей, и приоритет загрузки шрифтов определяется AMP.

Анимация

AMP поддерживает компоненты amp-animation и позволяет переход, как это поддерживается современными браузерами.

Принимая во внимание все перечисленные выше пункты, AMP уделяет особое внимание HTTP-запросу, выполненному для шрифтов, изображений, фреймов, рекламных объявлений и т. Д. Сначала отображаются ресурсы, доступные над сгибом страницы, а затем предпочтение отдается ресурсам, доступным ниже сгиба. ,

Другие пункты

Google AMP Cache — еще один важный фактор, который помогает ускорить рендеринг контента, поскольку контент извлекается из кэша.

Издатель должен поддерживать два сайта amp и без усилителя страницы. Например, учтите, что у сайта есть адрес — https://www.mypage.com . Тогда внутренние страницы для не-усилителя для обслуживания на рабочем столе будут https://www.mypage.com/news . Для устройств или AMP это будет: https: //www.mypage/com/news/amp/

Как Google определяет страницу AMP и не-AMP?

Теперь давайте разберемся, как Google определяет страницы AMP и Non-AMP.

• Когда поиск Google сканирует страницу, если он получает усиление в формате html или <html amp> или <html ⚡>, он знает, что это страница AMP.

• Кроме того, в случае, если Google встречает страницу без усилителя, сначала, чтобы узнать о странице усилителя, необходимо добавить следующие теги ссылок в разделе заголовка html-страницы как для страниц с усилителем, так и для страниц без усилителя.

Когда поиск Google сканирует страницу, если он получает усиление в формате html или <html amp> или <html ⚡>, он знает, что это страница AMP.

Кроме того, в случае, если Google встречает страницу без усилителя, сначала, чтобы узнать о странице усилителя, необходимо добавить следующие теги ссылок в разделе заголовка html-страницы как для страниц с усилителем, так и для страниц без усилителя.

URL-адрес страницы без усилителя

<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

Здесь rel = ”amphtml” указывается для страницы без усилителя, чтобы указать версию усилителя, так что Google показывает правильную версию на основе платформы.

URL-адрес страницы-усилителя

<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">

Здесь rel = ”canonical” указывается на странице amp для указания на стандартную версию html, так что Google показывает правильную версию на основе платформы.

Если на вашем сайте есть только одна страница с усилителем, все же вы не должны забывать добавить rel = ”canonical”, которая будет указывать на себя —

<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

Следующая диаграмма показывает ссылку на rel = ”amphtml”, указывающую на страницу amp, и rel = ”canonical”, указывающую на стандартную страницу html.

Особенности Google AMP

В этом разделе давайте обсудим важные функции, доступные в Google AMP —

Amp Caching

Кэширование Google Amp является одной из основных функций, добавленных в amp. Он предоставляет сеть доставки контента на основе прокси-сервера для обслуживания чистых страниц amp. По умолчанию кэш-память усилителя доступна для всех допустимых страниц amp. Это помогает ускорить рендеринг страниц по сравнению с страницами без усилителей. AMP Cache и Cloudflare AMP Cache. Когда пользователь щелкает и перенаправляется на страницу усилителя, контент подается из кеша Google.

Компоненты усилителя

Amp имеет большой список компонентов, предназначенных для различных целей. Некоторые из них перечислены ниже —

• amp-img — используется для отображения изображений на страницах усилителя.

• amp-iframe — используется для отображения iframe с внешним контентом, который будет отображаться на страницах. Обратите внимание, что используемый iframe находится в «песочнице», что означает, что для отображения данных на странице усилителя требуется разрешение. Таким образом, для атрибута «песочница» необходимо указать детали перекрестного происхождения.

• amp-video — показывать видео на странице.

• amp-audio — для отображения аудио на странице.

• amp-datepicker — Используется для отображения виджетов даты на странице. Вам не нужно идти на какие-либо сторонние сборщики дат, так как то же самое можно получить напрямую.

• amp-story — среда для отображения ваших историй на странице.

• amp-selector — это компонент усилителя, который отображает меню опций, и пользователь может выбирать между опциями. Отображаемые параметры могут быть текстом, изображениями или любым другим компонентом усилителя.

• amp-list — компонент amp, который вызывает конечную точку json CORS, и данные из файла json отображаются внутри шаблона.

amp-img — используется для отображения изображений на страницах усилителя.

amp-iframe — используется для отображения iframe с внешним контентом, который будет отображаться на страницах. Обратите внимание, что используемый iframe находится в «песочнице», что означает, что для отображения данных на странице усилителя требуется разрешение. Таким образом, для атрибута «песочница» необходимо указать детали перекрестного происхождения.

amp-video — показывать видео на странице.

amp-audio — для отображения аудио на странице.

amp-datepicker — Используется для отображения виджетов даты на странице. Вам не нужно идти на какие-либо сторонние сборщики дат, так как то же самое можно получить напрямую.

amp-story — среда для отображения ваших историй на странице.

amp-selector — это компонент усилителя, который отображает меню опций, и пользователь может выбирать между опциями. Отображаемые параметры могут быть текстом, изображениями или любым другим компонентом усилителя.

amp-list — компонент amp, который вызывает конечную точку json CORS, и данные из файла json отображаются внутри шаблона.

реклама

Реклама очень важна для издателей, поскольку их доход полностью зависит от рекламы, размещаемой на странице. Amp не разрешает добавление какого-либо внешнего javascript на страницу, но имеет специальный компонент amp под названием amp-ad, который заботится о размещении рекламы на странице.

Рекламная сеть, которую издатель хочет разместить на своей странице, нуждается в поддержке рекламы. Например, для показа объявлений с двойным кликом на странице двойной щелчок должен поддерживать показ объявлений с использованием компонента amp-ad. Следующий код показывает тег amp-ad двойного клика.

<amp-ad width = "300"
   height = "200"
   type = "doubleclick"
   data-slot = "/4119129/ad-layout">
   <div placeholder>
      <b>Placeholder here!!!</b>
   </div>
</amp-ad>

Amp также поддерживает amphtmlads, которые являются чистыми ampads, разработанными из компонентов AMP и HTML. Amp также поддерживает amp-sticky-ads, объявление нижнего колонтитула, отображаемое в нижней части страницы. Детали рекламы в усилителе обсуждаются в главе об объявлениях усилителя.

Социальные виджеты

Социальные виджеты, такие как Facebook, Twitter, Instagram, стали очень важными для отображения на странице издателя, чтобы страницы были доступны для всех социальных сетей. AMP распространил свою поддержку на все важные виджеты социальных сетей, которые будут использоваться на странице, путем разработки компонентов AMP, таких как amp-facebook, amp-twitter, amp-instagram, amp-pinterest и т. Д.

Amp Media

Другим важным компонентом на страницах является медиа для показа видео, а также для показа рекламы между видео в качестве рекламы в середине ролика. AMP предоставляет средство для этого с помощью amp-jwplayer, amp-youtube и т. Д. Вам не нужно загружать какие-либо дополнительные сторонние файлы, чтобы иметь jwplayer, youtube, который будет отображаться на вашей странице.

Amp Analytics

Amp analytics — это компонент AMP, используемый для отслеживания данных на заданной странице. Все взаимодействие с пользователем на странице может быть записано и сохранено для анализа данных для дальнейшего улучшения или бизнес-целей.

Amp Animations

Amp-animation — это компонент amp, который определяет анимацию, которая будет использоваться на других компонентах amp. IT поддерживает анимацию, переход которой хорошо работает с современным браузером. Вам не нужно использовать какую-либо внешнюю библиотеку CSS для выполнения анимации и можете использовать компонент amp-animation.

Макеты усилителей

AMP-Layout — одна из важных функций, доступных в google-amp. Amp Layout обеспечивает правильное отображение компонентов усилителя при загрузке страницы, не вызывая проблем с мерцанием или прокруткой.

Google AMP гарантирует, что визуализация макета выполняется на странице до того, как будут выполнены любые другие удаленные ресурсы, такие как http-запрос изображений, вызовы данных. Атрибутами, доступными для макета, являются ширина / высота для всех компонентов усилителя, атрибут макета со значениями, такими как отзывчивый, заливка, фиксированный и т. Д., Атрибут-заполнитель, который должен отображаться, когда для загрузки ресурса требуется время, или имеется какая-либо ошибка, атрибут отката, который должен отображаться при ресурс имеет какую-либо ошибку.

Макеты дисплея усилителя

Amp поддерживает множество компонентов, используемых для отображения контента на странице, без необходимости использования какой-либо сторонней библиотеки или без использования какого-либо тяжелого CSS на странице. Список включает в себя

• Аккордеон — Amp-accordion — это компонент усилителя, используемый для отображения контента в формате развернутого коллапса. Пользователям становится легко просматривать его на мобильных устройствах, где они могут выбрать раздел по своему выбору из аккордеона.

• Carousel — Amp-carousel — это компонент-усилитель, который отображает набор аналогичного содержимого на экране и использует стрелки для переключения между содержимым.

• Lightbox — Amp-lightbox — это компонент усилителя, который занимает весь видовой экран и отображается как наложение.

• Слайдер — Amp-image-slider — это компонент усилителя, используемый для сравнения 2 изображений путем добавления ползунка при его вертикальном перемещении по изображению.

• Боковая панель — боковая панель усилителя — это компонент усилителя, используемый для отображения содержимого, которое скользит по краям окна при нажатии кнопки.

Аккордеон — Amp-accordion — это компонент усилителя, используемый для отображения контента в формате развернутого коллапса. Пользователям становится легко просматривать его на мобильных устройствах, где они могут выбрать раздел по своему выбору из аккордеона.

Carousel — Amp-carousel — это компонент-усилитель, который отображает набор аналогичного содержимого на экране и использует стрелки для переключения между содержимым.

Lightbox — Amp-lightbox — это компонент усилителя, который занимает весь видовой экран и отображается как наложение.

Слайдер — Amp-image-slider — это компонент усилителя, используемый для сравнения 2 изображений путем добавления ползунка при его вертикальном перемещении по изображению.

Боковая панель — боковая панель усилителя — это компонент усилителя, используемый для отображения содержимого, которое скользит по краям окна при нажатии кнопки.

Преимущества AMP

• Страницы AMP легки и загружаются быстрее

• Google отдает приоритет страницам AMP в поиске Google. Страницы AMP перечислены в формате карусели в верхней части страницы. Чтобы получить более высокий рейтинг, полезно иметь свои страницы в AMP.

• Страницы AMP удобны для мобильных устройств, так как контент адаптивен и хорошо настраивается во всех браузерах без необходимости каких-либо дополнительных стилей.

• Удовлетворенность пользователей увеличивается для страниц AMP, поскольку скорость загрузки страниц выше по сравнению с страницами без усилителей, что позволяет сэкономить их пропускную способность и мобильную батарею.

Страницы AMP легки и загружаются быстрее

Google отдает приоритет страницам AMP в поиске Google. Страницы AMP перечислены в формате карусели в верхней части страницы. Чтобы получить более высокий рейтинг, полезно иметь свои страницы в AMP.

Страницы AMP удобны для мобильных устройств, так как контент адаптивен и хорошо настраивается во всех браузерах без необходимости каких-либо дополнительных стилей.

Удовлетворенность пользователей увеличивается для страниц AMP, поскольку скорость загрузки страниц выше по сравнению с страницами без усилителей, что позволяет сэкономить их пропускную способность и мобильную батарею.

Недостатки AMP

Усилитель обладает следующими недостатками —

• Издатель должен поддерживать две версии для своих страниц amp и non-amp.

• Пользователь должен приложить дополнительные усилия для преобразования страниц без усилителя в amp. Поскольку amp не поддерживает пользовательский javascript или загрузку внешнего javascript, то же самое должно быть достигнуто с помощью того, что доступно с amp.

Издатель должен поддерживать две версии для своих страниц amp и non-amp.

Пользователь должен приложить дополнительные усилия для преобразования страниц без усилителя в amp. Поскольку amp не поддерживает пользовательский javascript или загрузку внешнего javascript, то же самое должно быть достигнуто с помощью того, что доступно с amp.

Google AMP — Введение

Google Accelerated Mobile Pages (Google-AMP) — это новый проект Google с открытым исходным кодом, специально разработанный для создания облегченных веб-страниц с использованием amp html. Основная цель этого проекта — убедиться, что код AMP работает нормально и быстро загружается на все возможные устройства, такие как смартфоны и планшеты.

AMP — это просто расширение стандартного HTML. Немного HTML-тегов были изменены, и AMP добавил ограничения на их использование. В этой главе мы перечислим html-теги, которые были изменены, и ограничения, добавленные к ним. Теги, связанные с загрузкой внешних ресурсов, например изображений, CSS, JS, отправка форм, видео, аудио и т. Д., Изменены.

Также есть много новых функций, добавленных в amp, например amp-date-picker, amp-facebook, amp-ad, amp-analytics, amp-ad, amp-lightbox и многое другое, которые можно использовать непосредственно на HTML-страницах. Остальные, которые предназначены для отображения, используются как есть.

Со всеми этими изменениями и новыми функциями AMP обещает обеспечить более быструю загрузку и лучшую производительность для страниц при использовании в реальной среде.

Когда вы что-то ищете в поиске Google на своем мобильном устройстве, в верхней части карусели Google отображаются в основном страницы с усилителями, как показано ниже.

Когда вы нажимаете на страницу AMP, URL-адрес, который вы получаете в адресной строке, выглядит следующим образом:

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms

URL-адрес не поступает напрямую от издателя, но Google указывает его на свою собственную копию на сервере Google, которая является кэшированной версией и помогает быстрее отображать контент по сравнению со страницей без усилителя. Это произойдет только на устройствах или в режиме эмулятора Google.

Пример страницы усилителя

Пример страницы усилителя показан ниже —

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      <script type = application/json>{
         "vars": {
            "uid": "23870",
            "domain": "dummyurl.com",
            "sections": "us",
            "authors": "Hello World"
         }
      }
      </script>
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>   
         <amp-img src = "imgurl.jpg" width = "300" height = "300" 
            layout = "responsive"></amp-img>
      </p>
      <amp-ad width = "300" height = "250" type = "doubleclick"
         data-slot = "/4119129/no-ad">
         <div fallback>
            <p style = "color:green;font-size:25px;">No ads to Serve!</p>
         </div>
      </amp-ad>
   </body>
</html>

Что можно и нельзя делать на странице AMP

Давайте поймем, что нужно делать, а что нельзя, программист должен следовать на странице AMP.

Обязательные теги

Есть несколько обязательных тегов, которые должны быть включены в страницу усилителя, как указано ниже —

• Мы должны убедиться, что к тегу html добавлен amp или as, как показано ниже —

Мы должны убедиться, что к тегу html добавлен amp или as, как показано ниже —

<html amp>
   OR
<html ⚡>

• Теги <head> и <body> должны быть добавлены на html-страницу.

• Следующие обязательные метатеги должны быть добавлены в раздел заголовка страницы; в противном случае произойдет сбой для проверки усилителя.

Теги <head> и <body> должны быть добавлены на html-страницу.

Следующие обязательные метатеги должны быть добавлены в раздел заголовка страницы; в противном случае произойдет сбой для проверки усилителя.

<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale = 1, initial-scale = 1">

• Ссылка rel = «canonical» будет добавлена ​​внутри тега head

Ссылка rel = «canonical» будет добавлена ​​внутри тега head

<link rel = "canonical" href = "./regular-html-version.html">

• Бирка стиля с усилителем-шаблоном —

Бирка стиля с усилителем-шаблоном —

<style amp-boilerplate>
   body{
      -webkit-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;animation:
      -amp-start 8s steps(1,end) 0s 1 normal both
   }
   @-webkit-keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>

• Noscript тег с усилителем-образцом —

Noscript тег с усилителем-образцом —

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none
      }
   </style>
</noscript>

• Очень важен тег сценария amp с добавленной асинхронностью, как показано ниже —

Очень важен тег сценария amp с добавленной асинхронностью, как показано ниже —

<script async src = "https://cdn.ampproject.org/v0.js"> </script>

• Если вы хотите добавить пользовательский CSS на страницу, пожалуйста, отметьте здесь, что мы не можем вызвать внешнюю таблицу стилей на страницах усилителя. Чтобы добавить пользовательский CSS, весь ваш CSS должен идти здесь, как показано на рисунке —

Если вы хотите добавить пользовательский CSS на страницу, пожалуйста, отметьте здесь, что мы не можем вызвать внешнюю таблицу стилей на страницах усилителя. Чтобы добавить пользовательский CSS, весь ваш CSS должен идти здесь, как показано на рисунке —

<style amp-custom>
   //all your styles here
</style>

• К тегу style должен быть добавлен атрибут amp-custom.

К тегу style должен быть добавлен атрибут amp-custom.

Скрипты для компонентов AMP

Обратите внимание, что сценарии с src и type = ”text / javascript” строго запрещены на странице amp. Только заголовки сценариев, которые асинхронны и связаны с компонентами amp, могут быть добавлены в раздел head.

В этом разделе перечислены несколько сценариев, используемых для компонентов усилителя, как указано ниже —

Усилитель-объявления

<script async custom-element = "amp-ad" 
   src = "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
</script>

амп-IFrame

<script async custom-element = "amp-iframe" 
   src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>

Обратите внимание, что скрипт имеет атрибут async и custom-element с именем загружаемого компонента amp. Amp проверяет теги сценариев на основе асинхронных свойств и свойств пользовательских элементов и не позволяет загружать другие сценарии. Требуется type = application / json, который мы добавили в пример файла, как показано ниже

<type = application/json>
{
   "vars": {
      "uid": "23870",
      "domain": "dummyurl.com",
      "sections": "us",
      "authors": "Hello World"
   }
}
</script>

Приведенный выше сценарий может использоваться с другими компонентами amp, если требуется, например, для amp-analytics.

HTML-теги

До сих пор мы видели обязательные теги, необходимые на странице усилителя. Теперь мы обсудим элементы HTML, которые разрешены / запрещены, и ограничения, наложенные на них.

Вот список HTML-тегов, которые разрешены / запрещены —

<script async custom-element = "amp-form"
   src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>

Allowed.<input[type = image]>, 
<input[type = button]>,
<input[type = password]>, 
<input[type = file]> 
are not allowed

IMG

Этот тег заменен на amp-img. Использование прямого тега img на странице AMP запрещено

видео

Заменено на усилитель-видео

аудио

Заменено на усилитель-аудио

IFrame

Заменено на amp-iframe

объект

Не положено

встраивать

Не положено

форма

Может использоваться как <form>. Нам нужно добавить скрипт для работы с формой на странице AMP.

Пример —

Элементы ввода

<FIELDSET>

Позволил

<метка>

Позволил

P, div, header, footer, section

Позволил

кнопка

Позволил

Тег <a> допускается при следующих условиях, href не должен начинаться с javascript. Если присутствует целевой атрибут, значение должно быть _blank.

SVG

Не положено

мета

Позволил

Ссылка на сайт

Позволил. Но не позволяет загрузить внешнюю таблицу стилей.

стиль

Позволил. Он должен иметь атрибут amp-шаблон или атрибут custom-custom.

база

Не положено

NoScript

Allowedd

Комментарии

Условные html комментарии не допускаются. Например —

<!--[if Chrome]>
   This browser is chrome (any version)
<![endif]-->

HTML события

События, которые мы используем на html-страницах, таких как onclick, onmouseover, не допускаются на странице AMP.

Мы можем использовать события следующим образом —

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

Вот пример события, используемого на элементе ввода —

<input id = "txtname" placeholder = "Type here" 
   on = "inputthrottled:
   AMP.setState({name: event.value})">

Используемое событие прокручивается вводом.

Классы

Вы не можете иметь классы на своих страницах с таким префиксом, как -amp- или i-amp- . Кроме того, вы можете использовать имя класса согласно вашему требованию.

Идентификаторы

У вас не может быть идентификаторов для ваших HTML-элементов с префиксом -amp или i-amp-. Кроме того, вы можете использовать идентификаторы для вашего элемента HTML в соответствии с вашими требованиями.

связи

Использование JavaScript для href не допускается на страницах с усилителями.

пример

<a href = "javascript:callfunc();">click me</a>

Таблицы стилей

Внешние таблицы стилей не допускаются на странице AMP. Можно добавить стили, необходимые для страницы внутри —

<style amp-custom>
   //all your styles here
</style>

К тегу style должен быть добавлен атрибут amp-custom .

@ -правила

Следующие @-правила допускаются в таблицах стилей —

• @ font-face, @keyframes, @media, @page, @ поддерживает. @ импорт не будет разрешен. Поддержка же будет добавлена ​​в будущем.

• @keyframes разрешено использовать внутри <style amp-custom > . Если @keyframes слишком много, будет хорошо создать тег <style amp-keyframes> и вызвать этот тег в конце документа amp.

• Имена классов, идентификаторы, имена тегов и атрибуты не должны начинаться с префикса -amp- и i-amp-, так как они внутренне используются в коде усилителя, что может вызвать конфликты, если они также определены на странице во время выполнения.

• ! Важное свойство не допускается внутри стиля, так как amp хочет контролировать размер элемента при необходимости.

@ font-face, @keyframes, @media, @page, @ поддерживает. @ импорт не будет разрешен. Поддержка же будет добавлена ​​в будущем.

@keyframes разрешено использовать внутри <style amp-custom > . Если @keyframes слишком много, будет хорошо создать тег <style amp-keyframes> и вызвать этот тег в конце документа amp.

Имена классов, идентификаторы, имена тегов и атрибуты не должны начинаться с префикса -amp- и i-amp-, так как они внутренне используются в коде усилителя, что может вызвать конфликты, если они также определены на странице во время выполнения.

! Важное свойство не допускается внутри стиля, так как amp хочет контролировать размер элемента при необходимости.

Пользовательские Шрифты

Таблица стилей для пользовательских шрифтов допускается на страницах AMP.

пример

<link rel = "stylesheet"
   href = "https://fonts.googleapis.com/css?family=Tangerine">

Шрифты заносятся в белый список от следующих источников, которые можно использовать на страницах AMP.

• Fonts.com — https://fast.fonts.net

• Google Fonts — https://fonts.googleapis.com

• Прекрасный шрифт — https://maxcdn.bootstrapcdn.com

• Typekit — https://use.typekit.net/kitId.css (замените kitId соответственно)

Fonts.com — https://fast.fonts.net

Google Fonts — https://fonts.googleapis.com

Прекрасный шрифт — https://maxcdn.bootstrapcdn.com

Typekit — https://use.typekit.net/kitId.css (замените kitId соответственно)

Примечание. Пользовательские шрифты @ font-face допускаются на страницах с усилителями.

пример

@font-face {
   font-family: myFirstFont;
   src: url(dummyfont.woff);
}

AMP Runtime

Среда выполнения Amp определяется после загрузки файла ядра Amp —

<script async src = "https://cdn.ampproject.org/v0.js"></script>

Основной файл заботится о загрузке внешних ресурсов, определяет приоритетность их загрузки, а также помогает в проверке документа amp, когда к разработке URL-адреса amp добавляется # development = 1.

пример

http://localhost:8080/googleamp/amppage.html#development=1

Приведенный выше URL-адрес при выполнении в браузере выведет список ошибок, если не удалось выполнить проверку усилителя, или отобразит сообщение об успешной проверке усилителя, если ошибок нет.

AMP Компоненты

В Amp добавлено много компонентов. Они в основном используются для эффективной загрузки ресурса. Он также содержит компоненты для обеспечения анимации, отображения данных, отображения рекламы, социальных виджетов и т. Д.

В AMP есть 2 типа компонентов.

• Встроенный
• внешний

Примечание. <Amp-img> — это встроенный компонент, который доступен, если добавлен основной файл amp js. Внешние компоненты, такие как <amp-ad>, <amp-facebook>, <amp-video> и многие другие, нуждаются в соответствующем js-файле, связанном с добавляемым компонентом.

Общие атрибуты

Такие атрибуты, как ширина, высота, макет, заполнитель и запасной вариант, будут доступны практически для всех доступных компонентов AMP. Эти атрибуты очень важны для любого компонента AMP, так как он определяет отображение компонента на странице AMP.

Все перечисленные выше функции, перечисленные для AMP, подробно обсуждаются в последующих главах этого руководства.

Обратите внимание, что все примеры в этом руководстве протестированы для устройств и используют режим эмулятора Google для мобильных устройств. Давайте узнаем об этом подробнее сейчас.

Google Mobile Emulator

Чтобы использовать мобильный эмулятор Google, откройте браузер Chrome, щелкните правой кнопкой мыши и откройте консоль разработчика, как показано ниже —

Мы можем увидеть инструмент разработчика для Chrome, как показано выше. Нажмите на ссылку, которую вы хотите проверить в браузере. Обратите внимание, что страница отображается в режиме рабочего стола.

Чтобы получить вышеуказанную страницу для тестирования устройств, нажмите на панель инструментов устройства, как показано ниже —

Вы также можете использовать сочетание клавиш Ctrl + Shift + M. Это изменит режим рабочего стола на режим устройства, как показано ниже —

Список устройств можно увидеть, как показано ниже —

Вы можете выбрать устройство, которое вы хотите проверить страницу. Обратите внимание, что все страницы в этих руководствах проверены на эмуляторе Google для мобильных устройств, как показано выше. Та же функция доступна и для Firefox, и для последних браузеров Internet Explorer.

Google AMP — Изображения

Изображения, используемые на странице Google AMP, похожи на то, как они используются на стандартной html-странице, но единственное отличие состоит в том, как имя тега используется с некоторыми дополнительными свойствами. В этой главе они обсуждаются подробно.

Соблюдайте синтаксис, показанный ниже —

Стандартный HTML

<img src = ”example.jpg” width = ”300” height = ”250” alt = ”Example” ></img>

На странице AMP

<amp-img src = "example.jpg" alt = "Example" height = "300" width = "250" ><//amp-img>

Обратите внимание, что тег из img изменен на amp-img .

Зачем использовать amp-img вместо img?

Причина изменения img на amp-img состоит в том, чтобы иметь больший контроль над макетом страницы и сетевым запросом на загрузку изображения. Amp добавляет ленивую загрузку к ресурсу изображения и устанавливает приоритет загрузки согласно другим ресурсам, доступным на странице.

пример

Обратите внимание на следующий код для лучшего понимания —

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</title>
      <link rel = "canonical" href = "http://example.ampproject.org/articlemetadata.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initialscale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
            - amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes 
         amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -msanimation:none;
               animation:none
            }
         </style>
      </noscript>
   </head>
   <body>
      <h1>Google AMP - Image Example</h1>
      <amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
         width = "246"
         height = "205">
      </amp-img>
   </body>
</html>

Выход

Когда вы выполнили код, показанный выше, вы найдете результат, как показано ниже —

Вы также можете сделать изображение адаптивным, добавив свойство layout = ”отзывчивый” к тегу amp-img, как показано ниже.

пример

Обратите внимание на следующий код для лучшего понимания —

<amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
   width = "246"
   height = "205"
   layout = "responsive">
</amp-img>

Выход

Когда вы выполнили код, показанный выше, вы найдете результат, как показано ниже —

Google AMP — Форма

В этой главе объясняется, как работать с формой в Google AMP.

Обратите внимание, что тег формы остается таким же, как в стандартном HTML. AMP добавил специальное ограничение на использование форм, из-за чего нам нужно добавить JavaScript-файл amp-form для работы с формами.

Скрипт для amp-form

<script async custom-element = "amp-form" 
   src = "https://cdn.ampproject.org/v0/ampform-0.1.js"></script>

Чтобы использовать формы на странице AMP, нам нужно включить вышеуказанный скрипт в файл .html. JavaScript-файл amp-form поддерживает http и xmlhttprequest для отправки формы. При использовании HTTP-запроса страница перезагружается, и с помощью xmlhttprequest она не перезагружается, страница работает как запрос ajax.

Форма тега в AMP

For xmlhttprequest :
<form method = "post" class = "p2" action-xhr = "submitform.php" target = "_top">
   //Input fields here
</form>

For http :
<form method = "post" class = "p2" action = "submitform.php" target = "_top">
   //Input fields here
</form>

Amp-форма предоставляет специальные атрибуты, т. Е. Submit-error и submit-success, чтобы обрабатывать ошибки и успехи при отправке формы.

пример

Пример для amp-form показан ниже —

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Form</title>
      <link rel = "canonical" href = "ampform.html">
      <meta name = "viewport" conten t = "width = device-width,
         minimum-scale = 1,initialscale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}  
      </style>
         <noscript>
            <style amp-boilerplate>
               body{
                  -webkit-animation:none;
                  -moz-animation:none;
                  -msanimation:none;
                  animation:none
               }
            </style>
         </noscript>
      <script async custom-element = "amp-form"
         src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
      </script>
      <script async custom-template = "amp-mustache"
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>
      <style amp-custom>
         form.amp-form-submit-success [submit-success],
         form.amp-form-submit-error [submit-error]{
            margin-top: 16px;
         }
         form.amp-form-submit-success [submit-success] {
            color: white;
            background-color:gray;
         }
         form.amp-form-submit-error [submit-error] {
            color: red;
         }
         form.amp-form-submit-success.hide-inputs > input {
            display: none;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Form</h3>
      <form method = "post" 
         class = "p2" 
         action-xhr = "submitform.php" 
         target = "_top">
         <p>AMP - Form Example</p>
         <div>
            <input type = "text" name = "name" placeholder = "Enter 
               Name" required><br/><br/>
            <input type = "email" name = "email" 
            placeholder = "Enter Email" required>
            <br/>
            <br/>
         </div>
         
         <input type = "submit" value = "Submit">
         <div submit-success>
            <template type = "amp-mustache">
               Form Submitted! Thanks {{name}}.
            </template>
         </div>
         
         <div submit-error>
            <template type = "amp-mustache">
               Error! {{name}}, please try again.
            </template>
         </div>
      </form>
   </body>
</html>

Выход

Когда вы выполнили код, показанный выше, вы найдете результат, как показано ниже —

Теперь введите детали и нажмите кнопку «Отправить». Отображаемый экран вывода выглядит следующим образом:

Заметьте, что мы использовали amp-усы для привязки данных. Форма использует action-xhr, т.е. xmlhttprequest для отправки формы. Мы использовали файл submitform.php, который возвращает данные в формате json.

<form method = "post" class = "p2" action-xhr = "submitform.php" 
   target = "_top">
</form>

submitform.php

<?php
   if(!empty($_POST)){
      $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .      "://$_SERVER[HTTP_HOST]";
      header("Content-type: application/json");
      header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
      header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
      $myJSON = json_encode($_POST);
      echo $myJSON;
   }
?>

Чтобы форма работала с использованием xmlhttprequest, нам нужно добавить заголовки согласно спецификации CORS. Подробности заголовков ответов, добавленных в submitform.php, показаны ниже —

Чтобы форма работала, нам нужно добавить заголовки, такие как access-control-expose-headers со значением AMP-Access-Control-Allow-Source-Origin и amp-access-controlallowallow-source-origin — http: // localhost: 8080

Обратите внимание, что мы используем файл php и сервер apache. В php-файл мы добавили необходимые заголовки, как показано ниже —

<?php

   if(!empty($_POST)){
      $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .  "://$_SERVER[HTTP_HOST]";
      header("Content-type: application/json");
      header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
      header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
      $myJSON = json_encode($_POST);
      echo $myJSON;
   }
   ?
?>

Если мы используем обычный http-запрос, страница будет перезагружена, как показано ниже —

Для http запроса мы использовали следующую форму:

<form method = "GET" class = "p2" action = "submitform.php" 
   target = "_top">
</form>

пример

Обратите внимание на следующий код для лучшего понимания —

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Form</title>
      <link rel = "canonical" href = "ampform.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initialscale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;
               -moz-animation:none;
               -msanimation:none;
               animation:none}
         >/style>
      </noscript>
      
      <script async custom-element = "amp-form"
         src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
      </script>
      <script async custom-template = "amp-mustache"
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>
      
      <style amp-custom>
         form.amp-form-submit-success [submit-success],
         form.amp-form-submit-error [submit-error]{
            margin-top: 16px;
         }
         form.amp-form-submit-success [submit-success] {
            color: white;
            background-color:gray;
         }
         form.amp-form-submit-error [submit-error] {
            color: red;
         }
         form.amp-form-submit-success.hide-inputs > 
            input {
            display: none;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Form</h3>
      <form method = "GET" class = "p2" action = "submitform.php" target = "_top">
         <p>AMP - Form Example</p>
         <div>
            <input type = "text" name = "name" placeholder = "Enter Name" required>
            <br/>
            <br/>
            <input type = "email" name = "email" placeholder = "Enter Email" required>
            <br/>
            <br/>
         <div>
         
         <input type = "submit" value = "Submit">
         <div submit-success>
            <template type = "amp-mustache">
               Form Submitted! Thanks {{name}}.
            </template>
         </div>
         <div submit-error>
            <template type = "amp-mustache">
               Error! {{name}}, please try again.
            </template>
         </div>
      </form>
   </body>
</html>

Выход

Когда вы выполнили код, показанный выше, вы найдете результат, как показано ниже —

Google AMP — Iframes

Google amp-iframe используется для отображения на странице iframes. Существуют некоторые условия, которые необходимо добавить в amp-iframe, и поэтому мы не можем использовать обычные iframe на странице. В этой главе обсуждается больше об этом.

Условия, которые необходимо соблюдать для iFrames

При использовании iframe на страницах AMP необходимо соблюдать следующие условия:

• URL, используемый в iframe, должен быть https- запросом или data-URI или атрибутом srcdoc .

• По умолчанию в amp-iframe будет добавлен атрибут песочницы. Атрибут песочницы будет пустым. Пустое значение для песочницы означает, что iframe является максимальной изолированной программной средой (дополнительное ограничение для iframe). Мы можем добавить значения в песочницу, которые обсудим с помощью примера ниже.

• Iframe не может отображаться в верхней части страницы, он должен находиться на расстоянии почти 600 пикселей от верхней части или в пределах первых 75% области просмотра при прокрутке сверху. В случае, если вам нужно отобразить iframe в начале, вам нужно добавить заполнитель в iframe, который мы обсудим с помощью примеров позже в этом руководстве.

• amp-iframe не должен иметь то же происхождение, что и контейнер. Например, если ваш основной сайт находится на www.xyz.com, вы не можете использовать iframe src как www.xyz.com/urlname . Это могут быть другие, такие как .xyz.com, example.xyz.com и т. Д.

URL, используемый в iframe, должен быть https- запросом или data-URI или атрибутом srcdoc .

По умолчанию в amp-iframe будет добавлен атрибут песочницы. Атрибут песочницы будет пустым. Пустое значение для песочницы означает, что iframe является максимальной изолированной программной средой (дополнительное ограничение для iframe). Мы можем добавить значения в песочницу, которые обсудим с помощью примера ниже.

Iframe не может отображаться в верхней части страницы, он должен находиться на расстоянии почти 600 пикселей от верхней части или в пределах первых 75% области просмотра при прокрутке сверху. В случае, если вам нужно отобразить iframe в начале, вам нужно добавить заполнитель в iframe, который мы обсудим с помощью примеров позже в этом руководстве.

amp-iframe не должен иметь то же происхождение, что и контейнер. Например, если ваш основной сайт находится на www.xyz.com, вы не можете использовать iframe src как www.xyz.com/urlname . Это могут быть другие, такие как .xyz.com, example.xyz.com и т. Д.

Для работы с iframes нам нужно добавить следующий скрипт:

<script async custom-element = "amp-iframe" 
   src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Формат Amp-iframe выглядит следующим образом —

<amp-iframe width = "600" title = "Google map" 
   height = "400" layout = "responsive"
   sandbox = "allow-scripts allow-same-origin allow-popups"
   frameborder = "0"
   src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
</amp-iframe>

Давайте разберемся в этом с помощью рабочего примера, в котором будет использоваться iframe для отображения карт Google, как показано ниже.

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Iframe</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:-amp-start 8s steps(1,end) 0s 
            1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both}
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style><noscript>
      <style amp-boilerplate>
         body{-webkit-animation:none;-moz-animation:
         none;-ms-animation:none;animation:none}
      </style></noscript>

      <script async custom-element = "amp-iframe" 
         src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
      ></script>
      
      <style>
         div {
            height:850px;
            text-align:center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Iframe</h3>
      <div>
         Google Maps in Iframe
      </div>
      <h3>Google AMP - Amp Iframe</h3>
      <amp-iframe width = "600"
         title = "Google map"
         height = "400"
         layout = "responsive"
         sandbox = "allow-scripts allow-same-origin allow-popups"
         frameborder = "0" src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
      </amp-iframe>
   </body>
</html>

Выход

Обратите внимание, что мы разместили iframe на высоте более 600 пикселей сверху. Это дает ошибку, как показано ниже —

В приведенном выше примере мы использовали песочницу со значениями, приведенными ниже —

sandbox = "allow-scripts allow-same-origin allow-popups"

Атрибут Sandbox действует как разрешение на загрузку содержимого внутри iframe. Здесь мы разрешаем загружать все скрипты, которые идут по ссылкам карт Google. В случае, если мы не даем атрибут песочницы, это ошибка отображается, которая блокирует контент, который будет загружен в iframe —

Обратите внимание, что мы должны дать правильное разрешение песочнице. Вы можете найти подробную информацию обо всех разрешениях, которые будут предоставлены песочнице, здесь — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox .

Мы можем использовать атрибут placeholder внутри amp-iframe, чтобы избавиться от условия размером более 600 пикселей.

Рабочий пример для того же приведен ниже —

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Iframe</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,  minimum-scale=1,initial-scale=1">

      <style amp-boilerplate>
         body{
            -webkit-animation:-amp-start 8s steps(1,end) 0s 
            1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>

      <script async custom-element = "amp-iframe" 
         src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
      </script>

      <style>
         div {
            height:850px;
            text-align:center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Iframe</h3>

      <amp-iframe width = "600"
         title = "Google map"
         height = "400"
         layout = "responsive"
         sandbox = "allow-scripts allow-same-origin allow-popups"
         frameborder = "0"
         src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">

         <amp-img layout = "fill" src = "images/loading.jpg" placeholder></amp-img>
      </amp-iframe>
   </body>
</html>

Мы использовали amp-img в качестве заполнителя следующим образом:

<amp-iframe width = "600"
   title = "Google map"
   height = "400"
   layout = "responsive"
   sandbox = "allow-scripts allow-same-origin allow-popups"
   frameborder = "0"
   src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie = UTF8&iwloc = &output = embed">
   
   <amp-img layout = "fill" src = "images/loading.jpg" placeholder></amp-img>
</amp-iframe>

В этом случае ограничение 600px и amp-iframe в 75% области просмотра не учитывается. В качестве заполнителя используется индикатор загрузки (три точки), который в основном используется для amp-iframe src. После загрузки содержимого iframe изображение удаляется, а содержимое iframe отображается так, как показано в выводе, показанном ниже.

Выход

Google AMP — Видео

Amp-video in amp — это стандартное видео html5, используемое для воспроизведения прямых вставок видео. В этой главе мы разберемся, как работать с усилителем и использовать его.

Для работы с amp-video нам нужно добавить следующий скрипт —

<script async custom-element = "amp-video" 
   src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>

Amp-video имеет атрибут src, который имеет загружаемый видеоресурс, который лениво загружается amp во время выполнения. Кроме того, все функции почти такие же, как тег видео html5.

Ниже приведены узлы, которые должны быть добавлены к видео усилителя.

• Источник — Вы можете добавить различные медиа-файлы для воспроизведения, используя этот тег.

• Track — этот тег позволяет вам включить субтитры для видео.

• Заполнитель — этот тег заполнителя будет отображать содержимое до начала видео.

• Fallback — этот тег будет вызываться, когда браузер не поддерживает видео HTML5.

Источник — Вы можете добавить различные медиа-файлы для воспроизведения, используя этот тег.

Track — этот тег позволяет вам включить субтитры для видео.

Заполнитель — этот тег заполнителя будет отображать содержимое до начала видео.

Fallback — этот тег будет вызываться, когда браузер не поддерживает видео HTML5.

Формат тега amp-video

Формат тега amp-video показан здесь —

<amp-video controls width = "640" height = "360" 
   layout = "responsive" poster = "images/videoposter.png">
   <source src = "video/bunny.webm" type = "video/webm" />
   <source src = "video/samplevideo.mp4" type = "video/mp4" />
   
   <div fallback>
      <p>This browser does not support the video element.</p>
   </div>
</amp-video>

Давайте разберемся с amp-video, используя рабочий пример, как показано ниже —

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href =  "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-scale=1">

      <style amp-boilerplate>
         body {
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both}
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>

      <script async custom-element = "amp-video" 
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png">
         <source src = "video/bunny.webm" type = "video/webm" />
         <source src = "video/samplevideo.mp4" type = "video/mp4" />
         
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

Выход

Вывод кода, приведенного выше, показан ниже:

Атрибуты, доступные для amp-video

Атрибуты, доступные для amp-video, перечислены в таблице здесь —

ЦСИ

Если узел <source> отсутствует, то должен быть указан src, и он должен быть https: // url.

плакат

Постер принимает img url, который отображается перед началом видео.

Автовоспроизведение

При наличии этого атрибута на усилителе-видео видео будет воспроизводиться автоматически, если браузер поддерживает. Видео будет воспроизводиться в приглушенном режиме, и пользователю придется нажимать на видео, чтобы включить его.

управления

Наличие этого атрибута в amp-video покажет элементы управления на видео, аналогичные html5 video.

петля

Если этот атрибут присутствует в amp-video, видео будет воспроизведено снова после завершения.

crossorigin

Этот атрибут проявляется, если ресурс для воспроизведения видео находится в другом источнике.

повернуть к полноэкранным

Если видео видно, оно отображается во весь экран после того, как пользователь повернул свое устройство в альбомный режим.

Автоигра AMP Видео

Мы можем использовать атрибут autoplay, если нам нужно автоматически воспроизвести видео. Эта функция будет работать в соответствии с поддержкой браузера. Обратите внимание, что при автоматическом воспроизведении видео будет отключено. Когда пользователь нажимает на видео, оно будет включено.

Давайте воспользуемся функцией автозапуска с помощью рабочего примера, приведенного ниже —

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">

      <meta name = "viewport" content = "width=device-width,minimum-scale = 1, initial-scale = 1">

      <style amp-boilerplate>
         body {
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;
            -moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>

      <script async custom-element = "amp-video" src = "
         https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video Autoplay</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png" autoplay>
         <source src = "video/bunny.webm" type = "video/webm" />
         <source src = "video/samplevideo.mp4" type = "video/mp4" />
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

Вы можете активировать элементы управления для видео, добавив атрибут управления, как показано в следующем коде —

<amp-video controls
   width = "640"
   height = "360"
   layout = "responsive"
   poster = "images/videoposter.png" autoplay>
   <source src = "video/bunny.webm" type = "video/webm" />
   <source src = "video/samplevideo.mp4" type = "video/mp4" />
   <div fallback>
      <p>This browser does not support the video element.</p>
   </div>
</amp-video>

Google AMP — кнопка

Кнопки являются еще одной особенностью AMP. Обратите внимание, что в AMP нет изменений для кнопок, и они используются как стандартные теги кнопок HTML. Единственная разница с кнопками на странице AMP — это обработка событий на ней.

В этой главе мы увидим несколько примеров, демонстрирующих работу кнопки и ее использование с компонентами AMP.

Пример кода для лайтбокса

В следующем примере показано, как использовать кнопку, чтобы показать / скрыть усилитель-лайтбокс, как показано ниже —

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Lightbox</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      
      <meta name = "viewport" content ="width = device-width,minimum-scale = 1,initial-scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;-moz-animation:none;-ms-an
               imation:none;animation:none
            }
         </style>
      </noscript>

      <script async custom-element = "amp-lightbox" 
         src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
      </script>

      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{ 
            background-color: 
            #ACAD5C; color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Lightbox</h3>
      <button on = "tap:my-lightbox">
         Show LightBox
      </button>
      <amp-lightbox id = "my-lightbox" layout = "nodisplay">
         <div class = "lightbox" on = "tap:my-lightbox.close" tabindex = "0">
            <amp-img alt = "Beautiful Flower"
               src = "images/flower.jpg"
               width = "246"
               height = "205">
            </amp-img>
         </div>
      </amp-lightbox>
   </body>
</html>

Выход

Теперь вы можете щелкнуть в любом месте экрана, чтобы закрыть лайтбокс.

В приведенном выше примере мы использовали кнопку, используя код, как показано ниже —

<button on = "tap:my-lightbox">
   Show LightBox
</button>
Next, we have added action on the button using on attribute as shown: 
on = "tap:my-lightbox"

Действие произойдет, когда вы нажмете на кнопку. Обратите внимание, что идентификатор лайтбокса дается ему. Когда пользователь нажимает на кнопку, лайтбокс будет открыт. Точно так же вы можете использовать кнопку с любым действующим компонентом для взаимодействия с ним.

Google AMP — Timeago

Timeago предоставит детали временной метки, сравнив ее с прошлым, например, «x» часов назад. В этой главе давайте подробно обсудим эту функцию.

Чтобы вставить эту функцию в нашу работу, нам нужно добавить приведенный ниже скрипт на страницу .html —

<script async custom-element = "amp-timeago" 
   src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
</script>

Тег amp-timeago выглядит так, как показано ниже —

<amp-timeago layout = "fixed" width = "160" height = "20" 
   datetime = "2018-10-01T00:37:33.809Z"
   locale = "en">Monday 01 October 2018 00.37 
</amp-timeago>

Позвольте нам понять это с помощью рабочего примера, как показано ниже —

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - TimeAgo</title>

      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">

      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial- scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:-amp-start 8s steps(1,end) 
            0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
            -webkit-animation:none;-moz-animation:none;-ms
            -animation:none;animation:none
         }
         </style>
      </noscript>

      <script async custom-element="amp-timeago" 
         src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - TimeAgo Example</h1>
      <amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "en">Monday 01 October 2018 00.37
      </amp-timeago>
   </body>
</html>

Выход

По умолчанию локаль установлена ​​на en. Мы можем изменить то же самое и отображать время в локали по мере необходимости. Локали, которые можно использовать с тегом timeago, приведены в таблице ниже.

Арканзас

арабский

быть

Белорусский

быть

Белорусский

Б.Г.

болгарский

Калифорния

каталонский

да

датский

де

Немецкий

эль

греческий

ан

английский

enShort

Английский — короткий

эс

испанский

Евросоюз

баскский

фи

финский

фр

Французский

он

иврит

Hu

Венгерский

inBG

Bangla

inHI

хинди

ИНИД

малайский

Это

итальянский

JA

японский язык

ко

корейский язык

мл

Malayalam

nbNO

Норвежский букмол

п

Голландский

Nnno

Норвежский нюнорск

пл

польский

ptBR

португальский

ро

румынский

RU

русский

св

шведский

та

тамильский

го

тайский

тр

турецкий

Соединенное Королевство

украинец

VI

вьетнамский

zhCN

китайский язык

zhTW

Тайваньская

Давайте обсудим несколько локалей, используя рабочие примеры, приведенные ниже —

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - TimeAgo Using Locale</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1, initial-scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
            }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;-ms
               -animation:none;
               animation:none
            }
         </style>
      </noscript>
      <script async custom-element = "amp-timeago" 
         src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - TimeAgo Example Using Locale</h1>

      <h3>Locale : Russian</h3>
      <amp-timeago layout = "fixed" 
         width = "160" height = "20" 
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "ru">
          
         Monday 01 October 2018 00.37
      </amp-timeago>

      <h3>Locale : Korean</h3>
      <amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "ko">
            Monday 01 October 2018 00.37
      </amp-timeago>
      <h3>Locale : Hindi</h3>
      
      <amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "inHI">
         
         Monday 01 October 2018 00.37
      </amp-timeago>
      
      <h3>Locale : Spanish</h3>
      <amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "es">
         
         Monday 01 October 2018 00.37
      </amp-timeago>
      
      <h3>Locale : French</h3>
      <amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "fr">
         
         Monday 01 October 2018 00.3
         </amp-timeago>
   </body>
</html>

Выход

Вывод приведенного выше кода, как показано ниже —

В случае, если необходимо изменить отображение «X time ago», мы можем использовать атрибут «cutoff» с timeago. Cutoff принимает значения в секундах, чтобы избавиться от отображения назад.

Позвольте нам понять это с помощью рабочего примера, приведенного ниже —

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - TimeAgo</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale=1, initial-scale=1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
      
      <script async custom-element = "amp-timeago" 
         src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - TimeAgo Example</h1>
      <amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "en"
         cutoff = "300">
         
         Monday 01 October 2018 00.37
      </amp-timeago>
   </body>
</html>

Выход

Google AMP — Mathml

Используя MathML, мы можем отобразить математическую формулу. В этой главе рассмотрим рабочий пример того, как использовать MathML и работать с несколькими математическими формулами, чтобы отобразить то же самое.

Для работы с MathML нам нужно включить следующий файл javascript —

<script async custom-element = "amp-mathml" 
   src = "https://cdn.ampproject.org/v0/amp-mathml-0.1.js">
</script>

Тег MathML AMP

Тег mathML amp имеет следующий формат:

<amp-mathml layout = "container" 
   data-formula = "\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]">
</amp-mathml>

Обратите внимание, что формула данных является обязательным атрибутом, которому дается формула.

пример

Давайте лучше разберемся в этом теге на примере.

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - MathML</title>
      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>

      <script async custom-element = "amp-mathml" 
         src = "https://cdn.ampproject.org/v0/amp-mathml-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - MathML Example</h1>
      <amp-mathml layout = "container" 
         data-formula = "\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]">
      </amp-mathml>
   </body>
</html>