404 page: The Ultimate Guide (with 50+ Examples)

Smart Custom 404 error page [404page] — Плагин для WordPress

• Детали
• Отзывы
• Разработка

Поддержка

With 100,000+ active installations the 404page plugin is the most used plugin to create a customized 404 error page in WordPress.

Bringing visitors to your website takes time and effort. Every visitor is important. The default 404 error page of most themes do not provide any information on what to find on your site. A first tme visitor, who does not know you, is left in a dead end and leaves your website. Set up a helpful custom 404 error page to keep him on your site.

This handy plugin allows you to easily create your own 404 error page without any effort and it works with almost every theme.

Usage

Create your custom 404 error page just like any other page using the WordPress Page Editor. Then go to ‘Appearance’ -> ‘404 Error Page’ and select the created page as your custom 404 error page. That’s it!

Demo

See it in action (no registration needed)
kindly powered by TasteWP

Why use this plugin?

Different from other similar plugins the 404page plugin does not create redirects. That’s quite important because a correct code 404 is delivered which tells search engines that the page does not exist and has to be removed from the index.

Different from other similar plugins the 404page plugin does not create additional server requests.

Requirements

The only requirement for this plugin is that you change the Permalink Structure in ‘Settings’ -> ‘Permalinks’ to anything else but ‘Plain’. This also activates the WordPress 404 error handling.

Docs & Support

Plugin Manual

Support Forum

Videos

A brief Introduction to the free WordPress Plugin 404page

A quick Overview over the Advanced Settings

«Force 404 error after loading page» explained

«Disable URL Autocorrecton Guessing» explained

«Send HTTP Status Code 410 for trashed objects» explained

«Compatibility Mode» explained

Block & Shortcode

Block

The Plugin offers a block «URL causing 404 error» for the block-based editor to show the URL that caused the error. The block offers three display options:

• «Page» to show the page including path ( e.g. does/not/exist )
• «Domain Path» to show the URL without protocol and parameters ( e.g. example.com/does/not/exist )
• «Full» to show the complete URL ( e.g. https://example.com/does/not/exist?p=1 )

Shortcode

The Plugin offers a shortcode «pp_404_url» for the classic editor to show the URL that caused the error. There are three possible options:

• [pp_404_url page] to show the page including path ( e.g. does/not/exist )
• [pp_404_url domainpath] to show the URL without protocol and parameters ( e.g. example.com/does/not/exist )
• [pp_404_url] or [pp_404_url full] to show the complete URL ( e.g. https://example.com/does/not/exist?p=1 )

Do you like this plugin?

I spend some of my precious free time developing and maintaining my free WordPress plugins. You don’t need to make a donation. No money, no beer, no coffee. If you like this plugin then please do me a favor and give it a good rating. Thanks.

Plugin Privacy Information

• This plugin does not set cookies
• This plugin does not collect or store any data
• This plugin does not send any data to external servers

Peters’ Plugins Privacy Information Page

ClassicPress

This plugin is compatible with ClassicPress.

More plugins from Peter

Take a look at my other plugins

Compatibility

The 404page plugin was sucessfully tested by the author with the following themes

• Athena
• Customizr (Read more about Customizr Compatibility Mode)
• evolve
• GeneratePress
• Graphene
• Hemingway
• Hueman
• Responsive
• Spacious
• Sparkling
• Sydney
• Twenty Ten
• Twenty Eleven
• Twenty Twelve
• Twenty Thirteen
• Twenty Fourteen
• Twenty Fifteen
• Twenty Sixteen
• Twenty Seventeen
• Twenty Nineteen
• Twenty Twenty
• Vantage
• Virtue
• Zerif Lite

The 404page plugin was sucessfully tested by the author with the following starter themes

• Bones
• JointsWP
• undersores

The 404page plugin was sucessfully tested by the author with the following plugins

• bbPress
• BuddyPress
• DW Question & Answer
• hashtagger
• Page Builder by SiteOrigin
• Polylang
• User Submitted Posts
• WooCommerce
• WP Super Cache (Read more about WP Super Cache Compatibility)
• WPML WordPress Multilingual Plugin (officially approved by WPML team)

For developers

Action Hook

The plugin adds an action hook 404page_after_404 which you can use to add extra functionality. The exact position the action occurs after an 404 error is detected depends on the Operating Method. Your function must not generate any output. There are no parameters.

Constant

If the 404page plugin is installed and activated it defines the PHP constant PP_404. Check existence of it to detect the 404page plugin.

Functions

The Plugin provides the following functions:

• pp_404_is_active() to check if there is a custom 404 page selected and the selected page exists
• pp_404_get_page_id() to get the ID of the 404 page
• pp_404_get_all_page_ids() to get an array of page IDs in all languages
• pp_404_get_the_url( $type ) to get the URL that caused the 404 error
  • Parameter $type string Optional
  • «page» to get the page including path ( e.g. does/not/exist )
  • «domainpath» to get the URL without protocol and parameters ( e.g. example.com/does/not/exist )
  • «full» (default) to get the complete URL ( e.g. https://example. com/does/not/exist?p=1 )

Read more

Native Mode

If you are a theme developer you can add native support for the 404page plugin to your theme for full control. Read more.

• The themes default 404 error page
• Creating a custom 404 error page
• Select the created page as 404 error page
• The custom 404 error page in action
• The advanced plugin settings
• The block for the block-based editor
• The block options

Этот плагин предоставляет 1 блок.

• URL causing 404 error

Will it work with the theme I’m using?

This plugin is designed to work with as many themes as possible. It uses the WordPress Template System to detect and handle 404 errors. If your theme makes use of this Template System this plugin will work properly. If it does not the plugin offers a so called Compatibility Mode, which uses its completely own method to detect and handle 404 errors.

If this plugin does not work properly, try to activate Compatibility Mode.

Are 404 errors redirected?

No, there is no redirection! The chosen page is delivered as a ‘real’ 404 error page. This results in a HTTP 404 code and not in 301 or 302, which is important for Search Engines to tell them, that the page does not exist and should be deleted from the index.

Is it possible to add custom CSS to the 404 page?

The 404page plugin adds a CSS class error404 to the <body> tag which can be used for extra styling.

Where can I get help?

Please use the Support Forum.

Simple and the best 404 error page plugin, working perfectly.

Simple. Does what it claims. Use it!

fulfills what was promised

Very simple and easy

Great plugin, very easy to use, works fine.

I use this with all my generate blocks sites. It is a great plugin. Easy to set up and runs like a champ.

Посмотреть все 1 168 отзывов

«Smart Custom 404 error page [404page]» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

• Peter Raschendorfer

«Smart Custom 404 error page [404page]» переведён на 18 языков. Благодарим переводчиков за их работу.

Перевести «Smart Custom 404 error page [404page]» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

11.4.3 (2022-11-05)

• bugfix for WP 6.1

11.4.2 (2022-11-01)

• also add class error404 to body tag if page is called directly
• plugin renamed

11.4.1 (2022-10-16)

• bugfix: load Javascript for Block only when needed

11.

4.0 (2022-10-13)

• Block added
• Shortcode added
• Function pp_404_get_the_url() added

11.3.1 (2022-04-05)

• just cosmetics
• Plugin Foundation updated to PPF08

11.3.0 (2021-01-06)

• new option to always send an 410 instead of an 404
• Plugin Foundation updated to PPF07

11.2.6 (2020-08-23)

• Plugin Foundation updated to PPF06

11.2.5 (2020-08-22)

• minor UI adjustments

11.2.4 (2020-08-16)

• bug fix for Flamingo (see topic) plus potentially other plugins (thanks to garfiedo for supporting me to find the reason)

11.2.3 (2020-07-05)

• fix for Polylang (see topic)

11.2.2 (2020-03-28)

• changes to the notification for hopefully better compatibility
• Plugin Foundation swtiched to PPF04

11.2.1 (2020-01-04)

• if W3 Total Cache is installed and caching is active URLs that result in an 404 error are automatically excluded from caching

11.

2.0 (2020-01-01)

• if WP Super Cache is installed and caching is active URLs that result in an 404 error are automatically excluded from caching

11.1.4 (2019-12-29)

• urgent bug fix for PPF03

11.1.3 (2019-12-29)

• Plugin Foundation updated to PPF03, no functional changes

11.1.2 (2019-11-19)

• exclude 404 page from XML sitemap generated by Jetpack

11.1.1 (2019-11-16)

• from now on it is not only detected if Yoast SEO Plugin is active, but also if the sitemap feature is activated

11.1.0 (2019-11-10)

• now uses Plugin Foundation PPF02 for plugin compatibility
• introduces two new functions for developers pp_404_get_page_id() and pp_404_get_all_page_ids()

11.0.5 (2019-10-22)

• bugfix for Yoast SEO XML Sitemap (see topic)
• added a note to settings page if Yoast SEO is active

11.0.4 (2019-10-06)

• bugfix for WPML

11.

0.3 (2019-09-01)

• bugfix for REST API call (see here)

11.0.2 (2019-08-30)

• two bugs fixed (see here and here)

11.0.1 (2019-08-13)

• fix for PHP 7.1 — __construct() access level in subclass — this is an PHP error that was fixed in PHP 7.2, but I’ve changed my code to also work with PHP 7.1

11.0.0 (2019-08-13)

• mostly rewritten based on my own newly created Plugin Foundation

10.5 (2019-04-01)

• some more security improvements

10.4 (2019-03-31)

• security vulnerability in AJAX call fixed (thanks to Julio Potier for pointing me to this)

10.3 (2019-02-21)

• fix for compatibility with iThemes Sync (ticket)

10.2 (2019-02-19)

• just another small change to prevent from potential problems with version 10

10.1 (2019-02-14)

• error fixed (ticket)

10 (2019-02-14)

• workaround for WordPress Permalink bug #46000
• code improvement
• performance tuning

9 (2019-01-24)

• Gutenberg note added

8 (2019-01-11)

• fixed compatibility issue with latest WPML version
• code improvement
• UI improvements

7 (2018-07-16)

• corrected wrong image path
• added video links to admin page
• code improvements

6 (2018-06-18)

• exclude 404 page from XML sitemap generated by Yoast SEO
• further UI-improvements

5 (2018-03-05)

• show an indicator if the currently edited page is a 404 error page
• minor code- & UI-improvements

4 (2018-03-05)

• bugfix for bbPress (see topic)

3.

3 (2017-11-16)

• support for right-to-left-languages added
• faulty display in WP 4.9 fixed

3.2 (2017-10-05)

• new feature to send an HTTP 410 error for deleted objects

3.1 (2017-07-24)

• bugfix for Polylang (see topic)
• bugfix for CLI (see topic)
• add debug class to body tag
• also add body classes for Customizr theme
• do not add error404 class if already exists
• further redesign admin interface

3.0 (2017-07-05)

• new feature to force 404 error after loading page
• new feature to disable URL autocorrection guessing
• finally removed Polylang stuff disabled in 2.4
• redesigned admin interface
• code improvement

2.5 (2017-05-19)

• hide 404 page from search results on front end (if WPML is active, all languages are hidden)
• do not fire a 404 in Compatibility Mode if the DW Question & Answer plugin by DesignWall is active and a question has no answers

2.

4 (2017-03-08)

• ensure that all core files are loaded properly (see topic)
• Polylang plugin does no longer require Compatibility Mode (see topic)
• hide all translations if WPML is installed and «Hide 404 page» is active (thanks to the WPML guys for pointing me at this)
• post status fix (see topic)
• Enfold theme issue fix (thanks to the guys at Kriesi.at for supporting me)

2.3 (2016-11-21)

• a few minor bugfixes solve some problems with page templates in certain combinations

2.2 (2016-09-26)

• automatic switch to Compatibility Mode for several plugins removed
• enhanced support for WPML and Polylang
• remove the 404 page from search results (for all languages if WPML or Polylang is used)
• remove the 404 page from sitemap or other page lists (for all languages if WPML or Polylang is used)
• bugfix for author archives
• confusing admin message removed

2.

1 (2016-04-22)

• introduction of selectable Operating Methods
• several changes to Compatibility Mode for improved WPML and bbPress compatibility plus compatibility with Page Builder by SiteOrigin
• Polylang compatibility
• automatic switch to Compatibility Mode if WPML, bbPress, Polylang or Page Builder by SiteOrigin is detected
• completely new Customizr Compatibility Mode (automatically enabled if Customizr is detected)
• firing an 404 error in case of directly accessing the 404 error page can now be deactivated
• WP Super Cache support
• option to hide the 404 error page from the Pages list
• 404 error test
• plugin expandable by action
• delete all settings on uninstall

2.0 (2016-03-08)

• WPML compatibility
• bbPress compatibility
• Customizr compatibility
• directly accessing the 404 error page now throws an 404 error
• class error404 added to the classes that are assigned to the body HTML element
• the settings menu was moved from ‘Settings’ to ‘Appearance’
• translation files removed, using GlotPress exclusively
• Read more

1.

4 (2015-08-07)

• edit the 404 page directly from settings page
• Portuguese translation

1.3 (2015-01-12)

• technical improvement (rewritten as class)
• cosmetics

1.2 (2014-07-28)

• Spanish translation
• Serbo-Croatian translation

1.1 (2014-06-03)

• Multilingual support added
• German translation

1.0 (2013-09-30)

• Первый релиз

Мета

• Версия: 11.4.3
• Обновление: 9 месяцев назад
• Активных установок: 100 000+
• Версия WordPress: 4.0 или выше
• Совместим вплоть до: 6.1.3
• Версия PHP: 5.4 или выше
• Языки:

  Albanian, Chinese (China), Chinese (Taiwan), Danish, Dutch, English (Australia), English (Canada), English (New Zealand), English (US), French (France), Galician, German, Italian, Korean, Russian, Spanish (Colombia), Spanish (Ecuador), Spanish (Spain) и Spanish (Venezuela).

  Перевести на ваш язык

• Метки:

  404404 pageerrorerror pagepage

• Дополнительно

Оценки

Посмотреть все

• 5 звёзд 1 134
• 4 звезды 8
• 3 звезды 8
• 2 звезды 2
• 1 звезда 16

Войдите, чтобы оставить отзыв.

Участники

• Peter Raschendorfer

Поддержка

Решено проблем за последние 2 месяца:

0 из 3

Перейти в форум поддержки

404 примеров страниц, которые вы должны увидеть, прежде чем писать свои собственные.

Выводы

• Включите моменты удивления и восторга для посетителей вашего веб-сайта
• Направьте посетителей на другие страницы, которые могут им помочь
• Используйте интересный фирменный дизайн, чтобы развлечь посетителей

Какая разница, как выглядит моя страница 404?

Когда для посетителей вашего сайта появляется сообщение «Страница 404 не найдена», это признак того, что что-то пошло не так.

Это может быть простая опечатка в URL-адресе или конкретная страница, которую они ищут, удалена с сайта.

Несмотря на то, что они распространены и нужны каждому сайту, большинство примеров страниц с ошибкой 404 почему-то выглядят так.

Источник

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

Создав пользовательскую страницу 404, вы можете уменьшить разочарование посетителей.

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

Я подумал, что с их стороны было мило спросить, нашел ли я то, что искал, на приведенном выше примере страницы 404.

Очевидно, я не нашел то, что искал.

Источник

Будьте эмоциональны

Все мы в тот или иной момент переходили по неработающей ссылке.

Используйте свой опыт, чтобы вспомнить мысли и чувства, которые у вас были в то время, и почему вы так себя чувствовали.

Подумайте о (часто негативных) эмоциях, которые испытывает посетитель, когда сталкивается со страницей 404.

• Разочарование (Эта ссылка должна была вести на бесплатную загрузку, что звучит потрясающе. Теперь этой страницы больше нет?) Буквально на прошлой неделе читал, а теперь нигде не могу найти!)
• Нетерпение (Это моя третья попытка купить этот товар. Я уверен, что смогу найти его где-нибудь еще, чем тратить время на этом сайте. )

Что касается копирайтинга, заходите в образ мыслей вашего клиента.

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

На странице 404 с негативными эмоциями, которые испытывает посетитель, можно бороться с помощью следующих трех шагов:

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

Я покажу вам 404 примера страниц, в которых эти шаги, чтобы удовлетворить их бренд.

Дайте вашим посетителям направление

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

Если ваши посетители попадают на вашу страницу 404 и все, что они видят, это «Страница 404 не найдена», они будут искать ответ, который ищут, в другом месте.

Который может быть на другом сайте.

Вместо этого попробуйте дать им указания на странице, которые помогут им узнать, где искать ваш веб-сайт.

Для страницы 404 копихакеров предлагается простая кнопка с копией «Вернуться на главную».

Они также придают ему тонкий фирменный оттенок, добавляя преднамеренную опечатку, которую, как они знают, посетители заметят и сочтут ироничной.

(Можете заметить?)

Копихакеры

Когда посетители попадают на страницу 404 Airbnb, у них есть много вариантов.

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

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

Или это может дать им отличный контент для чтения во время просмотра вашего сайта.

Airbnb

Для страницы 404 HubSpot они добавили 3 различных варианта на выбор посетителя.

HubSpot знает, что основные причины, по которым люди посещают их веб-сайт, — это получение инструмента CRM (управление взаимоотношениями с клиентами), чтение их блога или прохождение курса в их академии.

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

HubSpot

Продемонстрируйте индивидуальность вашего бренда

Ваша страница 404 – идеальное место для демонстрации индивидуальности вашего бренда.

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

Включив текст в свой голос и добавив немного веселья, вы можете смягчить удар по неработающей ссылке.

И, что лучше всего, вы можете повторно привлекать посетителей и удерживать их на своем сайте.

В этом уроке Джоанна просматривает веб-сайт с заметным голосом бренда.

Она показывает, что быть причудливым — это нормально, потому что ваша аудитория будет следовать за вашим брендом, если они подходят ей.

Вы привлечете нужных клиентов и оттолкнете не тех, если будете чувствовать себя комфортно в своем голосе.

В следующих 404-страничных примерах копия полна голоса бренда.

Копия дает разочарованным посетителям возможность передохнуть, а затем вернуться к тому, что они искали, оставаясь на вашем сайте.

В этом примере от Джоэла из Business Casual Copywriting посетителю предлагается пройти безумную игру в стиле libs.

О вспышке зомби.

Хотя направления обратно на главную страницу нет, я уверен, что посетители будут рады заполнить эту историю.

И вернуться к тому, что они делали после того, как остановили апокалипсис.

Эта история также является очень умным способом показать писательские способности Джоэла и, казалось бы, безграничный творческий потенциал.

Деловой повседневный копирайтинг

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

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

И знаете что?

Помогает.

У меня перехватывает дыхание даже при поиске 404-страничных примеров.

Я уверен, что это будет желанным предложением для тех, кто случайно попал на эту страницу.

Headspace

Чтобы не отставать, Disney обыгрывает страницу 404 со ссылкой на соответствующий фильм.

Страница анимирована (как и следовало ожидать от Диснея), поэтому изображение не соответствует действительности.

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

Disney

Дизайн имеет значение

Как мы видели в первом примере с 404 страницами, простая белая страница с черным текстом не очень привлекательна.

В глаза или мозг.

Это отвлекает посетителя и заставляет его пропустить большую часть того, что вы говорите, потому что это чертовски скучно.

Некоторые 404 страницы такие.

Просто сообщаю вам фактическую информацию об ошибке и оставляю вас наедине с собой.

Как сделать страницу 404 более привлекательной?

Джоанна активно выступает за то, чтобы отличный текст имел отличный дизайн. Она говорит:

Вы всегда создаете среду, в которой ваш потенциальный клиент рассмотрит ваше предложение.

Джоанна Вибе, основатель Copyhackers

Это означает, что даже на странице 404 каждый посетитель является потенциальным клиентом.

То, что они увидят на этой странице, может изменить их мнение о вашем бренде, поэтому убедитесь, что это изменение идет вам на пользу.

Добавив забавное и фирменное изображение, вы создадите более интерактивный и позитивный опыт для своих посетителей.

Кроме того, неожиданный дизайн или текст доставят вашим посетителям тот момент удивления и восторга, о котором я упоминал ранее.

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

Источник

Удержание посетителей на вашем веб-сайте — основная цель страницы 404.

Страница 404 — это отличная возможность вернуть посетителя, который в противном случае мог бы уйти с вашего сайта.

Если посетители остаются на вашем сайте, это увеличивает шансы на конверсию, что всегда хорошо.

Возьмите этот пример с Amazon. Они не сделали ничего слишком вдохновляющего со своей копией, но всем нравится симпатичный коллега.

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

Картинки также меняются каждый раз, когда вы попадаете на страницу 404. Таким образом, вы можете продолжать освежаться в свое удовольствие, а затем возвращаться к покупкам.

Amazon

В этом 404-страничном примере Blizzard включает анимацию персонажа из World of Warcraft.

Если вы не играете в WoW, вы не обязательно получите его, но Blizzard знает свою аудиторию.

А знание своей аудитории — это то, что определенно может принести вам баллы на странице 404.

Включите изображение того, что знают или находят смешным только ваши идеальные клиенты.

Изображение снимает разочарование и дает вашим посетителям небольшой заряд дофамина, необходимый им, чтобы почувствовать, что вы действительно их знаете.

Это также увеличивает вероятность того, что они останутся на вашем сайте.

Blizzard

На странице 404 Slack изображена очаровательная лесная сцена, и ее можно перемещать, наведя курсор на каждую сторону экрана.

Единственное направление на этой странице — перейти в Справочный центр, но вы можете посмотреть, как поросенок и цыпленок идут на прогулку.

Тоже хорошо, правда?

Хотя на странице не так много полезной информации, она все же вызывает удивление и восторг, к которым должны стремиться большинство страниц с ошибкой 404.

Slack

Время взглянуть на вашу собственную страницу 404

Посмотрев несколько примеров страниц 404, я могу с уверенностью сказать, что ими часто пренебрегают.

Возможно, из-за недосмотра или из-за мысли, что ни один посетитель никогда не попадет на эти страницы.

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

Не тратьте это место!

Это ваша возможность перевернуть посетителей вашего веб-сайта, облегчить их разочарование и отправить их туда, где они могут легко найти то, что ищут.

Настраивая текст и дизайн страницы 404, вы даете посетителям повод оставаться с вашим брендом.

Потому что вы превратили их отрицательные эмоции в положительные.

Внутри школы копирования вы можете узнать о множестве способов добавить приятных моментов вашему опыту работы с клиентами и написать все это голосом вашего бренда (особенно с новым курсом Master of Brand Voice) .

Лучшая страница 404: 20+ примеров страниц в 2021 году

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

Сварите себе кофе: мы подготовили для вас подборку из 20 лучших 404 страниц.

Содержание

Переключатель

Что такое ошибка 404?

Иногда посетители сайта видят 404 страница ошибки потому что веб-страницы просто не существует (она была удалена или переименована), а иногда причиной ошибки является неработающая ссылка . Иногда пользователи вводят неверный адрес сайта. В любом случае никому не понравится безликий дизайн страницы или просто стандартное сообщение 404 .

Помните: креатив 404 дизайн может произвести сильное впечатление на посетителя, вызвать у него улыбку, развеселить его, заставить надолго запомнить ваш сайт и даже заставить посетителя поделиться ссылкой с друзьями!

AI Website Builder

1. Клаус: лучший компьютерщик 404 Страница ошибок

Посетите страницу: https://klaus. dk/404/ 

Вот пользовательский 404 , который понравится в первую очередь компьютерщикам, но и всем остальным пользователям он также покажется необычным и привлекательным.

Вы смотрите на интерфейс Commodore 64, домашнего компьютера с 64 КБ ОЗУ, выпущенного в августе 1982 года по цене 59 долларов.5! Ты, наверное, не помнишь, но у твоего отца, наверное, было.

И это не просто картинка, а анимация: курсор мигает в конце строки, и периодически добавляется новый текст, как будто его кто-то редактирует. Выглядит очень круто и свежо!

2. Хаким 404 Ошибка страницы

Посетите страницу: https://hakim.se/404

Когда мы открыли эту страницу, наша первая мысль была «Вы зашли не в тот район, м ******р!».

Как сказал этот шведский фронтенд-разработчик и дизайнер интерфейсов на своей странице «обо мне»: «Я люблю экспериментировать с графикой и интерактивностью». Молодец, Хаким Эль Хаттаб!

3. Студия HotDot: лучшая гипнотизирующая страница 404

Посетите страницу: http://hotdot.pro/ru/404/

Интерактивные увлекательные цифры не дадут вам расслабиться , гипнотизирующий вас и заставляю вас оставаться на этой странице навсегда :). Выглядит очень круто, можно даже сказать – красиво!

4. Бехеровка: лучшая креативная страница 404

Посетите страницу: https://becherovka.com/ru/error/404

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

5. Toggl 404 Страница ошибки

Посетите страницу: https://toggl.com/404

Здесь у нас есть 404 страницы с красивая анимированная 3D-сказка с 404 ошибка страница сюжет. Выглядит очень реалистично и увлекательно.

6. Weemss: самый трогательный пример на 404 страницах

Посетите страницу: https://weemss.com/page-not-found/

Это просто одно из самых удивительных 404-страничные идеи ! На странице написано: «Каждый раз, когда кто-то заходит на эту страницу, пони превращается в зомби», после чего вам предлагается зарегистрироваться или авторизоваться на сайте Weemss!

Этот маркетинг до сих пор такой трогательный, вы не поверите, но он до сих пор работает!

7. Slack: лучшая анимированная страница 404

Посетите страницу: https://slack.com/404

Ребята из Slack сделали все возможное, чтобы создать красиво анимированную страницу. Их креатив 404 Страница напоминает сказку с крошечными интерактивными элементами (можно «потрогать» кур и поросят).

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

8. Love Beets: лучшая страница 404, ориентированная на социальный маркетинг

Посетите страницу: http://www.lovebeets.com/404

Этот сайт принадлежит английской ферме, которая выращивает органические овощи для ваших салатов. Страница проста , но все же имеет интригу: взгляните на эти кнопки социальных сетей, замаскированные под свеклу на грядке (да, они анимированы) — довольно интересное маркетинговое решение!

9. Хитрости CSS: лучшая простая идея страницы 404

Посетите страницу: https://css-tricks. com/thispagedoesntexist

На сайте CSS-tricks сообщение об ошибке 404 оформлено в минималистичном тематическом стиле. Когда вы попадаете на эту страницу, вы видите белый фон и пробел, в котором виден код веб-страницы.

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

10. Limpfish 404 Страница ошибки

Посетите страницу: http://www.limpfish.com/404

На наш взгляд, это один из самых простых, но забавных 404 страницы . «Веб-страница отчаянно ищет HTML ее жизни. Желательно без ошибок и вредных привычек»! Ярко и креативно!

11. Оранжевое пальто: лучший креатив/ориентир 404 стр.

Посетите страницу: https://www. orangecoat.com/dear-happy-internet-traveler

На этом веб-сайте 404 страницы передового опыта. Здесь вам предлагается целая блок-схема действий, чтобы не заблудиться и найти то, что искали!

12. Hatched: лучшая интерактивная страница 404 , перед которым берем с нашей шляпы.

HatchedLondon решил сделать страница 404 оооочень длинная, но можно дойти до конца всего за одну секунду, нажав кнопку «Прыжок готов» — а можно чуть дольше падать вниз. Самая интересная часть находится внизу страницы, предлагая вам полезные меню, CTA и ссылки.

При этом страница хорошо вписывается в дизайн и выглядит интересно и здорово!

13. Deep Time 404 Страница ошибки

Посетите страницу:   http://deeptime.info/

Затерянная во времени винтажная страница 404 проекта интерактивной инфографики предлагает вам интересный способ исследовать историю Земли.

14. Kualo: лучшая интерактивная ретро-игра 404 страница

Посетите страницу: https://www. kualo.co.uk/404

Веб-хостинг отвечает всем требованиям 4 04 страница ошибки гостей с увлекательной игрой. «Космические захватчики» — это просто милое воспоминание из детства. Используйте стрелки для управления кораблем и пространство для стрельбы. это 9Страница 0269 custom 404 — идеальный способ провести день с большим удовольствием!

15. Imgur: лучший креатив 404 страница

Посетите страницу: https://imgur.com/tproger

Сайт популярного сервиса обмена фотографиями Imgur сделал 902 69 404 стр. в виде галерейной стены с портретами животных. Пока вы двигаете мышь, эти глаза животных следуют за курсором, что вызывает у вас странные, но забавные чувства. Жаль, что с вами готов разговаривать только жираф.

16. Figma: 404 стр.

Посетите страницу: https://www.figma.com/404/

Владельцы инструментов дизайна интерфейса отлично поработали, создав для себя идеальный дизайн ! Вы можете поиграть с узлами букв на 404-странице сообщения об ошибке . Лучше попробовать, чем рассказывать об этом!

17. Hugoware: лучшая интерактивная графика 404 страница

Посетите страницу: http://hugoware.net/tproger

Создатель вложил душу в создание красивой и анимированной страницы ошибки 404 , которая почти полностью написана на CSS (картинки, конечно, свинья). Он даже поделился исходным кодом! Когда вы входите на страницу, меню сворачивается и вращается в черной дыре, оставаясь кликабельным.

18. Lyft: лучший простой/анимированный Страница 404

 

Посетите страницу: https://www.lyft.com/404

У этой американской службы такси определенно есть одна из 404-страничных идей ! Это просто, но увлекательно: вы видите классную анимацию автомобиля, кружащего вокруг дерева, но в любой момент можете нажать на любую ссылку в меню и остановить это безумие!

19. Epic: лучший персонал 404 страница

Вот одна красивая страница ошибки 404 , сделанная как креативная версия страницы «О нас».

20. Веб-сайт Вадав

Посетите веб-сайт:  https://www.wadav.com/404.html

21. Weblium: лучшая простая идея 404 стр.

 

Посетите страницу:   https ://weblium.com/klf

Weblium имеет простую, но привлекательную страницу ошибки 404, показывающую, что НЛО крадет вашу страницу!

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

22. Chargebacks911: забавная и дружелюбная ошибка 404 страницы

Посетите страницу: https://chargebacks911.com/play-404/

О, эта страница 404 действительно удивительно! Эта страница похожа на онлайн-игру . Никто не устоит перед 5-минутным шутером. Респект, ребята из chargebacks911!

Что делает страницу с ошибкой 404 отличной?

Вы должны понимать, что страница ошибки 404 не является (и не должна быть!) бесполезной для вашего посетителя: многие владельцы сайтов думают, что ее почти никто не увидит, так зачем ее создавать или делать интересной? Но они ошибаются, и дизайн 404-й страницы часто недооценивают.

Существует два направления создания дизайна 404 страниц на выбор:

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

Чтобы сделать 404 безошибочным  пугающим и более увлекательным, вы можете сделать следующее:

• объяснить, что произошло;
• указать причины происшествия;
• скажите посетителю, что делать дальше.

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

Людям нравятся страницы 404 с легким юмором и непредсказуемостью. Главное — определить ожидания ваших посетителей и достичь поставленных маркетинговых целей. Весёлый 404 страницы должен иметь не только продуманный красивый дизайн, но и решение проблемы, с которой столкнулись посетители.

5 обязательных элементов успешной страницы с ошибкой 404

1. Ссылки на важные разделы сайта и мотивирующие призыв к действию . Добавьте кнопку «Вернуться на главную» и разместите несколько ссылок на самые популярные страницы сайта.
2. Добавить поисковую строку , чтобы посетитель мог быстро перейти в раздел, который он искал до возникновения ошибки.
3. Придерживайтесь фирменного стиля и дизайна . Навигация, логотип, цветовая схема и другие элементы веб-дизайна должны быть идентичными. Слишком большое отличие фирменного дизайна от настораживает и заставляет вашего посетителя думать, что он случайно перешел на другой ресурс.
4. Говорите ясно и дружелюбно. Если вы думаете, что каждый пользователь знает, что такое « 404 ошибка », вы ошибаетесь. Поэтому постарайтесь объяснить, в чем проблема, и по-дружески подскажите, что делать дальше.
5. Внесите немного творческого потока и юмора в создание ваших пользовательских 404 страниц! Креативные иллюстрации привлекают внимание, вызывают интерес и желание узнать больше, изучить сайт.
6. Здорово, если ваш 404 9Страница 0269 включает в себя и интерактивную анимацию , которую можно запускать с помощью курсора мыши — это может удерживать ваших посетителей на вашем сайте в течение длительного времени.

Резюме

Когда посетитель открывает стандартную страницу ошибки 404 , вполне вероятно, что он сразу покинет сайт и больше никогда не вернется. А совершенно другая, нестандартная, привлекательная и полезная 404 страницы может легко заставить посетителя остаться на вашем сайте и мотивировать его продолжать его изучение.