Основы ускоренных мобильных страниц

1. Обзор

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

Что вы узнаете

• Как AMP улучшает пользовательский опыт в мобильном интернете.
• Основы AMP-сайта.
• Ограничения AMP.
• Как веб-компоненты AMP решают распространённые проблемы новостных сайтов.
• Как проверить работоспособность вашего AMP.
• Как подготовить AMP-страницу для поиска Google.

Что вам понадобится

• Пример кода
• Python (желательно версии 2.7) или расширение Chrome 200 OK Web Server.
• Chrome (или аналогичный браузер, способный проверять консоль JavaScript)
• Редактор кода (например, Atom, Sublime, Notepad++)

2. Получите пример кода.

Вы можете либо загрузить весь пример кода на свой компьютер:

Скачать ZIP

...или клонируйте репозиторий GitHub из командной строки:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

Вы скачаете ZIP-файл, содержащий несколько примеров файлов с ресурсами и стартовую страницу article.html.

Распакуйте папку и перейдите в этот каталог через командную строку на вашем компьютере.

3. Запустите тестовую страницу.

Для тестирования нашей тестовой страницы нам необходимо получить доступ к файлам с веб-сервера. Существует несколько способов создания временного локального веб-сервера для целей тестирования. В рамках этой лабораторной работы мы предоставим инструкции для 3 доступных вариантов:

• Приложение Google Chrome "Web Server for Chrome" — это рекомендуемый подход, поскольку это самое простое и кроссплатформенное решение. Примечание: для этого подхода необходимо установить Google Chrome.
• Firebase Hosting — альтернативный вариант, если вас также интересует наша новая платформа для размещения статических ресурсов «Firebase Hosting». SSL-шифрование включено по умолчанию.
• Локальный HTTP-сервер на Python — требует доступа к командной строке.

Примечание : Настоятельно рекомендуется использовать HTTPS в производственных средах. HTTPS имеет ряд преимуществ, помимо безопасности, включая SEO. Подробнее об этом можно прочитать здесь .

Вариант №1: Веб-сервер для Chrome

Приложение "Web Server for Chrome" можно найти по этой ссылке в Chrome Web Store.

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

Кроме того, следует установить флажок «Автоматически показывать index.html» и указать порт «8000». Для вступления изменений в силу потребуется перезапустить веб-сервер.

Доступ к этому URL-адресу осуществляется по следующему адресу:

http://localhost:8000/article.html

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

Вариант №2: Firebase Hosting

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

Firebase Hosting — это провайдер статического хостинга, который позволяет быстро развернуть и разместить статический веб-сайт и его ресурсы, включая файлы HTML, CSS и JavaScript. Пользователи получают выгоду от снижения задержки, поскольку статический контент кэшируется в сети доставки контента (CDN) с точками присутствия (PoP), расположенными по всему миру.

Наконец, Firebase Hosting всегда использует SSL-шифрование, что отлично подходит для AMP и веб-разработки в целом. Если вас больше интересует исключительно AMP, то этот вариант можно просто проигнорировать.

Вариант №3: HTTP-сервер на Python

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

Чтобы запустить встроенный HTTP-сервер Python из командной строки, просто выполните следующую команду:

python -m SimpleHTTPServer

И перейдите по этой ссылке :

http://localhost:8000/article.html

4. Создайте обычную HTML-страницу.

В загруженном zip-архиве вы найдете файл article.html . Это статья, для которой мы создаем AMP-версию.

Скопируйте код из примера article.html и вставьте его в новый файл. Сохраните этот файл как article.amp.html.

Примечание : Вам не обязательно называть свои AMP-файлы как .amp.html . На самом деле, AMP-файлы могут иметь любое желаемое расширение. Часто издатели отличают AMP-страницы от канонических версий, используя параметры в URL-адресе. Например: http://publisher.com/article.html?amp

Теперь ваш файл 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. Для начала добавим файл библиотеки JavaScript для AMP и посмотрим, какие ошибки появляются при включении валидатора 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 расшифровывается как Accelerated Mobile Pages (ускоренные мобильные страницы), его можно использовать для создания адаптивных страниц, которые хорошо отображаются на экранах всех размеров. Для получения дополнительной информации ознакомьтесь с разделом «Адаптивный веб-дизайн» на сайте Google Developers.

Чтобы имитировать работу на мобильном устройстве в инструментах разработчика Chrome, щелкните значок мобильного телефона здесь:

Теперь выберите мобильное устройство (например, Pixel 2) из ​​этого меню:

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

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

5. Устранение ошибок проверки.

Требуется кодировка символов

Начнём с исправления следующей ошибки:

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

Для корректного отображения текста AMP требует указания кодировки страницы. Кроме того, страница должна быть первым дочерним элементом тега <head>. Это необходимо для предотвращения повторной интерпретации контента, добавленного до тега <meta>.

Добавьте следующий код в качестве первой строки тега <head>:

<meta charset="utf-8" />  

Сохраните файл, перезагрузите страницу и убедитесь, что эта ошибка больше не отображается.

Для AMP-файлов необходим тег <link rel=canonical> .

В каждом AMP-документе должна быть ссылка на каноническую страницу. Поэтому давайте добавим ссылку на нашу оригинальную статью.

Добавьте следующий код ниже тега <meta charset="utf-8" /> :

<link rel="canonical" href="/article.html">

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

<link rel="canonical" href="/article.amp.html">

