24 примера заголовков веб-сайтов, тренды и советы по конверсии

Веб-сайты различаются по стилю, формату и качеству. Но что их всех объединяет? Заголовки — полоса вверху, облегчающая навигацию.

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

В этом посте мы поделимся 24 примерами заголовков веб-сайтов с разбивкой:

• Что такое заголовок веб-сайта
• Что включить в шапку сайта
• Рекомендации по оптимизации конверсии

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

Что такое шапка сайта?

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

Вот очень простой, мгновенно узнаваемый заголовок веб-сайта:

Как упоминалось выше, заголовки веб-сайтов несут двойную ответственность:

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

Что должен содержать заголовок сайта?

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

Логотип

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

Навигационные ссылки

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

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

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

Панель поиска

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

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

Корзина покупателя

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

Кнопки социальных сетей

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

Поле входа

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

призыв к действию

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

Примеры и тенденции заголовка веб-сайта

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

Однострочный заголовок с логотипом, выровненным по левому краю

Простой, но эффективный, Zoho имеет всего четыре кликабельных навигационных элемента плюс панель поиска. Обратите также внимание на то, как Зохо выбрал правильное выравнивание. Это подчеркивает логотип, давая ему больше места для привлечения внимания посетителей.

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

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

В настоящее время SE Ranking использует панель уведомлений для поддержки Украины:

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

Двухуровневый заголовок

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

Двухуровневый hHeader с панелью уведомлений

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

Заголовок с служебной полосой (липкая полоса)

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

Этот заголовок остается с вами до самого конца сайта.

Плавающий заголовок

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

Заголовок с мегаменю

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

Заголовок с многосайтовой навигацией

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

Выровненный по левому краю вертикальный заголовок

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

Выровненный по правому краю вертикальный заголовок

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

Вставка для гамбургера

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

Вот то же самое, только с другой стороны:

Полное поглощение

Вы можете стать очень смелым и расширить меню на весь экран, как это делает Vimeo:

Лучшие практики заголовка веб-сайта

• Используйте цветовой контраст. Как минимум, соотношение между цветом фона заголовков и выбранным шрифтом должно составлять 4,5:1. Это относится к заголовку вместе с любой вторичной информацией, включенной вокруг него. Вы также можете затемнить фон страницы после отображения меню заголовка, чтобы сделать его более сфокусированным.
• Включите призыв к действию. Мы упоминали об этом выше, но стоит упомянуть еще раз. Будь то контакт с вашим бизнесом, использование бесплатного инструмента, запуск пробной версии,
• Сделайте его липким. Некоторые веб-сайты легко поразят вас своим дизайном и динамичной прокруткой, но, в конечном счете, у большинства веб-сайтов есть одна четкая цель: конверсии. У вас есть около 15 секунд, чтобы предложить посетителям ценность, прежде чем они уйдут, поэтому вам нужно максимально упростить переход посетителей на важные страницы в любое время. Не говоря уже о том, чтобы всегда видеть этот важнейший призыв к действию.
• Сделайте его интуитивно понятным. Прежде чем выбрать один из них для своего собственного веб-сайта, изучите конкурентов и другие сайты в вашей нише, чтобы увидеть, какие из них наиболее распространены. Навигация по веб-сайту — это не та область, где вы должны стремиться быть уникальным или «подрывным».
• Оптимизируйте для мобильных устройств. Если вы не используете размер шрифта, видимый только под микроскопом, горизонтальный заголовок не подходит для мобильных устройств. Самый распространенный подход — настроить гамбургер-меню для мобильного просмотра.

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

• Придерживайтесь простых шрифтов. Разборчивость — это все, когда дело доходит до UX (и, как оказалось, психологии копирайтинга тоже), и это вдвойне важно, когда речь идет о самом важном кликабельном элементе вашего сайта. Шрифт без засечек часто используется для текста заголовка веб-сайта, поскольку он хорошо читается.

Хорошо, что Lemonade не использовал шрифт своего логотипа для шрифта заголовка.

Заголовки веб-сайтов: тонкая художественная форма

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

Об авторе

Йони Ямпольски — менеджер по маркетингу Elementor. С более чем 10 миллионами активных пользователей Elementor позволяет практически любому создавать потрясающие веб-сайты WordPress без кода.