Перенесення сайту з HTTP на HTTPS: кому і навіщо це потрібно?

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

Якщо Ви до сих пір не перенесли сайт з HTTP на 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% відведіть на колірний акцент.
Шрифти повинні бути читабельні, краще використовувати два види шрифту – один для тексту, інший підійде для оформлення заголовків.
Додаючи новий елемент дизайну або навігації на посадковій сторінці, задайте собі питання про те, чи вплине він на ефективність ресурсу і чи принесе користь? Тільки позитивна відповідь означає необхідність присутності елемента в інтерфейсі.