В этой лабораторной работе вы узнаете, как создавать ускоренные мобильные страницы — или сокращенно AMP. Для этого вы создадите простую веб-страницу с новостной статьей, которая соответствует спецификациям AMP, но при этом будет включать несколько типичных веб-функций, обычно используемых на мобильных новостных сайтах.
Что вы узнаете
- Как AMP улучшает взаимодействие с пользователем в мобильном Интернете.
- Основы сайта AMP.
- Ограничения AMP.
- Как веб-компоненты AMP решают распространенные проблемы новостных сайтов.
- Как подтвердить свой AMP.
- Как подготовить AMP для Google Search.
Что вам понадобится
- Пример кода
- Python (предпочтительно 2.7) или расширение Chrome 200 OK Web Server .
- Chrome (или аналогичный браузер, который может проверять консоль JavaScript)
- Редактор кода (например, Atom, Sublime, Notepad++)
Вы можете загрузить весь пример кода на свой компьютер:
...или клонируйте репозиторий GitHub из командной строки:
$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.gitВы загрузите ZIP-файл, содержащий несколько примеров файлов ресурсов и начальную страницу article.html.
Разархивируйте папку и перейдите в каталог через командную строку на вашем компьютере.
Чтобы протестировать нашу тестовую страницу, нам нужно получить доступ к файлам с веб-сервера. Существует несколько способов создать временный локальный веб-сервер для целей тестирования. Для этой лаборатории кода мы предоставим инструкции для 3 доступных вариантов:
- Приложение Google Chrome «Веб-сервер для Chrome» — это рекомендуемый подход, так как это самое простое и доступное кросс-платформенное решение. Примечание: для этого подхода требуется установленный Google Chrome.
- Firebase Hosting — альтернативный вариант, если вы также заинтересованы в изучении нашей новой платформы для размещения статических ресурсов «Firebase Hosting». SSL включен по умолчанию.
- Локальный HTTP-сервер Python — требуется доступ к командной строке.
Вариант № 1: веб-сервер для Chrome
Вы можете найти приложение «Веб-сервер для Chrome» по этой ссылке в Интернет-магазине Chrome.
После установки приложения Chrome вы должны указать приложению определенную папку с помощью кнопки «Выбрать папку». Для этой лаборатории кода вы должны выбрать папку, в которую вы распаковали файлы примеров лаборатории кода.
Кроме того, вы должны отметить опцию «Автоматически показывать index.html» и установить порт «8000». Вам нужно будет перезапустить веб-сервер, чтобы эти изменения вступили в силу.
Получите доступ к этому URL -адресу через:
http://localhost:8000/article.html
Если приведенный выше URL-адрес успешно загружается, вы можете перейти к следующему шагу.
Вариант № 2: Хостинг Firebase
Если вы заинтересованы в изучении нашего нового статического веб-хостинга Firebase, вы можете следовать инструкциям , доступным здесь, чтобы развернуть свой сайт AMP на URL-адрес хостинга Firebase.
Firebase Hosting — это поставщик статического хостинга, который вы можете использовать для быстрого развертывания и размещения статического веб-сайта и его ресурсов; включая файлы HTML, CSS и JavaScript. Пользователи выигрывают от сокращения задержки, поскольку статический контент кэшируется в сети доставки контента (CDN) с точками присутствия (PoPs), расположенными по всему миру.
Наконец, Firebase Hosting всегда обслуживается через SSL, поэтому он отлично подходит для AMP и Интернета в целом. Если вы больше заинтересованы в том, чтобы сосредоточиться исключительно на AMP, просто игнорируйте этот параметр.
Вариант № 3: HTTP-сервер Python
Если вы не используете Chrome или вам сложно установить расширение Chrome, вы также можете использовать Python из командной строки для запуска локального веб-сервера.
Чтобы запустить встроенный HTTP-сервер Python из командной строки, просто выполните следующее:
python -m SimpleHTTPServer
И получить доступ к этому URL :
http://localhost:8000/article.html
В загруженном zip-файле вы найдете файл с именем article.html . Это статья, для которой мы создаем страницу, эквивалентную AMP.
Скопируйте код из примера article.html и вставьте его в новый файл. Сохраните этот файл как article.amp.html.
Теперь ваш файл article.amp.html должен выглядеть следующим образом:
<!doctype html>
<html lang="en">
<head>
<title>News Article</title>
<link href="base.css" rel="stylesheet" />
<script type="text/javascript" src="base.js"></script>
</head>
<body>
<header>
News Site
</header>
<article>
<h1>Article Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
</article>
<img src="mountains.jpg">
</body>
</html>Это намеренно упрощенная страница с обычными статическими элементами новостных статей: CSS, JavaScript и тегом изображения.
Наша AMP-версия статьи на данный момент является просто копией оригинальной статьи. Давайте конвертируем его в AMP. Для начала мы добавим файл библиотеки AMP JavaScript и посмотрим, какие ошибки появляются при включении валидатора AMP.
Чтобы включить библиотеку AMP, добавьте эту строку в конец <head> :
<script async src="https://cdn.ampproject.org/v0.js"></script> Теперь давайте загрузим новую страницу article.amp.html в наш браузер по следующей ссылке и откроем консоль разработчика в Chrome через Menu > More Tools > Developer Tools :
Теперь проверьте вывод JavaScript в консоли разработчика. Убедитесь, что у вас выбрана вкладка Консоль:
Вы должны увидеть этот журнал:
Powered by AMP ⚡ HTML
Теперь, чтобы включить валидатор AMP , добавьте этот идентификатор фрагмента к вашему URL-адресу:
#development=1
Например:
http://localhost:8000/article.amp.html#development=1
Возможно, вам придется вручную обновить страницу в браузере. Вы можете вручную обновить страницу в браузере, нажав эту кнопку:
Вы должны получить несколько ошибок проверки:
Несмотря на то, что AMP означает ускоренные мобильные страницы, его можно использовать для создания адаптивных страниц, которые хорошо отображаются на экранах всех размеров. Для получения дополнительной информации посетите раздел Адаптивный веб-дизайн на веб-сайте Google Developers.
Для имитации работы мобильного устройства в инструментах разработчика Chrome. Щелкните значок мобильного телефона здесь:
Теперь выберите мобильное устройство (например, «Pixel 2») в этом меню:
Вы должны увидеть в браузере смоделированное мобильное разрешение, например:
Теперь мы готовы приступить к работе! Давайте рассмотрим ошибки проверки одну за другой и рассмотрим, как они связаны с AMP.
Требуется кодировка
Начнем с исправления следующей ошибки:
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
Для правильного отображения текста AMP требует, чтобы была установлена кодировка для страницы. Он также должен быть первым потомком тега head. Причина этого заключается в том, чтобы избежать повторной интерпретации содержимого, которое было добавлено до тега meta charset.
Добавьте следующий код в качестве первой строки тега head:
<meta charset="utf-8" /> Сохраните файл, перезагрузите страницу и убедитесь, что эта ошибка больше не отображается.
Файлы AMP должны иметь <link rel=canonical> .
Каждый документ AMP должен иметь ссылку на каноническую страницу. Итак, давайте добавим ссылку на нашу исходную статью.
Идем дальше и добавляем следующий код под <meta charset="utf-8" /> :
<link rel="canonical" href="/article.html">
Теперь перезапустите веб-сервер, если это необходимо, и перезагрузите страницу. Хотя есть еще много ошибок, которые нужно исправить, ошибки «Файлы AMP должны иметь <link rel=canonical> » больше нет.
Требуется атрибут AMP
AMP требует наличия атрибута в корневом HTML-элементе страницы, чтобы объявить страницу документом AMP:
The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html' The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.
Это решается простым добавлением атрибута ⚡ к тегу <html> следующим образом:
<!doctype html>
<html ⚡ lang="en">
<head>
...Теперь продолжайте, перезагрузите страницу и убедитесь, что обе ошибки исчезли.
Требуется область просмотра
Далее мы рассмотрим следующую ошибку:
The mandatory tag 'meta name=viewport' is missing or incorrect.
AMP требует определения width и minimum-scale области просмотра. Эти значения должны быть определены как device-width и 1 соответственно. Окно просмотра — это общий тег, включенный в <head> HTML-страницы.
Это лучше всего исправить, добавив следующий фрагмент HTML в <head> . Добавьте следующий meta :
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<link rel="canonical" href="/article.html">
<!-- The following is the meta tag and viewport information we must add to the page: -->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
... Это единственные допустимые значения width и minimum-scale в AMP. Определение initial-scale не является обязательным, но его рекомендуется включать в разработку мобильных веб-приложений. Подробнее о вьюпорте и адаптивном дизайне можно прочитать здесь .
Как и раньше, перезагрузите страницу и проверьте, исчезла ли ошибка.
Внешние таблицы стилей
Следующая ошибка связана с использованием таблиц стилей:
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.
В частности, это жалоба на следующий тег ссылки таблицы стилей в нашем <head> :
<link href="base.css" rel="stylesheet" />Проблема в том, что это внешняя ссылка на таблицу стилей. В AMP, чтобы максимально сократить время загрузки документов, разработчикам не разрешается включать внешние таблицы стилей. Вместо этого все правила таблицы стилей должны быть встроены в документ AMP.
Поэтому удалите тег ссылки в <head> и замените его встроенным тегом, например следующим:
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
...
</style> Содержимое тега стиля должно быть скопировано непосредственно из файла base.css в каталоге вашего проекта. Атрибут amp-custom в теге стиля является обязательным .
Еще раз перезагрузите страницу и проверьте, исчезла ли ошибка таблиц стилей.
Сторонний JavaScript
В то время как таблицы стилей могут быть относительно легко переработаны с помощью AMP посредством встраивания, то же самое нельзя сказать о JavaScript.
The tag 'script' is disallowed except in specific forms.
В AMP не разрешены пользовательские сценарии. Скрипты в AMP разрешены только в том случае, если они соответствуют двум основным требованиям:
- Весь JavaScript должен быть асинхронным, т.е. включать атрибут
asyncв тег скрипта. - Можно включить только библиотеку AMP и компоненты AMP.
Это эффективно исключает использование всего стороннего JavaScript. Есть одно исключение: во фреймах может использоваться сторонний JavaScript.
Попробуйте открыть внешний файл base.js Что ты видишь? Файл должен быть свободен от кода JavaScript и содержать только информационный комментарий, подобный этому:
/* This external JavaScript file is intentionally empty. Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files. */
Учитывая, что этот внешний файл JavaScript не является функциональным компонентом нашего веб-сайта, мы можем полностью удалить ссылку.
Удалите из документа следующую внешнюю ссылку на JavaScript:
<script type="text/javascript" src="base.js"></script>
Теперь перезагрузите страницу и убедитесь, что ошибка скрипта исчезла.
Шаблон AMP CSS
The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. The mandatory tag 'head > style : boilerplate' is missing or incorrect. The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.
Следующие ошибки относятся к двум отсутствующим тегам в <head> . Каждый документ AMP требует включения этих тегов:
<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> Добавьте приведенный выше фрагмент кода в конец тега <head> вашего документа.
Первый тег делает содержимое страницы невидимым до тех пор, пока библиотека AMP JavaScript не обновит тег body, чтобы он снова стал видимым после того, как содержимое страницы будет готово к отображению. AMP делает это, чтобы предотвратить появление содержимого страницы, которое еще не было оформлено. Это гарантирует, что взаимодействие с пользователем будет действительно мгновенным, поскольку содержимое страницы появляется сразу, а все, что находится выше сгиба, отображается вместе. Второй тег меняет эту логику, если в браузере отключен JavaScript.
Тег amp-img
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? В AMP есть веб-компонент, специально разработанный для замены тега изображения, который называется amp-img :
<amp-img src="mountains.jpg"></amp-img> Попробуйте включить указанный выше тег amp-img и снова запустить валидатор. Вы должны получить несколько новых ошибок:
AMP-IMG# Layout not supported for: container The implied layout 'CONTAINER' is not supported by tag 'amp-img'.
Почему amp-img вызвал еще одну ошибку? Потому что amp-img не является прямой заменой традиционного HTML-тега img . Существуют дополнительные требования при использовании amp-img.
Система макетов
Эта ошибка говорит нам о том, что amp-img не поддерживает тип макета «контейнер». Одной из наиболее важных концепций в дизайне AMP является его сосредоточенность на уменьшении количества перекомпоновки DOM, необходимой для отображения его веб-страниц.
Чтобы уменьшить перекомпоновку DOM, AMP включает в себя систему компоновки, обеспечивающую максимально жесткую компоновку страницы как можно раньше в жизненном цикле загрузки и рендеринга страницы.
Система компоновки позволяет размещать и масштабировать элементы на странице различными способами — с фиксированными размерами, адаптивным дизайном, фиксированной высотой и т. д.
В нашем случае система макета вывела наш тип макета для amp-img как тип container . Однако тип контейнера предназначен для элементов, содержащих дочерние элементы, и несовместим с тегом amp-img , что является причиной этой ошибки.
Почему был выбран тип контейнера? Потому что мы не указали атрибут высоты для тега amp-img . В HTML перекомпоновку можно уменьшить, всегда указывая фиксированную ширину и высоту для элементов на странице. В AMP рекомендуется определять ширину и высоту для элементов amp-img, так как это позволяет AMP понять соотношение сторон элемента.
Установите ширину и высоту следующим образом:
<amp-img src="mountains.jpg" width="266" height="150"></amp-img>Обновите страницу и проверьте валидатор — ошибок больше не должно быть! Однако изображение выглядит не так хорошо, так как неудобно расположено на странице. Было бы здорово, если бы мы могли масштабировать изображение, чтобы оно гибко растягивалось и соответствовало размеру страницы независимо от размера экрана.
Удивительно, но определение ширины и высоты не ограничивает элемент полностью фиксированным размером. Система компоновки AMP может позиционировать и масштабировать элемент различными способами, зная его соотношение сторон — атрибут макета информирует AMP о том, как вы хотите расположить и масштабировать элемент.
Установив для атрибута layout значение responsive , мы можем добиться этого:
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>Вуаля! Наше изображение имеет правильное соотношение сторон и отзывчиво заполняет ширину экрана.
Успех!
Теперь ваш AMP-документ должен выглядеть примерно так:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="/article.html">
<link rel="shortcut icon" href="amp_favicon.png">
<title>News Article</title>
<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 amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
header {
background: Tomato;
color: white;
font-size: 2em;
text-align: center;
}
h1 {
margin: 0;
padding: 0.5em;
background: white;
box-shadow: 0px 3px 5px grey;
}
p {
padding: 0.5em;
margin: 0.5em;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<header>
News Site
</header>
<article>
<h1>Article Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
</article>
</body>
</html>Обновите страницу и посмотрите на вывод консоли. Вас должно приветствовать следующее сообщение:
AMP validation successful.
Часто задаваемые вопросы
Частью новой инициативы AMP является выделение действительных документов AMP в интерфейсе результатов поиска Google в рамках нового интерфейса карусели. Этот интерфейс обеспечивает лучший пользовательский интерфейс для людей, которые ищут статьи в Интернете. Чтобы этот опыт был наилучшим, включенные страницы должны соответствовать определенным критериям, помимо прохождения проверки AMP.
На этом шаге представлен обзор полных требований.
Связывание канонических страниц и документов AMP
AMP направлен на то, чтобы сделать Интернет быстрее, и, хотя проект был больше ориентирован на статический контент в первые дни, добавление таких компонентов, как amp-bind , делает его подходящим для самых разных сайтов, таких как новостные издатели, интернет-магазины, туристические сайты, блоги и другие.
Тем не менее, важно полностью понимать, как AMP должен располагаться внутри структуры веб-сайта. Несмотря на то, что AMP можно использовать для создания целых веб-сайтов, многие издатели предпочитают использовать его, как и парный подход, когда документы AMP генерируются в качестве дополнения к обычным статьям HTML, которые издатель размещает на своем веб-сайте.
Канонические ссылки на обычных HTML-страницах — это распространенный метод объявления страницы, которую следует считать предпочтительной, когда несколько страниц содержат одно и то же содержимое. Поскольку AMP-документы могут быть созданы и доступны вместе с традиционными страницами статей на веб-сайте, мы должны рассматривать традиционные HTML-страницы как «канонические» страницы.
Мы уже сделали первый шаг для достижения этого в нашем документе AMP, включив тег ссылки в <head> обратно на каноническую страницу:
<link rel="canonical" href="/article.html"> Следующий шаг — связать каноническую статью со страницей AMP. Это достигается включением <link rel="amphtml"> в раздел <head> канонической статьи.
Добавьте следующий код в раздел <head> файла article.html :
<link rel="amphtml" href="/article.amp.html">Следующая диаграмма иллюстрирует направления тегов ссылок:
Необходимо настроить эту двунаправленную связь, чтобы поисковый робот Google понял взаимосвязь между нашим обычным каноническим документом HTML и нашим документом AMP. Если бы ссылки не были предоставлены, сканеру не обязательно было бы ясно, какие статьи являются «версиями AMP» обычных документов HTML. Явно предоставляя эти ссылки, мы гарантируем отсутствие двусмысленности!
Метаданные поисковой системы Schema.org
Еще одним требованием к документам AMP для отображения в новом интерфейсе карусели является соблюдение спецификации метаданных поисковой системы Schema.org. Эти метаданные включаются в <head> ваших документов с помощью тега скрипта типа application/ld+json .
Добавьте следующий код в конец раздела <head> документа AMP:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://example.com/my-article.html"
},
"headline": "My First AMP Article",
"image": {
"@type": "ImageObject",
"url": "https://example.com/article_thumbnail1.jpg",
"height": 800,
"width": 800
},
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "John Doe"
},
"publisher": {
"@type": "Organization",
"name": "⚡ AMP Times",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/amptimes_logo.jpg",
"width": 600,
"height": 60
}
},
"description": "My first experience in an AMPlified world"
}
</script>Перезагрузите страницу в браузере и дважды проверьте, не было ли ошибок проверки AMP.
Теперь откройте инструмент проверки структурированных данных в новом окне браузера и нажмите «Проверить мою разметку». Затем выберите вкладку «Фрагмент кода», скопируйте полный исходный код со своей страницы AMP и вставьте его в панель текстового редактора инструмента проверки, а затем нажмите «Выполнить тест»:
Вы должны увидеть что-то вроде этого на странице:
Ключевые требования для появления в новой карусели поиска Google для новостных статей на основе AMP следующие:
- Убедитесь, что ваш документ AMP проходит проверку.
- Ссылайтесь на свой документ AMP с традиционной HTML-страницы с помощью тега <link> и наоборот.
- Включите тег метаданных поисковой системы выше.
Подробнее об обнаружении страниц см .
Вы завершили лабораторную работу с кодом и успешно изучили многие фундаментальные концепции документов AMP.
Надеюсь, вы не только поняли, как эти концепции и функции могут быть реализованы в документе AMP, но также поняли, почему AMP был разработан таким образом.
Ниже приведены некоторые дополнительные темы и ссылки, которые вы, возможно, захотите изучить, чтобы еще больше расширить свои навыки!