Головна » Блог » SEO | Органічне просування сайту » 101 приклад як оформити сторінку з помилкою 404

101 приклад як оформити сторінку з помилкою 404

18.06.2021

Олексій Бакуменко, автор блогу Webpromo


З помилкою 404 стикалися абсолютно всі, чий досвід серфінгу в інтернеті перевищує хоча б місяць. Які емоції відчуває користувач, зустрівши таку сторінку? Нерозуміння, розгубленість і злість. Він піде шукати вирішення своїх проблем на інші ресурси. Щоб цього не сталося, до створення та оформлення сторінки помилки 404 необхідно підійти з точки зору користувацького досвіду. Щоб надихнути вас на креативні ідеї, ми підготували 101 варіант дизайну сторінки 404.

Перш, ніж ми подивимося приклади оформлення сторінки з помилкою 404, з’ясуємо теорію.

Зміст:

Що таке помилка 404 та її вплив SEO

Помилка 404: зміст, причини, аудит сайту

Що повинно бути на сторінці 404

101 приклад, як оформити сторінку 404 стильно та зручно для користувача

Висновки

Що таке помилка 404 і її вплив на SEO



 

Що таке помилка 404 та її вплив на SEO

Помилка 404 означає, що сторінка не знайдена (Not Found). Добре це чи погано для SEO? Якщо розглядати в цілому, то це нормально. Google розглядає появу помилок 404 як природний процес роботи сайту. Ось, про що каже довідка:

Помилка 404, її вплив на SEO, суть, причини, аудит, що має бути на сторінці 404 і як оформити дизайн сторінки 404

Проте не все так однозначно. На практиці сайт дійсно може «просісти», якщо помилка 404 з’явилася на сторінці, яка приносить трафік на сайт.

У будь-якому випадку, найкращим рішенням з точки зору SEO буде розібратися, чому виникла помилка 404 Not Found. Виявлення причини підкаже правильний шлях до усунення помилки.

 

Помилка 404: зміст, причини, аудит сайту

Перейшовши за посиланням, або ввівши адресу сайту, користувач надсилає запит серверу. Сервер обробляє запит і відправляє користувача на прописану за посиланням сторінку. Якщо сторінки за запитом не існує ― сервер відповідає кодом 404.

Чому так відбувається:

  • Помилка в URL. Користувач неправильно ввів посилання або туди були внесені зміни на стороні сайту.
  • Сторінка переїхала або видалена. Це наслідок зміни структури сайту, технічних робіт або банально «факап» контент-менеджера.

Якщо з друкарськими помилками ви нічого вдіяти не зможете, то виправляти помилки, викликані переїздом і видаленням посилань, вам підсилу. Саме тому регулярно моніторте сайт на їх наявність. Існує безліч сервісів для аудиту:

  • Google вебмастер. Безкоштовний і простий у використанні інструмент. Аудит сайту доступний у звіті “Сканування”, вкладка “Помилки сканування”.
  • Seoto.me. Потужний сервіс, здатний проаналізувати навіть найбільші сайти. Але платний.
  • Serpstat.com. Serpstat.com. Інструмент відрізняється широким функціоналом. Крім битих посилань, показує якість оптимізації домену та графік глибини перевірки. Дозволяє проаналізувати сайти конкурентів. Всі платно.
  • Check My Links. Це безкоштовний плагін для Google Chrome. Його мінус у тому, що він працює посторінково, перевірити весь сайт відразу не можна.

Ольга Ільюхіна, SEO-спеціаліст Webpromo:

«Всі інструменти для перевірки сайту можна розділити на онлайн та офлайн, які в свою чергу діляться на масові іта посторінкові. Для масової перевірки сторінок можна використовувати Screaming Frog SEO Spider, Netpeak Spider, Xenu, а також такі сервіси, як Serpstat. У разі перевірки тільки однієї сторінки можна вибрати варіант, який вам підійде, серед букмарклетоваприклад, перевірка коду відповіді в bertal.ru), розширень для Chrome (Redirect path), плагінів для багатьох CMS і т.д.»

Однак, незалежно від докладених зусиль у бік скорочення кількості сторінок з помилками, необхідно ретельно підійти до оформлення сторінки 404 Not Found. Ми підготували ряд рекомендацій для розробки дизайну сторінки помилки 404 і 101 реальний приклад, який зможе вас надихнути.

Помилка 404, її вплив на SEO, суть, причини, аудит, що має бути на сторінці 404 і як оформити дизайн сторінки 404



 

Що повинно бути на сторінці 404

Помилка 404, її вплив на SEO, суть, причини, аудит, що має бути на сторінці 404 і як оформити дизайн сторінки 404

Що думає користувач, який побачив таку сторінку? Скоріш за все «Ой, що це? 404 не знайдено? Незрозуміло… Піду я на інші сайти». І буде правий. На наведеному вище скріншоті немає абсолютно ніякої корисної інформації, немає жодної спроби щось пояснити користувачеві, утримати його і допомогти йому.

