Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)
Что такое AMP?
В октябре прошлого года Google анонсировала AMP как инициативу с открытым исходным кодом, обеспечивающую более быстрый просмотр мобильных страниц. Как описано TechCrunch, многие видят AMP как попытку Google лучше конкурировать с мгновенными статьями Facebook и мобильными приложениями, которые все чаще обеспечивают более быстрый и более оптимизированный просмотр. Я склонен согласиться.
Страницы, оптимизированные с помощью AMP, появятся в мобильной карусели в верхней части результатов поиска Google, оттесняя традиционные статьи HTML, чтобы продвинуть страницу вниз. И они загрузятся почти мгновенно.
Честно говоря, я скептически отношусь к AMP для блоггеров и небольших издателей. Мы часто пишем отличный контент, который изо всех сил старается занять место в результатах поиска Google. Теперь нам нужно реализовать еще одну технологию на наших ограниченных ресурсах в надежде, что наш контент окажется наверху. Интересно, что пока появляются крупные издатели СМИ, я не вижу сообщений в блогах в результатах поиска AMP, и ни один из других блоггеров WordPress:
Я также подозреваю, что UX получения других результатов поиска под карусель будет хорошо работать для Google.
Когда я работал в Microsoft, я помог запустить MSN News в 1995 году в рамках сети MSN Online, которая началась с Windows 95, ответом Microsoft на AOL. Новостям MSN требовался пользовательский просмотрщик приложений, который работал на версии платформы Microsoft Media Viewer, которая позволила их более ранним усилиям по созданию компакт-диска. Но в течение года мы должны были подготовиться к работе в Интернете и к нашему слиянию с NBC, что позже стало называться MSNBC.com. Нам пришлось настраивать нашу среду публикации для одновременного создания как Media View, так и HTML. Это создало ряд новых сложностей.
AMP напоминает мне обо всех этих усилиях. Это чрезвычайно разная, весьма ограничена версия HTML, которая требует огромных изменений на вашем сайте.
The Free WordPress AMP Plugin
Хорошей новостью является то, что WordPress запустил бесплатный плагин AMP, который поможет вам реализовать AMP без особых дополнительных затрат. Однако у него есть много ограничений. Дизайн вашего сайта сильно ограничем, и есть конфликты с другими плагинами WordPress, обычными методами оптимизации и т.д. AMP также станет дополнительным бременем для разработчиков тем WordPress.
AMP находится в зачаточном состоянии, и я разочарован тем, что Google решил создать совершенно новую инфраструктуру, а не работать с издателями, чтобы оптимизировать HTML5, чтобы быстрее настраивать загрузку страниц, что нужно загружать первым и как быстро выкладывать текст. Это был бы более надежный подход. Но ведь команды Google - гении.
Несмотря на мои опасения, в этом учебнике я расскажу вам об установке плагина AMP для WordPress и Yoast SEO Glue для плагина AMP, который дает вам немного больше контроля над окончательным внешним видом вашего сайта.
Как выглядит AMP на WordPress?
Вот пример страницы AMP по сравнению с исходной HTML-страницей. Вы можете просматривать их динамически, здесь для оригинала и здесь для версии AMP. Конечно, загрузка страницы намного быстрее с AMP.
Изображение исходной страницы HTML5 на сайте JeffReifman.com:
Следующий тег ссылки добавляется на каждую страницу в блоке <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 на сайте JeffReifman.com:
Меню и навигация исчезли, и брендинг практически исчез (хотя есть некоторые варианты), но страница загружается быстро.
Позвольте мне пройти вместе с вами активацию AMP с помощью WordPress.
Плагин AMP WordPress
Вы можете изучить и загрузить плагин AMP WordPress из каталога плагинов WordPress. Или вы можете найти и установить его прямо со своей панели инструментов WordPress.
Просто перейдите в «Плагины»> «Добавить новый» и найдите AMP. Затем нажмите «Установить»:
После установки нажмите «Активировать»:
После активации просто зайдите на любой пост в своем блоге WordPress с /amp/ расширением. Например, пост Amazon Marketplace Fraud Made Easy является одним из моих самых популярных результатов поиска Google. Вот как это выглядит, когда вы посещаете версию AMP по адресу http://jeffreifman.com/2014/03/25/amazon-makes-fraud-easy-in-marketplace/amp/:
The Glue for Yoast SEO & AMP Plugin
Общий плагин AMP от WordPress предлагает несколько настроек. Люди Yoast SEO создали надстройку для своего популярного плагина, который еще больше усиливает поддержку вашего AMP.
Вы можете просмотреть Glue for Yoast SEO & AMP Plugin или установить его с помощью панели инструментов WordPress, как мы делали это ранее для плагина AMP. После активации он должен выглядеть так:
Примечание. Обязательно установите плагин Yoast WordPress SEO.
Вы можете изменить настройки своего AMP через меню боковой панели Yoast SEO - нажмите кнопку AMP в нижней части меню:
Вы увидите, как плагин Glue позволяет вам улучшить свою реализацию AMP.
Во-первых, Yoast позволяет вам расширить функциональность AMP на страницы и другие типы страниц WordPress. По умолчанию AMP изменяет только чувствительные ко времени сообщения - в первую очередь он предназначен для новостных статей:
Примечание. Если вы видите пустые страницы под вкладками, убедитесь, что вы обновили исходный плагин Yoast SEO, и это будет исправлено.
Во-вторых, Yoast предлагает некоторые полезные способы настройки брендинга, дизайна и цветовой схемы:
И, наконец, они предлагают способ размещения пользовательского кода Analytics в стиле AMP. Это не так просто, как кажется. Обратите внимание на код, который я должен был вставить ниже, чтобы заставить его работать:
Здесь я нашел версию 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 на моем сайте был сломан.
Я вошел в Google Search Console, чтобы просмотреть страницы с ошибками и увидел следующее:
Я нажал на одну из страниц:
Затем я нажал «Открыть страницу» и более подробно проанализировал ошибки. По существу, вы можете сделать это вручную, добавив /amp#development=1 в URL, например: http://jeffreifman.com/2014/02/24/how-to-secure-your-mac-from-potential-theft/amp/#development=1. А затем откройте Консоль JavaScript в своем браузере:
Оказывается, все мои страницы с веб-сайтом AMP на JeffReifman.com ломались из-за ошибки: тег 'script' запрещен, за исключением особых форм. Тем не менее, на PublishingwithWordPress.com не было ошибок:
В следующей серии статей на Envato Tuts + я расскажу о том, как мне удалось настроить JeffReifman.com для достижения Google PageSpeed из 100. Это потребовало использования пользовательских функций W3 Total Cache для размещения некоторых минимизированных функций JavaScript в нижней части страницы перед </body>. AMP не разрешает этого, и плагин WordPress AMP не может отфильтровать его.
<script type="text/javascript" src="http://c4.jeffreifman.com/wp-content/cache/minify/000000/68b0b/default.include-footer.952e41.js?d4992f"></script></body>
Мне нужно сделать больше исследований, чтобы определить, отключит ли W3 Total Cache для меня определенные пути, такие как /amp/ (маловероятно), или мне нужно найти другое решение. Размещение этих сценариев в <head> приведет к потере моей скорости страницы Google. Интересно, что недавно я также обнаружил, что использование рекламы DFP Google на моем сайте также нарушает скорость Google Page Speed. Google является сложным мастером поиска, и он не позволяет легко использовать все свои технологии вместе.
Мне теперь интересно, что важнее: рейтинг Google Speed, поддержка AMP или время разработки и отладки.
В заключение
Честно говоря, я не уверен, что страницы вашего блога AMP когда-либо будут видеть дневной свет в верхней части поиска, и я уверен, что вы будете получать от них большую прибыль без дополнительных настроек. Похоже, Google адаптирует AMP для крупных медиа-издателей с ресурсами, чтобы наилучшим образом оптимизировать представления о бренде, эстетике и доходах.
По сути, AMP - это путь к ценно оптимизированной сети для сообщества open-source, в то время как Instant статьи Facebook предназначены для избранной элиты «великого» огороженного сада. Я бы предпочел, чтобы Google построил модель загрузки по приоритетам в HTML5 с сопроводительными сценариями.
Для меня AMP просто мешает издателям оставаться актуальными. Я рад, что WordPress прилагает все усилия, чтобы помочь, и я уверен, что дизайнеры темы также будут, но все еще остается много недостатков. Я думаю, что Google упустил свою возможность, действительно помогать любому, а не самым крупных веб-издателям.
Ссылки по теме
- Часто задаваемые вопросы по документации по проектам AMP
- Плагин AMP WordPress
- The Glue for Yoast SEO AMP Plugin
- Представляем проект ускоренных мобильных страниц для более быстрого и открытого мобильного Интернета (Google Blog)
- Google объявляет об ускоренном проекте мобильных страниц, чтобы предоставить вам статьи быстрой загрузки (TechCrunch)
- Facebook начинает хостинг издателей «Instant Articles» (TechCrunch)
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
