info@co-meta.ru
+ 7 495 744 33 68
Москва, проспект Мира, 119, ВВЦ
Разработка адаптивных сайтов
продвижение и поддержка
Помогаем увеличить продажи до 3 раз,
всего за 28 дней с помощью комплексного
продвижения в интернете!

Как создавать ускоренные целевые страницы?


В мире крупного бизнеса быстрота является синонимом крупной прибыли. Поэтому успешные бренды пытаются всеми силами удовлетворить потребительский спрос с минимальными временными затратами. На помощь им приходят поисковые корпорации, внедряющие соответствующие инновации. Среди последних разработок в данном ИТ-сегменте следует выделить проект корпорации "Гугл"- Accelerated Mobile Pages.

Целевые ускоренные страницы

Представленная веб-технология позволяет мобильному варианту любого сайта загружаться оперативнее. Это, в свою очередь, влечет за собой неумолимый и столь приятный рост конверсии и качественного уровня лидов. А не это ли ключевые задачи любой раскрутки? В целом, ускоренные целевые страницы дарят сайтовладельцам следующие технические и СЕО-преимущества:

  • минимальные задержки при загрузке веб-страниц;
  • оперативность внедрения;
  • возможность быстрого сбора информации о посещаемости AMP-страниц;
  • обширная функциональность;
  • эстетичность внешнего вида.

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

Правила создания AMP

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

  • документ стартует с указания типа "!doctype html";
  • в теле нужны уникальные верхнеуровневые компоненты "html amp" или "html ?";
  • здесь должны быть необязательные для стандартного HTML "head" и "body";
  • обязательно добавлять в тег заголовка метатеги "meta name="viewport""
  • content="width=device-width,minimum-scale=1">;
  • также внутри заголовка необходим ссылочный тег "link rel="canonical" href="/$SOME_URL"".

Модификация дизайна и контента

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

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

  • Открываем страницу в любимом браузере.
  • Добавляем к адресу ускоренной целевой странницы пометку "#development=1".
  • Оказавшись в консоли консоль Chrome DevTools, находим ошибки.

Пишите нам

Будем рады ответить на ваши вопросы. Пожалуйста напишите подробней суть дела