Создание эффективных 404-error страниц в WordPress.

Перевод статьи:  How to build effective 404-error pages in WordPress.
Автор:  Анна Ладошкина.

Наиболее выдающиеся веб-сайты всегда отличались тем, что они уделяют должное внимание каждой мелочи. Одним из таких зачастую недооценённых моментов является наличие полезной и удобной страницы 404-error («страница не найдена»). В WordPress предусмотрена возможность легкого создания и редактирования такой страницы, но к сожалению, простота в настройке не всегда автоматически означает эффективность.

Известный WordPress эксперт в области SEO Джуст де Валк (известный также под псевдонимом Yoast) сообщает о результатах своих недавних исследований за последние несколько лет, касающихся SEO аудита сайтов. Согласно его данным подавляющее большинство проверенных сайтов имеют проблемы связанные с оптимизацией 404-error страницы. В устанавливаемой по умолчанию WordPress теме (на данный момент «Twenty Twelve») для этого предусмотрен простейший шаблон и лишь немногие из владельцев таких сайтов вносят изменения, пытаясь улучшить его.

Почему это так важно?

Давайте посмотрим на это с точки зрения здравого смысла. Какие ситуации приводят к возникновению ошибки сервера 404? Когда пользователь активирует ссылку, которая ведет на определенный контент вашего сайта, но по какой-либо причине соответствующая страница отсутствует: возможно, вы сменили пермалинк или удалили нужную страницу; возможно, вы внесли изменения в предусмотренные на вашем сайте теги и/или категории; а может быть человек воспользовался нерабочей ссылкой. Есть множество причин способных привести к этой ошибке, но все же не следует сбрасывать со счетов один очень важный факт: посетитель уже зашел на ваш сайт, его уже что-то заинтересовало, и он уже попытался отыскать это, поэтому его усилия должны быть вознаграждены.

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

Изображение.

Страница 404-error сайта компании Apple содержит карту сайта, сопровождающуюся простым и понятным сообщением.

Изображение.

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

Изображение.

На 404-error странице сайта Zurb при возникновении проблемы ударение делается на обратную связь. Ведь именно дизайнеры должны заниматься подобными проблемами.

Изображение.

Problogger представляет различного рода контент, направленный на привлечение пользователя к чтению.

Изображение.

Блог Джастина Тедлока для перехода на главную страницу использует «хлебные крошки».

Создание собственной 404-error страницы на WordPress.

Что же можно сделать для улучшения ситуации? И как ошибку пользователя можно превратить в возможности?

В поисках достойных идей и необходимых принципов мы можем обратиться к таким авторитетным документам как WordPress Codex и Руководство Google Webmaster и использовать их в качестве отправной точки. На самом деле наша основная задача довольно проста: объяснить по какой причине требуемая страница не может быть предоставлена и предложить вниманию посетителя рекомендации по поиску необходимой информации. Исходя из этого мы можем составить список компонентов, которые необходимы для создания «идеальной» 404-error страницы:

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

Руководствуясь этим списком, мы можем определить полезные советы и идеи касательно того, что можно включить в шаблон 404-error страницы:

  • последние и/или популярные посты или же, как альтернатива – случайные посты;
  • возможность подписки на рассылку (например, RSS) в дополнение к контактной информации;
  • карта сайта (особенно это касается небольших сайтов);
  • акции или информация о предложениях и сервисах на вашем сайте;
  • элементы вашего бренда, позволяющие пользователю идентифицировать ваш сайт и вашу деятельность;
  • информация касательно запрошенного URL адреса и наиболее релевантного запросу контента;
  • облако тегов, для быстрого перемещения посетителя к контенту вашего сайта;
  • средство оповещения и/или отслеживания и регистрации событий связанных с ошибками 404 на вашем сайте, которое будет держать вас в курсе.

Очень важным моментом при создании 404-error страницы является корректная обработка отправляемого сервером 404-HTTP статуса. К счастью, WordPress берет эту часть работы на себя и выполняет ее автоматически, поэтому мы можем сосредоточить все наши усилия на создание, собственно, самой страницы. Нам необходимо, чтобы задействованная в системе тема имела отдельный шаблон для страницы под именем 404.php . Сама структура такого шаблона без контента довольно проста:

<?php
/**
Шаблон отображения страниц ошибки 404 ('Page not found').
**/
get_header(); ?>
<div id="content" class="not-found-page">
<!—здесь размещается контент страницы —>
</div>
<?php get_footer(); ?>

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

