Как установить и настроить плагин Accelerated Mobile Pages (AMP) в WordPress

В прошлом октябре Google анонсировал AMP как проект с открытым исходным кодом для обеспечения более быстрой загрузки страниц на мобильных устройствах. Как сказали в TechCrunch, большинство считает, что AMP будет попыткой Google конкурировать с мгновенными статьями Facebook Instant Articles и мобильными приложениями, которые обеспечивают более быструю работу браузера. Мы склонны согласиться.


Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

Смотрите также:

  • Плагины WordPress AMP — Accelerated Mobile Pages
  • Как изменить Facebook Instant Articles для WordPress
  • 7 плагинов WordPress для адаптации веб-сайта под мобильные устройства
  • Как адаптировать WordPress веб-сайт к мобильным устройствам
  • Удобно ли использовать WordPress-сайт с мобильных устройств?

Страницы, оптимизированные с AMP, появятся в мобильном браузере в топе результатов Google Search, отодвинув статьи в традиционном HTML в низ рейтинга. Загружаться они будут действительно мгновенно.

Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

Честно говоря, мы скептически настроены по отношению к AMP для блогеров или небольших издателей. Часто мы пишем содержимое, который попадает в топ результатов Google Search. А сейчас придётся осваивать новую технологию с ограниченными ресурсами и надеждой, что наш контент окажется в топе. Интересно, что в отличии от больших издательств, в поиске нет записей блогов в AMP:


Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

В 1995 Microsoft выпускал MSN News как часть MSN Online Network, которая была запущена с Windows 95 — ответ Microsoft на AOL. MSN News требовали Application Viewer, который работал на платформе Microsoft Media Viewer. В течение года должно было произойти слияние веб с NBC, что позже стало MSNBC.com. Microsoft настраивал среду разработки, чтобы генерировать одновременно Media View и HTML. Это создало огромное число новых проблем.

AMP напоминает нам эту ситуацию. Это совершенно другая и ограниченная версия HTML, для которой необходимо сильно настроить веб-сайт и рекламу на нём.

Бесплатный плагин WordPress AMP

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


Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

AMP находится только в начале пути, и мы разочарованы, что Google решил создать абсолютно новую среду разработки, а не выбрал путь работать с издателями над оптимизацией HTML5 для более быстрой параметра загрузки страницы. Это было бы более логично. Но ведь в команде Google одни гении!(Сарказм.)

Несмотря на наши опасения, сегодня мы расскажем вам об установке плагина AMP для WordPress и Yoast SEO Glue для плагина AMP, что сможет вам лучше контролировать внешний вид веб-сайта.

Как выглядит AMP на WordPress?

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

Изображение страницы в оригинале на HTML5:

Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

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

<link rel="amphtml" href="http://jeffreifman.com/2016/01/28/a-new-business-model-for-twitter/amp/" /></head>

Но также есть и каноническая ссылка, определяющая URL исходной страницы:

<link rel="canonical" href="http://jeffreifman.com/2016/01/28/a-new-business-model-for-twitter/" />

Изображение страницы в AMP версии:

Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

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

Давайте сейчас поговорим об активации AMP на WordPress.

AMP WordPress Plugin


Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

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

Просто зайдите в Плагины → Добавить новый и поищите AMP:

Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

После установки нажмите Активировать:

Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

Сейчас зайдите на любую запись в блоге WordPress с окончанием /amp/ в конце адресной строки. Вы увидите упрощенную версию поста, который будет выглядеть примерно так:

Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

Glue for Yoast SEO & AMP

Универсальный AMP плагин от WordPress предоставляет пару параметров. Yoast SEO создали аддон для их популярного плагина, который дополнительно усиливает поддержку AMP.


Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

Вы можете без труда загрузить Glue for Yoast SEO & AMP из бесплатного каталога плагинов. Но сперва убедитесь, что вы установили плагин Yoast SEO.

Вы можете менять параметра AMP через боковое меню Yoast SEO – просто нажмите AMP внизу меню:

Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

Во-первых, Yoast может вам расширить функциональность AMP. По умолчанию, AMP меняет только актуальные записи – это специальные новостные статьи:

Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

Примечание: Если вы видите пустые страницы под вкладками, то убедитесь, что обновили оригинал плагина Yoast SEO, это должно помочь.

Во-вторых, Yoast предоставляет пару полезных методов параметра фирменной символики, дизайна и цветов:

Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

И наконец, они предоставляют метод размещения пользовательского кода Analytics в стиле AMP. Это не так просто, как кажется. Обратите внимание на программный код, который мы вставили ниже:

Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

Мы нашли AMP версию для внедрения Google Analytics. Просто настройте исходный код для сайта:

<amp-analytics type="googleanalytics" id="analytics1"><script type="application/json">{ "vars": { "account": "UA-xxxxxxxx-x" }, "triggers": { "trackPageview": { "on": "visible",    "request": "pageview"    }  }}</script></amp-analytics>

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

Отладка ошибок AMP

Через пару дней после установки AMP мы получили электронное письмо от Google Search Console, сообщающее об ошибках в 10 страницах. Но фактически не работали все наши AMP записи на веб-сайте.

Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

Мы вошли в Google Search Console, чтобы просмотреть страницы с ошибками и увидели это:

Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

Мы нажали на одну из страниц:

Как установить и изменить плагин Accelerated Mobile Pages(AMP) в WordPress

Потом нажали Open Page и рассмотрели ошибки более детально. Вы можете легко сделать это и вручную, добавив /amp#development=1 в конце URL. А потом открыть Developer Console в браузере:

Как установить и изменить плагин Accelerated Mobile Pages (AMP) в WordPress

Оказалось, что все наши AMP страницы были не рабочие из-за ошибки: The tag ‘script’ is disallowed except in specific forms. Мы пришли к выводу, что необходимо использовать пользовательские возможности W3 Total Cache, чтобы разместить некоторые возможности JavaScript в коде страницы до закрытия тега </body>. AMP не может сделать это, а плагин WordPress AMP неспособен это отфильтровать.

Нам необходимо провести больше исследований, например, выключит ли W3 Total Cache скрипты для определённых путей, как /amp/ , или необходимо искать иное решение. Вернув этот скрипт назад в <head> мы разрушаем Google Page Speed.

Интересно, что использование рекламы Google DFP также негативно влияет на Google Page Speed. Google испытывает смекалку разработчиков. Не так-то просто использовать все его технологии вместе.

Мы так и не решили, что более важно: Google Page Speed, поддержка AMP или разработка и отладка.

Итоги

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

AMP – это общедоступный путь оптимизации веб, в то время как Facebook Instant Articles только «для элиты». Но мы бы предпочли, чтобы Google создал модель приоритетной загрузки в HTML5.

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

Источник: code.tutsplus.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *