Как внедрить AMP на свой сайт и получить сверхзвуковую скорость загрузки

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

Быстрая загрузка веб -сайта совершенно необязательна. Объем человеческого внимания находится в нисходящей спирали — никто не хочет ждать, особенно если он использует мобильное устройство.

Насколько быстро нам нужно быть? Google рекомендует время загрузки страницы менее двух секунд.

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

Однако одна из этих мер — настройка ускоренных мобильных страниц (AMP) для мобильной версии веб-сайта — используется экономно.

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

Стоит ли вам инвестировать в AMP? Если ответ «да», этот пост поможет вам с пошаговым процессом эффективной настройки AMP для вашего веб-сайта WordPress.

Внедрите AMP. Шаг 1. Выберите правильный плагин

Опции плагина

WordPress предлагает множество плагинов для AMP. Я попробовал несколько из них с разной степенью успеха. Один из них какое-то время давал замечательные результаты в Google Pagespeed Insights. Но это сломало все мои AMP-страницы на мобильных устройствах!

Моя рекомендация

Я бы порекомендовал плагин AMP for WP — Accelerated Mobile Pages — WordPress. Этот плагин предоставляет множество возможностей для настройки мобильных веб-страниц. Остальная часть поста будет посвящена настройке AMP для вашего сайта с помощью этого плагина.

После того, как вы установите и активируете плагин, на панели инструментов WordPress появится возможность открыть AMP-версию вашего сайта. Вы также увидите новый плагин (AMP), как показано на изображении ниже.

Как и на изображении выше, вы увидите набор параметров, мы рассмотрим каждый из них один за другим.

Перейдем к настройкам.

Внедрение AMP. Шаг 2. Базовая настройка плагина.

Тип сайта

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

Где вам нужно внедрить AMP?

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

Обратной стороной этого является то, что это влияет на пользовательский опыт (UX). Например, у вас больше не может быть кнопки призыва к действию (CTA), которая поворачивается, чтобы привлечь внимание посетителя. AMP вырезает этот код, тем самым экономя время загрузки страницы. В конечном итоге это может привести к снижению уровня вовлеченности.

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

Дизайн и презентация

Здесь вы можете настроить свой логотип , рекомендуемый размер 120 x 90 пикселей. Я бы рекомендовал не использовать логотип, так как он увеличивает время загрузки страницы. Если логотип на этой панели не обновляется, на странице AMP вместо логотипа будет только название веб-сайта.

Параметр « Глобальная цветовая схема » поможет вам выбрать цвет для ваших страниц AMP, который будет отображаться на ссылках CTA на странице и на ссылке в нижнем колонтитуле.

Например, я выбрал светло-голубой в качестве глобального цвета , как показано на изображении ниже.

Отслеживание аналитики

На этой панели параметров вы можете включить инструменты, которые вы используете для отслеживания. Например, вы можете включить Google Analytics, добавив идентификатор отслеживания. Таким образом, данные со страниц AMP будут обновляться непосредственно в вашей учетной записи Google Analytics.

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

Настройки конфиденциальности

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

Источник изображения — Monster Insights

Если вы или ваша аудитория из страны, в которой действует GDPR, вам необходимо включить настройки для GDPR — Общего регламента по защите данных.

Обратите внимание, если вам нужно выбрать, вы можете выбрать только один из двух вариантов, а не оба.

Рекламное объявление

В этом сегменте выберите, где вы хотите разместить свою рекламу. Вы можете настроить в соответствии с потребностями — вы можете публиковать рекламу на всем сайте или в отдельных сообщениях, или заголовки среди других вариантов.

Вы можете выбрать тип объявления, размер объявления, рекламный клиент данных и рекламное место данных в рекламном коде AdSense.

Совместимость со сторонними производителями

Последний объект содержит список плагинов, для которых вам нужна совместимость с AMP.

Gravity Form и Elementor для AMP требуют, чтобы вы платили за расширения. Структурированные данные, реклама для WP и PWA для WP — бесплатные плагины. Последние три будут рассмотрены более подробно позже в посте.

Внедрение AMP. Шаг 3. Дополнительные настройки AMP

общие настройки

Вкладка «Общие» охватывает параметры, которые мы рассмотрели в базовой настройке. Кроме того, вы можете выбрать, хотите ли вы использовать AMP на страницах архивов, категорий и тегов.

Включение последней опции — AMP Takeover (Beta) — приведет к тому, что ваша настольная и мобильная версии будут одинаковыми. Это означает, что ваша настольная версия также будет иметь AMP-страницы.

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

