Обеспечение обнаружения страницы

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

Добавление ссылок на AMP-контент

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

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

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

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

Linking AMP content

В рамках этого урока мы рассмотрим ситуацию, когда у каждой страницы есть две версии — AMP и традиционная. В нашем примере на сайте есть новостная статья, у которой есть как традиционная (не-AMP) HTML-версия (article.html), так и AMP-версия (article.amp.html). Мы свяжем эти страницы друг с другом при помощи тегов link.

Мы уже выполнили первый шаг, когда добавили в раздел <head> нашего AMP-документа тег link, указывающий на каноническую страницу:

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

Следующий шаг — добавить в каноническую версию статьи ссылку на AMP-страницу. Для этого необходимо включить тег <link rel="amphtml"> в раздел <head> канонической статьи.

В файле article.html добавьте в раздел <head> следующий код:

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

Направление переходов по тегам link проиллюстрировано на следующей диаграмме:

Linking AMP content

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

Добавление структурированных данных

Стандарт AMP не требует присутствия на страницах структурированных данных schema.org, однако некоторые платформы, например поиск Google, требуют их для работы определенных функций, таких как кольцевая галерея «Главные истории». В большинстве случаев полезно добавлять структурированные данные на страницу: они помогают поисковым системам лучше понимать ее содержание, а также улучшают отображение вашего контента на странице результатов поиска (например, при помощи расширенных фрагментов). Для включения структурированных данных используется тег script с типом application/ld+json в разделе <head> AMP-страницы.

Чтобы включить в нашу новостную статью структурированные данные, добавьте в конец раздела <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>

ПРИМЕЧАНИЕ. Контент всегда должен быть идентичным. Для новостных статей укажите тип «NewsArticle». В поле «headline» должен быть указан заголовок статьи. Объект «image» указывает на главное изображение статьи.

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

Помимо формата структурированных данных schema.org существуют также другие форматы, поддерживаемые поисковыми системами и социальными сетями. Подробнее см. в документации:

Валидация структурированных данных

Многие платформы предоставляют инструменты валидации, которые позволяют проверить правильность структурированных данных. В данном уроке мы будем использовать для валидации инструмент проверки структурированных данных Google.

Откройте инструмент проверки структурированных данных Google в новом окне браузера.
Выберите вкладку Фрагмент кода.
Скопируйте и вставьте полный исходный код вашей AMP-страницы в поле текстового редактора инструмента проверки.
Нажмите Запустить тест.

Если структурированные данные указаны верно, вы увидите 0 ошибок и 0 предупреждений.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ. Подробнее о том, как сделать страницу доступной для обнаружения, читайте в руководстве Как сообщать о наличии AMP-версии страницы.

Теперь ваша новостная статья в формате AMP готова. Так держать!

Предыдущая глава Следующая глава