Электронная библиотека
Программисту веб-дизайнеру
Другие материалы
Веб-дизайнеру - Accelerated Mobile Pages, AMP
Технология ускоренных мобильных страниц (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/
Сегодня популярными стали публикации всевозможных учебников и учебных пособий, как стать веб-дизайнером и как научиться самому создавать веб-страницы. Поэтому мы решили отказаться от публикации учебных материалов и книг по веб-дизайну и предлагаем Вам более серьезные материалы - документацию и спецификации, переведенные на русский язык. Материал требует наличия начальных знаний и навыков работы в веб-дизайне, знания кодов и носит исключительно справочный характер. Не для продажи.
