amp quot что это

АMP. Что это и с чем его едят?

Общая информация

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

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

Google находит эти специальные тэги и кэширует информацию в них. После этого, когда пользователь ищет что-то в Гугле, браузер на фоне подгружает информацию из CDN Гугла, в специальный iframe и при переходе по ссылке открывает уже загруженную страницу в специальном окне.

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

По сути все подобные страницы являются статическими или условно-динамическими, так как допускают использование отправки форм, а также iframe.

Области применения: новостные сайты и порталы; каталоги (без использования фильтров); легковесная мобильная версия сайта (если удовлетворяет функционал); страницы-зацепки, чтобы заинтересовать пользователя и заманить на основной сайт.

Далее расскажу об основных особенностях AMP.

Отсутствие кастомных скриптов

Первое и самое главное отличие от стандартных сайтов — это невозможность вставки «обычных» скриптов. То есть большая часть функционала, завязанная на динамическом изменении (действия по клику, анимация, фильтрация, модальные окна), становится недоступной.

Решение — использование доступных компонентов и iframe.

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

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

Все доступные виды компонентов с примерами использования можно найти на этом сайте.

Отсутствие обычных тегов в документе.

В коде страницы не должно быть inline-стилей

Еще одна особенность, которая должна коснуться в первую очередь текстового редактора, так как редактирование стилей там проходит inline. Элементы с атрибутами типа style=“color:…”, не являются валидными, а изменение цвета или размера шрифта запишет это свойство в код.

Структурированная схема данных (structured data)

Для включения статей в подборку “Top stories google” к страницам должны быть добавлены схемы данных с краткой информацией о статьях, авторе, издательстве, логотип компании, а также даты публикации и изменения статьи.

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

Пример схемы данных для страницы типа «статья»:

Некоторые значения являются обязательными. Для структурной схемы данных так же есть свой валидатор. Информация по заполнению и обязательные поля для схемы типа “статья” можно посмотреть здесь.

Там же можно найти информацию по другим типам схем. (Книги, Курсы, Музыка, Подкасты, Рецепты, Обзоры, ТВ и Фильмы, Видео)

Логотип компании
Есть ряд требований к логотипу:
https://developers.google.com/search/docs/data-types/articles#AMPlogo guidelines
Хочу обратить внимание, что размер должен быть не больше и не меньше 60x600px хотя бы по одной из сторон. Желательно соблюдать высоту 60px (например, 450x60px). Изображения меньших размеров, но в тех же пропорциях, что и 60x600px (например 450x45px), проверку не пройдут.

Ссылки canonical и обратная к ней

Чтобы поисковик понял, что есть AMP-версия страницы, она должна содержать ссылку:

А на AMP-странице — присутствовать обратная ссылка:

Css 50 кб

Css стили пишутся inline, и их размер не должен превышать 50кб.

Заключение

AMP — интересная технология, но только для узких задач. Может быть использована для «легкой» мобильной версии сайта, либо для определенных разделов, не требующих высокой функциональности. Хорошее решение для информационных сайтов, блогов, интернет-журналов. Там где нужно донести до пользователя контент максимально быстро и в простой форме. Для больших и сложных проектов AMP не станет заменой мобильной или адаптивной версии, по крайней мере, на данном этапе.

Часть функционала мне удалось реализовать на сайте нашей IT-компании Wellsoft, в разделе новостей (адаптивное изображение, форма, текст, структурированные данные; кроме того, если появится такая возможность, эта статья попадет в галерею “Top stories”).

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

UPD: мы потратили много времени на изучение и внедрение технологии, но в итоге решили, что нам AMP не нужен, поэтому на новом сайте (релиз был 1 ноября 2017), страниц с AMP уже нет. Можем поделиться подробностями, кому интересно (контакты на сайте).

Источник

Использование пробельных символов для форматирования кода HTML, неразрывный пробел и другие спецсимволы (мнемоники)

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Те, кто хотя бы поверхностно успел ознакомиться с уроками по основам языка гипертекстовой разметки, наверное, уже приняли к сведению, что такое HTML, пусть и в общих чертах. А значит, имеют представление о том, какие вообще HTML символы используются в коде документа.

В сегодняшней статье мы попробуем разобраться, что из себя представляет пробел в HTML, в каких случаях можно применить пробельные символы при форматировании самого кода для удобного восприятия. Узнаем, когда необходимо применение неразрывного пробела, а также познакомимся с другими спецсимволами (или, как их еще называют, мнемониками).

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

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

Пробелы и пробельные символы в HTML

Сначала необходимо сделать важное замечание. На клавиатуре компьютера есть специальные клавиши, которые позволяют реализовать разделение текста (чуть подробнее об этом ниже). Однако, лишь широкая клавиша пробела обеспечивает раздел между словами не только в редакторе, но и в окне браузера. При переносе строк и отступе от края существуют нюансы.

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

Чтобы перенести строки внутри абзаца P, нужно воспользоваться одиночным тегом BR, с помощью которого это можно осуществить. Скажем, нам нужно вставить в текст какие-нибудь строчки из стихотворения, которые мы пишем в текстовом редакторе:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Несмотря на то, что строки стиха расположены корректно и переносы осуществлены в нужных местах, в браузере все будет выглядеть иначе:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Чтобы добиться такого же отображения в окне веб-обозревателя, нужно в каждом месте переноса строки прописать BR:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Теперь мы достигли выполнения поставленной задачи и в браузере стихотворные строчки отобразятся совершенно правильно:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Таким образом, нужные переносы строк выполнены. Здесь еще нужно отметить такую особенность, что множественные пробелы, идущие один за другим, веббраузер отображает как один. В этом вы сможете убедиться, если в том же редакторе админки WordPress попробуете поставить не один, а несколько пробелов между двумя словами и, нажав на кнопку «Сохранить», посмотрите на результат в браузере.

Пробел, табуляция и перенос строки

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

