Перенос сайта с HTTP на HTTPS: кому и зачем это нужно?

После 2014 года Google и Яндекс объявили о том, что все сайты на протоколе http будут отмечаться в качестве небезопасных. Большинство веб-мастеров пропустили подобную ремарку поисковиков, но несколько месяцев спустя на формах можно было наткнуться на сообщения о том, что сайт при прежних настройках оптимизации и рекламных кампаний слишком сильно просел в выдаче. Как оказалось, поисковики не просто стали особым образом отмечать сайты на новом протоколе, но и снизили качество и количество выдачи ресурсов на HTTP.

Если Вы до сих пор не перенесли сайт с HTTPSна HTTPS – самое время задуматься над тем, когда это крайне необходимо, и как это правильно сделать. Об этом и поговорим в статье.

markirovka https saytov

В чем преимущества HTTPS?

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

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

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

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

what is tls protocol

Простыми словами, сайты на HTTPS протоколе воспринимаются (а по факту и являются) более надежными.

Кому нужен перевод сайта с HTTP на HTTPS?

Сразу отметим – даже сейчас, спустя два года после объявлений от Google и Яндекс, не все ресурсы переведены на рекомендуемые защищенные протоколы. Дело в том, что от отсутствия такого безопасного соединения страдают не все сайты, а только некоторые.

В обязательном порядке перевести сайт на защищенный протокол HTTPS следует:

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

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

перенос сайта на https

Переход сайта с HTTP на HTTPS: выбираем сертификат

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

На данный момент доступны несколько вариантов таких сертификатов безопасности для переноса сайтов на HTTPS:

  1. Одиночный сертификат для одного доменного имени. Подходит для цельного ресурса любой емкости и с любым количеством страниц.
  2. Многоуровневый сертификат для нескольких защищенных источников (.com, .net и пр.).
  3. Сертификат безопасности для одного источника, но для разных доменных имен (a.sitename.com, b.sitename.com и пр.).

Также различают OV, EV и DV сертификаты. Первые подтверждают не только домен, но и организацию, которой он принадлежит (такой SSL предназначен для государственных учреждений, в Украине у них доменное имя содержит .gov). EV сертификаты используются для интернет-магазинов и ресурсов непосредственно связанных с электронной коммерцией, такой же сертификат используют некоторые социальные сети, например, Twtter. Установка EV сертификата занимает до пяти дней. Наиболее распространенный тип сертификата безопасности – OV. Он отличается наименьшей защитой, подходит для тестовых и внутренних сайтов а также для ресурсов, не связанных с электронной коммерцией.

Как перенести сайт с HTTP на HTTPS?

Сам перенос сайта с HTTP на HTTPS не ограничивается исключительно выбором и покупкой сертификата. Для того, чтобы правильно перевести все страницы и элементы ресурса на защищенный протокол, понадобится от 12 часов и больше, в зависимости от того, насколько емкий ресурс, и как сильно вы будете торопить программиста:)

Невнимательный перевод сайта с HTTP на HTTPS протокол чреват тем, что некоторые страницы просто потеряются, слетят внутренние и внешние анкоры, страницы перестанут индексироваться. Как результат – позиции в выдаче серьезно просядут, и трафик пойдет вниз. Как правильно перенести сайт с HTTP на HTTPS? Выполнить перенос абсолютно всех элементов ресурса и не забыть сообщить об этом поисковикам.

Что нужно сделать в обязательном порядке:

  1. Переадресация URL. Для переадресации ресурса на новые адреса с HTTPS перед доменным именем, можно использовать динамические ссылки относительно домена или относительно протокола. Не забывайте, что нужно использовать 301 редиректы, о значении которых мы уже писали ранее.
  2. Проверка внутренних ссылок. Если внутренние страницы сайта линкуются друг с другом (вероятнее, так и есть на сайте с двумя и более страницами), все внутренние анкоры также нужно заменить на относительные ссылки.
  3. Проверка изображений и других ссылок. Все кликабельные элементы на сайте и на внешних ресурсах с адресами должны быть также исправлены на относительные ссылки или на новые адреса, но уже с указанием HTTPS протокола вместо HTTP.
  4. Проверка файлов robots.txt и тегов noindex – во время переноса сайта страницы закрываются от индексации, после завершения всех работ не забудьте их снова открыть для индексации. О значении файла robots.txt и тега noindex мы уже писали ранее.
  5. Обновление карты сайта.
  6. Работа с Google Webmaster Tools. После переадресации всех внутренних страниц, изображений и элементов ресурса, сайт необходимо заново отправить на индексацию поисковикам. Для поисковых систем обновленный ресурс – совершенно новый, даже с полным совпадением доменного имени.

Любой пропущенный шаг или неправильно исполненное действие чревато снижением количества посетителей на сайте. Думайте сами, готовы ли Вы рисковать с самостоятельным переносом сайта на безопасный протокол HTTPS – наши специалисты помогут сделать это быстро и в сжатые сроки от одного рабочего дня (в зависимости от сложности ресурса).

 

Основные принципы правильного UX дизайна

Графический дизайн – это не просто фигуры, цвета, их соотношение и пропорции. Современное веб-пространство должно ориентироваться на один, самый главный показатель – удобство использования (юзабилити). Пользовательский опыт на сайте должен быть крайне позитивным, иначе – большинство из юзеров просто не вернется на сайт, а значит, шансы на конверсию уверенно стремятся к нулю.
Мы постарались собрать главные принципы UX дизайна посадочных страниц в одном материале. Безусловно, их может быть гораздо больше, у вас со временем и опытом могут появляться собственные фишки и секреты – смело делитесь ими в комментариях и дополняйте наш материал.

