STINGER8の404エラーページをカスタマイズしてクローラー巡回促進対策してみた

stinger8-404-and-search-customize-thumbnail

意外とカスタマイズで見落としがちな検索結果ページと404エラーページ。

この二つのページはあまり人の目に触れることの少ないページなので、結構おろそかにしている人も多いように感じます。

WordPressをカスタマイズをするにしても、表側だけやって満足してしまい忘れがちな部分だったりします。何を隠そう私がそうでした。

検索結果ページと404エラーページのカスタマイズは何で必要なの?

まずはみなさんのブログの検索フォームに、わざと検索に引っかからないようなキーワードを打ち込んでみてください。

stinger8-404-and-search-customize-01

カスタマイズをしていないと、大体は「記事がありません。」で終わりです。

次に、アドレスの最後の/(スラッシュ)の後に同じように適当な文字を打ち込んでアクセスしてみてください。

stinger8-404-and-search-customize-02

今度は「Hello! my name is 404 お探しのページはありませんでした。」と出ますでしょうか? 挨拶されてしまいました(笑)

これはこれで機能的に問題ないのですが、ちょっと淡白すぎます。それに、記事がないとわかれば誰でもほかのブログを探しにいってしまいますよね。

これって非常にもったいなくないですか? せっかくブログに訪問してもらえたのに離脱確定です。

以前も違う方法の404エラーページ対策をしたけど……

以前、このブログでもSTINGER7の404エラーページの対策記事を書きましたが、それはそれはひどいものでした。

404-top-redirect-thumbnail
ブログをある程度長くやっていると、どうしても納得がいかなかったり、いろんな理由で記事を削除してしまったという経験は誰しもあるかと思います。

内容としては404エラーページにアクセスした訪問者を問答無用でトップページに飛ばすというとんでもないものです。

「存在しないページです」と表示されるよりいいかなと思いおこなったカスタマイズでしたが、いきなりトップページに飛ばされるのですからユーザビリティも糞もありませんよね。この記事に関してはかなり反省しています。

テーマ変更ついでにSEO見直しを兼ねて

つい最近STINGER7から新しくSTINGER8にテーマを変更したこともあり、そのあたりを見直すいい機会かと404エラーページと検索結果ページをカスタマイズしてみました。

参考にしたのはバズ部さんのこちらの記事です。

参考SEO効果を最大化するための404エラーページのカスタマイズ方法

こちらの記事によると、404エラーページ対策は訪問者のその後の行動先をしっかりと用意してあげることで、 ただ単にユーザビリティの向上を目的とするだけではなく、Googleクローラーもまた同じように巡回効率が上がり、サイト全体のSEO対策につながるということでした。

これはなおさら、すぐにでもカスタマイズした方がよさそうですね。

基本的なコードやデザインはお借りし、それをSTINGER8用に調整しました。

実際の404エラーページと検索結果ページ

実際の404エラーページと検索結果ページをご確認ください。

404エラーページを確認

404お探しのページは見つかりませんでした | Lognote

検索結果ページを確認

検索結果ページはサイドバーに適当な文字を打ち込んで検索してみてください。

STINGER8の検索結果ページと404ページのカスタマイズの流れ

今回おこなう流れは以下の通りです。

  1. ページがなかった場合に呼び出すインクルードファイルを作成する
  2. 404ページ(404.php)にインクルードファイルを挿入する
  3. 検索結果ページ(search.php)を結果があった場合となかった場合に処理を分岐させる
  4. 検索結果一覧ページを表示するテンプレートファイル(itiran-search.php)を作成する
  5. CSSでデザインを整える

この順番で作業を進めていきます。

①ページがなかった場合に呼び出すインクルードファイルを作成する

以下のコードをコピーして、content-none.phpというファイルを作り、FTPソフトで子テーマ「stinger8-child」にアップロードします。

