Как использовать AMP с WordPress

Как можно AMP их сайт?

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

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

• Я рекомендую переписать весь шаблон сайта, чтобы справиться с ограничениями. Например, CSS страницы AMP должен быть в строке, а размер страницы не должен превышать 50 КБ. Кроме того, из-за быстрой загрузки шрифтов их следует загружать с помощью расширения amp-font , чтобы эффективно загружать страницу.
• Рекомендуется обращаться с мультимедиа с особой осторожностью. Для изображений вам нужно использовать элемент и точная ширина и высота. Кроме того, если ваши изображения представляют собой GIF-изображения, вам потребуется использовать отдельный расширенный компонент amp-anim .
• Для видео есть два варианта. Для встроенного видео есть специальный тег amp-video . Однако, если вы хотите встроить видео на YouTube, для этого есть специальный тег amp-youtube .
• Для встраивания слайд-шоу можно использовать ампер-карусель . В дополнение к этому, если вы хотите добавить лайтбокс изображения, вы можете использовать amp-image-lightbox .
• Для встраивания социальных сетей, таких как Twitter , Facebook , Instagram , Pinterest и Vine , вы можете использовать каждый соответствующий компонент.
• Этот момент очень важен. Теперь, когда все настроено и вы готовы перейти на страницу AMP, вы должны сообщить Google о вашем сайте AMP. Вам нужно будет добавить тег на главной странице сообщения с информацией о вашей странице AMP <link rel="amphtml" href="http://www.yourblog.com/blog-post/amp/"><link rel="canonical" href="http://www.yourblog.com/blog-post/">

Вы можете узнать больше о тегах AMP и метаданных Schema.org для AMP здесь . Метаданные Schema.org «это требование, чтобы ваш контент мог появляться в демонстрационной версии карусели новостей Google Search». Итак, если вы хотите добиться успеха с помощью Google AMP, вы должны правильно настроить схему.

Работает ли Google Analytics с AMP?

Да, конечно, аналитика работает на AMP. На самом деле, аналитика на AMP также довольно умная. Чтобы предотвратить замедление работы веб-сайта из-за нескольких средств отслеживания аналитики, они работают над основной философией «Измеряй один раз, отчитывайся перед многими». Как правило, есть два способа включить Analytics с AMP для вашего сайта.

• Элемент amp-pixel : это простой тег для подсчета количества просмотров страниц (аналогично пикселю отслеживания) с помощью запроса GET.
• Расширенный компонент amp-anayltics : этот компонент более продвинутый, чем amp-pixel Вы можете использовать его для измерения любой активности на странице AMP. Это позволяет вам указать конфигурацию JSON, которая предоставляет подробную информацию о том, что измерять и куда отправлять отчет.

Как использовать AMP с сайтами WordPress

Фактически, один из самых простых способов использования AMP — реализовать его на своем сайте WordPress. Вы можете использовать официальный плагин, разработанный Automattic / WordPress.

Шаг первый: установите плагин WordPress

Давайте начнем установку! скачайте плагин по вышеуказанной ссылке и установите плагин на вашем сайте WordPress. После установки вам просто нужно добавить «/ amp /» на страницу статьи. Если у вас не включены красивые постоянные ссылки, вы можете попробовать ?amp=1

Шаг второй: проверка и настройка

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

Итак, что теперь делать? Чтобы справиться с этими сложными ситуациями, я рекомендую использовать комбинацию процесса проверки Chrome и консоли поиска. Чтобы использовать процесс проверки Chrome, посетите любую страницу AMP в Chrome. Затем в конце URL добавьте #development=1 Теперь нажмите Control+Shift+I

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

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

Шаг третий: проверка разметки схемы

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

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

 if ( $site_icon_url ) {
  $metadata['publisher']['logo'] = array(
    '@type' => 'ImageObject',
    'url' => $site_icon_url,
    'height' => self::SITE_ICON_SIZE,
    'width' => self::SITE_ICON_SIZE,
  );
}

чтобы:

 $metadata['publisher']['logo'] = array(
  '@type' => 'ImageObject',
  'url' => 'http://yourdomain.com/wp-content/uploads/logo-company.png',
  'height' => 60,
  'width' => 170,
);

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

Шаг четвертый: Интеграция Google Analytics с плагином AMP WordPress.

Теперь вы почти закончили. Однако я предпочитаю использовать Google Analytics для отслеживания статистики. Плагин AMP WordPress активно не активировал amp-analytics

Чтобы плагин AMP WordPress работал в сотрудничестве с Google Analytics, перейдите в раздел Плагины -> Редактор -> выберите «AMP» и добавьте следующий код в его конец.

 add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <?php
}

add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );

function xyz_amp_add_analytics( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
    <amp-analytics type="googleanalytics" id="analytics1">
    <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"  ←(YOUR GOOGLE ANALYTICS PROPERTY ID)
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    </script>
    </amp-analytics>
    <?php
}

Убедитесь, что вы изменили значение UA-XXXXX-Y

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

Приговор по проекту AMP от Google

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

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

Что вы думаете о проекте AMP? Пожалуйста, поделитесь своим мнением в разделе комментариев ниже!