Не забывайте о правилах визуальной иерархии.

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

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

Правильное визуальное расположение элементов лучше помогает определить пользователю, куда дальше ему идти: скроллить, кликать на страницу, переходить в другой пункт меню и пр. Именно правильная визуальная иерархия должна отделять важное от второстепенного на сайте, она помогает ориентироваться в структуре ресурса и направляет пользователя на совершение конверсии.
Хорошим примером правильно настроенной визуальной иерархии может стать официальный сайт Apple – посмотрите, насколько лаконично и удачно вынесены на заглавный слайдер флагманские продукты (в данном случае – iPhone 7). Благодаря лаконичной подаче информации и правильной иерархии форм на сайте заблудиться практически нереально: слайдеры кликабельные, наверху разделы сегментированы по продукции.

iphone 7 slider

Позвольте сайту «дышать»

Так называемый white space несет огромную ценность для UX дизайна. Он позволяет пользователю лучше сориентироваться в интерфейсе и принимать решения. Все важные элементы и якоря визуальной иерархии разделены от второстепенного контента. Свободное пространство не обязательно должно быть белым или черным, оно просто должно легко отделяться от основных конверсионных элементов страницы.
Отличный пример – у Samsung. При скроллинге можно увидеть несколько секций только с изображением продукта, кратким заголовком и почти «невесомой» кнопкой подробнее. Дизайн не перегружен элементами, достаточное количество пространства помогает сконцентрировать внимание на продукте и помогает пользователю принять правильное решение, не отвлекаясь на второстепенную информацию.

screenshot samsung site

Навигация должна быть максимально простой и понятной

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

Не забывайте об адаптивности

Все больше людей используют смартфоны для поиска информации в интернете. Даже если конверсия совершается преимущественно с ПК, то ищут вас из сферы мобайла, а затем целенаправленно переходят на заинтересовавший ресурс через запрос в поисковике. По последним данным, больше половины пользователей утверждают, что в случае неудобного мобильного сайта или отсутствия адаптивного интерфейса в принципе, желание переходить на «полноразмерную версию» пропадает вовсе.
Очень важно проработать удобную навигацию и пользовательский опыт во всех версиях сайта, адаптивный дизайн – это уже не преимущество, а простая необходимость. Не нужно выносить на мобильную версию все пункты из полноценного десктопного варианта – все должно быть максимально понятно и лаконично, пункты меню должны находиться друг от друга на расстоянии, достаточном для того, чтобы идентифицировать касание и перенаправлять пользователя на необходимый ему раздел меню.
Стандартная схема – перемещение меню на левую (или правую) сторону экрана. Как пример, фул и мобайл версия сайта интернет-магазина косметики Makeup.

makeup mobile version

makeup desktop version

Последовательность – главное правило

Ключевым принципом юзабилити сайта признается и последовательность. Она означает, что все элементы дизайна должны быть выдержаны в одном стиле. Забудьте о бурной фантазии при выборе шрифтов или оттенков. Ограничьтесь одним стилистическим набором – буйство красок и форм только сбивает пользователя с пути конверсии.
Есть «незыблемые» элементы дизайна, отступать от которых не следует отступать
Зачастую желание быть во всем лучше, креативнее и оригинальнее всех может сыграть с вами злую шутку: пользователи просто не поймут подобных порывов. Стандартные паттерны должны соблюдаться, а если вы очень хотите попробовать что-то новое, то обязательно предварительно протестируйте это.

Честность – превыше всего

Дизан и интерфейс сайта должен завлекать, но не должен обманывать. Продукт или компания должны вызывать положительные эмоции и стопроцентное доверие. Визуальное подтверждение качества или отзывы – все это не помешает. Отличным решением станет видеоконтент, рассказывающий об особенностях товара и его основных характеристиках (задумайтесь, зачем на и без того успешной «Розетке» появились видео-обзоры гаджетов?).
По статистике, больше 70% людей положительно реагируют на видео-контент и решаются на конверсию.

Без тестов – никуда

При проектировании лендинга вы должны мыслить так, как ваш клиент. Но не всегда это возможно: если вы не входите в ЦА продукта, то лишь в некоторых случаях сможете правильно смоделировать поведение посетителя на сайте.
Познакомиться с пользовательским поведением на сайте поможет предварительное пользовательское тестирование или изучение тепловых карт. Последние, кстати, доступны совершенно бесплатно в интерфейсе Яндекса.

karta klikov yandex

KISS на сайте просто необходим!

Под таким забавным названием скрывается едва ли не основной принцип UX- дизайна – «keep it simple, stupid!». Посадочная страница должна быть максимально проста, пользователь не должен думать – он должен в течение первых нескольких секунд на сайте уже понимать, что этот товар ему нужен. На лендинге детально прорабатывается только один путь – путь, который ведет к конверсии.
Для соблюдения принципа KISS вы должны ориентироваться на гармоничное соотношение цветов и шрифтов. Цветов на странице должно быть от трех до пяти. При этом, один из них будет основным, другой – вспомогательным, а 10% отведите на цветовой акцент.
Шрифты должны быть читабельны, лучше использовать два вида шрифта – один для текста, другой подойдет для оформления заголовков.
Добавляя новый элемент дизайна или навигации на посадочной странице, задайте себе вопрос о том, повлияет ли он на эффективность ресурса и принесет ли пользу? Только положительный ответ означает необходимость присутствия элемента в интерфейсе.