Зробити унікальну 404 сторінку. Як це працює

Чому обов'язково треба робити свою 404 сторінку?

Головна та єдина причина – це не втратити відвідувача. У кожного користувача, напевно, виникала така ситуація, коли натискаючи на посилання на якомусь сайті, браузер замість запитуваної сторінки показував свою дефолтну сторінку помилки. Помилка виникає в результаті неправильно введеного запиту або запитувана сторінка, видалена самим веб-майстром. У такому разі всі відвідувачі поводяться однаково – закривають сторінку та йдуть з вашого сайту.

Вистачить воду лити! Давай конкретику!

Створюємо два файли - 404.htmlі .htaccess(цей файл без імені, але з розширенням htaccess), який автоматично перенаправляє відвідувача на 404.html, у разі виникнення помилки. Щоб перенаправлення працювало, у цей файл треба прописати один єдиний рядок:

ErrorDocument 404 http://www.site.ru/404.html

Коли обидва файли будуть готові, залити їх на сервер у корінь домену.

Ми вже створили порожній файл 404.htmlі тепер будемо наповнювати HTMLкодом саму 404 сторінкуактивно застосовуючи HTML5і CSS3. Я вигадав свій спосіб, як зробити просту і красиву 404 сторінку.

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

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

Ефект напівпрозорості RGBA

Вибране зображення надто яскраве, треба його трохи затемнити, тоді текст буде більш читаним. Ефект напівпрозорого затемнення, можна отримати за допомогою RGBA, прописавши в стилях блоку наступний рядок коду:

Background: rgba (0, 0, 0, 0.7);

Перші три літери позначають – червоний, зелений, синій і вони дорівнюють нулю (тобто отримуємо чорний колір). А остання буква «а» – це альфа-канал, який відповідає за напівпрозорість елемента. У нашому випадку цифра 0.7 говорить про 70% затемнення. Шкала від повної прозорості до повної непрозорості знаходиться між нулем та одиницею (0...1).

Позиціювання елементів

Для правильної верстки мого приклад 404 сторінки, без розуміння як працює властивість position, буде важко. Подивившись на кінцевий результат 404 сторінки, нам треба зрозуміти структуру HTMLдокумента. Тут бачимо три шари, накладених друг на друга. нижній шар - сама картинка, середній у тезі

– напівпрозорий блок затемнення та верхній

- Текст. Наше завдання – задати потрібне позиціонування вмісту цих шарів.

Середній шар має абсолютне позиціонування, оскільки положення елемента (блок затемнення) задається щодо країв браузера з нульовими відступами.

Position: absolute;

Верхній текстовий шар позиціонуємо щодо елемента середнього шару.

Position: relative;

Код сторінки 404

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

Код сторінки 404

404

Сторінку не знайдено

Перейти на головну сторінку..

Якщо Ви плануєте займатися створенням сайтів на замовлення, то розібратися у всіх тонкощах верстки, використовуючи HTML5 та CSS3, Вам допоможе

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

Налаштування сторінки 404 WordPress має деякі нюанси, про які йтиметься у цій статті. То навіщо потрібно витрачати дорогоцінний час і окремо створювати сторінку помилки для свого сайту?

Які функції виконує сторінка 404 WordPress

Помилка 404 означає, що серверу не вдалося знайти необхідну сторінку за посиланням, яку вказав користувач. Існує кілька причин відсутності сторінки за вказаною адресою. Або таку сторінку ніхто ніколи не створював, здійснено перехід за битим посиланням, або ж її видалили. У всіх випадках система перенаправляє користувача на спеціально підготовлену сторінку помилки.

Приклад:

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

Стилізована під загальну тематику сайту сторінка утримує увагу користувача і може рекомендувати використовувати додаткові посилання, які можуть його зацікавити.

Як зробити сторінку 404 WordPress

Як зробити сторінку 404 WordPress за всіма правилами?

На сторінці помилки, яку користувачі залишають рідше, ніж дефолтну:

— Не має бути редиректа. Навіть якщо потрібної користувачевісторінки немає, пошуковим роботам необхідно бачити цю інформацію. Таким чином, помилкова сторінка не буде індексуватися.

— Як уже говорилося вище, сторінку помилки рекомендується оформляти відповідно до загальної тематики сайту.

— Попросіть своїх читачів у разі знаходження посилань, за якими неможливо потрапити на потрібні сторінки, повідомляти їх вам за вказаними координатами.

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

— Не варто вказувати на 404 сторінці занадто багато технічних моментів, краще оформити та пояснити ситуацію користувачам у простій та зрозумілій формі.

Отже, припустимо, ви вже працюєте в адмінці WordPress. Щоб створити сторінку помилки, перейдіть до панелі керування Зовнішній вигляд- Редактор.

Знайдіть у правому сайдбарі файл 404. phpта натисніть на нього для редагування.

Крок 1.

Сторінку 404 not found WordPress потрібно адаптувати до вашого російськомовного користувача. Тому всі повідомлення всередині коду можна замінити на свої. Лапки та інші елементи, присутні в коді, намагайтеся не пропустити і випадково не видалити.

Крок 2

Впроваджуємо форму пошуку.

Для цього в код сторінки просто потрібно вставити наступний елемент коду:

До речі, ви також можете вставити на сторінку помилки скрипти від Google або Яндекса. З їх допомогою користувач зможе зробити запит у пошукову системупрямо з вашої 404 сторінки.

Крок 3

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

Нові статті сайту

Розділисайту

Архіви

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

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

Приділіть до своїх користувачів належну увагу на сторінці помилки, будьте ввічливими та витриманими;
Не треба надто перевантажувати цю сторінку посиланнями;
Спробуйте підійти до створення сторінки помилки креативно та з гумором;
Запропонуйте тим, хто випадково потрапив на сторінку помилки, спробувати ще раз знайти потрібну їм інформацію і запропонуйте для утримання клієнтів, наприклад, посилання на свої продукти;
Однак намагайтеся, щоб якнайменше посилань з вашого сайту були битими або неправильними. По-перше, цим ви підвищите якість свого сайту, а по-друге, це позитивно позначиться на пошукової оптимізаціїта SEO.

Зверніть увагу на те, що деякі WordPress шаблониможуть не мати сторінки 404. Однак її все ж таки рекомендується створити, оскільки при помилці та активованому ЧПУ система WordPress звертається до файлу 404.php. У разі його відсутності, користувач потрапляє знову на головну сторінкусайту, що може зрештою його повністю заплутати.

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

Вітаю читачів та відвідувачів блогу! Сьогодні хочу зачепити одне з важливих питань для блогера, а саме - як змінити 404 сторінку. Поясню відразу що таке сторінка 404. Помилка 404 (сторінка 404) або Not Found("не знайдено") стандартний код відповіді HTTP. З цією помилкою напевно стикалися всі або багато хто вже точно. При переході на будь-яку сторінку, користувачі бачать, що сторінка не існує. Виною тому-«биті», «мертві» посилання, неправильне написання при ручному наборі та інші помилки. Веб-браузер запитує HTML-документ (веб-сторінку) і чекає на цифровий код відповіді.

У коді 404 перша цифра «4» вказує помилку клієнта, наприклад, помилку в URL. Наступні дві цифри визначають певну помилку. Для людського розуміння побаченого йде пояснення причини. Вся справа в тому, що багато блогерів використовують безкоштовні шаблони для своїх блогів та сайтів. Безкоштовні шаблони досить часто пишуться не зовсім коректно і багато авторів на 404 сторінці не приділяють уваги. В результаті коли відвідувач потрапляючи на блог бачить не зрозумілий йому англомовний текст, він просто йде. Щоб відвідувачі не лякалися і не йшли з Вашого блогу, достатньо змінити зовнішній вигляд сторінки.

Зробити це досить легко. Необхідно в редакторі підправити код сторінки, додати опис проблеми російською мовою, запропонувати залишитися на блозі і додати якусь веселу (наприклад, як на початку статті). На моєму блозі встановлено платний шаблон. Помінявши кілька безкоштовних тем, через проблеми з налаштуваннями, я вирішив зупинитися на платному варіанті. До речі, зовсім не дорогим. Не буду зараз перераховувати плюси та мінуси платних та безкоштовних шаблонів, скажу тільки, у цьому шаблоні сторінка 404 вже мала досить пристойний вигляд. Все ж таки я вирішив її трохи «оживити». Ось так сторінка виглядала до змін:

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

Як створити сторінку 404?

Для того, щоб відредагувати сторінку 404, достатньо внести зміни до файлу 404.php, який знаходиться в папці з темою Вашого блогу. Редагування файлу можна зробити прямо в адмін панелі Word Press Вашого блогу. Переходимо в адмінку, "Зовнішній вигляд" ===> підпункт "Редактор".

У правій частині екрана, у списку файлів вибираємо шаблон помилки 404 (404. php).

Відкриваємо файл. У моєму випадку він виглядає так:

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

Вставляємо картинку

Між рядками тексту, я вставив картинку, яку скачав і відредагував. Картинку необхідно завантажити на хостинг.