Теперь, при необходимости, перезапустите веб-сервер и обновите страницу. Хотя ошибок по-прежнему много, ошибка "AMP-файлы должны содержать тег <link rel=canonical> " больше не появляется.

Требуется атрибут AMP

Для того чтобы страница считалась AMP-документом, в корневом HTML-элементе страницы был указан соответствующий атрибут:

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>
...

Теперь перезагрузите страницу и убедитесь, что обе ошибки исчезли.

Примечание : Хотя использование символа ⚡ является рекомендуемым подходом, вместо него также можно использовать атрибут amp. Таким образом, разметка будет выглядеть следующим образом:

<!doctype html>

<html amp 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-документ.

Поэтому удалите тег <link> в разделе <head> и замените его строчным тегом, например, следующим:

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

Содержимое тега `<style>` следует скопировать непосредственно из файла base.css в каталоге вашего проекта. Атрибут amp-custom для тега `<style>` является обязательным .

Ещё раз перезагрузите страницу и проверьте, исчезла ли ошибка с таблицами стилей.

Примечание : помимо необходимости использования встроенных стилей, существует ограничение на размер файла в 50 килобайт для всей информации о стилях. Рекомендуется использовать препроцессоры CSS, такие как SASS , и минимизировать ваш CSS перед его встраиванием на страницы.

Важно : во всем AMP-документе может быть только один тег `<style>`. Если ваши статьи содержат ссылки на несколько внешних таблиц стилей, вам потребуется объединить эти таблицы стилей в один набор правил. Для получения дополнительной информации о допустимых правилах CSS в AMP-документах ознакомьтесь с этой страницей документации .

JavaScript сторонних разработчиков

В то время как таблицы стилей можно относительно легко переработать с помощью встраивания (inlining) в AMP, для JavaScript это не так.

The tag 'script' is disallowed except in specific forms.

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

• Весь JavaScript должен быть асинхронным, то есть включать атрибут async в тег <script>.
• Включать можно только библиотеку AMP и компоненты AMP.

Это фактически исключает использование любого стороннего JavaScript. Есть одно исключение — сторонний JavaScript может использоваться в iframe.

Попробуйте открыть внешний файл base.js Что вы видите? Файл должен быть пустым и содержать только комментарий с информацией, подобной этой:

/*

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>

Теперь перезагрузите страницу и убедитесь, что ошибка скрипта исчезла.

Важно : Включение JavaScript через iframe следует рассматривать как крайнюю меру. По возможности функциональность JavaScript следует заменять встроенными компонентами AMP. Первый компонент AMP мы рассмотрим в следующем разделе.

Примечание : Исключение составляют только скрипты, созданные пользователями, если атрибут type имеет значение application/ld+json или application/json ; они используются для добавления метаданных на страницу и настройки компонентов AMP. В будущем могут быть добавлены и другие неисполняемые скрипты.

Шаблон CSS для AMP

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> вашего документа.

Первый тег делает содержимое страницы невидимым до тех пор, пока библиотека JavaScript AMP не обновит тег 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 не поддерживает тип макета 'container'. Одна из важнейших концепций в дизайне 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 может позиционировать и масштабировать элемент различными способами, зная его соотношение сторон — атрибут layout сообщает 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.

Часто задаваемые вопросы

• Что такое переформатирование DOM?
• Что произойдет, если атрибут layout не определен?
• Что произойдет, если ширина и высота не определены?

6. Канонические URL-адреса, метаданные и поиск

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

На этом этапе представлен общий обзор всех требований.

Связывание канонических страниц и AMP-документов

Цель AMP — ускорить работу веб-сайтов, и хотя на ранних этапах проект был больше ориентирован на статический контент, добавление таких компонентов, как amp-bind , делает его подходящим для самых разных сайтов, таких как новостные издания, интернет-магазины, туристические сайты, блоги и другие.

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

Примечание: Для получения дополнительной информации об использовании AMP для создания полноценного веб-сайта, также называемого каноническим сайтом AMP, обязательно ознакомьтесь с практической работой " Красивые, интерактивные, канонические страницы AMP " .

Каноническая ссылка на обычных 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-страницы и вставьте его в текстовый редактор инструмента проверки, после чего нажмите «Запустить тест».

На странице вы должны увидеть что-то подобное:

Важно: Убедитесь, что отображается зеленый текст «Все в порядке». В карусели AMP будут отображаться только AMP-страницы, прошедшие эту проверку.

Примечание : Содержание всегда должно быть одинаковым. Для новостных статей используйте тип "NewsArticle". Заголовок должен соответствовать названию вашей статьи. Изображение относится к главному изображению статьи.

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

1. Убедитесь, что ваш AMP-документ проходит валидацию.
2. Ссылайтесь на свой AMP-документ со своей обычной HTML-страницы с помощью тега <link> и наоборот.
3. Добавьте указанный выше тег метаданных для поисковых систем.

Подробнее о поиске страниц можно прочитать здесь.

7. Поздравляем!

Вы завершили лабораторную работу по программированию и успешно изучили многие фундаментальные концепты AMP-документов.

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

Ниже приведены дополнительные темы и ссылки, которые вы можете изучить, чтобы еще больше расширить свои навыки!

• Всё о поиске страниц
• Запрещенные HTML-теги
• Ограниченные правила CSS и анимации
• Подробнее об iFrames
• AMP CDN
• Список доступных компонентов AMP