Как начать работу с ускоренными мобильными страницами (AMP)

1. Что такое AMP?
2. Как работает AMP?
3. Как вы будете AMP свой сайт?
4. Как я могу монетизировать с рекламой в AMP?
5. Есть ли у AMP аналитика?
6. Как будет выглядеть AMP в Google?
7. Как начать работу с AMP в WordPress?
8. Заключение

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

Что такое AMP?

В прошлом октябре Google объявленный Ускоренные мобильные страницы (AMP), очень доступная структура для создания быстро загружаемых мобильных веб-страниц. Инициатива с открытым исходным кодом предназначена для того, чтобы издатели могли легко повысить скорость (и, следовательно, удобство для пользователей) для своих мобильных читателей, не жертвуя при этом рекламным доходом, на который они могут положиться.

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

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

Как работает AMP?

По сути, платформа для создания мобильных веб-страниц, AMP состоит из трех основных частей:

1. AMP HTML: Подмножество HTML, этот язык разметки имеет некоторые пользовательские теги и свойства, а также множество ограничений. Но если вы знакомы с обычным HTML, у вас не должно возникнуть проблем с адаптацией существующих страниц к AMP HTML. Для получения более подробной информации о том, как он отличается от основного HTML, посмотрите Список требуемой разметки проекта AMP что ваша AMP HTML-страница «должна» иметь.
2. AMP JS: JavaScript-фреймворк для мобильных страниц. По большей части он управляет обработкой ресурсов и асинхронной загрузкой. Следует отметить, что сторонний JavaScript не разрешен с AMP.
3. AMP CDN: дополнительная сеть доставки контента, она будет принимать ваши страницы с поддержкой AMP, кэшировать их и автоматически выполнять некоторые оптимизации производительности.

Как вы будете AMP свой сайт?

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

Поскольку AMP не разрешает такие вещи, как элементы формы и сторонний JavaScript, вы, скорее всего, не сможете иметь ведущие формы, комментарии на странице и некоторые другие элементы, которые вы можете использовать на своей странице в стандартной реализации. (Хотя в настоящее время взломать с помощью iframes это обеспечивает решение этого. Благодаря Конрад О'Коннелл за помощь в проверке взлома.)

Также вероятно, что вам придется переписать шаблон вашего сайта, чтобы учесть ограничения. Например, все CSS в AMP должны быть встроенными и иметь размер менее 50 КБ. Из-за интенсивной загрузки пользовательских шрифтов они должны загружаться с использованием специального расширения amp-font, чтобы лучше контролировать эту загрузку.

Мультимедиа должна обрабатываться специально. Например, изображения должны использовать пользовательские элемент amp-img и должен включать явную ширину и высоту. (При преобразовании устаревшего веб-сайта в шаблон AMP это может быть серьезной проблемой, если атрибуты width и height еще не используются). Кроме того, если ваши изображения представляют собой анимированные GIF-изображения, вам необходимо использовать отдельный расширенный компонент amp-anim ,

Как и изображения, существует специальный тег, который необходимо использовать для встраивания локально размещенных видео через HTML5, который называется amp-video. Однако для встраивания видео на YouTube - каковым является большинство веб-видео - существует отдельный расширенный компонент, Усилитель-YouTube ,

Существует также поддержка таких вещей, как слайд-шоу через amp-carousel и лайтбоксы изображений через amp-image-lightbox, а также встраивание в социальные сети для Twitter, Instagram, Facebook, Pinterest и Vine через свои собственные расширенные компоненты ,

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

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

<link rel = "amphtml" href = "http://www.example.com/blog-post/amp/">

Страница AMP Discovery также упоминается, что для некоторых платформ, поддерживающих AMP, требуются метаданные Schema.org для указания типа содержимого страницы. (В настоящее время «article», «recipe», «review» и «video» перечислены как примеры типов страниц на GitHub.)

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

Как я могу монетизировать с рекламой в AMP?

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

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

В результате ряд самых популярных рекламных сетей в настоящее время используют расширенный компонент amp-ad (с большей совместимостью вероятно в пути):

• Amazon A9
• AdReactor
• Google AdSense
• AOL AdTech
• Google Doubleclick
• Flite
• Taboola
• Adform
• DotAndAds
• plista
• Smart AdServer
• Yieldmo

Если вы хотите посмотреть, как они выглядят, приведены примеры для каждой рекламной сети. в файлах .md на странице AMP GitHub ,

Если ваша монетизация более сложная - с использованием платных сетей или подписок - есть документация для реализации в рамках AMP также с использованием расширения «AMP Access».

Есть ли у AMP аналитика?

Да. На самом деле аналитика в AMP очень умная. Чтобы не допустить замедления отслеживания несколькими аналитиками сайта, они внедрили философию «измеряй один раз, отчитывайся перед многими». Существует два пути включения функции аналитики с AMP для вашего сайта:

• Элемент Amp-Pixel: это простой тег, который можно использовать для подсчета просмотров страниц как типичного пикселя отслеживания, используя запрос GET. Есть количество переменных которые могут быть переданы через него, такие как DOCUMENT_REFERRER и Title.
• Расширенный компонент Amp-Analytics: он немного более продвинутый, чем amp-pixel. Скорее всего, это будет то, что вы будете использовать для реализации аналитики на своем сайте, поскольку она обеспечивает более высокий уровень конфигурации для взаимодействия аналитики.

Если вы не пытаетесь заставить Google Analytics работать, лучше всего использовать amp-analytics. Вам нужно будет добавить необходимую библиотеку JavaScript в <head>, а затем настроить ее с помощью некоторой разметки JSON в разделе <body> вашей страницы.

Если вы заинтересованы в Google Analytics в AMP, проверьте Google Раздел AMP Analytics на их странице разработчика , У него есть несколько примеров реализаций.

Как будет выглядеть AMP в Google?

Google предоставил демонстрацию того, как будет выглядеть функция AMP в поисковой выдаче. Вы можете попробовать это, перейдя к g.co/ampdemo на вашем мобильном телефоне (или эмулируйте его в Chrome Developer Tools). Затем найдите что-то вроде «Марс». Вы увидите карусель в верхней части со статьями AMP.

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

В демоверсии можно найти несколько крупных издателей, таких как The Guardian ( пример страницы AMP ) и The Washington Post ( пример страницы AMP ).

Как начать работу с AMP в WordPress?

Один из самых простых способов испачкать руки с помощью AMP - это реализовать его на веб-сайте WordPress. Официальный плагин разрабатывается Automattic / WordPress и часто обновляется на GitHub.

Шаг 1: Установите официальный плагин WordPress

Чтобы начать, перейдите к Страница amp-wp GitHub и нажмите кнопку «Загрузить ZIP».

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

После установки вам просто нужно добавить «/ amp /» на страницу статьи (или, если у вас нет хороших постоянных ссылок, вы можете добавить «? Amp = 1» ).

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

В конце концов, Google Search Console должна выбрать AMP-версию ваших статей с помощью тега rel = ”amphtml”, добавляемого плагином, что позволяет легко проверять объемные статьи. Единственная проблема с этим, по моему опыту до сих пор, состоит в том, что он не обнаруживает изменения очень быстро. Если вы исправите что-то, исправление может не появиться в течение нескольких дней.

Я рекомендую использовать комбинацию Консоли поиска и процесса проверки Chrome. Чтобы использовать процесс проверки Chrome, перейдите на одну из своих страниц AMP в Chrome и добавьте «# development = 1» в конце URL-адреса. Нажмите Control + Shift + I, чтобы открыть Chrome Developer Tools и перейти к консоли.

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

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

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

Шаг 3: получить разметку схемы для проверки

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

Отредактируйте файл class-amp-post-template.php , либо через FTP, либо в своей панели управления 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://domain.com/wp-content/uploads/logo-60.png',
'высота' => 60,
'ширина' => 170,
);

Обязательно замените URL-адрес на путь к своему логотипу издателя и укажите высоту и ширину в пикселях. Вы можете найти информацию для соответствующих разметка здесь , что указывает, что «в идеале, логотипы имеют высоту ровно 60 пикселей при ширине <= 600 пикселей».

Шаг 4. Начало работы Google Analytics с плагином AMP WordPress

Что хорошего в веб-сайте, если вы не можете отследить его с помощью аналитики? Плагин AMP WordPress не включает встроенную ампер-аналитику, но его довольно просто включить.

Чтобы включить плагин AMP WordPress для работы с Google Analytics, отредактируйте файл amp-post-template-actions.php (отличный от того, который упоминался ранее) либо через FTP, либо в панели управления WordPress (перейдите в раздел Плагины> Редактор и выберите «AMP») и добавить в конце следующее:

Убедитесь, что вы изменили UA-XXXXX-Y для представления идентификатора свойства Google Analytics вашего сайта.

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

Заключение

AMP предоставляет относительно простой способ повысить скорость мобильных веб-сайтов для издателей. С приближением конца февраля и проведением Google News Lab обычные часы работы в Hangouts Мы можем ожидать, что Google скоро развернет свою интеграцию. В том, что кажется ответом на импульс проекта AMP, может реагировать даже Facebook. Недавно решил открыть мгновенные статьи всем издателям ,

Вы издатель? Если это так, вам нужно начать думать об ускоренных мобильных страницах.

Приближается захватывающая новая технология. Вы AMPed?

Мнения, выраженные в этой статье, принадлежат автору гостя и не обязательно относятся к Search Engine Land. Штатные авторы перечислены Вот ,

Об авторе

Похожие

Комментарии