<div class="content-none">
<?php if( is_404() ){
// 404ページの場合
$t = get_bloginfo('name');
echo 'いつも、',$t,'をご覧いただきありがとうございます。アクセスされたページは削除またはURLが変更されています。お手数をおかけしますが、以下の方法からもう一度目的のページを探してみてください。';
}elseif( is_search() ){
// 検索結果ページの場合
$t = get_bloginfo('name');
$r = get_search_query();
echo 'いつも', $t, 'をご覧いただきありがとうございます。<span class="rmarker">「',$r,'」で検索しましたがページが見つかりませんでした。</span>お手数をおかけしますが、以下の方法からもう一度目的のページを探してみてください。';
} ?>
<h2>1.検索して見つける</h2>
<!-- 検索ボックスを設置 -->
<p>検索ボックスにお探しのコンテンツに該当するキーワードを入力してください。それに近い内容のページリストが表示されます。</p>
<?php get_search_form(); ?>
<h2>2.人気の記事から見つける</h2>
現在Lognoteで人気の記事一覧です。集計間隔は一ヶ月となっています。
<h4>RANKING</h4>
<!-- wppカスタマイズランキング -->
<?php
$wpp = array (
'range' => 'monthly',
'limit' => 5,
'post_type' => 'post',
'title_length' => '25',
'stats_comments' => '0', 
'stats_category' => '1',
'stats_views' => '1',
'thumbnail_width' => '100', 
'thumbnail_height' => '100', 
'wpp_start' => '<div id="rank">',
'wpp_end' => '</div>',
'post_html' => '<div class="rank-post">
<div class="rank-img">{thumb_img}</div>
<div class="rank-text">
<a href="{url}"><h5>{text_title}</h5></a>
<div class="rank-spec">
<span class="cat">{category}</span>
</div>
</div>
</div>',
); ?>
<?php wpp_get_mostpopular($wpp); ?>
<!-- wppカスタマイズランキング -->
<h2>3.カテゴリーから見つける</h2>
<!-- カテゴリー一覧を表示 -->
<p>それぞれのカテゴリーのトップページからもう一度目的のページを探してみてください。</p>
<div id="search-list">
<?php
wp_list_categories(
array(
'title_li'  => '',
'depth' => 1 //数字の分だけ下層カテゴリーを表示する
)
);
?>
</div>
<h2>4.無効なリンクを報告する</h2>
<!-- 無効なリンクを表示 -->
<p>もし当サイト内で無効なリンクを発見された場合、どのページのどのリンクが無効だったかをご報告いただけると幸いです。今後とも、使いやすいサイトになるよう精進させていただきますのでよろしくお願いいたします。</p>
<?php echo do_shortcode('Contact Form 7のショートコード'); ?>
</div>

23行目はdaily(日ごと)、weekly(週ごと)、monthly(月ごと)でランキング集計期間を変更できます。24行目はランキング表示する記事数です。

54行目はカテゴリーの階層を指定します。1が親カテゴリーのみの表示となり、2からは一つずつ下の子カテゴリーが表示されるようになります。

64行目はContact Form 7のショートコードを記載します。ショートコードはコンタクトフォーム一覧ページから確認できます。

stinger8-404-and-search-customize-03

②404ページ(404.php)にインクルードファイルを挿入する

先ほど作成したcontent-none.phpを404.phpにテンプレートコードを使って挿入します。

<?php get_header(); ?>
<div id="content" class="clearfix">
<div id="contentInner">
<div class="st-main">
<article>
<div class="post">
<img src="https://lognote.biz/wp-content/uploads/2016/04/default-thumbnail-image.jpg">
<?php get_template_part('content', 'none'); ?>
</div>
<!--/post-->
</article>
</div>
</div>
<!-- /#contentInner -->
<?php get_sidebar(); ?>
</div>
<!--/#content -->
<?php get_footer(); ?>

体裁を記事ページと同じにするため、mainをst-mainに変更しています。

postの間のテンプレートコードはcontent-none.phpを呼び出すためのもので、その上に好みに合わせて画像を挿入します。なくても大丈夫です。

ここまでで、404エラーページのカスタマイズは終了です。

③検索結果ページ(search.php)を結果があった場合となかった場合に処理を分岐させる

次に、検索結果ページのカスタマイズをします。

結果がある場合は既存のitiran-search.phpを、結果がない場合はcontent-none.phpを表示するように分岐処理を加えましょう。

<?php get_header(); ?>
<div id="content" class="clearfix">
<div id="contentInner">
<div class="st-main">
<article>
<div class="post">
<h1>「<?php echo esc_html( $s ); ?>」の検索結果 <?php echo $wp_query->found_posts; ?> 件 </h1>
<?php if (have_posts() && get_search_query()) : while (have_posts()) : the_post(); ?>
<?php get_template_part( 'itiran-search' ); //検索用一覧読み込み ?>
<?php endwhile; ?>
<?php get_template_part( 'st-pagenavi' ); //ページナビ読み込み ?>
<?php else : ?>
<img src="https://lognote.biz/wp-content/uploads/2016/04/default-thumbnail-image.jpg">
<?php get_template_part('content', 'none'); ?>
<?php endif; ?>
</div>
</article>
</div>
</div>
<!-- /#contentInner -->
<?php get_sidebar(); ?>
</div>
<!--/#content -->
<?php get_footer(); ?>