Теперь, после предварительных приготовлений, мы можем приступить к процессу наполнения страницы содержимым. Самое лучшее, что мы можем сделать для посетителя, попавшего на страницу 404-error, это догадаться о намерениях пользователя и предоставить ему максимально подходящий выход из создавшейся ситуации. WordPress предусматривает хранение информации о запрашиваемом URL в свойстве $wp->request. Проанализировав полученную с помощью данного свойства строку мы можем попытаться найти схожий с запрашиваемым контент, основываясь на данных, полученных из поля post_name, в котором хранится информация о ярлыках записи и страницы. Если этот прием не приведет ни к чему существенному, мы можем попытаться воспользоваться функцией обычного поиска по содержанию постов. Если же и эти усилия не дадут положительных результатов, то мы всегда можем воспользоваться запасным вариантом, предоставив вниманию пользователя список последних постов сайта.

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

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

function frl_get_requested_slug(){
global $wp;
$q = $wp->request;
$q = preg_replace("/(.*)(html|htm|php|asp|aspx)$/","",$q);
$parts = explode('/', $q);
$q = end($parts);
return $q;
}

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

function frl_list_posts($posts){
if(empty($posts))
return '';
$list = array();
foreach($posts as $cpost) {
$title = apply_filters('the_title', $cpost->post_title);
$url = get_permalink($cpost);
$list[] = "<li><a href='{$url}'>{$title}</a></li>";
}
return implode('', $list);
}

Функция frl_list_posts позволяет быстро сформировать список ссылок на посты, принимая в качестве аргумента объект WP_Post.

function frl_load_error_style(){
if(!is_404())
return;
$src = get_template_directory_uri().'/css/error-style.css';
wp_enqueue_style('error-style', $src);
}

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

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

Дружелюбное сообщение:
<!— Сообщение —>
<h2>404: Page not found</h2>
<div class="message not-found">
<p>Извините, но, к сожалению, запрашиваемая Вами страница не найдена.</p>
<p>Давайте попробуем вместе отыскать необходимую вам информацию.</p>
</div>
Поиск запрашиваемого контента:
<!—Возможно вы имели в виду —>
<?php
$q = frl_get_requested_slug();
$args = array(
'post_type' => 'any',
'post_status' => 'publish',
'name' => $q,
'posts_per_page' => 5
);
$query = new WP_Query($args); //запрос записей по ярлыку
if(empty($query->posts)){ //поиск записей
$q = str_replace('-', ' ', $q);
$args = array(
'post_type' => 'any',
'post_status' => 'publish',
's' => $q,
'posts_per_page' => 5
);
$query->query($args);
}
if(!empty($query->posts)):
?>
<h4>Возможно вы искали одну из представленных ниже страниц?</h4>
<ul class="posts-list">
<?php echo frl_list_posts($query->posts);?>
</ul>
<?php endif;?>

В первую очередь мы выполняем запрос к системе WordPress используя исходный набор аргументов, который инициирует поиск запрашиваемого ярлыка в поле name каждого поста и страницы. Если это не приведет к каким-либо результатам, то после замены дефисов на пробелы в используемой в запросе строке (ярлыке), мы выполняем другой запрос, при котором система пытается найти используемые в запросе слова в контенте записей и страниц сайта. Если поиск был успешным, то с помощью ранее созданной функции frl_list_posts, мы выводим на странице список найденных постов.

Последние посты:
<!— Недавний контент —>
<?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 5
);
$query->query($args);
if(!empty($query->posts)):
?>
<h4>Почему бы не попробовать найти необходимую информацию в самых последних публикациях.</h4>
<ul class="posts-list">
<?php echo frl_list_posts($query->posts);?>
</ul>
<?php endif;?>

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

Последняя попытка.
<!— Дополнительные возможности поиска —>
<?php $home_link = home_url(); ?>
<h4>Все еще не нашли, что искали?</h4>
<p>Воспользуйтесь, пожалуйста, поисковой формой или начните просмотр с <a href='<?php echo $home_link;?>'>Главной страницы</a>.</p>
<p>Если вам нужна дополнительная помощь, вы всегда можете связаться с нами, используя наш адрес <em>info@domain.com</em>.</p>
<?php get_search_form();?>

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

Предотвращение возникновения 404 ошибок на вашем сайте.

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *