Основи

«Помилка 404» – як оформити таку сторінку на своєму сайті

Код помилки «404» і напис «page not found», сервер повертає, в разі якщо користувач запитує адресу сторінки, якої на сайті не існує. Причин цьому може бути багато – адмін видалив її, такого URL взагалі ніколи не існувало, і тому подібне.

У будь-якому випадку, відповідь він отримає приблизно в такому вигляді:

standart server responcse

Виглядає не дуже, правда? Цілком логічною реакцією з боку користувача, буде просто закрити вкладку, і повернуться до пошуку. Ну а власник сайту, в свою чергу, отримає зростання показника відмов, погіршення поведінкових факторів та інші, не зовсім приємні «плюшки».

Уникнути цього можна, якщо створити власну, оригінальну сторінку 404, оформлену за всіма рекомендаціями фахівців. Вся справа в тому, що якісна сторінка 404 помилки відіграє роль не меншу, ніж якісний контент. Таким чином, ви можете утримати відвідувача, який випадково перейшов за неправильною адресою, і підштовхнути його до подальшої взаємодії з сайтом.

У разі, наприклад, з інтернет-магазином, це запобігає втраті прибутку, адже хто знає, може саме ця людина через декілька хвилин вирішить зробити велике замовлення!

Якщо на вашому сайті немає спеціального шаблону для 404-сторінки, цілком можливо ви вже задумалися над його створенням. Ось кілька прикладів того, як можуть виглядати красиві і креативні сторінки 404:

creative 404 page 1

creative 405 page 2

creative 404 page 3

creative page 4

В Інтернеті можна знайти сотні подібних прикладів, і використовувати їх як джерело натхнення, в процесі створення свого власного шаблону.

Як оформити сторінку 404?

Можна назвати декілька основних елементів, які вона повинна включати:

  • текст
  • зображення
  • заклик до дії (CTA-елемент).

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

mokap1

Тепер додаємо зображення. Це може бути як фірмовий логотип сайту, так і просто якась кумедна картинка. Візуальний елемент допоможе затримати увагу користувача, щоб він відразу ж не зробив перше, що прийде йому в голову – закрив вкладку браузера:

mokap2

Ну і фінальний штрих – пояснюємо, що ж саме сталося, і як жити далі. А також, додаємо CTA-елемент, в нашому випадку – кнопка переходу на головну сторінку, в каталог, і форму пошуку:

mokap3

Маркетинговий хід – вибачаємося, і даруємо промокод на знижку при покупці. Цілком ймовірно, що це дозволить не тільки повернути відвідувача, але ще і отримати клієнта:

mokap4

Макет можна накидати самостійно, але, відрисовку я все ж раджу замовляти у дизайнера, а не займатися народною творчістю.

Після того як верстальник зверстає її і видасть вам готову HTML-сторінку, потрібно завантажити її в папку з шаблоном свого сайту, а для того, щоб вона показувалася відвідувачам в разі необхідності, прописати новий шаблон у файлі .htacess. Для цього, відкрийте його в HTML-редакторі, наприклад, Notepad ++ і пропишіть там наступний рядок тексту:

mokap5

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

Сторінка «404» на WordPress

Для улюбленого мною і мільйонами інших користувачів двіжка, існує чимало інструментів, що дозволяють максимально просто і швидко вирішити завдання, для реалізації яких на інших CMS довелося б витратити чимало часу і працювати з кодом вручну. Так і в даному випадку – зробити призначену для користувача сторінку 404 для сайту на WordPress, можна за допомогою спеціального плагіна – «Custom 404 Pro».

"Custom 404 Pro WordPress plugin

Плагін дозволяє встановити будь-яку заздалегідь створену кастомную сторінку як шаблон 404-ї помилки, налаштувати її на свій розсуд, веде журнал показів даної сторінки і має цілий набір інших приємних опцій. Ну і до всього іншого, він ще й безкоштовний. Загалом, встановлюйте, і користуйтеся на здоров’я.

Таким чином, витративши небагато часу на роботу – адже все це потрібно зробити один раз – ви отримаєте можливість уникнути втрати трафіку з сайту, а у випадку з комерційним проектом, ще й прибутку.