Страница 404

Доброго времени суток, дорогие читатели. Создавая блог на Blogger и вообще на бесплатной платформе о многих вещах вообще не нужно думать, некоторые вещи предусмотрены разработчиками платформы, некоторые просто недоступны в бесплатных платформах. Работая с WordPress я так же, как и в работе с Blogger, не задумывалась о странице 404, т.к. она по умолчанию предусмотрена этим движком, и всегда есть среди файлов любой темы.

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

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

План статьи будет такой:

1. Что такое страница 404.
2. Как создать страницу 404.
3. Как создать страницу 404 в phpBB.

Что такое страница 404

Мы знаем, что любой сайт находится на сервере хостера, когда пользователь набирает адрес вашего сайта в адресной строке браузера, браузер отправляет запрос серверу «показать страницу, которая содержит этот адрес», сервер, получая такой запрос, находит требуемую страницу и отвечает на запрос, передавая содержимое страницы браузеру (я упростила процесс передачи информации, выкинув из него несколько звеньев, т.к. суть сейчас не в этом). Передавая найденную страницу сервер дает ответ: «Да, такая страница существует». Но так словами объясняемся мы, люди, на языке машин любой ответ сервера называется «код состояния» и имеет числовое значение из 3 цифр, а данный ответ имеет числовое значение – 200. Т.е. каждая страница в интернете, которая разрешена для просмотра пользователями через браузер, существует на сервере и доступна в данный момент отдает код 200 OK.

Теперь представьте ситуацию, когда вы, как владелец ресурса удалили какую-то страницу, а посетитель пытается к ней обратиться.

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

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

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

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

Как создать страницу 404

Создание страницы можно разделить на 2 этапа.

1. «Физическое» создание 404 страницы.
2. Прописываем правило в файле .htaccess.

Физическое создание страницы 404

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

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

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

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

Правило в файле .htaccess

В корневой папке сайта должен быть служебный файл .htaccess, если его ещё нет (если вы только создаете свой сайт и он ещё не работает), то вы должны обязательно его создать, т.к. он обязательно вам потребуется и для других правил, в частности для указания, как поисковый робот должен индексировать ваш сайт с или без www. Я не буду подробно останавливаться на этом файле, это самостоятельная отдельная тема.

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

Соответственно, если вы создаете страницу с расширением .php, то правило должно быть таким:

Как видите, ничего сложно в этом нет.

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

Теперь о том, как создать страницу 404 в стиле форума phpBB.

Создание страницы 404 в phpBB

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

Я решила вас не томить, и сразу выложить готовые файлы, которые делала для себя. Вот ссылка на архив. В нем 2 файла.

Первый файл 404.php сохраняем в корневой папке форума.

Второй файл 404_body.html сначала правим под себя, прописываем заголовок страницы и текст сообщения на свое усмотрение, затем сохраняем в папке со стилем, который вы используете — от корня сайта styles/my_style/template/.

Далее открываем файл language/ru/common.php, не помню почему именно так, но после строки:

вставляем строчку:

Далее открываем файл .htaccess и вставляем строчку:

Т.к. на форуме я использую мод SEO Ultimate SEO URL (этот мод создает специальный .htaccess), правило у меня идет сразу после строки:

На этом страница 404 для форума phpBB готова. Можете ввести какую-нибудь абракадабру после имени домена, вас перекинет на 404 страницу.

Как оказалось на практике, все очень просто и быстро.

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

На этом все. Удачи.

amateurblogger.ru

Что такое ошибка 404, из-за чего она возникает?

404 Not Found — стандартный код ответа веб-сервера, если он не может найти запрашиваемую страницу на сайте. Перед посещением того или иного ресурса, браузер пользователя делает запрос серверу, а тот проверяет работоспособность документа и выдает соответствующий заголовок с информацией. Когда страница исправно функционирует, приходит невидимый читателю «200 ОК», в противном случае сервер отвечает кодом 404.

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

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

Пока давайте ознакомимся с причинами возникновения error 404 not found:

• ошибка в урле или битые ссылки;
• документ был удален с ресурса;
• неправильный редирект на страницу, которая сменила адрес;
• сервер работает некорректно.

Количество несуществующих HTML-страниц растет? Необходимо действовать безотлагательно!

Как должна выглядеть идеальная страница 404 Not Found?

По умолчанию страница 404 Not Found является для читателя бесполезной. В то время как достойное оформление сгладит негативное впечатление, станет своеобразным извинением. Кроме того, грамотно настроенная страница — подсказка и ориентир для дальнейших действий.

То есть 404 обязана решать следующие задачи:

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

В ваших силах сделать несуществующую страницу своим преимуществом. Например, онлайн-представительству фирмы можно добавить сюда контакты и месторасположение, а интернет-магазину — поисковую строку. Некоторые вебмастера превращают Error 404 Not Found в своеобразный лендинг, размещая информацию о распродажах и специальных предложениях.
С учетом специфики ресурса предложите посетителю перейти на главную страницу, воспользоваться поиском, ознакомиться с акциями или просто развлеките его.

А знаете ли вы? Существует легенда о том, что первый веб-сервер находился именно в комнате № 404. Однако на самом деле в здании CERN, о котором идет речь, помещения с таким номером не существовало. Что это — мистика или непродуманная, вымышленная история — решайте сами!

Конвертирующая страница «ошибка 404»

На SEO-форумах многие новички задают вопрос: «Что должно быть на странице 404, чтобы она приносила ресурсу пользу?» Ответ очевиден: все, что хочет узнать читатель. Для достижения подобного эффекта пригодятся следующие элементы:

• переход на главную страницу;
• кнопка сообщения о битой ссылке;
• список популярных материалов;
• форма поиска;
• ссылка на карту сайта.

Официальные рекомендации от Яндекс и Google

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

Гугл считает, что ошибка 404 обязана вписываться в общую концепцию сайта, иметь идентичный
стиль. Этот поисковик рекомендует предоставить посетителям возможность сообщать администратору о неработающих URL. Кроме того, следует исключить индексирование «не найдено» роботами.

Как создать страницу ошибки 404?

Если страница отдает 200 Ок, а должна отдавать 404 ошибку, то исправить эту проблему можно двумя способами:

Через .htaccess

Настройка error 404 not found делается в корневом файле сайта. Создайте страницу и поместите ее в новую папку, продублировав название в .htaccess.
Пропишите в документе строку:

ErrorDocument 404 /error404.html

где /error404.html указывает путь к неработающей странице относительно корневого каталога.
В результате таких манипуляций вместо «не найдено» браузер увидит извещение о том, что страница на сервере отсутствует.

С помощью html

Метатег Refresh дает возможность автоматически обновлять или перенаправлять пользователей на другую страницу (редирект) через конкретный временной промежуток.
Для этого надо вписать следующий HTML-фрагмент:

<meta http-equiv=»Refresh» content=»5;URL=not404.htm»>

Это лучшее решение при смене адреса — ошибка 404 будет перезагружена, после чего посетитель увидит страницу с другим урлом.

Основные ошибки, связанные с реализацией страницы 404 Not Found

1. Все страницы сайта имеют код ответа HTTP «200 ОК», даже те что не существуют.
2. Ошибка 404 есть только в некоторых разделах.
3. Слишком много страниц выдают Error 404 Not Found.
4. Используется первоначальное оформление с белым фоном и стандартными словами.
5. В документе нет ссылок на главную страницу или другие материалы.
6. Отсутствует сообщение о том, что это неработающая страница.
7. На дизайне 404 стоит 301 редирект с ответом сервера «200 ОК».

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

Как влияет ошибка 404 на пользователей и ранжирование?

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

Непродолжительное пребывание читателя на сайте или возврат в поисковую выдачу негативно сказывается на поведенческих факторах, которые в 2018 году серьезно влияют на ранжирование.

Роботы Гугла и Яндекса также не в восторге от большого количества страниц «не найдено». Они воспринимают это как сигнал о том, что сайт теряет в качестве и не соответствует требованиям посетителей. Следовательно, такой сайт необходимо понизить в результатах поиска.

Зачем вам потеря трафика и проседание позиций?!

Как находить и мониторить 404 ошибки?

Яндекс. Вебмастер

Зайдите в раздел «Индексирование», затем «Страницы в поиске» и «Исключенные страницы». Для выделения проблемных элементов дизайна данного типа используйте фильтр по статусу «Ошибка HTTP: 404».

Google Search Console

Сервис работает по тому же принципу. Если требуется проверка сайта на ошибки 404, перейдите в «Сканирование», после чего нажмите на «Ошибки сканирования», а затем на «Ошибка 404».

Специализированные сканеры

Изучить наличие ложных ссылок на несуществующие страницы можно при помощи платной программы Screaming Frog, а также бесплатных аналогом и Xenu’s Link Sleuth.

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

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

Отслеживание через сервис Яндекс Метрику

Чтобы видеть переходы по битым ссылкам, воспользуйтесь инструментом «Параметры визитов» в Яндекс. Метрике.

Для этого добавьте в код счетчика строку

params:window.yaParams||{ }});

а на странице ошибки 404 разместите:

var url = document.location.pathname + document.location.search
var url_referrer = document.referrer;
var yaParams =— {error404: {page: url, from: url_referrer}};

(url — это адрес неработающей страницы и url_referrer — откуда на него пришли).

Отслеживание через сервисы Google Analytics

Для настройки Google Analytics вставьте в error 404 not found такой код:

ga(’send’, ’pageview’, ’404.html?page=’+ document.location.pathname + document.location.search +’&from=’ + document.referrer);

(document.referrer в данном случае означает урл предыдущей страницы, а document.location.pathname + document.location.search — адрес ложной).

Узнать, сколько пользователей видели «не найдено» можно в разделе «Поведение», «Контент сайта», «Все страницы», настроив фильтр по названию отсутствующей страницы.

Виджеты в CMS

Например, на WordPress можно стандартным способом установить русифицированный плагин Broken Link Checker. После активации он выдаст битые урлы в подкатегории «Неправильные ссылки» (панель «Инструменты»). Расширение позволит редактировать, удалять ссылки и помечать их как правильные.

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

С помощью Яндекс Вебмастер

Перейдите на https://webmaster.yandex.ru/tools/server-response/, настройте параметры (урл, робота, дату) и нажмите «проверить».

Через сторонние информеры

Утилита https://httpstatus.io/ позволяет за один раз изучить до 100 ссылок. Благодаря удобству и быстрой работе в списке популярных сервисов числится также Bertal.ru и MainSpy.

Проверка плагинами

Для Chrome можно бесплатно установить расширение Redirect Path.

Как избежать появления 404 ошибок?

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

Во-вторых, при смене структуры URL и движка настройте постоянный постраничный редирект 301.

Как устранить 404 ошибки?

Пользователи попадают на 404 ошибки в основном из-за наличия «битых» ссылок на сайте. То есть чтобы избавиться от такого рода ошибок необходимо найти их источник.

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

Далее просто поправить код страницы, изменив битые ссылки на работающие.

В заключение

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

livepage.pro

Почему страница 404 появляется в индексе поисковых систем?

Бывает так, что страница 404 индексируется поисковыми системами, и в результатах поисковой выдачи пользователи могут видеть следующую картину:

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

В индекс поисковых систем 404 страницы попадают по следующим причинам:

1. Неправильные настройки сервера. Это происходит в том случае, если несуществующие страницы отдают код статуса HTTP 200. Согласно Википедии: «200 OK — успешный запрос. Если клиентом были запрошены какие-либо данные, то они находятся в заголовке и/или теле сообщения».
2. Также это может происходить из-за неправильной настройки CMS сайта.
3. Поисковик воспринимает 404 ошибку как «временно недоступен» или «временно удален». Например, товар был удален, но позже может вернуться.
   Чтобы гарантированно убрать несуществующую страницу из выдачи, следует применить код 410 Gone к несуществующей странице, которая будет восприниматься поисковой системой как «удалена навсегда».Рекомендую посмотреть видео с Мэттом Каттсом (руководителем Google Webspamteam), где он рассказывает о том, почему страницы с 404 ошибкой долго не исчезают из выдачи:
4. Глюк поисковой системы =). Происходит довольно редко, даже при правильно настроенном ответе сервера.

Чтобы проверить, присутствует ли ваша 404 страница в индексе, в поиске Google нужно ввести site:domain.com «часть текста, который находится на странице ошибки».

Если страницы в индексе нет, то вы увидите такой результат:

 

А если есть, то такой:

Как убрать страницу 404 из индекса поисковых систем

Александр Пантелеев рекомендует использовать следующий скрипт, который подойдет к любой CMS:

 

А как выглядит ошибка 404 на вашем сайте?

Правильная страница 404 ошибки поможет удержать посетителя. А вот какой должен быть текст на основных страницах сайта мы рассказали в статье: «Каким должен быть текст для интернет-магазина?».

freshit.net

AliExpress

• Автоматический редирект на главную страницу сайта через 4 секунды.

Amazon

• Предложение перейти на главную страницу.
• Есть ссылка на страницу «Собаки Amazon»:

Aviasales

• Предложение перейти на главную страницу.
• Ссылки на сервисы компании.

Blizzard

• Уместный сарказм.
• Возможности перейти во все разделы со страницы.

Coca-Cola

• Возможность перейти на главную страницу.
• Доступ к разделам компании со страницы (круглая красная кнопка в верхнем правом углу).
• Подписка на новости компании.

Convert Monster

• Креативное оформление – молодая красивая девушка с призывом в духе sex sells.
• Доступ ко всем разделам сайта из футера (его видно при прокрутке вниз).
• Изображение и призыв к действию меняется каждый раз при обновлении страницы 404:

Ebay

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

Evernote

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

Facebook

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

Тупичок Гоблина

• Графическое оформление в духе компьютерных игр конца 90-ых.
• Анимация на странице – в прорези двери справа появляются красные глаза.
• Доступ из страницы ко всем разделам сайта.

Студия Дениса Каплунова

• Оказывается адрес неверно введенной страницы.
• Оригинальный сопроводительный текст.
• Доступ из страницы к основным разделам сайта.

Лабиринт

• Ссылка на акции в теле страницы.
• Возможность воспользоваться поиском по сайту или выбрать книгу из каталога.

Студия Артемия Лебедева

• Оригинальный сопроводительный текст.
• Доступ к самым интересным разделам сайта студии.

Новолипецкий металлургический комбинат

• Возможность вернуться на предыдущую страницу или перейти на главную.
• Ссылка на географию активов завода и на его продукцию.

Ozon

• Оригинальный сопроводительный текст.
• Доступ к каталогу товаров.
• Возможность посмотреть все акции и спецпредложения «Озона».

Сотмаркет

• Нетривиально оформленные ссылки на разделы каталога электроники.
• Кликабельный логотип «Сотмаркет» для перехода на главную страницу сайта.

Texterra

• Описание причин проблемы.
• Ссылка на главную страницу сайта.
• Возможность поиска нужной страницы по сайту.

Банк «Тинькофф»

• Оригинальный текст со смайликом.
• Ссылки на основные услуги банка «Тинькофф».

Викиум

• Оригинальный текст.
• Возможность перейти на главную страницу, чтобы успокоить профессора или связаться с командой «Викиума».

Яндекс

• Возможность воспользоваться поиском 🙂
• Ссылки на сервисы «Яндекса».
• Ссылка на установку переключателя раскладки клавиатуры Punto Switcher.
• Рекламные объявления (!) на странице 404.

Университет «Синергия»

• Позитивная картинка со смыслом.
• Возможность воспользоваться поиском.
• В описании страницы предлагается способ решения проблемы.

Студия аниматоров «Кудесник»

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

Lego

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

«Кинопоиск»

• На странице показываются кадры из известных фильмов.
• В описании указывается, почему могла появиться такая страница. Способы решения оформлены гиперссылками.
• Каждый раз страница 404 генерирует новое изображение:

Творческая мастерская «Штуки»

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

Playboy Russia

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

«Единый визовый центр»

• Запоминающаяся картинка-мем с Grumpy Cat.
• В описании страницы способы решения проблемы выполнены гиперссылками.
• За присланный на почту скриншот страницы 404 обещают подарок.

Udemy

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

Pikabu

• Скажу просто – на этой странице прекрасно ВСЁ!
• Что за существо сидит рядом с парнем?

Pixar

• Более удачный образ, чем Печаль из мультика «Головоломка» для страницы 404 трудно представить.
• Заголовок страницы «Оооо… Не плачь». Трудно сдержаться, глядя на изображение.
• Описание страницы написано будто от лица Радости из того же мультфильма:

«Этот всего лишь ошибка 404!

То, что ты ищешь, могло затеряться в долгосрочной памяти».

Какой не должна быть страница 404

1. Мгновенный переход на главную страницу: в этом случае человек не поймет, что он ввел неверный адрес или перешел по неработающей ссылке, и может повторить неверный ввод.
2. Внешний вид страницы

• с нечитаемыми символами:

• со стандартной и малоинформативной надписью:

• дзен-вариант страницы 404 (такой, например, у Школы-студии МХАТ):

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

kak-sdelat-iz-stranitsy-404-chto-to-poleznoe-i-interesnoe-primery

texterra.ru

Как это работает?

Весь процесс происходит по протоколу передачи данных HTTP. Клиентское приложение формирует и отправляет запрос серверу. Сервер, в свою очередь, обрабатывает данный запрос и формирует ответ.

В нашем случае код ответа- 404. Ответ сервера выглядит следующим образом:

Причины 404 ошибки

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

1. Перейдет по неправильной ссылке, которая содержит синтаксическую ошибку или просто опечатку.
2. Попадет на страницу, которая в данный момент не существует. Это означает, что данные могли перенести или вовсе удалить. Также можно предположить, что данной страницы (а значит и ссылки) вообще не существовало.

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

Как сделать 404 страницу?

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

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

Как сделать страницу 404? Необходимо просто прописать в данный файл следующую инструкцию:

ErrorDocument 404 //semantica.in/404.php  

Всё довольно просто!

Страница 404 для сайта: общие рекомендации

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

В небольших проектах уменьшить вероятность возникновения 404 ошибки можно используя программу Xenu’s Link. С её помощью вы можете отыскать все битые ссылки на сайте и выполнить следующие действия:

• если ссылка страницы была изменена, необходимо изменить URL ссылки на новый;
• если страницы уже не существует — просто удаляем ссылку.

 

 

Оформление 404 страницы

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

Значительной доле пользователей всемирной паутины не достаточно предоставить страницу в таком виде — они просто не поймут что произошло, почему сайт вдруг исчез и переслал работать. Это означает только одно — потеря клиента. Но не будем опускать руки и рассмотрим эту ситуацию под другим углом. Как оформить страницу 404 и удержать гостя на сайте?

Текст для 404 страницы

1. Скажите “Нет!” технической информации!
2. Большинству пользователей знаком термин “404 ошибка”, но не стоит углубляться в причины её возникновения и давать дополнительные технические рекомендации. Донесите пользователю суть ошибки.
3. Предоставьте полезный контент!

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

Это можно реализовать разными методами:

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

В оформлении 404 страницы важно не переусердствовать — не стоит слишком нагружать ее контентом.

semantica.in

Иногда при переходе на сайт посетитель видит сообщение об ошибке со статусом 404. Этот статус означает, что на сайте отсутствует запрашиваемая страница, то есть запрошенному URL не соответствует ни одна страница сайта (404 File not found). Это может произойти из-за неверной ссылки или потому, что запрашиваемая страница была удалена.

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

Сообщение об ошибке и инструкции должны быть простыми, четкими и понятными, например: «Вы ищете страницу, которой не существует», «Вы ищете страницу, которая была удалена», «Вы набрали неправильный адрес страницы. Пожалуйста, перейдите на главную страницу сайта или воспользуйтесь формой поиска» и т. д.

Чтобы узнать, сколько пользователей попадают на страницу с ошибкой 404, поставьте на нее счетчик Яндекс.Метрики и воспользуйтесь отчетом Параметры визитов.

yandex.ru

404 NOT FOUND — что означает?

Определение: «404 ошибка сервера (not found) — самая распространенная ошибка при пользовании Интернетом, основная причина — ошибка в написании адреса Web-страницы. Сервер понял запрос, но не нашёл соответствующего ресурса по указанному URI.»

Для чего нужна 404 страница?

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

Проверить ответ это очень просто, наберите несуществующий адрес страницы тут — http://bertal.ru/.

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

Как настроить ответ сервера?

404 ошибка сервера через htaccess

Если Ваш сервер или CMS не настроены атоматически, то придётся это сделать Вам самим — добавьте в htaccess строчку:

Теперь, когда пользователь введёт неверный адрес, то он будет направлен на этот адрес. Страница может располагаться где угодно, но мы для примера поместили ее в корне сайта: /404.php.

404 ошибка сервера в PHP

Велосипеда изобретать не надо — существует специальная функция header, которая успешно поможет Вам это сделать.

Как должна выглядеть страница 404?

• В дизайне сайта (а не страница по умолчанию вашего хостинга)
• Содержать информацию о том, что произошла ошибка
• Иметь форму поиска по сайту
• Иметь небольшую карту сайта с основными разделами.

Креативные 404 страницы — вред или польза?

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

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

Яндекс.Метрика

Для этого удобно использовать «Параметры визитов».
В код счётчика необходимо добавить строчку: params:window.yaParams||{ }});

Таким образом, должно получиться как-то так:

На самой же странице 404 в любом месте необходимо разместить следующий JS-код:

Где url — текущий адрес страницы 404, а url_referrer — адрес, с которого на него попали. Таким образом, мы в Яндекс.Метрике сможем отлеживать не только все 404 страницы, но и адреса, по которым на неё перешли.

Отчёт в Метрике необходимо смотреть тут: все отчеты -> содержание -> параметры визитов.

Подробнее о параметрах визита в Яндекс.Метрике: http://help.yandex.ru/metrika/content/visit-params.xml

Google.Analytics

Для отслеживания ошибок используем «события». Добавляем JS-код в тело страницы:

Где hitType — тип события, eventCategory — категория, eventAction — адрес ошибки, url_referrer — откуда на 404 страницу попали.

Отчёт в Гугл.Аналитикс: Поведение -> События -> Обзор.

Подробнее о настройке событий в Аналитикс: https://support.google.com/analytics/answer/1033068?hl=ru

Как использовать полученные данные?

Если ошибки 404 внутри сайта — исправьте все ссылки на правильные или уберите вовсе. Если эти ссылки с внешних ресурсов? и Вам никак не повлиять на них, то поставьте 301 редирект на максимально релевантные страницы. Любите своих клиентов и не заставляйте их думать или что-то искать на Вашем сайте.

web-optimizator.com

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

Какие еще плюсы может принести такой подход к оформлению ошибок?
Вот перечень большинства из них:

• Обеспечивает позитивное настроение ваших пользователей
• Ваш сайт становится запоминающимся
• Если сделать навигационное меню – это сильно упростит поиск посетителям
• Шанс показать, на что вы способны
• Показывает посетителю, что вы заботитесь о нем
• Производит впечатление
• Дает возможность поделиться с друзьями

Мы подобрали варианты, когда разработчики сайта ответственно подошли к вопросу.

404-е ошибки отечественного производства

1. www.sombrero.su/404/
Буэнос диас! Очень креативный подход и превосходная реализация на сайте мексиканской кухни.

2. www.profflex.ru/404/
Для чего еще может пригодиться монтажная пена? Конечно, для оформления страницы ошибки.

3. www.designstudy.ru/404/
Очень тематичная иллюстрация – мазки кистей для школы дизайна. Однозначно заслуживает внимания.

4. http://habrahabr.ru/showme404/
Интерактивная солнечная система с юмором и навигацией по сайту. Хабр, как всегда, в своем стиле.

5. http://designfire.ru/404/
Такой страницы нет, как нет и её освещения – приходиться зажигать спичку. Отличный дизайн ошибки, для сайта «с огоньком».

6. http://cpeople.ru/404/
Минимализм выполненный в современном стиле. Еще одна страница в копилку интересных решений.

7. www.motocms.ru/404/
Красиво и со вкусом. Такие страницы вызывают только позитивные эмоции, несмотря на ошибку.

8. www.defa.ru/#404
Стильная страница с высокой содержательностью.

9. www.inclouds.ru/404/
Выполнено в лучших традициях современного дизайна, и что не менее важно, соблюдена общая стилистика сайта.

10. http://turbomilk.ru/404sdfwert
Просто и с юмором. Да и дизайнер поработал на пять с плюсом.

11. http://ifolderlinks.ru/404/
Креативно и остроумно. А также доходчиво и понятно.

404-е ошибки зарубежных сайтов

12. www.bluedaniel.com/404/
Это однозначно шедевр. Станция 404 выше всяких похвал.

13. www.dmcloud.net/404/
Приятная анимированная страничка, хоть и содержание ее дождливо и зябко.

14. www.ipolecat.com/404
Забрел в тупик. Очень символично для рассматриваемой нами темы.

15. http://tix02.be/en/404
Современный дизайн с элементами всеми любимого интрактива – просто прекрасно.

16. http://veerle.duoh.com/404
Красочно и необычно, как раз подходит для такого сайта. Отдельно хочу отметить исполнение навигации.

17. www.bluefountainmedia.com/404/
Вака-вака! Всеми известный PACMAN ждет вас на «ненайденной» странице.

18. http://magnt.com/404/
Элегантно и информативно. Хороший пример, как можно оформлять страницу 404.

19. http://www.titleist.com/404
Забавный вариант странички, с толпой людей ищущих мяч для гольфа.

20. http://trackmaven.com/404
Анимированная история о вырванной страничке книги. Завораживает и заставляет следить за летящими листами.

21. www.edukate.com/404
Похоже, вы сошли с курса… и одинокий корабль в ночи. Отличная задумка и ее реализация.

22. www.randco.com/404
Дизайнер постарался и на славу. Так и хочется осмотреть сайт.

23. www.fork-cms.com/404notfound
Страница канула в морскую пучину. Отличное дизайнерское решение.

24. www.fullscreen.com/404
Модное фото со стильным дизайном – можно использовать как залог успеха.

25. http://saltcitybuilds.com/404
Выполнено в лучших традициях современного дизайна, а еще не забыли анимировать навигацию.

26. http://us.blizzard.com/en-us/error.html
Создатели игр решили отличиться и поздравляют нас с поломкой сайта. Нескучно и круто.

27. http://huwshimi.com/404/
Еще одно отличное сочетание юмора и красоты исполнения. Ниндзя украл эту страницу!

28. http://molo.me/404
Забавная анимация и приятная картинка производят хорошее впечатление.

29. http://hotdot.pro/en/404/
Интерактивные завораживающие цифры не дают оторваться. Выглядит круто.

30. http://mailchimp.com/404/
Что-то есть в этой замороженной обезьяне окутанной льдом.

31. http://becherovka.com/error
Данная страница пропитана элитным алкоголем и обвораживает древностью. Очень элегантное исполнение.

32. http://hakim.se/404
Тебя не должно быть здесь. Оцените задумку – разбудите глаза.

Материал подготовил Юрков Кирилл

blog.qapl.ru