Кастомная 404-страница в SEO

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

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

Сделаем простую кастомную 404-страницу:

<!DOCTYPE html>
<html>
	<head>
		<title>Page not found</title>
	</head>
	<body>
		<h1>404. Page not found</h1>
		<p>
			The page you are looking for
			does not exist.
		</p>
		<a href="/">Go to home page</a>
	</body>
</html>

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

Что должно быть на странице

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

Добавим навигацию и форму поиска по сайту:

<main>
	<h1>404. Page not found</h1>
	<p>
		The page you are looking for
		does not exist or has been moved.
	</p>
	<form action="/search" method="get">
		<input type="text" name="q" placeholder="Search">
		<button type="submit">Find</button>
	</form>
	<nav>
		<a href="/">Home</a>
		<a href="/catalog/">Catalog</a>
		<a href="/contacts/">Contacts</a>
	</nav>
</main>

Форма поиска отправляет запрос на /search с параметром q. Если у сайта есть внутренний поиск, пользователь быстро найдет нужную страницу.

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

Еще можно показать похожие или популярные материалы. Это тоже удерживает пользователя:

<section>
	<h2>Popular pages</h2>
	<ul>
		<li><a href="/blog/seo-basics/">SEO basics</a></li>
		<li><a href="/blog/sitemap/">Sitemap guide</a></li>
		<li><a href="/blog/robots/">Robots.txt guide</a></li>
	</ul>
</section>

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

Как связать с навигацией и поиском

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

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

Проверим статус ответа через терминал:

curl -I https://example.com/unknown-page

В ответе должна быть строка:

HTTP/1.1 404 Not Found

Если вместо этого приходит 200 OK или 301, настройте сервер правильно. Например, для Nginx это делается директивой error_page.

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

Практические задачи

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

Дан HTML кастомной 404-страницы:

<main>
	<h1>404</h1>
	<p>Page not found</p>
</main>

Добавьте на страницу форму поиска по сайту и навигацию из трех ссылок.

Дана верстка:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="content">
		<h1>404</h1>
		<p>Page not found</p>
	</div>
	<div id="footer">
		footer
	</div>
</div>

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

Дан ответ сервера:

HTTP/1.1 200 OK

Что не так с этим ответом для несуществующей страницы и как это исправить?