Веб-дизайнеру - Accelerated Mobile Pages, AMP

   Google

   Технология ускоренных мобильных страниц (Accelerated Mobile Pages, AMP) основана на открытом исходном коде. Такие страницы хранятся в специальном кеше Google, что обеспечивает быструю загрузку на мобильные терминалы. Технология AMP поддерживается разнообразными платформами, включая "Google Поиск". Если у страницы в результатах "Google Поиска" есть отдельная версия в формате AMP - облегчена, пользователям Интернет мобильных устройств с процессором (смартфоны и планшеты) может показываться именно она.

   Лучше всего, если URL вашей AMP-страницы будет понятен пользователю и содержится внутри домена Вашего сайта. Так, если URL канонической (обычной) страницы для персонального компьютера – website.com/pages.htm, то адрес AMP-страницы стоит сделать таким: amp.website.com/pages.htm или website.com/amp/pages.htm. Тогда пользователь не придет в замешательство, увидев в адресной строке браузера URL страницы AMP, который не связан с Вашим основным доменом.

   Видимость. Google проиндексирует те страницы AMP, на которые ссылаются обычные веб-ресурсы. Если на сайте есть обе версии страницы, выполните следующие действия. Добавьте на обычную страницу ссылку на страницу AMP, чтобы робот Google узнал о ней, перед тэгом </head>: 

<ink rel="amphtml" href="http://www.website.com/url/to/amp-version.html" />

   Добавьте на страницу AMP код ссылки на каноническую версию обычной страницы:

<ink rel="canonical" href="http://www.website.com/url/to/html-version.html" />

   Страницы AMP, у которых нет обычных версий, нужно указать как канонические:

<ink rel="canonical" href="http://www.website.com/url/to/amp-document.html" />

   Google проиндексирует и такие страницы, если обнаружит их. Убедитесь, что они указаны в файле Sitemap или что на них ссылаются другие индексируемые страницы. Чтобы страницы правильно работали и могли показываться на сайтах с поддержкой функции AMP, они должны пройти проверку https://search.google.com/search-console/amp. Страницы с ошибками не показываются в результатах "Google Поиска". Из нового отчета в "Google Search Console" можно узнать, сколько страниц AMP было проиндексировано, и найдены ли на них ошибки.

   По материалам сайта https://search.google.com/search-console/amp

   

   В начале февраля 2016 года Google запустил проект AMP (Accelerated Mobile Pages). AMP (Accelerated Mobile Pages) – мобильные страницы ускоренной загрузки – анонсированы командой Google в начале октября 2015 года. Это дополнительный формат облегченной загрузки Интернет-материалов на Интернет мобильных устройствах с процессором. AMP HTML – это обычный HTML с рядом ограничений (большинства расширенных привычных команд и программных кодов нет) и некоторыми измененными командными кодами.

   По материалам сайта https://www.seonews.ru/

   

   

   AMP состоит из набора 3-х технологий: AMP HTML – HMTL в котором некоторые тэги заменены на свои. AMP JS – JS библиотека для AMP страниц. Google AMP Cache – CDN, распространяет валидные AMP-страницы. Пример простой amp страницы для мобильного Интернет устройства с процессором:


<!doctype html>
<html amp>
  <head>
    <meta charset="utf-8">
    <title>Заголовок AMP</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    
    <style amp-custom>
    body { font-size: 0.8em; padding: 1px; } 
    </style>
    
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "WebSite",
        "headline": "Open-source AMP publishing",
        "datePublished": "2017-06-09T09:00:00+03:00",
        "image": [
          "google-logo.png"
        ]
      }
    </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>
    
    <link rel="canonical" href="http://website.com/WebSite.html" />
  </head>
  <body>
    <h1>Пример страницы AMP</h1>
  </body>
</html>

   

   Документ AMP HTML ДОЛЖЕН:

   Начинаться с типа документа <!doctype html>.

   Содержать тег <html ?> или <html amp>.

   Содержать теги <head> и <body> (необязательные в разметке HTML).

   Содержать внутри заголовка тег <link rel="canonical" href="Адрес сстраницы" />, который указывает на обычную HTML-версию документа AMP HTML или на сам исходный документ, если такой версии не существует.

   Содержать тег <meta charset="utf-8"> в качестве первого дочернего элемента тега заголовка.

   Содержать в теге заголовка тег <meta name="viewport" content="width=device-width,minimum-scale=1">. Рекомендуется включить значение initial-scale=1.

   Содержать в качестве последнего элемента заголовка тег <script async src="https://cdn.ampproject.org/v0.js"></script>, который указывает и загружает библиотеку AMP JS.

   Содержать в теге <head> следующий код: <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>

   

   Ограничения:

   Разрешены только асинхронные скрипты

   Нельзя описывать стили с помощью «style» по месту применения, например <div style="....">.

   Стили должны быть описаны в HTML файле в единственном тэге <style amp-custom>, в разделе <head>

   Стили ограничены размером в 50 КБ

   Параметры «width» и «height» внешних ресурсов, таких как картинки, должен быть указан внутри html

   Нельзя написать произвольный Javascript-код, можно использовать только поддерживаемую библиотеку AMP JS

   Шрифты должны быть загружены по ссылке или в CSS-конструкции @font-face

   Запрещено использовать тег <img>, замена: <amp-img> - <amp-img src="файл" width="" height="" ></amp-img>

   Стили css не должны использовать инструкции "!important"

   

   Остальные рекомендации:

   Не рекомендуется использовать относительные URL при объявлении ссылки на AMP-страницу.

   Так НЕ рекомендуется: <link rel="amphtml" href="/website/amp" />

   Так рекомендуется: <link rel="amphtml" href="http://full-url/website/amp" />

   По материалам сайта https://elims.org.ua/blog/category/seo/

   

   Загружаем мобильную AMP-страницу - 8 секунд. Контент подгружается по мере прокрутки страницы. Суть инициативы состоит в следующем: для оптимизации и ускорения загрузки контентных страниц (т.е. статей, новостей, обзоров, фото/видео–репортажей и т.д.) Google предлагает использовать их разработку – библиотеку AMP. При этом на страницу накладывается ряд ограничений. Например, нельзя использовать другие js-скрипты, кроме самой AMP и ее расширений. Необходимо использовать некоторые особые элементы AMP вместо некоторых привычных (например тег amp-img вместо img).

   Встроенные компоненты:

   amp-ad Контейнер для отображения рекламы

   amp-img Замена тега img

   amp-video Замена HTML5-тегу video

   

   Компоненты, подключаемые при помощи расширений (отдельных js-библиотек)

   amp-anim Анимированное изображение (GIF)

   amp-audio Замена HTML5-тегу audio

   amp-carousel Обыкновенная карусель - отображение превью картинок, выстроенных по горизонтали

   amp-fit-text Автоматическое уменьшение или увеличение размера шрифта текста, для того чтобы он поместился в ограниченную область

   amp-iframe Замена iframe

   amp-image-lightbox Лайтбокс. Полноразмерный просмотр большого изображения при клике на превью или ссылку

   amp-instagram Отображает пост в инстаграме

   amp-lightbox Еще один лайтбокс

   amp-twitter Отображает твит

   По материалам сайта https://geektimes.ru/post/263624/

AMP Специальные Тэги
<amp-img>
<amp-video>
<amp-ad>
<amp-fit-text>
<amp-font>
<amp-carousel>
<amp-anim>
<amp-youtube>
<amp-twitter>
<amp-vine>
<amp-instagram>
<amp-iframe>
<amp-pixel>
<amp-audio>
<amp-lightbox>
<amp-image-lightbox>

По материалам сайта https://github.com/ampproject/

   

   

   Сегодня популярными стали публикации всевозможных учебников и учебных пособий, как стать веб-дизайнером и как научиться самому создавать веб-страницы. Поэтому мы решили отказаться от публикации учебных материалов и книг по веб-дизайну и предлагаем Вам более серьезные материалы — документацию и спецификации, переведенные на русский язык. Материал требует наличия начальных знаний и навыков работы в веб-дизайне, знания кодов и носит исключительно справочный характер. Не для продажи.

Google

  • Accelerated Mobile Pages, AMP - основные тэги + замена команд, с 2015 года
  • Рекомендации от Google Поиска по созданию ускоренных мобильных страниц - Cправка - Search Console

Shema.org

  • Полная Иерархия - основные типы http://www.Shema.org/ + расширение словарей, с 2012 года
  • Командные тэги поисковым роботам поисковых систем, смысловая нагрузка страниц

W3C

  • XHTML 1.0, переформулирование html 4 в XML 1.0
  • Расширяемый Язык Гипертекстовой Разметки
  • Рекомендации W3C от 26 января 2000 года
  • XML 1.0, вторая редакция
  • Расширяемый Язык Гипертекстовой Разметки
  • РРекомендация W3C от 6 октября 2000 года
  • HTTP/1.1, протокол передачи гипертекста
  • HTTP используется в World Wide Web (WWW) начиная с 1990 года
  • Релиз январь 1997 года

JavaScript

  • Ядро JavaScript 1.5. Руководство по Использованию
  • Copyright © 2000 Netscape Communications Corp. Все Права Зарезервированы.
  • Дата последнего обновления 28 сентября 2000 года
  • Клиентский JavaScript. Руководство по Использованию
  • Copyright © 1999 Netscape Communications Corp. Все Права Зарезервированы.
  • Дата последнего обновления 25 мая 1999 года

 

Наши ссылки на веб-страницы, можно скопировать html-код ссылки


Книги по математике и физике, программы HTML, компьютерные технологии
Документация HTML, XML, JavaScript на русском языке для разработчиков W3C

   Примечание. Удобная текстовая ссылка для форумов, блогов, цитирования материалов веб-сайта, код html можно скопировать и просто вставить в Ваши веб-страницы при цитировании материалов нашего веб-сайта.