Проект Accelerated Mobile Pages (AMP) был запущен Google в феврале 2016 года с целью поставить мобильную производительность выше всего остального в Интернете.
И Google определенно достиг своей цели.
AMP поддерживает более двух миллиардов мобильных страниц и 900 000 различных доменов. Страницы с AMP теперь загружаются в два раза быстрее, чем страницы без добавленных элементов AMP.
Если вы думаете, что можете игнорировать AMP, вы ошибаетесь. У AMP есть несколько замечательных функций и преимуществ, которые могут вывести ваши усилия по созданию контента на новый уровень.
Если вы не потратите время на то, чтобы понять или использовать AMP-истории, вы многое упускаете.
Вот почему бизнес не может позволить себе их игнорировать.
Но сначала давайте проанализируем, что на самом деле представляют собой AMP-истории.
Что такое AMP-истории?
Функции AMP-историй Google позволяют издателям создавать контент, очень похожий на истории Instagram, разработанный с учетом мобильных веб-сайтов.
Но контент, созданный с помощью AMP, не добавляется в приложение. Вместо этого он размещается прямо на страницах результатов поиска.
AMP — это проект с открытым исходным кодом, созданный в связи с тем, что мобильные пользователи теперь проводят больше времени в приложениях, чем на веб-сайтах.
77% своего времени, а точнее, по данным Statista.
С AMP контент загружается очень быстро, что помогает удерживать мобильных пользователей на этих страницах, а не в приложениях.
Вместо обычных результатов поисковой системы пользователи получают легко пролистываемую историю, в которой легко ориентироваться. UX чем-то похож на популярное приложение для знакомств Tinder.
Партнеры AMP включают CNN, Mic, Wired, The Washington Post, Mashable и People.
Помимо молниеносной загрузки, историями AMP можно делиться так же, как и новостными статьями.
Вот описание того, как они работают.
Как работают ускоренные мобильные страницы
Сегодня JavaScript можно использовать практически на любой веб-странице для изменения любой ее части.
Но это также замедляет загрузку и рендеринг страниц. А поскольку скорость страницы так важна (мы поговорим об этом позже), этого следует избегать.
AMP позволяет запускать на страницах только асинхронный JavaScript, а это означает, что код JavaScript не будет блокировать любой другой код, присутствующий на вашем сайте.
JavaScript, написанный веб-мастером, запрещен в историях AMP, а интерактивные страницы должны содержать только пользовательские элементы AMP.
Пользовательские элементы могут состоять из JavaScript по своей сути, но они должны быть специально разработаны, чтобы убедиться, что они не вызывают каких-либо ограничений на общую производительность страницы.
Сторонний JavaScript также разрешен с AMP, но он не может блокировать отрисовку страницы.
AMP также не позволяет использовать какие-либо механизмы расширения для блокировки рендеринга страницы, но его можно использовать для встраивания в Instagram, твитов или лайтбоксов.
Благодаря этому пользователи могут пролистывать контент, оптимизированный для мобильных устройств, на страницах AMP, не отвлекаясь ни на что.
Как вы уже заметили, есть много причин, по которым истории с AMP быстро растут.
Почему вы должны использовать AMP Stories?
Некоторые из ваших конкурентов, вероятно, постоянно используют AMP.
Если нет, то, возможно, вы смиритесь с поражением.
С другой стороны, если вы начнете использовать протоколы AMP раньше своих конкурентов, вы станете лидером в своей отрасли.
Почему? Потому что функции AMP могут помочь вам рассказывать истории, а рассказывание историй — это мощное средство.
Рассказывание историй — это сила
Все любят хорошие истории.
По крайней мере, 100 500 цифровых слов потребляются средним гражданином США за один день, при этом 92% потребителей хотят просматривать и читать рекламу, которая похожа на истории.
Есть некоторые данные, свидетельствующие о том, что люди просматривают AMP-истории гораздо дольше, чем просматривают традиционные альтернативы.
Это может быть связано с тем, что более быстрое время загрузки облегчает просмотр большего количества контента в течение более длительного периода времени.
AMP позволяет вам рассказывать истории мощным, быстрым и уникальным способом. А когда вы хорошо расскажете историю, вы сможете эффективно достучаться до своей аудитории.
Говорите с потребностями ваших читателей, дайте каждой части интересную дугу и не забудьте добавить все достоверные данные, необходимые для доказательства вашей точки зрения.
Скорость страницы также играет огромную роль в успехе AMP.
Скорость страницы важна
Скорость сайта важна. Страницы, которые долго загружаются, могут убить ваши конверсии. Если ваш сайт загружается долго, вы будете получать все меньше и меньше конверсий.
К счастью, AMP-страницы загружаются примерно в два раза быстрее, чем обычные мобильные страницы.
Благодаря такому быстрому времени загрузки клиенты смогут получить доступ к вашему контенту быстрее, чем когда-либо прежде.
Это отличная новость, так как вероятность отказов увеличивается на 32%, если мобильная страница загружается целых три секунды.
Если это занимает пять секунд, вероятность отскока увеличивается на 90%.
Из-за быстрого времени загрузки, обеспечиваемого AMP, пользователи с большей вероятностью купят у вас.
Когда они узнают, что могут взаимодействовать с вашим брендом без каких-либо трений или ожидания, они будут готовы доверить вам свои деньги.
Чтобы сделать аргументы в пользу AMP еще более убедительными, Google, как правило, уделяет особое внимание быстрой загрузке мобильных страниц и лучшему рейтингу.
Воспользуйтесь творческими функциями дизайна, предлагаемыми AMP, чтобы заинтересовать и заинтриговать зрителей.
Воспользуйтесь преимуществами креативного дизайна
Если вы еще не знали, дизайн важен. А страницы AMP позволяют добавлять креативные элементы, которые выводят ваш контент на новый уровень.
Не бойтесь добавлять формы, кнопки, видео, изображения, варианты покупок или ссылки на свои AMP-истории.
Ваш сайт будет выглядеть гораздо более гладким и функциональным, что даст вам массу возможностей для привлечения, вовлечения и удержания внимания ваших зрителей.
AMP может дать вашему сайту необходимый SEO-ускоритель.
AMP помогает SEO
AMP значительно повышают видимость вашего сайта.
На данный момент страница с протоколами AMP не повысит авторитет страницы вашего сайта или авторитет домена.
Тем не менее, это дает странице шанс попасть в карусель AMP, которая появляется над традиционными результатами поиска Google.
Это означает, что если ваш сайт появится в карусели, он появится перед местом размещения номер один.
Нет ничего лучше, чем занять первое место, не так ли?
Это может дать вам значительный прирост результатов обычного поиска, который вам нужен, и привлечь больше трафика на ваш сайт, чем когда-либо прежде.
Далее, давайте разберем все движущиеся части, которые делают AMP такими замечательными.
Представляем функции AMP Story
Традиционный контент AMP основан исключительно на тексте, но новый и улучшенный формат включает в себя видео, анимацию и изображения, чтобы предоставить пользователям полный опыт.
Для издателей вы можете:
- Встраивайте свои истории в приложения и на веб-сайты
- Доступ к историям как с ПК, так и с мобильных устройств
- Рассказывайте истории, не обладая тоннами технических знаний
Лучшая часть? AMP бесплатны для всех.
Давайте рассмотрим все части, связанные с завершением истории AMP.
Части истории AMP
Прежде чем вы сможете создать свою первую AMP-историю, вы должны освоить все ее компоненты.
Каждая история состоит из отдельных страниц. Каждая страница состоит из отдельных слоев, состоящих из комбинации HTML-кода и элементов AMP.
Вот как компоненты будут выглядеть при добавлении в ваш код:
Story = amp-story
Page = amp-story-page
Layers = amp-story-grid-layer
При добавлении на страницу код может выглядеть примерно так:
Компонент истории содержит всю вашу историю AMP, а компонент страницы содержит каждую конкретную страницу, которая существует в вашей истории.
Компонент слоев содержит все элементы, присутствующие на странице.
Вот несколько примеров нескольких историй AMP.
Примеры историй Google AMP
Ни для кого не секрет, что Google будет ссылаться на AMP-версии веб-страниц вместо традиционных в любое время, когда они доступны, потому что Google предпочитает их.
Из-за этого каждый партнер AMP использовал функцию сервиса в соответствии со своими сильными сторонами.
Наиболее известными адаптерами AMP были новостные организации, поскольку они могли использовать AMP для быстрой и эффективной передачи информации пользователям, выполняющим поиск.
Вот примеры того, как CNN использовала истории AMP, чтобы делиться и распространять последние новости:
Некоторые издатели даже написали AMP-истории по точно такому же контенту (с той же фотографией на обложке):
Но AMP подходят не только для новостных сайтов. Вы можете превратить свой длинный контент в AMP, если хотите. И вы должны.
Что люди говорят об AMP в целом?
Что люди говорят об этом
Менеджер по продукту AMP Руди Галфи недавно сказал AdWeek, что AMP-истории должны стать действительно привлекательным форматом рекламы.
Но что все остальные думают о публикации контента с помощью AMP?
Автор Econsultancy Стюарт Шоу говорит, что, хотя страницы AMP требуют некоторого обслуживания, отдача и воздействие, которые они обеспечивают, того стоят.
В Посте за апрель 2018 года он написал:
«Конечно, все, что вы сделали, — это улучшили вещи для своих мобильных пользователей — и только на нескольких скудных страницах, на которых вы внедрили AMP… Но оптимизация — это не мгновенное совершенствование вещей. Это постепенный процесс, который необходимо адаптировать. к постоянно меняющемуся «техническому ландшафту», которым является поиск».
В целом реакция на AMP на таких сайтах, как Twitter, довольно положительная. Некоторые люди называют AMP одним из самых важных трендов 2018 года.
Другим действительно нравятся недавние изменения и обновления AMP, например Гампо, который говорит: «Нам нравится это как способ предоставления интерактивного контента с богатыми визуальными эффектами».
В сентябре 2017 года SEO-компания Optimising рассказала об AMP в Facebook:
«Нам здесь, в Оптимизации, нравятся ускоренные мобильные страницы (AMP)».
У экспертов Search Engine Journal есть несколько замечательных советов о том, как внедрение AMP для сайтов электронной коммерции может помочь улучшить взаимодействие с пользователями и повысить конверсию».
В целом, похоже, что AMP никуда не денется.
Вот как вы можете начать создавать свои собственные AMP-истории.
Как начать работу с историями Google AMP
Теперь, когда вы знаете, что такое AMP-истории, как они работают, почему вы должны их использовать и что о них говорят люди, вы можете приступить к созданию своих собственных историй.
Для начала скачайте код.
1. Загрузите код
Чтобы Google мог найти версию AMP ваших статей, вам необходимо изменить код страницы статьи.
Оригинальная статья должна иметь следующий тег, который является каноническим тегом AMP:
‹ссылка rel="amphtml" href="http://www.example.com/blog-post/amp/"›
Если вам нужен весь код AMP, который вам нужен, на одной странице, перейдите на страницу amp-wp GitHub и нажмите кнопку Загрузить ZIP.
Затем установите этот код на свой сайт WordPress, как и любой плагин WordPress.
В качестве альтернативы вы также можете загрузить следующий код напрямую из AMP и сохранить его в файл с расширением .html.
После загрузки и добавления кода вы можете запустить пример страницы.
2. Запустите пробную страницу
Чтобы протестировать образец страницы, вам потребуется доступ к файлам с сервера.
Есть несколько способов создать временный локальный веб-сервер, чтобы помочь вам протестировать его:
AMP рекомендует здесь использовать HTTPS для дополнительной безопасности.
После того как вы настроите локальный веб-сервер, вы сможете получить доступ к своему образцу статьи, перейдя по этому URL-адресу:
http://localhost:8000/article.html.
Если все выглядит хорошо, продолжайте создавать титульную страницу.
3. Создайте титульную страницу
Ваша обложка представлена тегом.
В истории может быть несколько компонентов, содержащих каждый из отдельных экранов для этой истории.
Но первая страница, которую вы укажете, будет выступать в качестве титульной страницы.
Чтобы создать обложку, присвойте первой странице уникальный идентификатор обложки:
‹amp-story standalone›
‹amp-story-page id=”cover”›
‹/amp-story-page›
‹/amp-story›
Этот код действует как оболочка для вашей обложки. Но вам нужно указать хотя бы один слой, чтобы он был действительным.
Слои в AMP работают аналогично слоям в графике: они состоят из разных элементов, наложенных друг на друга.
В приведенном выше примере первый слой содержит изображение, которое служит фотографией обложки, а второй слой содержит заголовок и авторство истории.
Чтобы создать первый слой, добавьте элемент ‹amp-story-grid-layer› на страницу ‹amp-story-page›.
Если вы хотите, чтобы изображение заполнило весь экран, добавьте атрибут template="fill" к тегу amp-story-grid-layer.
Внутри слоя добавьте элемент ‹amp-image› для файла cover.jpg и убедитесь, что он адаптивен, добавив тег layout="responsive".
Вот как должен выглядеть код для первого слоя, когда все сказано и сделано:
Прежде чем двигаться дальше, проверьте, как отображается страница.
Чтобы добавить второй слой, используйте вертикальный шаблон вместо шаблона заливки, который можно найти здесь.
После того, как ваша титульная страница будет завершена, вы можете добавить больше страниц.
4. Добавьте больше страниц
Добавление дополнительных страниц аналогично добавлению пробной страницы и титульной страницы.
Код, который вы используете, будет зависеть от выбранного вами шаблона.
Чтобы добавить текст на слой с вертикальным шаблоном, добавьте что-то похожее на следующие элементы:
- Элемент ‹h1›, содержащий заголовок
- Отзывчивый amp-img
- Элемент ‹q›, содержащий весь ваш текст
Ваша новая страница должна выглядеть примерно так:
Вы также можете добавить анимационные элементы, чтобы улучшить свою историю.
5. Добавьте анимационные элементы
Если вы хотите поднять свою историю на новый уровень, вы можете сделать так, чтобы ваш заголовок перескакивал на страницу, исчезал, закручивался и так далее.
В настоящее время фреймворк AMP включает в себя следующие предустановленные элементы анимации:
Если вы хотите добавить анимацию к элементу, добавьте сюда animate-in="animationpresetcode".
Например, чтобы использовать анимацию пульса, ваш код может выглядеть так:
‹amp-story-page id=”page3″›
‹amp-story-grid-layer template="vertical"›
‹p animate-in="pulse"›Пульсировать этот текст на страницу ‹/p›
‹/amp-story-page›
После того, как вы добавили анимационные элементы, вы готовы создать форзац.
6. Создайте подставку для книг
«Подставка для книг» — это последний экран, который завершает вашу историю.
Вы также можете использовать его для добавления связанных ссылок или ссылок на социальные сети.
В элементы amp-story добавьте атрибут bookend-config-src. Затем наведите его на файл bookend.json.
‹автономная версия amp-story
bookend-config-src="bookend.json"›
‹/история усилителя›
Ваш форзац должен выглядеть примерно так, когда вы закончите:
Наконец, вы готовы проверить свой AMP HTML.
7. Подтвердите свой HTML-код AMP
Существует несколько способов проверки ваших AMP-страниц.
Например, вы можете использовать Консоль Chrome DevTools:
- Откройте свою страницу в браузере
- Добавьте «#development=1» к вашему URL.
- Откройте Консоль Chrome DevTools и проверьте наличие ошибок проверки
Вы также можете использовать Браузерное расширение AMP Validator.
Оба инструмента покажут вам любые проблемы с вашим кодом AMP и опишут способы их устранения.
Вот три быстрых совета, которые следует учитывать при создании AMP-историй.
3 простых совета
Чтобы создать отличную AMP-историю, вам нужно добавить видео, текст, изображения или все вышеперечисленное.
Вот несколько быстрых и простых способов сэкономить время в процессе.
Для видео
Нередко на видео в Интернете добавляют оверлей, воспроизводимый по клику. Вы можете использовать его, чтобы добавить собственный значок воспроизведения, который соответствует стилю вашей страницы вместе с названием вашего видео.
Истории AMP не включают эту функцию автоматически.
Однако вы можете легко добавить его с помощью тега, например:
‹div id=”myOverlay”
class=”play-click-to-play-overlay”›
Для текста вы можете управлять размером или подгонкой, чтобы определенный текст помещался в пределах указанной области.
Для текста
Компонент amp-fit-text позволяет вам управлять размером или размещением текста в указанной области, что идеально, если вы не хотите играть с размерами шрифта весь день.
Компонент находит лучший размер шрифта для размещения содержимого в доступном пространстве автоматически, поэтому вам не нужно этого делать.
Некоторые теги HTML-изображений могут стать проблемой, когда дело доходит до AMP.
Для картин
Большинство тегов HTML можно добавить непосредственно в AMP HTML.
При этом некоторые теги (например, тег ‹img›) иногда заменяются расширенными тегами AMP HTML. Несколько проблемных тегов HTML полностью запрещены.
Вместо тега ‹img› обязательно используйте ‹amp-img›, у которого есть закрывающий тег.
Вы можете просмотреть полный список конверсий тегов AMP здесь.