Рекламное объявление

Этот раздел имеет те же параметры, что и раздел « Реклама » в базовой настройке.

SEO

Если вы решите включить мета-описание , текст, который вы заполните в разделе «Заголовок», будет обработан Google. Это будет отличаться от текста, который вы заполнили для настольной версии. Я бы порекомендовал отключить эту настройку и сохранить согласованность мета-описания в двух версиях.

Теги метаданных OpenGraph — это фрагменты кода, которые управляют отображением URL-адресов при публикации в социальных сетях. Этот раздел виден для настольной версии, когда вы настраиваете заголовок и метаданные в своем плагине SEO. Ниже приведен пример плагина Yoast SEO.

Вы можете найти его, перейдя в раздел «Редактор» любого поста или страницы, прокрутив вниз. Когда вы увидите раздел для Yoast, нажмите на вкладку «Социальные сети», после чего вы сможете выбрать платформу социальных сетей по своему выбору.

Плагин AMP позволяет вам выбрать нужный плагин SEO на той же панели параметров. В приведенном выше примере выбран плагин Yoast. Все данные, которые вы вводите в Yoast для настольной версии, копируются в версию AMP.

Вы увидите опцию « Удалить индексирование страниц с разбивкой на страницы» и « Совместимость инструмента проверки URL».

Страницы с разбивкой на страницы должны быть проиндексированы, но только как канонические. Я бы порекомендовал оставить эту настройку выключенной.

Совместимость с инструментами проверки URL способствует более прозрачному поиску. Он предоставляет подробные отчеты о сканировании, индексировании и предоставлении информации в вашей учетной записи Google Search Console. Я бы рекомендовал держать его включенным.

Поддержка Элементора

Опция AMPforWP PageBuilder позволит вам создавать отдельные страницы для версии AMP, отличные от версии для настольных компьютеров. Это полезно, когда вы хотите иметь немного другой текст или призыв к действию для AMP-страниц.

Например, если у вас есть CTA «Свяжитесь с нами» для настольного компьютера, но вы предпочитаете, чтобы посетители с мобильных устройств звонили вам, вы можете активировать эту опцию и создать отдельную страницу.

ПВА

В соответствии с описанием плагина AMP для WP — Progressive Web Apps (PWA) превращает ваш веб-сайт в веб-приложение и предоставляет посетителям возможности, аналогичные мобильным приложениям.

Это усовершенствование дизайна. Активация модуля является вопросом выбора.

Производительность

На панели «Производительность» более подробно рассматривается оптимизация скорости страницы.

Это позволяет вам минимизировать CSS/JS, чтобы уменьшить использование пропускной способности, не влияя на UX или функциональность. Использование кэша браузера позволяет ускорить время загрузки для постоянных посетителей. Я бы рекомендовал оставить обе опции включенными.

Включение Оптимизации CSS активирует функцию дрожания дерева оптимизации CSS. Вы можете оставить его включенным, если у вас нет другого плагина, который уже выполняет эту работу.

Аналитика, структурированные данные, панель уведомлений и GDPR

Эти разделы имеют те же параметры, что и в базовой настройке.

Всплывающее уведомление

Если вы хотите настроить push-уведомления, вы можете выбрать один из OneSignal, iZooto и Truepush .

В приведенном выше примере я выбрал OneSignal. Однако для любого выбора вы увидите раздел для ввода идентификатора приложения, возможность включения push-уведомлений для страниц. Кроме того, вам нужно выбрать, где вы хотите разместить уведомление (например, внизу страницы) и какой текст вы хотите отобразить.

Контактные формы

Это позволяет вам выбрать один из 3 плагинов для оптимизации AMP — Contact Form 7, Gravity Forms и Ninja Forms.

Все три требуют, чтобы вы заплатили за расширение. Если ваш CTA ориентирован в основном на формы, разумно инвестировать в расширение.

Комментарии

На этом экране вы можете выбрать, где на вашем веб-сайте должны отображаться созданные пользователями комментарии. Вы также можете выбрать источники для отображения комментариев.

Выберите настройки, которые лучше всего подходят для вас.

Моментальные статьи

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

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

Однако, поскольку контент остается на Facebook, вы можете потерять часть трафика на сайте. Это компромисс между скоростью страницы и посещаемостью сайта. Я бы порекомендовал держать его выключенным.

Если вы решите оставить его включенным, вы увидите следующие настройки.

После ввода идентификатора страницы Facebook вы можете настроить параметры статьи. Параметр, требующий дополнительных пояснений, — Crawler Ingestion .

Когда ссылка на вашу статью, размещенную на вашем веб-сайте, публикуется на Facebook, поисковые роботы Facebook ищут тег ia:markup_url . Если он присутствует, Facebook проглотит вашу статью и создаст мгновенную статью на вашей странице Facebook.

Инструменты

Параметр « Индивидуальная страница AMP » позволяет выбрать, хотите ли вы показывать страницы AMP по умолчанию или нет. Когда вы выбираете «Показать по умолчанию» , на всех ваших страницах будет отображаться версия AMP. Однако вы можете скрыть AMP для отдельных сообщений или страниц.

Для этого перейдите на любую страницу и нажмите « Редактировать страницу ». На вкладке « Настройки » справа вы можете найти возможность отключить его.

Точно так же вы можете скрыть версии AMP для выбранных категорий и сообщений.

Query Monitor — это панель инструментов разработчика для WordPress. Если вы разработчик, которому нужно видеть запросы на странице, вы должны оставить этот параметр включенным.

Дополнительные настройки

Панель параметров «Дополнительные настройки» содержит множество настроек, большинство из которых говорят сами за себя.

Я бы рекомендовал оставить настройки по умолчанию включенными, если вы не являетесь разработчиком WP или не наняли эксперта для разработки вашего сайта.

электронная коммерция

Если у вас есть интернет-магазин, вы можете настроить версию AMP для WooCommerce . Если вы в основном продаете цифровые активы, вы можете включить опцию поддержки Easy Digital Downloads . Оба варианта требуют, чтобы вы включили платное расширение.

Панель перевода

Эта панель позволяет выбрать правильный перевод часто используемого набора слов на язык по вашему выбору.

Например, вам нужно ввести перевод для просмотра версии без AMP , подходящей для вашей аудитории.

Для многоязычных переводов можно включить метод перевода «Использовать файл POT» . Файл POT (Portable Object Template) представляет собой шаблон для файлов PO. Это простые текстовые файлы, содержащие переводы. Каждый язык имеет собственное расширение файла. Например, во французском языке есть po.fr.

Внедрение AMP. Шаг 4. Дизайн

Темы

Как и для настольной версии вашего веб-сайта, вы можете выбрать тему для версии AMP.

Есть четыре бесплатных варианта на выбор.

• Быстрый
• Дизайн Один
• Дизайн второй
• И, Дизайн Три

Кроме того, на каждой странице и публикации есть раздел, который позволяет вам создать собственный дизайн.

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

Если вы установите флажок « Использовать конструктор», будет показан созданный вами шаблон, если нет, будет показан выбранный вами бесплатный шаблон.

Если вы создаете свой собственный шаблон, у вас есть следующие модули на выбор.

Помните, что AMP — это, по сути, HTML-страница. Вы не можете получить много настроек или модных кнопок.

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

Глобальный

Эта панель параметров позволяет настроить версию AMP.

Вы можете выбрать цвета выбора, как указано выше. Кроме того, вы можете выбрать Google Fonts . Тем не менее, я бы порекомендовал не включать его, так как Google Fonts увеличивает время загрузки, сводя на нет цель AMP.

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

Библиотека значков шрифтов будет такой же, как тема, которую вы выбрали в начале панели «Дизайн».

Заголовок

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

Он также позволяет добавить кнопку «Позвонить сейчас». Это полезная кнопка для мобильных пользователей.

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

Вы также можете включить панель поиска . Это выгодно, если у вас есть сайт для ведения блога.

Расширенный параметр заголовка позволяет более точно настроить параметры раздела заголовка. Это вопрос выбора. Однако имейте в виду, что не следует добавлять в код, так как это негативно повлияет на скорость загрузки страницы.

Домашняя страница, Одноместный, Нижний колонтитул, Страница, Социальный обмен, Дата и Разное

Эти дополнительные панели, как и заголовок, полностью зависят от дизайна. Вы можете выбрать любые настройки, которые подходят вам лучше всего.

Подведение итогов

Вышеуказанные шаги помогут вам эффективно внедрить AMP на своем веб-сайте. Сохранив изменения, проверьте версию AMP на своем телефоне или добавьте «/amp» после URL-адреса.

На изображениях ниже показаны особенности вашей страницы AMP.

ВИЗУАЛЬНАЯ СТРАНИЦА AMG

ФУТЕР

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