Amp html что это

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В коде страницы не должно быть 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), проверку не пройдут.
• Дата публикации и дата изменения
  Дата публикации является обязательным параметром.
  Дата изменения — рекомендованным.
  Хотя я бы отнес оба параметра к обязательным, так как Google кэширует содержание статей, и узнать, когда он пойдет проверять все статьи на сайте снова, невозможно. Поэтому, если дата последнего изменения будет отличаться, поисковику будет проще понять, что нужно сделать новый кэш. Иначе возможна ситуация, когда пользователь не увидит важных изменений.

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

Css 50 кб

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

Заключение

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

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

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

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

Amp html что это

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

По статистики Google и Facebook, однако, есть много пользователей в мире, где мобильный интернет не такой уж быстрый (например, 3G, GPRS). Из-за этой причины эти два гиганта начали принимать меры по обеспечению «лучшего опыта» для пользователей с медленным соединением к сети Интернет. Большинство людей, особенно не в странах первой десятки, до сих пор не используют быстрые сети 4G, LTE или Wi-Fi.

Компания Google таким образом, запустила открытый проект AMP для мобильных устройств с медленным доступом в Интернет. Все дело в том, что веб-сайты становятся более сложными и «тяжелыми», и существует тенденция — постоянно растущий объем контента для мобильных устройств.

Что же такое AMP?

Ускоренные Мобильные страницы (AMP) — это просто говоря, в основном HTML с расширениями и некоторыми элементами/блоками кастомных страниц для мобильных сайтов. Есть определенные теги, которые вы можете и должны использовать при разработке сайтов, и есть те (классические), которые вы не можете использовать с AMP. Так, например, тег IMG (изображение) станет в этом случае AMP-IMG, видео заменяется новым AMP тегом и т.д. Даже если это накладывает определенные ограничения для разработчиков, это сулит большие преимущества в плане скорости и продвижения сайта (помогает с SEO).

Для целей поддержки AMP-страниц не может быть использован ряд скриптов JavaScript. Но хорошая новость заключается в том, что вы можете без ограничения использовать CSS3!

AMP HTML документы могут быть также использованы для разработки сайта, как и любой другой HTML-документ. Так что если вы не хотите разрабатывать отдельно 2 версии сайта, вы можете просто построить свой веб-сайт на основе AMP-HTML и загружать на веб-сервер только эту версию. Тем не менее, ряд экспертов предлагают создавать обе версии для лучшей совместимости и преимуществ SEO.

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

Использование AMP-JS и AMP CDN совместно с AMP HTML

JavaScript (JS) является настолько мощным инструментов, что он может изменить практически любой аспект страницы, но приходится считаться с неутешительным фактом, что он может задерживать (замедлять) рендеринг страниц вебсайта, блокируя блоки DOM. Новая технология AMP-JS обеспечивает более быстрый рендеринг страниц, предполагая использование AMP-тегов (как упоминалось в выше). Теги IMG, video, audio и iframeзаменяются на amp-img, amp-video, amp-audio и amp-iframe соответственно.

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

Для сайтов с использованием WordPress и других CMS— как создать AMP HTML?

Первое решение. Используйте AMP плагин! Например, https://wordpress.org/plugins/amp/.

Исследования показывают, что более 50% людей отказаться от веб-сайтов, если страница/ы не загружаются в течение Это плохой знак для бизнеса — так как это потенциально потерянные клиенты или даже косвенные потери дохода (особенно для компаний и бизнеса, напрямую зависящего от веб-сайтов и/или поисковых систем).

Мы в компании SEO-Website.ru сделали все записи блога с дополнительными версиями /AMP/.

Рассмотрим результаты, что это дало в рейтинге Google Speed Insights:

Пример 1

Обычная страница. Получаем рейтинг по скорости 74, по удобству — 99 из 100.

AMP страница. Получаем рейтинг по скорости 83, по удобству- 99 из 100.

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

Пример 2

Обычная страница. Получаем рейтинг по скорости 80, по удобству — 99 из 100.

AMP страница. Получаем рейтинг по скорости 88 (зеленая зона — отлично!), по удобству — 99 из 100.

Короткое резюме:

AMP вполне дееспособная технология, способная повысить рейтинг веб-страницы, что положительно влияет на SEO и продвижение вашего веб-сайта. Для сайтов на базе WordPress это реализуется специальным плагином AMP -достаточно просто, но с одним ограничением — только для записей (posts), а не для всех страниц (в этом случае вам необходимо вручную разработать заново структуру страниц согласно ниже приведенным требованиям и правилам).

«Я сделал свой сайт адаптивным, поэтому он и так должен хорошо загружаться!» Да, но.

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

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

Перспективы и сложности AMP

Сейчас AMP HTML кажется гораздо более перспективным, чем в начале 2016 года, так как Google активно продвигает эту инициативу, соответственно ваш сайт с поддержкой AMP-страниц может отображаться на первой странице поиска в мобильных пользователей, над сайтами конкурентов, особенно если у вас хороший контент/содержимое: так что не упустите хорошие шансы в продвижении.

Конечно, еще много нерешенных вопросов вокруг AMP, но многие уже собираются производить обе версии сайта — легкую/простую и обычную, чтобы сделать AMP-страницы (которые загружаются быстрее) конкурентным преимуществом. Что еще остается загадкой, так это Отображение объявлений на AMP HTML. Это одна из проблем, и это пока ограничивает возможности монетизировать свои мобильные AMP-сайты.

Рекомендации от Google по созданию AMP ускоренных мобильных страниц

Как обеспечить корректный показ ускоренных мобильных страниц в результатах Google Поиска?

Технология ускоренных мобильных страниц (Accelerated Mobile Pages, AMP) основана на открытом исходном коде. Такие страницы хранятся в специальном кэше Google, что обеспечивает более быструю загрузку. Технология AMP поддерживается разнообразными платформами, включая Google Поиск. Если у страницы в результатах Google Поиска есть версия в формате AMP HTML, пользователям мобильных устройств может показываться именно она.

Google дает рекомендации по оптимизации сайтов — они относятся и к технологии AMP. А в во второй части этой статьи мы дадим советы по созданию таких страниц:

• Дизайн. Создайте страницы в соответствии с требованиями AMP.
• Видимость. Сделайте страницы видимыми для пользователей.
• Проверка. Узнайте, правильно ли созданы страницы.
• Структурированные данные. Разметьте содержание страниц.
• Статус. Отслеживайте эффективность страниц с помощью Search Console.

Резюме. Проще говоря, технологии усложняются, требования к качеству и скорости растут, и если вы хотите, чтобы ваш сайт был «наверху», необходимо учитывать все это (adaptive design, AMP) уже при разработке или хотя бы при оптимизации веб-сайта.

Ищете исполнителя для реализации проекта?

Проведите конкурс среди участников CMS Magazine

Узнайте цены и сроки уже завтра. Это бесплатно и займет ≈5 минут.

Amp html что это

Google Поиск

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

Google AMP Cache

Узнайте, как благодаря Google AMP Cache различные платформы распространения контента, например Google Поиск, загружают AMP-страницы ещё быстрее.

Google Аналитика

Отслеживайте просмотры AMP-страниц и действия пользователей на них с помощью Google Аналитики.

Что такое AMP HTML и как проверить его внедрение

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

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

В этом посте я расскажу, как внедрить AMP и проверить его правильность.

Что такое AMP HTML и для чего используется?

AMP (Accelerated Mobile Pages) HTML — технология ускорения мобильных страниц, которая позволяет создать их облегчённую версию, сохраняя лишь значимый контент. Для страниц в формате AMP HTML Google «урезает» 90% кода, за счёт чего вес страницы уменьшается, как и скорость загрузки. Это и является главным преимуществом AMP. Также благодаря внедрению AMP сайты получают следующие плюсы:

• увеличивается шанс попасть в «карусель» в топе мобильной выдачи;
• улучшается ранжирование;
• растёт мобильный трафик сайта.

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

В браузере AMP-версии выглядят так:

Кому нужно внедрять на своём сайте AMP HTML:

• издателям;
• рекламодателям;
• технологическим платформам (SSP, DSP, сервисы аналитики).

Требования к AMP HTML

Для применения технологии AMP необходимо учитывать следующие рекомендации:

• использование только асинхронных скриптов;
• размер изображений, рекламных баннеров и других визуальных элементов задаются в HTML-коде;
• размер стилей не превышает 50 КБ;
• произвольный JavaScript-код не применяется.

Google диктует следующие требования применения AMP:

1. AMP-страницы должны соответствовать заявленным требованиям AMP Project.
2. Контент на страницах AMP должен соответствовать контенту на полноценных версиях.
3. URL AMP-страниц необходимо оптимизировать и делать понятными для посетителей.
4. Для правильной работы страницы с технологией AMP необходимо проверять в сервисе AMP Validator.
5. На AMP-версиях должны стоять атрибуты rel=canonical с ссылками на полноформатные версии. Пример ссылки на AMP-версию:

И с AMP-страницы должна стоять обратная ссылка:

Как создать AMP-версию своего сайта

Создать AMP-версию каждой страницы можно вручную по готовым шаблонам или же настроить генерацию в системе управления контентом (CMS). Во многих CMS данная функция доступна «из коробки». На сайте AMP: Accelerated Mobile Pages Project вы можете ознакомиться с пошаговой инструкцией для создания страницы AMP HTML.

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

Как проверить AMP-страницы

Способ 1

С помощью сервиса в Google Search Console. Для этого поместите URL в строку и нажмите «Проверить».

Дождитесь окончания анализа. Если на странице не внедрена технология AMP, вы увидите такое оповещение:

Если страница имеет AMP-версию, об этом сервис уведомит следующим сообщением:

Способ 2

С помощью краулера. Мы покажем, как выполнить проверку с помощью Netpeak Spider. Программа даёт ссылки на AMP-версии страниц и определяет ошибку «Неправильный формат AMP HTML», если AMP-страницы не отвечают стандартам AMP Project.

Алгоритм проверки следующий. Отметьте пункт «AMP» в разделе «Параметры».

В адресную строку введите URL анализируемого сайта и нажмите «Старт».

По итогу сканирования перейдите к столбцу «AMP HTML» в таблице. Значение TRUE говорит о том, что у страницы есть AMP-версия, значение FALSE говорит об обратном.

Выгрузите отфильтрованные результаты, нажав «Экспорт» → «Результаты в текущей таблице» в главном меню программы или в правом верхнем углу окна, после чего передайте данные веб-разработчику.

Подводим итоги

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

• Использование только асинхронных скриптов.
• Размер изображений, рекламных баннеров и других визуальных элементов задаются в HTML-коде.
• Размер стилей не может превышать 50 КБ.
• Произвольный JavaScript-код не применяется.

Для проверки правильности настроек отдельных страниц вы можете использовать сервис в Google Search Console. А с проверкой всех страниц сайта и поиском ошибок отлично справится краулер Netpeak Spider.

Результативное продвижение сайта в Днепре можно обсудить по контактам внизу страницы.