Однако, как я сказал выше, конечный нужный результат не только в текстовом редакторе, но и в браузере, мы получаем лишь при использовании первой клавиши. Все три клавиши (в том числе табуляция и перенос строки полезно использовать при форматировании кода HTML. Допустим, вот как выглядит фрагмент кода в NotePad++ (тут об этом редакторе толковый материал) при отображении всех пробельных символов:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Мы получаем код, который легко читаем и понятен благодаря пробелам. Оранжевыми стрелками отмечены отступы, создаваемые с помощью клавиши Tab, а символами CR и LF переносы строк, осуществляемые посредством кавиши Enter.

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

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Таким же образом с помощью пробельных символов можно прописать и правила CSS, которые будут визуально выглядеть понятными и удобоваримыми:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

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

Спецсимволы (или мнемоники) в коде HTML

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

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

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

Для того, чтобы ликвидировать эту проблему, и была введена система спецсимволов, которая включает в себя огромное количество самых различных мнемоник. Все они начинаются со значка амперсанда «&» и заканчиваются обычно точкой с запятой «;». Поначалу каждому спецсимволу соответствовал свой цифровой код. Например, для неразрывного пробела, который рассмотрим чуть ниже подробнее, будет справедлива такая запись:

Но спустя некоторое время наиболее распространенным символам были присвоены буквенные аналоги (мнемоники), чтобы их было проще запомнить. Скажем, для того же неразрывного пробела это выглядит следующим образом:

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

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

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

Поэтому из той же таблицы спецсимволов HTML берем соответствующие коды и вся запись будет выглядеть так:

Тогда в браузере выведется именно запись мнемоник, которые нужно применить для отображения тега FOOTER. Немного путано, но на этой странице вы сможете попрактиковаться в данном аспекте, введя в поле «HTML» мнемоники для соответствующих символов и задействуя кнопку «Run», а в области «Result» получая результат их отображения в браузере:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Обратите внимание, что я обеспечил перенос текста с помощью уже упомянутого тега BR с тем, чтобы сами символы отображались не в одну строку, а столбиком для удобства.

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

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

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

И его нужно вставить между двумя совокупностями знаков, которые требуется связать:

Теперь браузер ни в коем случае не осуществит их разделение, даже если потребуется форматирование текста для его корректного отображения.

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

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

Впрочем, опять же будет полезным все это дело, включая примеры неразрывного и мягкого переноса, воочию отследить на практике:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

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

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

Источник

Гид по AMP: нужны ли вам интерактивные письма

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Блочный редактор писем, готовые шаблоны email, формы подписки и автоматизация. Запускайте email-рассылки, чтобы быть на связи со своими клиентами.

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

AMP (Accelerated Mobile Pages) — это формат ускоренных мобильных страниц, разработанный Google в 2015 году. Технология заменяет тяжёлые страницы на более шустрые и упрощённые копии. В большинстве случаев функционал сайта от этого не страдает: на AMP-страницах можно проходить опросы, заполнять формы и настраивать рекламу. По данным Forrester, AMP-версии страниц дают +10% к трафику и увеличивают время посещения сайта в 2 раза.

2 июля 2019 Gmail запустил поддержку AMP в почте. До этого о внедрении технологии объявили Outlook, Mail.ru и Yahoo!. Разбираемся, как работает AMP, чем технология полезна для email-маркетологов и стоит ли её внедрять прямо сейчас.

Мы разбили статью на 2 раздела: в первом говорим об AMP для сайтов, во втором — об AMP для рассылок. Смело переходите к нужной теме, если вас интересует какой-то конкретный вопрос:

Раздел 1. Как работает AMP на сайтах

AMP-страницы в поисковой выдаче

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

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

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

AMP как основа для медиа

В феврале 2018 анонсировали Google Истории — платформу, которая работает на AMP. С помощью amp-story издатели могут создавать аудио-визуальный контент, напоминающий нарративы в Яндекс.Дзене. Истории будут видны в поисковой выдаче Google. В экспериментах участвуют CNN, Mashable, Vox, The Washington Post и Wired.

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

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

Как создают AMP-страницы

AMP-код пишут с помощью особых библиотек AMP HTML и AMP JavaScript, а для кеширования используют Google AMP Cache. Когда Google находит AMP-теги, он сохраняет информацию из них на своей стороне. А когда пользователь через браузер (или приложение) заходит на страницу, она открывается в AMP-формате в специальном окне.

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

Мы не хотим глубоко вдаваться в особенности вёрстки страниц на AMP — всё же мы медиа об email-маркетинге. Если вам интересно, мы собрали подборку статей, которые помогут разобраться в AMP:

Источник

Что такое &QUOT в тексте?

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Нет, это не ошибка. Это всего лишь символ кавычек. Точнее, его код.

Для корректного отображения в браузере некоторые символы приходится заменять их кодами.

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Некоторые символы, являются управляющими символами в HTML и web-браузер ошибочно воспринимает такие символы в тексте. Для корректного отображения подобных символов на html-странице, необходимо заменить их специальными символами в html-коде. &quot является таким специальным символом и обозначает двойные кавычки.

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

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

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Часто «&QUOT» появляется при копировании.

Часто кавычки используются для закрытия строковых переменных.

Иногда при программировании может возникать проблема с написанием атрибута тега. Посмотрим на пример:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Как видно, вторая кавычка как бы закрывает первую часть текста, а потому все, что идет за ней, уже к атрибуту не относится. Чтобы не появлялось ошибок, нужно пропечатать атрибут следующим образом:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Только вот недавно наткнулся на этот тег в тексте. Когда искал информацию в поисковике. Вот как он выглядел:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Видимо, просто не все редакторы распознают этот язык кодирования, вот они и выскакивают порой в виде непонятных формулировок.

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

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

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

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

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

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

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

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

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

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Черепаха считается символом мудрости и долголетия.

В Китае черепаха окружена почтением и является символом космического порядка. Связано это с тем, что китайская черепаха Ао на своей спине держала земной диск. Часто черепаху изображают вместе с журавлем, что служит символом долгожительства.

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

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

Если вы единожды использовали этот символ, он фиксирует в окне быстрого доступа, внизу под табличкой и его можно видеть сразу.

Источник

AMP сайты — попасть в ловушку и выиграть

Яндекс и Google не жалея сил развивают собственные экосистемы, поглощая старый добрый web турбо-страницами и AMP-сайтами. От этого не выигрывают:

информационные ресурсы, которые зарабатывать на рекламе;

коммерческие сайты, т.к. поисковая выдача сведена к поисковым сервисам и агрегаторам;

социальные сети (тот же Дзен с вчера анонсированными прямыми эфирами).

Новая реальность — вжиться в экосистему поисковика или забыть про онлайн. Неминуемо поисковики перетянут все возможности привлечения и удержания посетителей на сайте в свое русло, оставив сайт с однострочным офером и контактами. Но на пути к капитуляции можно и выиграть. Поэтому опустим (ну, почти) критику AMP-страниц, а рассмотрим кейсы внедрения и преимущества для своего проекта и бизнеса. Позитив, в самом деле, есть, и кто раньше изучит тему, тот и выиграет.

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что этоОфис Google в Калифорнии

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

Что такое AMP-страницы

Уже в 2015 году Google активно улучшал поисковую выдачу на мобильных устройствах. С помощью алгоритма Mobile-friendly пользователи попадали из поисковой выдачи на сайты, адаптированные к мобильным устройствам. Нововведение не осталось незамеченным для мобильных пользователей и отразилось на улучшении поведенческих факторов, прямо влияющих на позиции сайта в поисковике.

В октябре того же года Google анонсировал проект ускоренных мобильных страниц AMP (Accelerated Mobile Pages). AMP — мгновенно загружаемые на мобильных устройствах страницы, позволяющие не тратить время на ожидание долгой загрузки сайта, что особенно актуально при медленном интернете.

Мгновенная загрузка страниц стала возможной благодаря новой технологии, включающей 3 компонента:

Библиотека ресурсов AMP бесплатна и поддерживается всеми браузерами. На сегодня экосистема AMP включает более 25 миллионов сайтов и становятся более востребованной среди самых различных форматов: реклама, электронная торговля, услуги, малый бизнес и т.д.

Чем сайт AMP отличается от остальных

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

Скорость загрузки первых.

Более мощный функционал вторых.

Приоритет AMP-вебсайтов в мобильной выдаче Гугла перед обычными страницами.

Способность AMP страниц быстро решать задачу пользователей.

Стандартный сайт, разработанный по стандартам AMP, демонстрирует отличные показатели по времени загрузки:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что это

А время загрузки первой части контента составляет 1,6 сек на недорогом смартфоне в сети 4G с медленным подключением к интернету. Сам по себе результат просто фантастический.

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

Примеры AMP сайтов

Полностью корректный вид AMP сайт принимает только при открытии с мобильного устройства. Для просмотра на десктопе, рекомендуем уменьшить размер окна браузера:

Зачем Google создал AMP

Согласно исследованию Kissmetrics, 47% пользователей не готовы ждать загрузки сайта более 2 секунд, 40% посетителей покидают сайт, если загрузка длится более 3 секунд.

Согласно тому же исследованию, первые 10 секунд являются самыми важными в посещении пользователя. Из графика ниже следует, что если вам удается убедить посетителя остаться на сайте полминуты, то существенно вырастают шансы удержать пользователя на 2 минуты и даже больше — что само по себе сопоставимо с вечностью в онлайне.

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что этоГрафик, показывающий вероятность ухода посетителя с сайта в зависимости от проведенного на сайте времени.

Но прежде, чем мы рассмотрим, насколько реально важна скорость загрузки страниц, вот несколько фактов, которые прольют свет на то, как меняются ожидания пользователя в зависимости от времени загрузки ресурса.

Люди предпочитают контролировать свою жизнь сами, а не отдавать ее на произвол компьютерам. В своей книге “Проектирование юзабилити” Якоб Нильсен рассказывает о 3 важнейших ограничениях во времени, которые происходят в интервале между действием пользователя и ответом на него машины.

Аналитический сервис Tagman провел исследование, в котором изучил влияние скорости загрузки на конверсию, результаты на графике:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что этоЗависимость конверсии (ось y) от времени загрузки страницы (ось x)

Примечательно, что каждая последующая задержка загрузки на одну секунду является причиной падения конверсии на 7%.

Похожие исследования проводил Amazon: каждая задержка в 100 миллисекунд снижает конверсию на 1%.

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

Очевидно, что сайт с хорошей скоростью загрузки влияет на положительное впечатление от пользования поиском самого Гугла и служит фактором лояльности к Гуглу. Учитывая экспансию американского поисковика в Азии и в бывшем СССР, не кажется удивительным устремления Гугла увеличить аудиторию и повысить вовлеченность западной аудитории.

Как выглядит AMP в поисковой выдаче

AMP-страницы имеют приоритетный значок (“молния”) в поисковой выдаче для мобильных устройств:

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что этоВид сниппета сайта с версией AMP и обычного сайта

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

amp quot что это. Смотреть фото amp quot что это. Смотреть картинку amp quot что это. Картинка про amp quot что это. Фото amp quot что этоИтоги опроса по кликабельности сниппета

Какие результаты дает внедрение AMP

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

Компания Stone Temple Consulting провела исследование

, изучив выборку из 10 сайтов различного формата, в которых были внедрены AMP-страницы.

На примере медийного сайта компании Thrillist (в формат AMP переведены 90% страниц) зафиксирован рост трафика из поисковиков на 70% — половина этого роста приходится на AMP.

Другой пример, на этот раз анонимная компания, крупный медиа-проект, у которого в AMP переведены 95% страниц, заметили рост трафика из органики на 67% по одному сайту и 30% по другому. В обоих случаях рассматривался период 4 недели. В отношении медийного сайта AMP явно сказались в лучшую сторону.

Что касается коммерческих сайтов, то на примере интернет-магазина Myntra (аналог Ламоды в Индии) получен результат в виде падения отказов на 40% и увеличения общих показателей эффективности (автор исследования не указывает конкретные данные). Надо сказать, что от внедрения до получения первых результатов прошло всего 11 дней.

падение отказов на 10%;

увеличение просмотров страниц на 6%;

увеличение продолжительности посещения на 13%.

Больше информации по этому кейсу в исследовании на английском языке. Мы же можем сделать вывод, повторив уже сказанное командой Event Ticket Center “Big win” (“Большая победа”).

Будущее AMP — какое оно?

По заявлению представителя Гугла Ричарда Жангра, AMP — “это не про новости или статьи, мы видим внедрение формата по всему спектру веб-приложений, от интернет-магазинов до посадочных страниц для рекламы”.

По крайней мере, AMP станут “будущим для SEO”, как выразился Дэниел Бордман, руководитель отдела SEO в компании Hoppa. Дальше можно ожидать, что Google будет активнее продвигать свой формат мобильных страниц. И если есть, чему поучиться из всей истории Гугла, то это тому, что нужно следовать за предложениями поискового гиганта, нежели оставаться за линией кильватера без позиций и трафика.

Критика AMP

Из проблем AMP-страниц, выделяемых вебмастерами, чаще всего приводят:

пропадающие ссылки (и доход от рекламы);

меньше возможностей для аналитики и больше работы;

меньше контроля над своим контентом и дизайном.

Как справедливо отмечает Дэн Бюбен, Google продвигает формат AMP под лозунгом “Сайты на AMP будут ранжироваться выше”, и в это же время заключает сделку с WordPress, что создает основу для появления миллионов вебмастеров, на чьих сайтах автоматически появляется AMP-версия.

Вывод

AMP — не идеальная штука, хотя бы потому что, что сайт станет зависимым от гугловских серверов, а вам потребуется периодически дорабатывать сайт к меняющимся требованиям AMP.

AMP — новый способ сделать жизнь пользователей проще и понятнее.

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

Источник

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

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