101 приклад як оформити сторінку з помилкою 404
З помилкою 404 стикалися абсолютно всі, чий досвід серфінгу в інтернеті перевищує хоча б місяць. Які емоції відчуває користувач, коли на екрані з’являється сторінка 404? Нерозуміння, розгубленість і злість. Він піде шукати розвʼязання своїх проблем на інші ресурси. Щоб цього не сталося, до створення та оформлення сторінки помилки 404 необхідно підійти з точки зору користувацького досвіду. Ми підготували 101 варіант дизайну сторінки 404, здатні надихнути вас на креативні ідеї.
Але перш ніж ми подивимося приклади оформлення сторінки з помилкою 404, розберемося з теорією.
Зміст:
Що таке помилка 404 та її вплив SEO
Помилка 404: зміст, причини, аудит сайту
Що повинно бути на сторінці 404
101 приклад, як оформити сторінку 404 стильно та зручно для користувача
Що таке помилка 404 та її вплив на SEO
404 сторінка означає, що вона не знайдена (Not Found). Добре це чи погано для SEO? Якщо оцінювати загалом, то це нормально. Google розглядає появу помилок 404 як природний процес роботи сайту.
Але не все так однозначно. На практиці сайт дійсно може “просісти”, якщо помилка 404 з’явилася на сторінці, яка приносить трафік на сайт.
У будь-якому разі, найкращим рішенням з точки зору SEO буде розібратися, чому виникла помилка 404 Not Found. Виявлення причини підкаже найбільш вірний шлях усунення проблеми.
Помилка 404: зміст, причини, аудит сайту
Переходячи за посиланням або вводячи адресу сайту, користувач посилає запит серверу. Після обробки той відправляє користувача на прописану в посиланні сторінку. Якщо її не існує — сервер відповідає кодом 404.
Чому так відбувається:
- Помилка в URL. Користувач неправильно ввів посилання або в нього було внесено зміни на стороні сайту.
- Сторінка переїхала або видалена. Це наслідок зміни структури сайту, технічних робіт або банально “факап” контент-менеджера. Зрозуміле і ненудне оформлення сторінки 404 допоможе звести нанівець негативні наслідки технічного збою.
Якщо з помилками ви нічого вдіяти не зможете, то виправляти помилки, спричинені переїздом і видаленням посилань, у ваших силах. Тому регулярно моніторте сайт на їхню наявність.
Існує безліч сервісів для аудиту.
- Google вебмайстер. Безкоштовний і простий у використанні інструмент. Аудит сайту доступний у звіті “Сканування”, вкладка “Помилки сканування”.
- Seoto.me. Потужний сервіс, здатний проаналізувати навіть найбільші сайти. Але платний.
- Serpstat.com. Інструмент вирізняється широким функціоналом. Крім битих посилань, показує якість оптимізації домену і графік глибини перевірки. Дає змогу проаналізувати сайти конкурентів. Усе платно.
- Check My Links. Це безкоштовний плагін для Google Chrome. Його мінус у тому, що він працює посторінково, перевірити весь сайт відразу не можна.
Однак незалежно від докладених зусиль до скорочення кількості сторінок з помилками, необхідно ретельно підійти до оформлення сторінки 404 Not Found. Ми підготували низку рекомендацій для розробки дизайну сторінки помилки 404 і 101 реальний приклад, якими ви можете надихнутися.
Що повинно бути на сторінці 404
Що думає користувач, який побачив таке? Швидше за все “Ой, що це? 404 не знайдено? Незрозуміло… Піду-но я на інші сайти”. І матиме рацію. На наведеному вище скріншоті немає абсолютно ніякої корисної інформації, немає жодної спроби щось пояснити користувачеві, утримати його і допомогти йому. Як зробити сторінку 404 такою, щоб вона була здатна сподобатися гостю й одночасно відповідала на його потреби?
Шаблон інформативної сторінки 404 залежить від специфіки сайту. Однак є кілька правил, обов’язкових для всіх:
- Дайте користувачеві зрозуміти, що він потрапив на той сайт, який шукав. Важливу роль у цьому відіграють хедер (шапка сайту) і футер (підвал сайту).
- Поясніть, чому користувач бачить цю помилку, а не контент, за яким прийшов. Бажано, простими і зрозумілими словами.
- Розмістіть у видимій зоні контактні дані (телефони, e-mail тощо), щоб користувач знав, куди йому звертатися зі своїм запитом.
- Додайте кнопку повернення на головну сторінку, щоб користувач міг повторити свій сеанс і знову спробувати знайти те, що йому потрібно.
- Не варто налаштовувати 301 редирект на головну. Користувач не зрозуміє, чому він потрапив не туди, куди хотів. Можливо, він зробить кілька повторних спроб, але потім піде.
- Інтернет-магазинам корисно додавати на сторінку 404 пошуковий рядок, щоб користувач, зіткнувшись із помилкою, міг відразу знайти альтернативний товар. Якщо в URL прописані категорії, додайте в шаблон посилання на схожі товари або тематичні статті.
- Пам’ятайте, що будь-яка помилка викликає негатив з боку користувача. Відверніть його анімацією або мінііграми. Креативні 404 сторінки підвищують шанс, що розчарований відвідувач затримається на сайті.
- А ще люди обожнюють скаржитися. Дайте їм таку можливість! Додайте рядок зворотного зв’язку з пропозицією повідомити вам про проблему. Це прояв турботи про користувача і додаткова можливість згладити негатив.
Порада! Якщо ваша сторінка з помилкою 404 Not Found буде не просто інформативною та корисною, а й візуально гарною — користувач отримає приємний досвід взаємодії з сайтом і рівень його стресу істотно знизиться.
101 приклад, як оформити сторінку 404 стильно та зручно для користувача
Нижче ми зібрали для вас 101 цікавий приклад для сторінки 404. Ознайомившись із ними, ви зможете на практиці побачити принципи створення якісних шаблонів, почерпнути ідеї та сповнитися натхнення.
Це цікаво: у мережі існує рейтинговий сайт, присвячений дизайну сторінки 404. Там ви знайдете не один десяток актуальних прикладів, як оформити сторінку з помилкою 404 на сайті.
Інформативні сторінки 404
Почнемо зі сторінок з помилкою 404, які містять максимальну кількість корисної інформації для користувача. Вони пояснюють, чому посилання більше не працює і які дії варто зробити відвідувачеві сайту, щоб задовольнити свій запит.
Як бачите, зовнішній вигляд при цьому відіграє другорядну роль. Залежно від загальної концепції сайту, підійде як сторінка 404 шаблон якої виконаний у мінімалізмі, так і корисна інформація, доповнена креативним дизайном.
Посилання на соціальні мережі, переходи на функціональні сторінки сайту, інформативна шапка і приємний дизайн — все це допоможе утримувати користувачів.
Оформлення сторінки 404 з креативом
Креативний дизайн сторінок з помилкою 404 — спосіб зняти стрес користувача від взаємодії з битим посиланням, зберегти його лояльність і перенаправити на актуальну сторінку. Інструментарій для креативного оформлення не обмежується візуалом. Доречно використовувати ux-копірайтинг, кнопки CTA, гіфки і навіть інтерактивні елементи, що залучають. На останні рекомендуємо звернути особливу увагу, оскільки ви зможете збільшити тривалість сеансу на сторінці з помилкою 404 і навіть забезпечити взаємодію з нею, всупереч відсутності контенту. Прикольні сторінки 404 репостять, скріншотять, надсилають знайомим, тому замість негативу та відтоку користувачів є шанс отримати рекламний ефект.
Красиво оформлені сторінки 404
І наостанок ми зібрали просто естетичні сторінки з помилкою 404, в оформленні яких сплелися і креатив, і інформативність. Створення сторінки 404 — важливий етап технічної роботи над сайтом, який багато хто не бере до уваги і абсолютно даремно.
Висновки
Наведені нами приклади оформлення сторінки 404 на різних сайтах лише підтверджують той факт, що вибір дизайну — завжди індивідуальний. Аналізуючи добірку, ви побачите, як на сайтах реалізовано:
- карусель товарів;
- кнопка «На Головну»;
- кнопки категорій послуг;
- рядок пошуку;
- кнопка виклику онлайн-чату.
На додаток до ключових елементів можна оформляти сторінку помилки 404 Not Found абсолютно по-різному: використовувати гумористичні тексти, мікрокопірайтинг, анімації, фото, відео, графіку.
Головне, дотримуватися загальних рекомендацій і не забувати про креативну складову в рамках вашої комунікації з користувачами, щоб знизити відтік трафіку. Якщо ваш сайт комерційної спрямованості, зрештою все це призведе до продажу ваших товарів і послуг.
Також читайте інші статті у блозі Webpromo:
- Офлайн-конверсії Facebook Ads і Google Ads. Як підвищити якість лідів?;
- Що таке SEO-тексти і як їх правильно писати? Навчіться, щоб опинитися в Топі Google;
- Performance Marketing в діджитал – тренди 2021, які потрібно запровадити;
І підписуйтесь на наш Telegram-канал про маркетинг.