Шаблон інформативної сторінки 404 залежить від специфіки сайту. Однак є декілька правил, обов’язкових для всіх:

  1. Дайте користувачеві зрозуміти, що він потрапив на той сайт, який шукав. Важливу роль в цьому відіграють хедер (шапка сайту) і футер (підвал сайту).
  2. Поясніть, чому користувач бачить на сторінці помилку, а не контент, за яким прийшов. Бажано, простими і зрозумілими словами.
  3. Додайте у видимій зоні контактні дані (телефони, e-mail і т.д.), щоб користувач знав, куди йому звертатися зі своїм запитом.
  4. Додайте кнопку повернення на головну сторінку, щоб користувач міг повторити свій сеанс і знову спробувати знайти те, що йому потрібно.
  5. Не варто налаштовувати 301 редирект на головну сторінку. Користувач не зрозуміє, чому він потрапив не туди, куди хотів. Можливо, він зробить кілька повторних спроб, але потім піде.
  6. Інтернет-магазинам корисно додавати на сторінку 404 пошуковий рядок, щоб користувач, зіткнувшись з помилкою, міг відразу знайти альтернативний товар. Якщо в URL прописані категорії додайте в шаблон посилання на схожі товари або тематичні статті.
  7. Пам’ятайте, що будь-яка помилка викликає негатив з боку користувача. Відволікайте його анімацією або міні-іграми. Це підвищить шанс, коли розчарований відвідувач затримається на сайті.
  8. А ще люди обожнюють скаржитися. Дайте їм таку можливість! Додайте рядок зворотного зв’язку з пропозицією повідомити вам про проблему. Це прояв турботи про користувача і додаткова можливість згладити негатив.

Порада! Якщо ваша сторінка з помилкою 404 Not Found буде не просто інформативною і корисною, але й візуально красивою ― користувач здобуде приємний досвід роботи взаємодії з сайтом і рівень його стресу істотно знизиться. 

Помилка 404, її вплив на SEO, суть, причини, аудит, що має бути на сторінці 404 і як оформити дизайн сторінки 404



 

101 приклад, як оформити сторінку 404 стильно та зручно для користувача

Нижче ми зібрали для вас 101 цікавий приклад оформлення сторінки 404. Ознайомившись з ними, ви зможете на практиці побачити принципи створення якісних шаблонів, почерпнути ідеї та наповнитися натхненням.

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

Інформативні сторінки 404

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

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

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

Оформлення сторінки 404 з креативом

Креативний дизайн сторінок з помилкою 404 — спосіб зняти стрес користувача від взаємодії з битою посиланням, зберегти його лояльність і перенаправити на актуальну сторінку. Інструментарій для креативного оформлення не обмежується візуалом. Ви можете використовувати ux-копірайтинг, кнопки CTA, гифки і навіть залучають інтерактивні елементи. На останні рекомендуємо звернути особливу увагу, оскільки ви зможете збільшити тривалість сеансу на сторінці з помилкою 404 і навіть отримати взаємодія з нею, незважаючи на відсутність контенту.

Красиво оформлені сторінки 404

І наостанок ми зібрали просто естетичні сторінки з помилкою 404, в оформленні яких сплелися і креатив, в яких сплелися креатив і інформативність.

 

Висновки

Наведені нами приклади оформлення сторінки 404 на різних сайтах лише підтверджують той факт, що вибір дизайну ― завжди індивідуальний. Аналізуючи добірку ви побачите, як на сайтах реалізовані:

  • карусель товарів;
  • кнопка “На Головну”;
  • кнопки категорій послуг;
  • рядок пошуку;
  • кнопка виклику онлайн-чату

Додатково до ключових елементів можна оформити сторінку помилки 404 Not Found абсолютно по-різному: використовувати гумористичні тексти, мікрокопірайтінг, анімації, фото, відео, графіку.

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

 

Також читайте інші статті у блозі Webpromo:

І підписуйтесь на наш Telegram-канал про маркетинг.

Последние материалы рубрики

Як розробити лендінг в сервісі SendPulse

Як розробити лендінг в сервісі SendPulse

Раніше ми розглянули анатомію лендінгу, етапи його підготовки. Для вибору посадкової сторінки вам не знадобляться знання коду або...

Spark Ads — новий нативний формат реклами для брендів в TikTok

Spark Ads забезпечує більш високі результати від проведення рекламних кампаній при мінімальному бюджеті. Новий нативний формат об'єднує...

Як створити і використовувати воронки продажів в маркетингу? Відстежуємо воронку за допомогою Google Analytics

Як створити і використовувати воронки продажів в...

Що таке воронка продажів, як створити і використовувати, для чого відстежувати ваші воронки в Google Analytics? Все, що ви хотіли дізнатися про...

Landing Page від А до Я Підготовка ефективного лендінгу: 8 кроків до високих продаж

Підготовка ефективного лендінгу: 8 кроків до високих...

Перед розробкою лендінгу потрібно продумати весь шлях потенційного клієнта. Як? Конвертувати ліди в клієнтів із залученням трафіку?...

Залишились питання?
Наші експерти готові відповісти на них

 

Зв’яжіться за вказаним нижче телефоном з нашим менеджером або скористайтеся послугою «Зателефонуйте мені». Ми зв’яжемося з вами найближчим часом.

Кожен в команді— майстер своєї справи
Ціную Webpromo за гнучкість
Команда Webpromo, як продовження нашого відділу маркетингу
Спокійний за просування своїх проєктів в інтернеті