13行目の画像は検索結果がなかった場合に表示される画像を指定しています。

④検索結果一覧ページを表示するテンプレートファイル(itiran-search.php)を作成する

分岐処理で使用するitiran-search.phpを作成します。こちらもcontent-none.phpと同様に子テーマにアップロードしてください。

なぜこのファイルが必要になるかというと、無限ループを回避するためです。

既存のitiran.phpで記事一覧を表示しようとするとsearch.phpの分岐ループ処理重複して分限ループが発生してしまいます。

itiran-search.phpはループ処理を削除したコードを記述しています。

<?php
/**
* 検索結果がなかった場合の一覧
*/
?>
<div class="kanren">
<dl class="clearfix kanren-custom">
<dt><a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'st_thumb150' ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
<?php endif; ?>
</a></dt>
<dd>
<p class="kanren-t"><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></p>
<div class="blog_info">
<p><i class="fa fa-clock-o"></i>
<?php the_time( 'Y/m/d' ); ?>
&nbsp;<span class="pcnone">
<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/>
<?php the_tags( '<i class="fa fa-tags"></i>&nbsp;', ', ' ); ?>
</span></p>
</div>
<div class="smanone">
<?php the_excerpt(); //抜粋文 ?>
</div>
<div style="text-align:right;"> <a href="<?php echo get_permalink(); ?>" class="btn btn-detail">続きを読む</a> </div>
</dd>
</dl>
</div>

⑤CSSでデザインを整える

最後にCSSでデザインを整えましょう。

/*--------------------------------------
404ページ 人気ランキング
--------------------------------------*/
#rank {
counter-reset: wpp-ranking;
}
#rank .rank-post{
overflow:hidden;
padding:10px 0;
position:relative;
}
#rank .rank-post:before{
color:white;
background: #343434;
text-align: center;
content: counter(wpp-ranking, decimal);
counter-increment: wpp-ranking;
line-height: 1;
padding: 5px 7px;
position: absolute;
top:10px;
left:0;
z-index: 1;
}
#rank .rank-post a {
color: #333 !important;
text-decoration:none!important;
}
#rank .rank-post a h5{
display:block;
margin:0 0 7px 7px;
}
#rank .rank-post a h5:hover {
text-decoration: underline!important;
}
#rank .rank-post .rank-spec{
overflow:hidden;
display:block;
font-size:14px;
}
#rank .rank-post .rank-spec .cat,
#rank .rank-post .rank-spec .time{
display:inline-block;
float:left;
margin-right:20px;
padding:1px 3px;
}
#rank .rank-post .rank-spec span.cat:before {
font-family: "FontAwesome";
content: "\f115";
padding-right: 5px;
}
/*--------------------------------------
404ページ カテゴリーリスト
--------------------------------------*/
#search-list li {
list-style-type: none;
padding-left: 0;
}
#search-list li.cat-item a:before {
font-family: "FontAwesome";
content: "\f0da";
padding-right: 5px;
}
#search-list li.cat-item a {
display: block;
overflow: hidden;
font-size: 16px;
line-height: 2.4em;
text-decoration: none;
vertical-align: middle;
padding: 0 8px;
color: #333;
background: #fff;
margin-bottom: 2px;
}
#search-list li.cat-item a:hover {
background: #333;
color: #fff;
}
#search-list li.cat-item span {
line-height: 1em;
float: right;
margin: 8px 0 0 8px;
padding: 4px 8px;
border-radius: 4px;
color: #fff;
background: #999;
}
/*media Queries PC
----------------------------------------------------*/
@media only screen and (min-width: 780px) { 
/*--------------------------------
一覧ページ変更
---------------------------------*/
.kanren-custom dt { width: 150px; margin-right: 30px }
.kanren-custom dt img { width: 150px; }
.kanren-custom dd { padding-left: 100px }
.kanren-custom dd h3 {margin: 10px 0 }
.kanren-custom dd h3 a {
color: #333;
text-decoration: none;
font-size: 22px;
line-height: 1.7;
}
}

以上でカスタマイズは終了です。

普段目に入るページのデザインばかりに気を取られてしまい、404エラーページと検索結果ページのカスタマイズって意外と抜けてしまいます。

SEO効果でPVアップも期待できるので、まだ手を加えていない方はぜひやってみてくださいね。

stinger8-404-and-search-customize-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで