Здравствуйте Люди!

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

Какой должны быть шапка и первый экран лендинга мы будем разбирать на примере сайта производственной компании СЭЛМАКС ГРУПП.

По статистике если форму на сайте заполняют, то чаще всего это делают на первом экране:

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

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

1. Что вы продаёте
   
2. В каком регионе вы продаёте
   
3. Какие выгоды получит клиент
   
4. Как он получит товар
   
   

Задача первого экрана, как и всей посадочной страницы, побудить человек к целевому действию.

Для этого у нас в арсенале есть:

• Шапка
  
  • Логотип и дескриптор
    
  • Навигация
    
  • Контакты
    
• Надзаголовок
  
• Заголовок
  
• Подзаголовок или описание формирующие вместе с надзаголовком и заголовком УТП
  
• Призыв к действию
  
• Форма обратной связи
  
• Визуальные эффекты

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

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

В примере с шапкой производственной компании СЭЛМАКС ГРУПП мы очень долго думали как оптимизировать каждый пиксель. Было проработано 5 вариантов и этот был утвержден в итоге. Здесь много информации размещено очень компактно и читаемо. Можете пользоваться и делать также не стесняясь. Конечно, если у вас есть столько же информации как у производственной компании.

Я рекомендую делать сайты для десктопа в контейнере шириной 1599 или 1300 пикселей. То есть, максимальная ширина контента выровненная по середине, на вашем сайте должна быть 1500px или 1300px.

По прежнему 30% людей используют десктопы шириной 1024px и более. Для них у нас будет широкий холст и простор для творчества - то, что надо. Мы сможем разместить всё — и УТП, и форму, и преимущества, и визуализировать продукт.

Соответственно и ширина шапки должна быть 1500px или 1300px.

На сайте СЭЛМАКС получилось уместить весь контент в шапку шириной 1300рх.

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

В мобильной версии сайта высоту шапки можно и нужно ещё уменьшить до 50px и так же её зафиксировать.

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

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

Для примера, разберем какую структуру навигации мы создали на сайте производственной компании СЭЛМАКС ГРУПП:

• Главная
• О нас
• Наше производство
• История завода
• Наши реквизиты
• Наш офис
• Наш склад
• Для клиентов
• Инструкции
• Бесплатная доставка
• Гарантия
• Кредит и рассрочка
• Цены на сборку теплицы
• Наши сертификаты
• Возврат и обмен товара
• Как выбрать
• Новости
• Оплата
• Оптовикам
• Как купить
• Вакансии
• Как выбрать
• Кредит и рассрочка
• Опт
• Контакты

В зависимости от доступности места в шапке на самом первом уровне меню можно ещё вывести пункты "Бесплатная доставка" и/или "Кредит и рассрочка". В мобильной версии меню сайта мы так и сделали.

Изучите какую информацию мы разместили на каждой из страниц меню сайта https://www.selmaks.by/

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

Контакты в шапке сайта я рекомендую делать в таком формате:

Опционально вы можете заметить второй номер на ссылку с текстом "заказать звонок".

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

В мобильной или адаптивной версии сайта делайте контакты в шапке сайта кнопкой по клику на которую появляется выпадающий список или всплывающее окно с основной контактной информацией.

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

При добавлении товаров в сравнение у вас где-то должна появляться иконка со ссылкой на список сравниваемых товаров. Шапка — одно из подходящих для неё мест.

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

Для того чтобы сделать эффективный первый экран надо составить привлекательное УТП. Про то как составить УТП я рассказал здесь - изучите эту статью, это очень важно. Здесь повторяться не вижу смысла.

Давайте в этой статье поговорим о визуальном оформлении УТП. Как я говорил выше - УТП лучше всего отображать в формате:

• Надзаголовок
• Заголовок
• Подзаголовок или описание формирующие вместе с надзаголовком и заголовком УТП.

Давайте составим УТП для сайта производственной кампании СЭЛМАКС ГРУПП.

гарантия 10 лет
Поликарбонат оптом от Белорусского производителя

• Возможность изготовления любого размера и цвета.
• Изготовление продукции под брендом заказчика.
• Бесплатная доставка по всей Беларуси.
• Отсрочка и рассрочка платежа.

Первым 10 клиентам пришедшим с сайта особые условия.
Кнопка: Запросить оптовые цены

Вот так УТП будет выглядеть если его сверстать в Тильде:

Как я говорил выше: "Если форма заполняется, то на первом экране".

Вот чек-лист по оптимизации формы обратной связи:

1. Расположите форму обратной связи на первом экране посадочной страницы.
   
   
2. Сделайте форму заметной — обведите в контур с закругленными краями, сделайте её фон отличным от фона страницы, выделите шрифтом другого цвета или размера.
   
   
3. Оставьте в форме минимум обязательных для заполнения полей. Вам достаточно номера телефона или почты.
   
   
4. Сразу помечайте корректно заполненные поля формы зеленой галочкой или другим интуитивно понятным символом.
   
   
5. Сразу, до отправки формы, выделяйте красным некорректно заполненные поля и рядом выводите подсказку с описанием ошибки.
   
   
6. Пометьте обязательные поля в форме красной звездочкой.
   
   
7. Не задавайте маску ввода для номера телефона, чтобы его можно было заполнить любым образом. Или сделайте выпадающий список с выбором кода страны.
   
   
8. Сразу после ввода, до отправки формы, проверяйте номер телефона и email.
   
   
9. Разместите в начале более простые вопросы, если в форме много полей.
   
   
10. Поясните, почему тот или иной элемент формы неактивен.
    
    
11. Используйте радио-кнопки и чекбоксы вместо выпадающих списков.
    
    
12. Не выводите большую форму всю сразу, разбейте на несколько частей и показывайте по мере её заполнения.
    
    
13. Предоставьте возможность в любой момент вернуться назад и что-то исправить так, чтобы это было очевидно для пользователя.
    
    
14. Помимо заголовка, добавьте примеры заполнения полей формы в атрибуте placeholder.
    
    
15. Добавьте надпись с информацией о том, что произойдет, когда форма будет отправлена: заявку рассмотрят и перезвонят в течение 10 минут, пришлют сообщение на email/viber/telegram и др.
    
    
16. Дайте возможность отказаться от почтовой рассылки при отправке формы.
    
    
17. Встраивайте формы в контент по всему сайту, а не только на посадочной странице и в разделе «Контакты».
    
    
18. Добавьте на сайт короткий онлайн опрос, в конце которого показывается результат (так называемый квиз-тест), как альтернативу или дополнение к формам связи. Квиз-тест должен быть сразу виден на сайте без необходимости переходить на другую страницу
19. Добавьте в форму скрытые поля, которые будут принимать данные передающиеся в адресной строке браузера.

Call to Action — СТА — Призыв к действию — это изображение, текст в кнопке, всплывающее окно или строка текста, которые используется, чтобы побудить посетителя совершить нужное действие: оставить заявку, перейти по ссылке, позвонить. Например, такие призывы как: Звоните, пишите, узнайте, купите и тп.

Вот чек-лист по оформлению призыва к действию:

1. Кнопка, призыв к действию и её описание должны излагать одинаковыми словами одно целевое действие.
   
   
2. Выделите призыв к действию подходящим к дизайну сайта способом: пустым пространством, рамкой с закруглёнными краями, цветом фона, размером и цветом шрифта.
   
   
3. Разместите призыв к действию на главной странице.
   
   
4. Он должен быть виден на компьютерах и мобильных устройствах.
   
   
5. Напишите призыв к действию так, чтобы он содержал один глагол в повелительном наклонении.
   
   
6. Сформулируйте призыв к действию четко и понятно. Он должен точно говорить, что требуется сделать. Избегайте лишних слов, таких как «можно», «возможно», «хотите», «не забудьте» и других.
   
   
7. Продублируйте призыв к действию в кнопке или сделайте в виде кнопки.
   
   
8. Кнопка с призывом к действию должна выделяться на основном фоне других элементов интерфейса. Это касается всех важных кликабельных элементов.
   
   
9. Придайте кнопке с призывом к действию иллюзию объема или добавьте ненавязчивую анимацию раз в 6 секунд.
   
   
10. Разместите призыв к действию на странице благодарности за заказ консультации или покупку.
    
    
11. Оставьте на одной странице фокус только на одном целевом действии.
    
    
12. Скомпонуйте визуальные элементы сайта так, чтобы они подталкивали посетителя к целевому действию. Это могут быть стрелки, направление взгляда.
    
    
13. Повторите призыв к действию несколько раз на странице с длинным скроллингом(прокруткой) за рамками первого экрана в той же или сокращенной формулировке.
    
    
14. Разбейте длинные описания и контент по всему сайту призывами к действию.
    
    
15. Оформите призыв к действию внутри текста как гиперссылку.
    
    
16. Дайте возможность пользователю при перемещении по сайту постоянно видеть на экране призыв к действию, чтобы при желании он смог сразу же заказать товар или услугу.
    

В этой главе я хочу с вами поделиться своим кейсом по продвижению сайта в тематике "торты на заказ". Этот кейс интересен тем, что я поднял сайт в Яндексе по запросу "торты на заказ" в регионе Минск и область с 10 строки на первую только первым экраном. Дело было в 2016 году, но это по прежнему крутой пример правильной внутренней оптимизации сайта по закону Парето. Это когда 20% действий приносят 80% результата.

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

Так вот, сайт надо было двигать дальше. Я послал запрос в космос и мне пришёл ответ: "Надо внедрить на первый экран слайдер с пошаговым приготовлением торта!"

Вселенная фигни не посоветует! Такого не было не у кого! Да, были статьи где люди рассказывают и показывают как они готовят торты, но в таком лаконичном, кратком, понятном формате, на главной и одновременно основной посадочной странице, никто в СНГ, на тот момент, такой фишки не использовал.

Я поблагодарил вселенную и взялся за работу.

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

Вот какие первые несколько экранов получились в итоге:

В итоге сайт плотно занял топ 3 по всем запросам связанным с заказом тортов в Минске и области сразу после добавления этой фишки.

А вот все слайды той карусели:

На этом примере вы могли хорошо понять в чём заключается работа по продвижению сайта. К сожалению или к счастью я больше не занимаюсь тортами и сайт пришлось похоронить)) Но опыт был получен колоссальный. Очень надеюсь что он вам поможет. Если что вот ссылка на сайт mrtort.by в веб-архиве.

А в этом видео вы можете посмотреть на метрику этого сайта.