Как сделать посадочную страницу с высокой конверсией

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

Из этой статьи вы узнаете:

• что такое целевая и посадочная страницы;
• что является критериями качества посадочных страниц;
• одностраничные лендинги: преимущества и недостатки;
• что такое мультилендинги и как их настроить.

Что такое целевая страница

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

Посадочная страница: пример для контекстной рекламы

Ниже приведены два варианта структуры посадочной страницы. Расположение элементов можно менять, используя А/Б тестирование и выбирая тот, который дает наибольшую конверсию.

Качество целевой страницы

Как сообщает Google, качество целевой страницы — это совокупный параметр вашего контента, скорости загрузки, релевантности ключевых слов.

Ключевые рекомендации поисковых систем можно изложить в простом чек-листе

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

Качество контента страницы

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

Соответствие контента целевому запросу

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

Если вы хотите настроить таргетинг на вашу услугу, ответьте сами на такой вопрос: “А у меня на сайте есть ответ на него?”
Если у вас нет ответа на этот вопрос, то мы рекомендуем его вам написать. Бессмысленно роптать затем на контекстника, который настроил таргетинг на ключевое слово, а на сайте информации об это нет.

Для проверки качества контента рекомендуем использовать классические методы:

• Вебвизор. Удобный инструмент проверки поведения пользователя на сайте. Настраивается в Яндекс.Метрике. Можно сделать силами контекстной рекламы
• А/Б тестирование. Настройте показ разных версий страницы с различным контентом и отследите отличие в конверсии. Можно сделать силами контекстной рекламы
• Фокус-группы. Оффлайн-версия, которая является миксом первого и второго метода. Требует лишь сбора целевой аудитории для анализа.

Не распыляйте контент

У вас может возникнуть желание: “А ну, я напишу все, что нужно в одну страницу”. И делаете все услуги в одну страницу сайта — от проектирования до послемонтажных работ. И получается вот такая картина:

Начали за здравие, окончили за упокой… Клиент, который придет в раздел монтаж пола, будет завален ненужной информацией. А клиент, который придет на демонтаж плинтуса, о котором написано в верхней части сайта, будет в недоумении: «При чем здесь укладка ламината?»

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

Распределить ключевые слова в тексте по 5-10 раз — обычная практика сеошника старой школы. Но она уже давно себя изжила. Поисковик научился определять подобные ключи уже давно. У Google этот механизм называется RankBrain (условно — искусственный интеллект Google), Яндекс же не так давно выкатил самообучаемый алгоритм Королёв, который в большей мере стал анализировать поведение пользователей в поиске.

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

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

Будьте информативны

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

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

Простой метод доработки своего контента:

1. Проверьте в поиске выдачу по рекламе и в SEO по вашему ключу.
2. Изучите контент и коммерческое предложение.
3. Выделите уникальное торговое предложение (УТП) и постарайтесь изложить аналогично.
4. Выделите недостатки всех и играйте против них.
5. Старайтесь быть лаконичным и уникальным. Расскажите о том, что не написано на сайтах конкурентов.

Скорость загрузки посадочной страницы

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

Как измерить скорость загрузки страницы

Существует два способа проверки скорости загрузки.

Гугл предлагает простой бесплатный сервис Google Pagespeed, который определит, какие скрипты или графика замедляет загрузку сайта и предложит свой вариант сжатых картинок, стилей и скриптов.

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

Второй сервис, который я рекомендую — это Tools.Pingdom.com. Он специализируется на измерении скорости загрузки страниц — это его основная задача. И в этом он нагляден и хорош.

1. Вставьте отслеживаемую страницу.
2. Выберите страну, откуда проводить измерения (есть три континента. С Азией пока туго).
3. Начните тест.

На что следует обратить внимание в результатах

1. Скорость загрузки страницы не должна превышать 2-3 секунд.
2. Вес страницы. Страницы с большим объемом будут долго грузиться на мобильных устройствах. Рекомендуемый объем для контекстной рекламы не более 3 Мбайт.

3. Изучите «лесенку» очередности загрузки вашей страницы: от CSS до скриптов и фотографий.

4. Отследите, что “съедает” время загрузки (DNS, сертификат SSL, вес передаваемого пакета, отклик или скорость соединения с хостингом).
5. Детали каждого этапа можно изучить более подробно.

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

Мобильная версия страницы

Я часто слышу от клиентов: “Зачем мне мобильная версия. Пусть меня ищут в десктопе!“. Я им отвечаю, что: «Вы теряете огромное количество потенциальных клиентов».

Мировая статистика GlobalStat говорит прямым текстом, что доля мобильного поиска растет с каждым днем. Смартфоны в октябре 2016 года превысили по популярности десктопную выдачу и составляют 52% против 43%:

Планшеты уже целый год стоят на одном значении — 4%. Второе доказательство: пример статистики контекстной рекламы по устройствам в одной из кампаний:

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

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

Существует специальный сервис проверки сайта на мобильность от Google.

Просто вставьте свой URL и проверьте результат. Система анализирует множество данных:

• Близость элементов (проверяет, не накладываются ли элементы друг на друга или не слишком ли они мелкие).
• Размер шрифтов на разных устройствах.
• Использование Flash (использование которого уже давно не рекомендуется).
• Адаптивность, ширина контента и ее настройка в стилях CSS.
• Настройка областей просмотра при помощи аттрибута viewport.

Естественно, для возможности проверки, страница должна быть открыта для индексации.

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

Формы захвата на посадочной странице

Если вы создали страницу, идеальную во всех смыслах, осталось проверить самое главное. А сможет ли клиент связаться с вами?

1. Телефон и адрес электронной почты в шапке сайта. Старайтесь сразу в видном месте выделить контакт, чтобы клиент обратил внимание на вас

2. Кнопка «Купить», «Заказать» должна быть на первом экране и выделена.

3. Попап-окно с формой заявки. Может появляться при нажатии на кнопку или спустя некоторое количество времени.

4. Форма быстрой заявки в подвале. Отличается простотой и минимальным количеством полей.

5. Подписка на рассылку. Позволяет без труда получить Email в 1 клик для рассылок. Является наиболее популярным и рекомендуемым для всех сайтов
6. Виджет онлайн-чата или вызова обратного звонка. Существует множество решений — от бесплатных до платных. Можно написать свой чат самому.

Делитесь в комментариях, какие формы используете вы.

Что такое AMP — ускоренные мобильные страницы

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

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

Как настроить свою AMP-страницу

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

Например, есть страница site.com/page1 и ее AMP-версия site.com/page1/amp
В коде основной страницы (site.com/page1) укажите:

<link href="http://site.com/page1/amp" rel="amphtml" />

Гугл считает AMP-страницы за дубли

Не забывайте настроить тег canonical на ваши AMP-страницы: они должны индексироваться, но основной страницей должна быть десктопная версия.

Например, есть страница site.com/page1 и ее AMP-версия site.com/page1/amp
Значит, в настройке кода AMP страницы (site.com/page1/amp) укажите

<link href="https://site.com/page1" rel="canonical" />

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

Как проверить свою AMP страницу

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

Возможно только два варианта: страница соответствует стандартам AMP или нет.

Если у вас все сделано правильно, результат теста вас порадует

Лендинг или посадочная страница

Оба эти слова означают разные понятия, хотя по-английски Landing page переводится именно как «посадочная страница». Откуда путаница?

Что такое лендинг (одностраничник)

Путаница исходит от контекст-маркетологов, которые начали продвигать тактику одностраничных сайтов, везде употребляя термин из контекстной рекламы “посадочная страница” или «Landing Page».

Суть метода заключается в следующем:

1. Собрать тысячи слов по тематике.
2. Вычистить минус-слова.
3. Создать одностраничный товарный сайт (практически слизать копию товарной страницы с аналогичного сайта Amazon, OZON или подобного).
4. Собрать поисковую кампанию по этим словам
5. Настроить на те же слова кампанию в контекстно-медийной сети (Google) или в РСЯ (Яндекса).
6. Снабдить ссылку UTM меткой для отслеживания эффективности ключевых слов.
7. Собрать лиды.

Лид — это заполненная форма заказа, входящий звонок, отправленная форма.

По факту, лид —  это имя клиента и его контактная информация. Чаще всего это номер телефона и/или email.

Так как сайты — одностраничные, то клиенту особо некуда и уйти, кроме как закрыть сайт или же оставить заказ (то есть лид):

1. Клиент находит ваш сайт по рекламе и переходит на него.
2. Оставляет заявку.
3. Вы получаете контакты клиента.

Чтобы не возникало путаницы, одностраничники мы будем называть лендингами. За рубежом такие сайты называют «CTR-сайты» или еще «One-Page Site».

Преимущества и недостатки лендингов (одностраничных сайтов)

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

• Дешевизна. Создать лендинг дешево. Реальные цены лендингов под ключ начинаются от 15 000 рублей. Любую сайт-визитку создать дороже в разы.
• Скорость создания. Лендинг разворачивается всего за несколько дней. Есть специальные сервисы — конструкторы подобных сайтов, где создать лендинг при помощи встроенных инструментов не составит никакого труда.
• Простота сборки контактной информации. Данные легко собираются на Email или внутри админки данного лендинга.
• Простота отслеживания конверсии. Всего лишь простая UTM метка в контекстной рекламе и вы можете отследить каждый ключ и каждое объявление, которое привело вам заказ

Но данный бизнес не лишен и недостатков:

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

Структура одностраничного сайта

Обычно такие сайты имеют следующие элементы:

1. Шапка с якорными ссылками. Ссылки просто адресуют на отдельные части страницы.

2. Первый блок обычно содержит описание продаваемого товара или услуги, а также УТП (уникальное торговое предложение).

3. На сайте есть множество элементов в виде счетчиков, скидок, призывов к действию.

4. Форма заказа звонка может выводить простое попап-окно с номером телефона и именем.

5. Также на сайте есть формы отправки заявки — простые попап окна или поля Имя и Телефон, Email. Для упрощения — капча (защита от спама) может отсутствовать.

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

Помимо этих элементов, можно выделить часто повторяющиеся:

7. Преимущества компании.

8. Список клиентов.

9. Подписка на рассылку.

10. Отзывы клиентов.

Советы по созданию одностраничных сайтов

Мы собрали все недостатки лендингов и решили сделать простой чек-лист для начинающих сайтостроителей и маркетологов.

Делайте лендинг на основе существующего сайта.

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

Простые рекомендации:

• Делайте лендинг в формате поддомена или страницы лендинга на основе существующего домена.
• Используйте единое название бренда в логотипе.

Не врите про себя в преимуществах

Очень часто видно такой текст в лендингах:

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

Из предложений по этому пункту:

• старайтесь писать только то, что вы можете подтвердить
• поработайте прежде над репутацией в сети — SERM (Search engine reputation management).
• зарегистрируйте вашу компанию на сайтах-каталогах предприятий с аналогичным прайсом и текстами с ссылкой на свой лендинг.

Делайте реальные отзывы

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

Из хороших решений можем предложить:

• видеоотзывы от исполнительных лиц ваших клиентов;
• ссылка на профили клиентов в соцсетях;
• ссылки на отзывы на трастовых площадках, таких как Яндекс.Маркет или iRecommend, ФЛАМП или Отзовик.

Мультилендинг: техника создания

Как же тогда сделать лендинг, который адаптирован на все виды сайтов? А такие вероятно есть… Да, есть, называются мультилендинги.

Они работают необычно. Сайт один и тот же, но показывает разный текст в зависимости от запросов в ключевых словах:

Основной идеей работы мультилендинга является простой PHP скрипт, который подменяет часть текста на сайте согласно UTM-метке вашей ссылки.

Настраиваем UTM метки

Сначала нужно настроить UTM метки в вашей контекстной кампании.
Для этого воспользуйтесь нашей утилитой генерации UTM-меток.

1. Введите URL вашей посадочной страницы мультилендинга.
2. Выберите рекламную систему: Google AdWords, Яндекс Директ, Вконтакте или Facebook — ту, где планируете проводить рекламную кампанию.
3. Пропишите заранее заготовленный код в поле UTM_Content.

Итоговая ссылка должна получиться вида

http://site.com?utm_source=google&utm_medium=cpc&utm_campaign={campaignid}&utm_content=GA&utm_term={keyword}

Ссылку прикрепляем к каждой соответствующей группе объявлений.

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

• Генератор объявлений Google AdWords;
• Генератор объявлений Яндекс.Директ.

Настроим мультилендинг на Вашей странице

На сайте следует внедрить простой PHP код:

<?php
 $utm = $_GET['utm_content'];
 if($utm == 'target') {
   $multiTitle = 'Настройка таргетированной рекламы';
 }
 elseif($utm == 'yd') {
 $multiTitle = 'Настройка Яндекс.Директ';
 }
 elseif($utm == 'ga') {
   $multiTitle = 'Настройка Google AdWords';
 }
 else{
   $multiTitle = 'Настройка контекстной рекламы';
}
?>

Затем выводим сам скрипт в замене заголовка лендинга:

 <h1><span><?php echo $multiTitle; ?></span></h1>

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

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

Выводы

Посадочные страницы для контекстной рекламы следует проверять на следующие показатели:

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

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