Когда мы вводим на сайте неверный адрес или щелкаем по «мертвой» ссылке, он должен выдать стандартный код ответа HTTP – Not Found или «Ошибка 404». Отсюда хочется побыстрее уйти – и хорошо, если на главную сайта, а не обратно в поиск.
Хорошо оформленная с точки зрения дизайна и юзабилити страница 404 поможет пользователю понять, что делать дальше. Посмотрите, как эту задачу решили самые креативные компании.
eBay
«Человечная» надпись и такая же картина делают так, что не хочется убегать обратно в поиск
Гарантированно приведем клиентов
на ваш новый лендинг
Подробнее
Aviasales
Aviasales, по традиции, чуть поиграли словами – страницы нет, билеты есть
Blizzard
404-я у Blizzard анимированная: посмотрите, как симпатично выглядит
Coca-Cola
Coca-Cola тоже сыграла словами: «Здесь больше нет Coca-Cola» уместно смотрится рядом с пустыми бутылочками
Convert Monster
Content Monster меняет призыв и картинку каждый раз при обновлении страницы
Amazon
А у Amazon кликабельная собака – она отправляет нас на страницу «Собаки Amazon»
«Тупичок Гоблина»
Дизайн на сайте Дмитрия Юрьевича не обновляется годами (и смотрится по-своему стильно). Графическое оформление 404-й в стиле игр конца 90-х смотрится тут органично
«Лабиринт»
Еще одна ожидаемая игра слов: страница «Лабиринта» потерялась в лабиринте
OZON
OZON вернулся к минимализму
Что интересно – старая страница была немного креативнее (и как будто заимствовала идею eBay):
А это старая 404 страница на сайте OZON
Сотмаркет
Тот же тренд на минимализм – у «Сотмаркета»: только навигация, только хардкор
А вот как выглядела эта страница раньше:
Интереснее по задумке, но уже не так трендово (да, 404 тоже стоит обновлять в духе времени)
Студия Артемия Лебедева
Кстати, тайтл у страницы иронично спрашивает: «Потерялись?»
Банк «Тинькофф»
«Тинькофф» перешел от минимализма к ультраминимализму – смотрите следующее фото: это старая страница 404
Когда страницу освежали в плане дизайна, отсюда в числе прочих изменений ушел смайлик
«Яндекс»
Коротко и понятно – и тоже с навигацией
Университет «Синергия»
У «Синергии» как будто отсылка к фильму «Гравитация»
Студия Дениса Каплунова
Стильно и минималистично
LEGO
Выражение лица человечка демонстрирует панику. А вот надпись говорит, что все прекрасно
«Кинопоиск»
На «Кинопоиске» тоже есть элемент анимации
PlayboyRussia
404 страница PlayboyRussia
«Единый визовый центр»
Нетривиальный ход – для дочитавших подарок
Pikabu
Заморочились и отрисовали – узнаваемо и на века
Pixar
Более удачный образ, чем Печаль из мультика «Головоломка» для страницы 404 трудно представить
Какой не должна быть страница 404
- Мгновенный переход на главную страницу: в этом случае человек не поймет, что он ввел неверный адрес или перешел по неработающей ссылке, и может повторить неверный ввод.
- Внешний вид страницы
- с нечитаемыми символами:
- со стандартной и малоинформативной надписью:
- дзен-вариант страницы 404 (такой, например, у Школы-студии МХАТ):
Если вы решили сделать сайт, пусть у него будет первоклассной и страница с кодом ответа 404. Пользователи и поисковые системы будут вам благодарны.
В этой статье мы расскажем, почему стоит делать уникальную страницу 404 для сайта и как правильно её оформлять. Покажем удачные и неудачные примеры оформления таких страниц.
В конце статьи вас ждет бесплатный чек-лист и шаблон технического задания на дизайн страницы с 404-ой ошибкой.
Зачем оформлять страницу 404 Not Found?
Существует 2 основные причины появления 404-ой ошибки:
- неправильно введён адрес ссылки;
- страница была удалена.
Пытаясь попасть на несуществующую страницу, пользователь видит ошибку 404 Not Found. Стандартная страница с 404-ой ошибкой никак не связана с вашим сайтом. Именно поэтому большинство пользователей стараются как можно скорее закрыть ее.
Вот так оставлять нельзя:
Рисунок 1. Стандартная страница 404 Not Found
Правильно оформленная страница поможет удержать на сайте заблудившихся посетителей и тем самым улучшить показатели.
Приведем пример количества посещений страницы с 404-ой ошибкой на сайтах, с которыми мы работаем.
Сайт 1:
- 1 143 477 просмотров сайта за год;
- 42 114 просмотров страницы 404 за год (или 3,85%).
Приведем для сравнения такие цифры: у самого популярного раздела каталога 218 011 просмотров за год (19%), что всего в 5 раз превышает количество просмотров 404-ой страницы. А у раздела, который находится на 6 месте по количеству просмотров за год, эта цифра составляет 14 935 просмотров (или 1,3%), что в 3 раза меньше, чем у страницы 404.
Сайт 2:
- 64 625 просмотров сайта за год;
- 547 просмотров страницы 404 за год (или 0,84%).
Из 11 разделов на сайте целых 4 раздела имеют меньше просмотров, чем страница 404.
Только представьте, какое большое количество посетителей сайта попадает на страницу 404-ой ошибки, и в ваших силах удержать и заинтересовать их.
При желании вы можете проверить свой сайт на количество посещений страницы с 404-ой ошибкой через Яндекс.Метрику. Как это сделать, подробно описано в инструкции от Яндекса.
Как оформить страницу ошибки
Существует 5 вариантов:
1. Оставить стандартную страницу ошибки браузера. Но ведь мир и так довольно жесток 🙁
Рисунок 2. Мем
2. Сделать страницу креативной и интересной:
Gif 1. Страница 404 с анимацией с сайта https://rabota.gk-rte.ru/404
На странице 404-ой ошибки посетитель видит анимацию с отсчетом времени до столкновения. В итоге столкновение, конечно, не происходит, но пользователь может задержаться на странице из интереса, чтобы увидеть, чем все закончится. Это, в свою очередь, улучшает поведенческие факторы — увеличивается время на сайте и уменьшается показатель отказов.
3. Сделать страницу полезной для посетителя, помочь ему найти нужную информацию:
Рисунок 3. Страница 404 с полезным контентом с сайта https://drarthurkhristenko.ru/404
Попадая на несуществующую страницу на сайте пластического хирурга, посетитель видит основные услуги, которые оказывает доктор.
4. Совместить предыдущие 2 варианта:
Рисунок 4. Страница 404 с полезным контентом и креативом с сайта https://www.coca-cola.ru/404
Отличный пример совмещения креатива и полезной для посетителя информации на сайте Coca-cola.
Наша рекомендация: используйте именно такой вариант при оформлении страницы с 404-ой ошибкой.
5. Использовать промокод на скидку:
Рисунок 5. Страница 404 с промокодом с сайта https://www.planeta-sport.ru/404/
Хороший пример совмещения креатива и промокода на скидку в спортивном интернет-магазине. Это красивое “извинение” за то, что страницы не существует. В итоге вместо досады или раздражения у пользователя появится дополнительный стимул сделать у вас покупку.
Рисунок 6. Мем
Шапка и футер — оставляем?
Если пользователь знаком с вашим сайтом, то попав на страницу 404, внешне отличающуюся от самого сайта, он решит, что попал не по адресу, и уйдёт. Или перейдёт на главную, а резкая разница в цвете и общем оформлении доставит ему неприятные эмоции. Оба варианта — так себе.
Наша рекомендация: оставить шапку и футер при оформлении страницы с 404-ой ошибкой. Тем более так рекомендует Google:
“Страница 404 должна быть выполнена в том же стиле (включая элементы навигации), что и основной сайт.” — Google.
Создаем блок с ошибкой 404
Это этап креатива. Подумайте над интересным оформлением. Можно взять за основу сферу вашего бизнеса: какие услуги вы оказываете, что продаете.
Рисунок 7. Пример 404-ой страницы на сайте https://kolesa.kz/404/
Сайт по продаже автомобилей использует оригинальную фразу “Докатились” и тут же предлагает посмотреть объявления. Из минусов здесь можно отметить тёмный фон, так как на основном сайте он светлый.
Рисунок 8. Пример 404-ой страницы на сайте https://www.pixar.com/404
* Перевод: “Не плачь. Это всего лишь 404 ошибка. То, что ты ищешь, могло переместиться в долгосрочную память.”
Рисунок 9. Пример 404-ой страницы на сайте https://www.lego.com/ru-ru/404
Рисунок 10. Пример 404-ой страницы на сайте https://www.f1news.ru/404/
Если не получается придумать интересный дизайн, опираясь на деятельность вашего сайта, то рекомендуем использовать минимализм (да простят нас дизайнеры), как на примерах ниже.
Рисунок 11. Пример 404-ой страницы на сайте https://www.tinkoff.ru/404/
Рисунок 12. Пример 404-ой страницы на сайте https://www.aviasales.ru/404
Рисунок 13. Пример 404-ой страницы на сайте https://www.kinopoisk.ru/404/
Определившись с идеей оформления, не забывайте, что дизайн страницы с 404-ой ошибкой должен быть выполнен в общей стилистике самого сайта.
И не стоит делать этот блок слишком большим, выходя за пределы первого экрана. Вряд ли посетитель этой страницы захочет прокручивать экран вниз.
Текст для страницы с ошибкой 404
Пользователю должно быть понятно, что запрашиваемая страница недоступна. Наша задача — помочь ему быстро сориентироваться. На этом этапе составьте сообщение, которое не вызовет отторжения.
Примеры:
- Извините, такой страницы у нас нет. Мы поможем найти нужную информацию.
- Извините, такой страницы у нас нет. Но есть много другой полезной информации.
Элементы навигации
Google рекомендует разместить на странице 404-ой ошибки ссылки на самые популярные статьи или записи блога, а также на главную страницу.
Если ваш сайт предоставляет услуги или продаёт товары, то добавьте ссылку на каталог и основные услуги/товары.
Рисунок 14. Пример 404-ой страницы на сайте https://www.mann-ivanov-ferber.ru/404/
Если на вашем сайте есть блог, то добавьте ссылку на сам блог и на самые популярные статьи.
Рисунок 15. Пример 404-ой страницы на сайте https://www.nytimes.com/404
Например, The New York Times добавил на страницу 404-ой ошибки самые популярные статьи, которыми чаще всего делятся их читатели.
Возможность сообщить о неработающей ссылке
Дайте посетителю возможность пожаловаться на неработающую ссылку. Вы можете не отвечать на эти сообщения, но сделайте такой функционал.
Опишите в техническом задании для программистов, как должна работать эта кнопка. Добавьте ссылку на сайт, где есть та функция, которую вы хотите повторить.
Если это будет всплывающая форма заявки, то опишите дизайнеру, как она должна выглядеть.
Рисунок 16. Пример отработки кнопки “Сообщить о нерабочей ссылке” со страницы https://enjoyme.ru/404/
Основные рекомендации
Резюмируем основные рекомендации из данной статьи:
- Оформите страницу 404 в том же стиле, что и весь сайт. Это касается элементов навигации, шрифта, цвета.
- Подготовьте понятный и короткий текст, который не вызовет отторжения у пользователя. Ему должно быть ясно, что запрашиваемая страница недоступна.
- Добавьте креатив в оформление, чтобы удержать посетителя на сайте.
- Добавьте ссылки на главную страницу, основные категории и услуги, а также на самые популярные статьи или записи блога.
- Вся информация должна помещаться на первом экране. Нет смысла добавлять больше: вряд ли посетитель страницы 404 будет скроллить вниз.
- Дайте пользователю возможность сообщать о неработающих ссылках, даже если не собираетесь проверять эти сообщения.
Блок-схема
Как только вы определитесь с оформлением, нужно нарисовать блок-схему.
И не забудьте подробно описать в техническом задании, как должен выглядеть каждый элемент.
Если вы никогда не составляли блок-схемы или хотите получить больше информации об их составлении, то рекомендуем прочитать нашу статью “Как сделать ТЗ на дизайн сайта бесплатно самому: подробная инструкция”.
Рисунок 17. Пример составленной блок-схемы для 404 страницы Ant-team.ru
Итоги и бонусы
Страница 404 должна выполнять 2 действия: удерживать посетителя на сайте и давать ему самую популярную и полезную информацию, благодаря которой он будет дальше путешествовать по сайту и создавать трафик.
И чтобы процесс создания страницы с 404-ой ошибкой не принес вам лишней головной боли, предлагаем воспользоваться нашим чек-листом и шаблоном технического задания, где подробно описан каждый шаг (читайте красный текст):
- Чек-лист на дизайн для страницы 404
- Шаблон ТЗ на дизайн для страницы 404
А чтобы было ещё понятнее, можете воспользоваться примером заполнения шаблона ТЗ и нарисованной блок-схемой:
- Пример ТЗ на дизайн для страницы 404 Ant-Team
- Блок-схема 404 Ant-Team
Это настоящее техническое задание, которое мы заполняли для нашей страницы 404-ой ошибки.
Автор статьи: Кирилл Агафонов (Ant-team.ru)
P.s. Подписывайтесь на наш телеграм-канал t.me/seoantteam, чтобы первыми узнавать о выходе новых материалов.
При написании статьи использованы источники:
- https://developers.google.com/search/docs/advanced/crawling/soft-404-errors?hl=ru&visit_id=637885645086554669-667034082&rd=1#93641
- https://yandex.ru/support/metrica/stand-out/informative-page-404.html#informative-page-404
Htaccess переадресация 404 ошибка примеры
ErrorDocument 404 Редирект 404 htaccess или редирект на страницу 404, errordocument в файле htaccess сегодня полностью разберемся во всех возможных ситуациях, которые возникают с с использованием htaccess редирект 404
Всё о htaccess редирект 404 errordocument
- Что такое редирект htaccess 404
- Как настроить 404 ошибку в htaccess
- Как настроить 404 ошибку в htaccess -> единая точка входа
Еще смотри: tema=404
Что такое редирект htaccess 404
Редирект в файле htaccess создается для того, чтобы при возникновении ошибки 404 на вашем сайте происходила переадресация… туда, куда вы захотите!
Обычно делают переадресацию на собственный файл -> 404.html
Зачем нужен редирект на файл 404.html
Нам нужно, чтобы наш посетитель не ушел с нашего сайта! Поэтому после того, как он увидит страницу 404.html, ему можно сделать редирект на главную!
Конечно же… никаких таких правил в web-e не существует, что именно по такому алгоритму должна обрабатываться ошибка 404.
У вас есть выбор… оставить пользователя смотреть на не найденную страницу и предоставить выбор ему…
Либо переадресовать на существующую страницу!
Как настроить 404 ошибку в htaccess
Настраивать ничего не нужно! Просто нужно прописать правило редиректа и всё! Для того, чтобы прописать редирект при появлении ошибки 404Ю в файле htaccess прописываем редирект страницы на 404:
ErrorDocument 404 /404.html
Если вам требуется показывать какую-то другую страницу 404, которая находится в другом месте, то конструкцию нужно изменить таким образом:
ErrorDocument 404 /путь_до_файла/название_файла_.html
Как сделать редирект с 404 на главную htaccess
В файле htaccess, внутри правила ErrorDocument прописываем файл не 404.html? а адрес главной! И когда произойдет 404 ошибка то редирект произойдет на главную, если по домену открывается файл index.html:
ErrorDocument 404 /index.html
Как сделать редирект уже в файле 404.html
После того, как ваш редирект вна 404 сработает, то пользователя переместят на страницу 404.html. далее вы можете сделать простую переадресацию html уже на любую страницу!
Как настроить 404 ошибку в htaccess -> единая точка входа
Когда у вас единая точка входа, то те выше приведенные правила редиректов работать просто не будут, потому, что при любом случае, все запросы будут отправляться на какую-то страницу!
Как настроить 404 ошибку в htaccess если у вас единая точка входа!?
Когда я делал свой редирект на 404 единой точки входа, ничего внятного в интернетах по этому вопросу не было написано! Поэтому, я сам до этого дошел!
Если url из адресной строки пролетел мимо всех проверок, то создается переменная $no_page. В этом подпункте мы как раз касались немного, темы структуры единой точки входа — тема проверок, и в том числе там фигурирует эта переменная:
$no_page = 1;
В самом низу перед html тегами, делаем условие, существует ли переменная $no_page, если да то:
Отправляем заголовок 404 — поскольку поисковая система никак не сможет узнать, что данная страница не существует!
Далее просто инклудим 404.html страницу
Останавливаем скрипт!
if($no_page)
{
header(«HTTP/1.0 404 Not Found»);
include(‘404.html’);
exit;
}
Можете не благодарить, лучше помогите!
COMMENTS+
BBcode
Постараюсь не сильно вдаваться в подробности, что такое 404-ая страница, достаточно открыть гугл и по запросу «Как сделать 404 страницу» — Вы обнаружите огромное количество сайтов с подробным описанием, что это такое. Я просто хочу поделиться с читателем своим способом создания 404-ой страницы. И вот, что у нас должно получиться в итоге.
Почему обязательно надо делать свою 404-ую страницу?
Главная и единственная причина – это не потерять посетителя. У каждого пользователя наверняка возникала такая ситуация, когда нажимая на ссылки на каком-нибудь сайте, браузер вместо запрашиваемой страницы показывал свою дефолтную страницу ошибки. Ошибка возникает в результате неправильно введенного запроса или запрашиваемая страница, была удалена самим веб-мастером. В таком случае все посетители ведут себя одинаково – закрывают страницу и уходят с вашего сайта.
Хватит воду лить! Давай конкретику!
Создаем два файла – 404.html и .htaccess (этот файл без имени, но с расширением htaccess), который автоматически перенаправляет посетителя на 404.html, в случае возникновения ошибки. Чтобы перенаправление работало, в этот файл надо прописать одну единственную строку:
ErrorDocument 404 http://www.site.ru/404.html
Когда оба файла будут готовы, залить их на сервер в корень домена.
Мы уже создали пустой файл 404.html и теперь будем наполнять HTML кодом саму 404 страницу, активно применяя HTML5 и CSS3. Я придумал свой способ, как сделать простую и красивую 404 страницу.
Первым делом нужно подобрать большую и качественную картинку или фотографию размером не менее 1200×750 пикселей. Существует много сайтов со свободной лицензией, откуда можно скачать очень качественные фотографии. Я бесплатно скачал с популярного сайта pixabay.com это забавное изображение.
Я хочу расположить картинку как фон на все окно браузера и в центре браузера написать – 404 страница не найдена и поставить ссылку на главную. Разберем подробнее самые важные моменты.
Эффект полупрозрачности RGBA
Выбранное изображение слишком яркое, надо его слегка затемнить, тогда текст будет более читаемый. Эффект полупрозрачного затемнения, можно получить используя RGBA, прописав в стилях блока следующую строчку кода:
background: rgba (0, 0, 0, 0.7);
Первые три буквы обозначают – красный, зеленый, синий и они равны нулю (то есть получаем черный цвет). А последняя буква «а» – представляет собой альфа-канал, отвечающий за полупрозрачность элемента. В нашем случае цифра 0.7 – говорит о 70% затемнения. Шкала от полной прозрачности до полной непрозрачности находиться между нулем и единицей (0…1).
Позиционирование элементов
Для правильной верстки моего примера 404 страницы, без понимания как работает свойство position, будет трудно. Посмотрев на конечный результат 404 страницы, нам надо понять структуру HTML документа. Здесь мы видим три слоя, наложенных друг на друга. Нижний слой <body> – сама картинка, средний в теге <div> – полупрозрачный блок затемнения и верхний <div> – текст. Наша задача задать нужное позиционирование содержимого этих слоев.
У среднего слоя будет абсолютное позиционирование, поскольку положение элемента (блок затемнения) задается относительно краев браузера с нулевыми отступами.
position: absolute;
Верхний текстовый слой позиционируем относительно элемента среднего слоя.
position: relative;
Код страницы 404
Имея этот готовый код и меняя только само изображение, можно наделать себе массу разных «ошибочных» страниц.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Код страницы 404</title>
<style>
html { height: 100%; }
body {
background: url(your_image.jpg) no-repeat;
background-size: cover; /* Масштабирует картинку сохраняя пропорции */
}
.over {
background: rgba(0, 0, 0, 0.7); /* Цвет фона и значение прозрачности */
position: absolute; /* Абсолютное позиционирование */
left: 0; right: 0; top: 0; bottom: 0; /* Отступы от краев браузера */
}
.404 {
margin-top: 100px;
text-align: center; /* Выравнивание текста по центру */
font-size: 10em;
color: #fcf9f9;
position: relative; /* Относительное позиционирование */
z-index: 2; /* Порядок наложения элемента по высоте */
}
.notfound {
text-align: center;
color: #fff;
font-size: 2em;
position: relative; /* Относительное позиционирование */
z-index: 2; /* Порядок наложения элемента по слоям в глубину */
}
.notfound a {
color: #fff;
font-size: 0.8em;
}
.notfound a:hover {
color: yellow;
text-decoration: none;
}
</style>
</head>
<body>
<div class="over"></div>
<div class="404">404</div>
<div class="notfound">страница не найдена<br>
<a href="#"> перейти на главную страницу..</a>
</div>
</body>
</html>
Если Вы планируете заниматься созданием сайтов на заказ, то разобраться во всех тонкостях верстки, используя HTML5 и CSS3, Вам поможет мой видеокурс.
-
Создано 05.10.2017 01:11:33
-
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
Она выглядит вот так:
-
Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
Вступление
Страница ошибок, которую сервера HTTP обозначают, как 404 Not found, означает, что сервер работает исправно, однако по сделанному запросу ничего не найдено. Для сайта Joomla, это значит, что страницы, которую пользователь пытается открыть, не существует. Для CMS Joomla причин появления страниц 404 много. Основные причины редактирование статей, изменение SEO настроек сайта, перенос статей из одной категории в другую, удаление модулей и т.п.
На всех системных шаблонах Joomla, страница 404 уже создана. В принципе вся необходимая информация для пользователя на этой странице есть, но удручает ее внешний вид. Создадим свою уникальную страницу 404 на сайте Joomla.
Примечание: С течением времени, должен сделать добавление. Удручать должен не внешний вид старницы 404 Joomla сайта, а статус страницы ошибок, который возвращает HTTP сервис при её запросе. Правильно, если сервер отдает на ошибочном URL, код статуса HTTP — 404 Not Found, а не 303,302, и т.д. Обязательно! До и после создания страницы 404, проверьте, что отдает сервер на несуществующем URL. Удобно это сделать в Яндекс.Вебмастер на вкладке Инструменты. (дополение 20-03-2017).
4 простых шага создания страницы 404 Not found на Joomla
Алгоритм работ таков:
- Создать и оформить страницу 404;
- Создать пункт меню 404, опубликовать его, но скрыть от показа в меню;
- Поменять и отредактировать файл error.php рабочего шаблона;
- Проверить статус кода созданной страницы ошибок;
- Всё.
Создаем страницу 404 в менеджере материалов
На первом шаге, создадим страницу 404 в менеджере материалов сайта в рубрике «Uncategorized». Название может быть произвольное, но для удобства, назовем страницу «404». Оформление страницы 404 делаем «как душе угодно».
- Чтобы выделить страницу 404 из других страниц сайта, уберем с нее все информационные «обвесы»: показ категорий, автором, показов, дат публикации и т.д. Делаем это на странице добавления материалов, на вкладке: Отображение.
- Убираем со страницы все модули. Это делаем на странице Расширения→Менеджер модулей, на вкладке «Привязка модулей».
404 страницу незачем индексировать у поисковиков, поэтому на странице добавления материалов, закрываем 404 страницу тегами Noindex, Nofollow. Это делаем на вкладке: Создать материал — Публикация, пункт: Мета-тег Robots.
Сохраняем и публикуем страницу 404.
Создаем меню для страницы 404
Чтобы вывести страницу ошибок на сайт, нужно создать пункт меню с материалом «404». Для этого в любом меню сайта создаем пункт меню с понятным названием, например «404». Тип пункта меню выбираем, как «Материал», а материал выбираем созданную страницу «404».
Сохраняемся и копируем в поле «Ссылка», ссылку созданного пункта меню. Она нужна для дальнейшей прописки 404 страницы.
Ищем или создаем файл error.php
Системный файл ошибок Joomla лежит в каталоге: /templates/system. Копируем этот файл ошибок error.php, то копируем его и переносим (заменяем) из /templates/system в /templates/ваша-тема.
Проверяем «прописку» файла error.php в файле templateDetailis.xml. Если прописки нет, прописываем.
Редактируем файл error.php
В рабочем шаблоне ищем файл error.php или используем перенесенный файл error.php. Открываем это файл в текстовом редакторе и поиском ищем слово «404».
После строки:
defined('_JEXEC') or die;
добавляем, удаляя старое:
if (($this->error->getCode()) == '404')
{
header('Location: index.php?option=com_content&view=article&id=1');
exit;
}
, где после Location, вписываем скопированную ссылку пункта меню: «404».
было:
стало:
Сохраняемся и переносим отредактированный файл error.php в каталог рабочего шаблона, по FTPв режиме перезаписи.
Смотрим результат
Идем в панель сайта и в общих настройках «Система» чистим кэш. Теперь можно проверить отражение 404 страницы на сайте. Для этого в браузере после домена сайта, через слэш пишем любые буквы, жмем поиск и видим созданную 404 страницу. Если не видим свою страницу 404, чистим кэш браузера (ctrl+F5).
SEO Проверка страницы 404 на Joomla
Важно, чтобы на запрос созданной страницы ошибок 404, которая имеет бесконечное количество URL, сервер отдавал ответ 200 OK, а не 404 NotFound.
Проверить ответ сервера можно на своей странице Яндекс.Вебмастер, на вкладке Инструменты>>Проверка ответа сервера. Пишете свой домен, через слэш любой набор букв, жмете «Проверить». Ответ сервера должен быть 200 OK, Содержание страницы должно быть.
©Joomla3-x.ru
Другие статьи разделов: CMS Joomla и оптимизация
Фото: Depositphotos
При активном серфинге в интернете часто приходится сталкиваться с неработающими страницами или целыми сайтами. Обычно это происходит, когда вы переходите по ссылке из поисковой выдачи или с другого сайта. В этом случае появляется особая страница с кодом 404. Оформлена она может быть самым причудливым образом.
Однако какой бы забавной ни была страница 404 проблему это не решает. Тем не менее можно попытаться исправить ситуацию и добраться-таки до нужной информации.
Проверьте адрес
Первое, что стоит сделать — проверить адрес страницы. Если вы вводили его вручную, то там могут быть опечатки или лишние знаки. Если вы перешли по ссылке, то проблема может быть в ней самой. Так как сайты наполняют люди, они тоже могут ошибаться и ставить неработающие ссылки. В таком случае надо внимательно просмотреть адрес.
Скопируйте полный адрес ссылки: нажмите на ссылке правой кнопкой мыши и выберите «Копировать адрес ссылки». Вставьте его в любой текстовый редактор и внимательно просмотрите. Возможно, в ссылке присутствуют явно лишние знаки, пробелы или не в порядке что-то еще.
Попробуйте также поискать адрес страницы в поисковике. Возможно, поисковик выдаст правильную ссылку без ошибок.
Поиск по сайту
Кроме того, страница могла быть переименована, но редирект не настроен. В таком случае вас не перебросит на новый адрес. Угадать, что именно изменили в адресе страницы невозможно. Можно только предположить, что она до сих пор есть на сайте и имеет похожее название. Попробуйте поискать страницу по ключевым словам на самом сайте или через поисковик. Используйте оператор site.
Если на самом сайте нет поиска или он неудобный, то ищите через поисковую систему с оператором site
Можно также написать владельцам сайта, возможно, вам подскажут новый адрес или дадут необходимую информацию.
Попробуйте другой браузер
Маловероятно, но все же стоит попробовать другой браузер. Если в нем страница открывается, то значит проблема на вашей стороне. Попробуйте почистить кэш браузера.
Найдите сохраненную копию страницы
Если ничего не помогает, то можно попытаться найти сохраненную копию страницы. Сделать это можно через поисковик или через сайт web.archive.org.
Такого выпадающего меню может и не быть. Это значит, что копию поисковик не сохранил
Если вы переходили на страницу из поисковика, то вернитесь к поисковой выдаче и откройте кэшированную копию. Также копию можно открыть сразу при помощи оператора cache.
Оператор cache сразу выдаст последнюю сохраненную копию страницы
Сайт web.archive.org предлагает чуть больше функционала. Если страница была популярная, то вы сможете найти несколько ее копий, сохраненных в разное время.
В архиве хранится более 418 миллиардов страниц
Это тоже интересно:
Во время загрузки произошла ошибка.
..или страница которой нет!
Прежде чем создавать страницу ошибки 404 давайте сначала разберёмся что это вообще за ошибка такая..
Ошибка 404 или Not Found — не найдено.. это стандартный код ответа HTTP о том, что страницы, к которой обращается пользователь, нет на сервере.. попросту она не существует.
Возникать данная ошибка может в ряде случаев:
-
Ссылка, по которой пришёл пользователь, неверна.
-
Пользователь неправильно указал путь в адресной строке к одной из страниц Вашего сайта.
-
Ранее существовавшая страница Вами уже удалена или переименована, однако всё ещё существует в индексе поисковых систем или закладках пользователей.
Что увидит пользователь в результате этой ошибки?
В лучшем случае страницу с рекламой Вашего хостера и кратким объяснением что мол Вы «не туда попали».. в худшем это будет просто надпись: 404 Not Found — The requested URL /page.html was not found on this server — собственно «Запрашиваемый URL отсутствует на этом сервере».
Теперь представьте, что сделает пользователь когда увидит эту картину? Правильно!! закроет эту страницу и пойдёт искать интересующую его информацию в другом месте!! — в результате чего Вы потеряете целевого посетителя!
В этом уроке мы займёмся тем что создадим свою собственную пользовательскую страницу ошибки 404 — Которая в отличии от стандартных страниц ошибки будет иметь ряд несомненных преимуществ:
-
Данная страница будет содержать элементы дизайна Вашего сайта — тем самым даст понять посетителю что, несмотря на то что он попал не совсем туда куда хотел он всё таки попал именно на Ваш сайт!
-
Пользовательская страница 404, в отличие от стандартных, не будет «тупиковой», а на ней будут располагаться ссылки на основные страницы сайта.. — Что позволит посетителю двигаться дальше и тем самым удержит его на Вашем сайте.
-
Ну и в конце концов на такой странице можно дать вразумительные объяснения того по каким причинам пользователь оказался на ней.. предложить ему выход из сложившейся ситуации.. помочь найти на Вашем сайте интересующую его информацию.
Как видите сплошные плюсы..
Создаётся страница ошибки 404 точно так же как и любая другая страница на Вашем сайте.. никаких нюансов в коде странице нет..
Ну например создадим файл с именем 404.html
<html>
<head>
<title>Ошибка 404</title>
</head>
<body>
<img src=»graphics/404.gif» alt=»Ошибка 404″>
<p>К сожалению, запрашиваемая Вами страница не найдена..</p>
<p>Почему?</p>
<ol>
<li>Ссылка, по которой Вы пришли, неверна.
<li>Вы неправильно указали путь или название страницы.
<li>Страница была удалёна со времени Вашего последнего посещения.
</ol>
<p>Для продолжения работы с сайтом Вы можете воспользоваться формой поиска по сайту:</p>
<form>
<input type=»text» size=»30″>
<input type=»submit» value=»Поиск»>
</form>
<p>..или перейти на:</p>
<ul>
<li><a href=»#»>Главную страницу сайта.</a>
<li><a href=»#»>Карту сайта</a>
</ul>
</body>
</html>
На самом деле это просто страничка «скелет» конечно же Вам следует создать свою собственную, полноценную страницу ошибки 404.
Создали? а вот теперь поговорим о нюансах..
Для того что бы в случае возникновения ошибки с кодом 404 посетитель переходил на только что созданную нами страницу, необходимо создать системный файл .htaccess который будет содержать в себе директиву: ErrorDocument 404 — это директива указывает серверу о том куда следует перенаправлять пользователя в случае возникновения ошибки 404.
Что это за файл такой спросите Вы?
Файл .htaccess (я не опечатался, пишется с точкой в начале имени и не использует никакого расширения) – дает возможность конфигурировать работу сервера в отдельных его директориях..
На данный файл может быть возложен ряд специфических задач.. например: устанавливать права доступа к файлам в папке, менять названия индексных файлов, глобально перенаправлять посетителей на другой сайт, запретить доступ к сайту с определённого ip адреса… и еще много всяких иногда очень полезных вещей может делать этот чудо файл.. в том числе может самостоятельно обрабатывать ошибки сервера — что нам собственно и нужно!
Однако углубляться во все подробности и тонкости мы не будем, а поговорим лишь о том, что нас интересует на данный момент.
Итак, создаём файл под названием .htaccess который содержит в себе одну единственную строчку (если таковой файл уже имеется с какими ни будь другими инструкциями серверу, то просто дописываем в него эту строчку):
ErrorDocument 404 http://www.site.ru/404.html
И заливаем его на сервер в корневую папку сайта.
Ну только естественно сначала поменяйте в файле .htaccess ссылку http://www.site.ru/404.html на адрес Вашей собственной страницы которая должна будет открываться при возникновении ошибки 404.
Вот собственно и всё! теперь если Вы всё сделали правильно, при возникновении ошибки 404 будет загружаться Ваша «ошибочная» страница.
Сейчас огорчу тех кто располагает свой сайт на том или ином бесплатном хостинге.. Большинство бесплатных хостеров не дают доступа к файлу .htaccess так что создать страницу 404 на бесплатном хостинге вряд ли удастся.
P.S.Таким же способом с помощью файла .htaccess Вы можете обрабатывать и другие ошибки сервера:
- 401 ошибка(ErrorDocument 401 http://www.site.ru/page.html)- Требуется авторизация.
- 403 ошибка(ErrorDocument 403 http://www.site.ru/page.html)- Пользователь не прошел аутентификацию, доступ запрещен.
- 500 ошибка(ErrorDocument 500 http://www.site.ru/page.html)- Внутренняя ошибка сервера.
Если что-то непонятно или Вы в чем-то сомневаетесь, то за дополнительными разъяснениями обращайтесь на форум.
Сегодня хочу показать несколько примеров Страницы 404. О том, для чего данная страница нужна на блоге и как её сделать, я писала ранее. В этой статье покажу какие могут быть интересные и красивые страницы ошибки 404 и напишу их коды.
Устанавливать код будем в Настройки/Ошибки переадресации. Нажимаем — Персонализированное сообщение об ошибке 404. В открывшееся окошко вставляем код. И Сохраняем.
<main class=»bl_page404″>
<h1>ОШИБКА 404. СТРАНИЦА НЕ СУЩЕСТВУЕТ</h1>
<p>Извините! Страница, которую вы ищете, не может быть найдена. Возможно, запрошенная вами страница была перемещена или удалена. Также возможно, что вы сделали ошибку при вводе адреса. Перейдите на главную страницу.
</p>
<div class=»bl_page404__wrapper»>
<img src=»https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/cloud_warmcasino.png?raw=true» alt=»cloud_warmcasino.png»>
<div class=»bl_page404__el1″></div>
<div class=»bl_page404__el2″></div>
<div class=»bl_page404__el3″></div>
<a class=»bl_page404__link» href=»https://baryshnyam.blogspot.com/«>Главная</a>
</div>
</main>
<style>
h1 {
text-align: center;
margin-top: 1%;
margin-bottom: 25px;
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
}
p {
display: block;
margin: 25px auto;
max-width: 776px;
text-align: center;
color: #660000;
font-family: «Open Sans», sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.bl_page404__wrapper {
position: relative;
width: 100%;
margin: 10px auto 10px;
max-width: 440px;
min-height: 410px;
}
.bl_page404__img {
width: 100%;
}
.bl_page404__link {
display: block;
margin: 0 auto;
width: 260px;
height: 64px;
box-shadow: 0 5px 0 #9c1007, inset 0 0 18px rgba(253, 60, 0, 0.75);
background-color: #f95801;
color: #fff;
font-family: «Open Sans», sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 64px;
text-transform: uppercase;
text-decoration: none;
border-radius: 30px;
text-align: center;
}
.bl_page404__link:hover,
.bl_page404__link:focus {
background-color: #ff7400;
}
.bl_page404__el1 {
position: absolute;
top: 108px;
left: 102px;
opacity: 1;
animation: el1Move 800ms linear infinite;
width: 84px;
height: 106px;
background: url(«https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-1.png?raw=true»)
50% 50% no-repeat;
z-index: 2;
}
.bl_page404__el2 {
position: absolute;
top: 92px;
left: 136px;
opacity: 1;
animation: el2Move 800ms linear infinite;
width: 184px;
height: 106px;
background: url(«https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-2.png?raw=true»)
50% 50% no-repeat;
z-index: 2;
}
.bl_page404__el3 {
position: absolute;
top: 108px;
left: 180px;
opacity: 1;
animation: el3Move 800ms linear infinite;
width: 284px;
height: 106px;
background: url(«https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-3.png?raw=true»)
50% 50% no-repeat;
z-index: 2;
}
@keyframes el1Move {
0% {
top: 108px;
left: 102px;
opacity: 1;
}
100% {
top: -10px;
left: 22px;
opacity: 0;
}
}
@keyframes el2Move {
0% {
top: 92px;
left: 136px;
opacity: 1;
}
100% {
top: -10px;
left: 108px;
opacity: 0;
}
}
@keyframes el3Move {
0% {
top: 108px;
left: 180px;
opacity: 1;
}
100% {
top: 28px;
left: 276px;
opacity: 0;
}
}
</style>
Красным в коде выделила текст — меняете на свой.
Синим — ссылка на главную страницу сайта, или на ту, которую пожелаете установить. Так же меняете название кнопки Главная, если ссылка ведёт на другую страницу.
Так же можно менять шрифт, цвет текста, его размер.
Просмотреть в действии страницу можно в визуальном редакторе. Вставьте код и нажмите Показать результат.
<section class=»tv-error-404-tm» style=»background-image: url(http://home.cern/sites/home.web.cern.ch/files/image/computing_page/2013/01/tier_0_servers.jpeg); background-position:top center; background-size:cover; height:800px;»>
<div class=»tv-dark-background-tm»></div>
<div class=»container tv-error-content-tm»>
<div class=»col-md-12″>
<h1>Страница не найдена</h1>
<h3>Информация, которую вы ищете, не существует или изменилась.</h3>
<div class=»tv-error-links-tm»>
<a href=»https://baryshnyam.blogspot.com/» class=»btn»>Главная</a>
<a class=»btn» onclick=»window.history.go(-2);»>Вернуться</a>
</div>
</div>
</div>
</section>
<style>
.tv-error-404-tm {
background-color:#000;
max-height:100%;
min-height:100%;
position:relative;
padding:50px 0;
}
.tv-dark-background-tm {
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
top:0;
left:0;
}
.tv-error-content-tm {
position:relative;
top:100px;
color:#fff;
}
.tv-error-content-tm h1 {
font-size:102px;
text-align:center;
font-weight:400;
}
.tv-error-content-tm h3 {
font-size:32px;
font-weight:300;
text-align:center;
}
.tv-error-links-tm {
width:100%;
margin-top:20%;
text-align:center;
}
.tv-error-content-tm a {
color:#fff !important;
padding:5px 30px;
border:2px solid #fff;
font-size:22px;
margin-right:30px;
border-radius:5px;
}
.tv-error-content-tm a:hover,.tv-error-content-tm a:active,.tv-error-content-tm a:visited,.tv-error-content-tm a:focus {
color:#fff !important;
}
@media (max-width: 992px) {
.tv-error-content-tm h1 {
font-size:62px;
text-align:center;
font-weight:400;
}
.tv-error-content-tm h3 {
font-size:26px;
font-weight:300;
text-align:center;
}
.tv-error-content-tm a {
color:#fff !important;
padding:5px 30px;
border:2px solid #fff;
font-size:22px;
margin-right:30px;
border-radius:5px;
}
}
@media (max-width: 425px) {
.tv-error-content-tm h1 {
font-size: 49px;
text-align: center;
font-weight: 400;
}
.tv-error-content-tm h3 {
font-size:26px;
font-weight:300;
text-align:center;
}
.tv-error-content-tm a {
color: #fff !important;
padding: 5px 30px;
border: 2px solid #fff;
font-size: 19px;
margin-right: 10px;
border-radius: 5px;
}
}
@media (max-width: 375px) {
.tv-error-content-tm h1 {
font-size: 42px;
text-align: center;
font-weight: 400;
}
.tv-error-content-tm h3 {
font-size: 22px;
font-weight: 300;
text-align: center;
}
.tv-error-content-tm a {
color: #fff !important;
padding: 5px 30px;
border: 2px solid #fff;
font-size: 18px;
margin-right: 0;
border-radius: 5px;
}
}
@media (max-width: 320px) {
.tv-error-content-tm h1 {
font-size:34px;
text-align:center;
font-weight:400;
}
.tv-error-content-tm h3 {
font-size:18px;
font-weight:300;
text-align:center;
}
.tv-error-content-tm a {
color: #fff !important;
padding: 5px 30px;
border: 2px solid #fff;
font-size: 18px;
margin-right: 0;
border-radius: 5px;
}
}
</style>
Выделенное красным в коде — текст, меняем на свой.
Синим выделила ссылку на главную страницу блога, меняем на свою.
Смотрим работу кода в визуальном редакторе.
<svg version=»1.1″ id=»error-404-img» xmlns=»http://www.w3.org/2000/svg» xmlns:xlink=»http://www.w3.org/1999/xlink» x=»0px»
y=»0px» viewBox=»0 0 344.7 276.7″ style=»enable-background:new 0 0 344.7 276.7;» xml:space=»preserve»>
<style type=»text/css»>
.st0{fill:#4C423B;}
.st1{opacity:0.2;}
.st2{fill:#FFFFFF;}
.st3{fill:rgba(132, 121, 114, .4);}
.st4{fill:#424242;}
.st5{fill:#E0E0E0;}
.st6{fill:#BDBDBD;}
.st7{opacity:0.64;fill:#212121;}
.st8{fill:#F5F5F5;}
.st9{opacity:0.8;fill:#4C423B;}
</style>
<g id=»decorations»>
<polygon class=»st0″ points=»245,52.8 241.7,49.5 238.5,52.6 235.4,49.5 232.1,52.8 235.2,55.9 232.1,59.1 235.4,62.4 238.5,59.2
241.7,62.4 245,59.1 241.8,55.9 «/>
<polygon class=»st0» points=»42.7,172 39.4,168.7 36.2,171.8 33.1,168.7 29.8,172 32.9,175.1 29.8,178.3 33.1,181.6 36.2,178.4
39.4,181.6 42.7,178.3 39.5,175.1 «/>
<polygon class=»st0» points=»102.9,30.8 99.6,27.5 96.4,30.7 93.3,27.5 90,30.8 93.1,34 90,37.2 93.3,40.5 96.4,37.3 99.6,40.5
102.9,37.2 99.8,34 «/>
<polygon class=»st0» points=»311,196.3 307.7,192.9 304.5,196.1 301.4,192.9 298.1,196.3 301.2,199.4 298.1,202.6 301.4,205.9
304.5,202.7 307.7,205.9 311,202.6 307.9,199.4 «/>
<g>
<path class=»st0″ d=»M42.7,67.2c-2.7,0-4.8-2.2-4.8-4.8c0-2.7,2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8
C47.5,65.1,45.4,67.2,42.7,67.2z M42.7,59.6c-1.6,0-2.8,1.3-2.8,2.8s1.3,2.8,2.8,2.8s2.8-1.3,2.8-2.8S44.3,59.6,42.7,59.6z»/>
</g>
<g>
<path class=»st0″ d=»M183.1,23.3c-2.7,0-4.8-2.2-4.8-4.8s2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8S185.8,23.3,183.1,23.3z
M183.1,15.7c-1.6,0-2.8,1.3-2.8,2.8s1.3,2.8,2.8,2.8s2.8-1.3,2.8-2.8S184.7,15.7,183.1,15.7z»/>
</g>
<g>
<path class=»st0″ d=»M318.6,91c-2.7,0-4.8-2.2-4.8-4.8c0-2.7,2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8C323.5,88.9,321.3,91,318.6,91
z M318.6,83.4c-1.6,0-2.8,1.3-2.8,2.8s1.3,2.8,2.8,2.8s2.8-1.3,2.8-2.8S320.2,83.4,318.6,83.4z»/>
</g>
<g>
<path class=»st0″ d=»M257,170.8c-2.7,0-4.8-2.2-4.8-4.8c0-2.7,2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8
C261.8,168.7,259.6,170.8,257,170.8z M257,163.2c-1.6,0-2.8,1.3-2.8,2.8s1.3,2.8,2.8,2.8s2.8-1.3,2.8-2.8S258.5,163.2,257,163.2z»
/>
</g>
<g>
<path class=»st0″ d=»M90,232c-2.7,0-4.8-2.2-4.8-4.8c0-2.7,2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8C94.8,229.8,92.6,232,90,232z
M90,224.3c-1.6,0-2.8,1.3-2.8,2.8s1.3,2.8,2.8,2.8s2.8-1.3,2.8-2.8S91.5,224.3,90,224.3z»/>
</g>
<circle class=»st0″ cx=»98.9″ cy=»65.3″ r=»9″/>
<circle class=»st0″ cx=»103.3″ cy=»168.8″ r=»4.5″/>
<path class=»st0″ d=»M332.5,154.2c0,2.5-2,4.5-4.5,4.5s-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5S332.5,151.8,332.5,154.2z»/>
<path class=»st0″ d=»M17.3,96.3c0,2.5-2,4.5-4.5,4.5c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5C15.3,91.8,17.3,93.9,17.3,96.3z»/>
<path class=»st0″ d=»M243.1,96.3c0,2.5-2,4.5-4.5,4.5c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5C241,91.8,243.1,93.9,243.1,96.3z»/>
<circle class=»st0″ cx=»229.1″ cy=»222.3″ r=»6.8″/>
</g>
<g id=»_x34_-gauche»>
<g class=»st1″>
<path class=»st0″ d=»M60.6,168.4v-21.1H19.3v-16.8l47.4-60.8h12.9v60.7H92v17H79.5v21.1H60.6z M38.2,130.3h24.5v-32L38.2,130.3z»
/>
</g>
<g>
<path class=»st2″ d=»M58.6,166.4v-21.1H17.3v-16.8l47.4-60.8h12.9v60.7H90v17H77.5v21.1H58.6z M36.2,128.3h24.5v-32L36.2,128.3z»
/>
</g>
</g>
<path id=»ombre-loupe» class=»st3″ d=»M238.6,173l0.4-0.3c0.6-0.5,0.6-1.4,0.1-1.9l-7.6-8.3c7.8-9.8,12.7-22.1,13.3-35.6
c1.5-34.1-24.9-62.9-58.9-64.4c-34.1-1.5-62.9,24.9-64.4,58.9c-1.5,34.1,24.9,62.9,58.9,64.4c13.5,0.6,26.2-3.2,36.7-10.1l7.6,8.3
c0.5,0.6,1.4,0.6,1.9,0.1l0.4-0.3l56.2,61.4h21.4L238.6,173z»/>
<g id=»_x34_-droite»>
<g class=»st1″>
<path class=»st0″ d=»M281.3,168.4v-21.1H240v-16.8l47.4-60.8h12.9v60.7h12.4v17h-12.4v21.1H281.3z M259,130.3h24.5v-32L259,130.3z
«/>
</g>
<g>
<path class=»st2» d=»M279.3,166.4v-21.1H238v-16.8l47.4-60.8h12.9v60.7h12.4v17h-12.4v21.1H279.3z M257,128.3h24.5v-32L257,128.3z
«/>
</g>
</g>
<g id=»loupe»>
<path class=»st4″ d=»M311.4,252.6L219.8,161L208,172.8l91.6,91.6c3.4,3.4,9.1,3.2,12.2-0.5h0C314.6,260.5,314.4,255.6,311.4,252.6z
«/>
<path class=»st5″ d=»M199.5,167.1l11.1,11.1c0.6,0.6,1.5,0.6,2,0l12.5-12.5c0.6-0.6,0.6-1.5,0-2l-11.1-11.1L199.5,167.1z»/>
<polygon class=»st6» points=»215.8,154.2 217.2,155.7 205.4,173 200.2,167.8 «/>
<polygon class=»st7» points=»213,177.8 224.8,166 225.6,166.8 216.4,181.1 «/>
<path class=»st8″ d=»M164,51.9c-36,0-65.1,29.2-65.1,65.1s29.2,65.1,65.1,65.1s65.1-29.2,65.1-65.1S200,51.9,164,51.9z M164,168.7
c-28.5,0-51.7-23.1-51.7-51.7c0-28.5,23.1-51.7,51.7-51.7s51.7,23.1,51.7,51.7C215.7,145.5,192.5,168.7,164,168.7z»/>
<circle class=»st9″ cx=»164″ cy=»117″ r=»51.7″/>
<path class=»st2» d=»M129.7,82.7c-7.5,7.5-12,15.1-10,17c1.9,1.9,9.6-2.6,17-10c7.5-7.5,12-15.1,10-17
C144.8,70.7,137.2,75.2,129.7,82.7z»/>
</g>
</svg>
<style>
#error-404-img {
max-width: 700px;
display: block;
margin: 0 auto;
}
#loupe {
animation: bounceInUp 2s ease forwards;
}
#ombre-loupe {
animation: fadeIn 2s 3s ease forwards;
}
#_x34_-gauche, #_x34_-droite, #ombre-loupe, #decorations {
opacity: 0;
}
#_x34_-gauche, #_x34_-droite {
animation: fadeIn 2s ease forwards;
}
#_x34_-gauche {
animation-delay: 1s;
}
#_x34_-droite {
animation-delay: 2s;
}
#decorations {
transform-origin: center;
animation: fadeIn 2s ease forwards, rotate-grow 50s linear infinite alternate;
animation-delay: 4s;
}
@-webkit-keyframes rotate-grow {
from {
-webkit-transform: rotate(0) scale(.8);
transform: rotate(0) scale(.8);
}
to {
-webkit-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
}
}
@keyframes rotate-grow {
from {
-webkit-transform: rotate(0) scale(.8);
transform: rotate(0) scale(.8);
}
to {
-webkit-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
}
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
</style>