バズ部

icon icon

icon
  • icon
  • icon
  • icon
  • 運営者情報
  • お問い合わせ

  • icon株式会社ルーシー
  • 東京都港区西新橋2-7-4 CJビル11階

お問い合わせ

SERVICESサービス一覧

  • 半年で業界トップの集客を目指す

    コンテンツマーケティング支援・代行

  • 理想的SEO内部構造を提案

    Web制作

  • 常識を覆す高品質コンテンツを提供

    コンテンツ制作代行

CATEGORY記事カテゴリ

  • コンテンツマーケティング
  • SEO
  • WordPress
  • ランディングページ
  • ソーシャルメディア
  • メルマガ
  • バズ部の全記事一覧
  • コンテンツマーケティング101

ABOUT US私たちについて

  • 運営者情報
  • セミナー
  • 採用情報
  • お問い合わせ
  • プライバシーポリシー

DOWNLOAD無料資料

  • 広告費を1/10にして売上を倍増させる全手法
  • バズ部が運営する月間20万PV超サイト11の生データ集
  • コンテンツマーケティングサービス資料
  • 良質なコンテンツを作成するための20のコツ

CASE成功事例

  • 成功事例一覧
  • はじめてのWEBマーケティングで、月50件の個別相談を獲得したファイナンシャルプランナー事務所
  • わずか6ヶ月でアクセス数が12倍に!ニッチなキーワードだけで18万PVまで流入を増やした太陽光発電メディア
  • 1年でプッシュ型営業からプル型へ!毎月約200件の問い合わせを獲得するデジタルマーケティングブログ
  • 月間140万PV・月間販売800件超!自社メディアで圧倒的な成果を出すECサイト
  • 問い合わせが月4,400件以上!自社メディアで驚異的なCV数を生み出した弁護士事務所
  • 月間500万PVを達成し、毎月の新規の来院患者数が657%増加した歯医者のブログ
  • 月間940,346PVを達成し、毎月の保険の加入や見直しのお申し込み数が70件以上に
  • 月間29万PVを達成し、毎月30件以上のお問い合わせを獲得した屋根修理に関するブログ
  • 前年同月と比べて3倍以上の売上を達成したアパレル企業
  • たったの20記事で月間20万PV突破!ブログがきっかけで書籍も2冊出版
  • 月間90万PV!ニキビ関連の主要キーワードで上位表示し続ける「ニキペディア」の成功の秘訣とは?
  • たった2人で世界でも認められる成果をあげたノートンブログのコンテンツマーケティング
  • 週に1記事の更新で月間65万PV、月間200件超のお問い合わせを獲得するベルリッツブログ
  • 83コンテンツ中51コンテンツが検索結果で1位に表示されるサイトに成長

© Copyright 2022 バズ部. All rights reserved.

ユーザーに届ける価値を徹底的に追求する
マーケティングを提供します

© Copyright 2022 バズ部. All rights reserved.

03/04土13:00〜18:00

【3月開催】バズ部式コンテンツマーケティング実践ブートキャンプ2023

  • オンライン / 東京
×
閉じる

    皆様からのご意見をお聞かせください

    このページに対する意見

    このページの気になる部分について
    ご意見をお聞かせください

    バズ部に対する意見

    バズ部の気になる部分について
    ご意見をお聞かせください

    このページに対する意見をお寄せください

    Q. このページについて感想やご意見があれば教えてください。
    Q. 今後増やして欲しい内容の記事があれば教えて下さい。
    Q. ご意見を頂けた方には今後特別なオファーの提供を予定しています。
    ぜひご連絡先をお知らせください。
    ※ご入力頂いた個人情報や意見が公表されることは一切ありません。安心してご記入ください。

    お名前

    メールアドレス

    プライバシーポリシー

    バズ部に対する意見をお寄せください

    Q. 私たちバズ部について感想やご意見があれば教えてください。
    Q. ご意見を頂けた方には今後特別なオファーの提供を予定しています。
    ぜひご連絡先をお知らせください。
    ※ご入力頂いた個人情報や意見が公表されることは一切ありません。安心してご記入ください。

    お名前

    メールアドレス

    プライバシーポリシー

    ご協力ありがとうございました!

    皆様からいただきましたご意見につきましては、
    今後のより良い商品開発・サービス改善に
    活かしていきたいと考えております。

    今後もお気付きの点がございましたら、お聞かせいただけますと幸いです。

    ×ウィンドウを閉じる

      1. バズ部 /
      2. SEO /
      3. SEO内部対策 /
      4. SEO効果を最大化するための404エラーページのカスタマイズ方法
    • 最終更新日 2022.12.06

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

    サイトの規模も大きくなり、あなたは今サイトの更なる利便性向上の為に404エラーページの改善を考えている事だろう。

    404エラーページの改善は、サイトの更なる利便性向上を実現する上で欠かせない立派なSEO内部対策の1つだ。

    それにも関わらず、多くのSEO関係者、デザイナー、そしてエンジニアは、404エラーページが本来どのような目的で設置するべきもので、ユーザーに対してどういうメリットを提供するものなのかを理解していない。

    そして気づかない内に、検索ユーザーやSEOに対して役に立たない404エラーページを設置しまっている。

    そこでこの記事では「404エラーページが果たすべき本当の役割」から、それを踏まえたサイトの利便性を最大限に高める「404エラーページの作り方」までを詳しく紹介する。

    ぜひじっくりと読み込んで実践して頂ければ幸いだ。


    目次

    • 404エラーページとは
    • 404エラーページの役割
      • サイトの利便性を下げる404エラーページの例
      • サイトの利便性を高める404エラーページの例
    • 理想的な404エラーページの4つの条件
      • 2.1. 探しているページがないことを明確に伝える
      • 2.2. その他のページと同一のデザインを保つこと
      • 2.3. ユーザーに役立つ情報を提供すること
      • 2.4. 404HTTPステータスコードの確認
    • 3. 404エラーページのカスタマイズ方法
      • 3.1. content-none.phpを作る
      • 3.2.  404.phpファイルを作る
      • 3.3. content-none.phpと404.phpをアップロードする
      • 3.4. 応用編:サイト内検索結果が空の場合にエラーメッセージを表示する
    • 4. まとめ

    404エラーページとは

    色々なサイトを見ている時に以下のように ” 404 Not Found ” と書かれたページにたどり着いた経験はないだろうか?

    普通の404ページ

    この様な「サイト上に存在しないURLにユーザーがアクセスしようとした時に表示されるページ」を404エラーページと言う。

    ちなみに、この「存在しないページ」とは、具体的には

    • 以前は存在していたが現在は削除されているページ
    • URLの一部を間違えて入力してしまった場合のページ
    • 既に切れたリンク(内部リンク)をクリックした場合のページ

    などが該当する。

    この404エラーページには、「ユーザーの混乱を避けることにより、より利便性の高いサイトを実現する」という役割があるのだが、実は上記の様な工夫のない404エラーページでは、全くその役割を満たす事ができない。

    どう言うことか詳しく解説していこう。


    404エラーページの役割

    404エラーページのそもそもの役割を今一度考えてみると、以下の様に表す事ができる。

    存在しないURLにユーザーがアクセスしてしまった時に、彼らに、既にページが存在しないことを伝え、目的のページを見つける方法を提案してあげること。

    この役割をしっかりと果たす404エラーページを用意しておくとサイトの利便性は大きく高まる。例とともに解説していこう。

    サイトの利便性を下げる404エラーページの例

    仮に、バズ部を見ていて『SEO内部対策で行うべき20の事』という内部リンクをクリックした時に以下のようなページが表示されたらどうなるだろうか?

    404ページ

    ユーザーはSEO内部対策に関するページが表示されることを期待していたのに、なんだか分からないページに来てしまったことで戸惑ってしまうことだろう。

    こうなると、ほとんどのユーザーはそのまま別のサイトに移動しようとしてしまう。これは、あなたのサイトの利便性が低いということに他ならない。

    サイトの利便性を高める404エラーページの例

    次に、バズ部に実装している404エラーページを確認してみて欲しい。

    このように、ユーザーがアクセスしようとしたURLが既に存在しないことを伝え、目的のコンテンツを見つけるために役立つ方法を示すという本来の役割を果たしているページを用意すると以下の2つのメリットが生まれる。

    • ウェブに慣れていないユーザーの戸惑いを軽減することができる。
    • 目的の、又は他に興味のあるコンテンツを見つけてもらい離脱率を下げることができる。

    つまり、ユーザーにとっては遥かに利便性の高いサイトになるということだ。 


    理想的な404エラーページの4つの条件

    ここまでで404エラーページの役割とその重要性に関して理解していただけただろう。

    それではサイトの利便性を高め、SEO効果を高める理想的な404エラーページとは、どのようなものだろうか。それは以下の4つの条件を満たしたもののことだ。

    • ユーザーに対して探しているページが見つからないことを明確に伝えること
    • 404ページのデザインをサイトのその他のページのデザインと同一にすること
    • 人気のある記事や投稿へのリンク、トップページへのリンクを追加すること
    • ウェブサーバーが404HTTPステータスコードを返すことを確認すること

    有益な404ページを作成する | Google

    一つずつ解説していこう。

    2.1. 探しているページがないことを明確に伝える

    404エラーページに、「404 Not Found 」や「見つかりません。」のようなあいまいなテキストを表示しているだけのサイトは非常に多い。

    考えてみて欲しい。

    ユーザーはサイトの内部リンクや、以前ブックマークなどに保存していて再びページを見に来ようとしたが、既にそのURLが削除されてしまった場合などに404エラーページに訪れる。その時に急に上記のような曖昧なテキストが表示されるとユーザーは戸惑ってしまうことが容易に想像できるだろう。

    そこでバズ部では、「あなたがアクセスしようとしたページは削除されたかURLが変更されています。」というように、既にユーザーがアクセスしようとしたページが存在しないことを明確に伝えるテキストを用意している。

    このようにユーザーに配慮して彼らが戸惑わないようなテキストを用意しよう。

    2.2. その他のページと同一のデザインを保つこと

    404エラーページのデザインに関してGoogleは以下のように言及している。

    404ページを、サイトのその他の部分と同じデザイン(ナビゲーションを含む)にします。

    デザイン性が高い404エラーページを設置しているサイトは少なくない。特にデザイナーなどには、自分のデザインの特徴を404エラーページなどで表現したいという人も少なくないだろう。

    しかし404エラーページは、オリジナリティを表現する場ではなく、あくまでも、意図せず存在しないページにアクセスしてしまったユーザーに対して役立つ情報を提供するための場だということを忘れないようにしよう。

    美しくデザインされた404エラーページは、見た目的に楽しいものではあるが、SEOやサイトの利便性を考えると理想的ではないということだ。

    2.3. ユーザーに役立つ情報を提供すること

    繰り返しになるが、404エラーページに訪れるユーザーは、意図せず存在しないページにアクセスしてしまったユーザーだ。

    彼らは興味のあるページへの内部リンクを見たり、ブックマークしてたものを再度見ようとして404エラーページに訪れている。

    そうしたユーザーにとって役立つ情報とは、自分が見たいページを見つけるための情報だ。

    具体的には、

    • サイト内検索
    • 最も人気のあるページへのリンク
    • カテゴリートップページへのリンク
    • サイトトップページへのリンク

    などの情報があると、ユーザーは自発的に探していたページを見つけたり、他に興味のあるコンテンツを探すことができる。

    2.4. 404HTTPステータスコードの確認

    404HTTPステータスコードとは、そのページが存在しないことを検索エンジンに伝えるためのHTTPコードと呼ばれるものだ。

    詳しくは次項の404ページのカスタマイズ方法でご紹介するが、WordPressで404.phpファイルを作ると、それが読み出された時には自動的に404HTTPステータスコードが返されるようになっているので基本的には問題ない。

    しかし、カスタマイズした後には念のためにステータスコードを確認する癖をつけておこう。

    Google Chrome デベロッパーツールを使えば簡単に確認することができる。

    ツールはWindowsではF12キーを、MacではCommand+Option+Iで起動することができる。対象となるページでツールを起動した後に、ページをリロードすれば下図のようにステータスコードを確認できる。

    404HTTPステータスコード


    3. 404エラーページのカスタマイズ方法

    ここからはいよいよ、実際にWordPressでバズ部の様な404エラーページをカスタマイズする方法を紹介しよう。初心者の人にとっては少しややこしく感じるかもしれないが、実装自体はほぼコピーアンドペーストだけで行える場合がほとんどだ。

    さて、 404エラーページの作成手順は以下の通りだ。

    • content-none.php ファイルを作る。
    • 404.phpファイルを作る。
    • 両方のファイルをアップロードする。

    WordPressでは404.phpというファイルを作りアップロードするだけでも404エラーページを実装することができるが、ここではより汎用性の高い、content-none.phpというインクルードファイルから作成する方法をご紹介する。

    ※カスタマイズの説明で使用したテーマに関して
    以降の内容はバズ部で使っているXeoryBaseというWordPressテーマを例に解説していく。使用しているテーマによって記述内容は多少異なるが、全体的な大枠は一緒なので、それぞれお使いのテーマに合わせて適宜応用するようにして欲しい。

    3.1. content-none.phpを作る

    まず、content-none.phpを作ろう。これはWordPressのインクルードファイルと呼ばれるもので、このファイルの内容はWordPressで生成されるページ内のどこででも表示させることができる。

    wordpressのインクルードファイル

    詳しくは、WordPress Codexのインクルードタグのページを参照しよう。

    前述のように、通常、WordPressに404エラーページを設置する場合は404.phpを作るだけで良い。

    しかし、インクルードファイルを作ることによって様々なページに応用することができる。詳しくは記事後半で解説しているが、今は「WordPressをカスタマイズする上でインクルードファイルを使えると何かと便利である」と理解しておこう

    それでは早速、content-none.phpに404エラーページで表示したい内容を記述していこう。バズ部の404エラーページは以下の5つの要素で構成している。

    • 冒頭文
    • 検索して見つける
    • 人気の記事から見つける
    • カテゴリー一覧から見つける
    • 無効なリンクを報告する

    実際に、content-none.phpに記述している内容を単純化すると以下の通りだ。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="content-none">
      <!-- ここに冒頭文を書く -->
      <h2>1.検索して見つける</h2>
      <!-- 検索ボックスを設置 -->
      <h2>2.人気の記事から見つける</h2>
      <!-- 人気の記事一覧を表示 -->
      <h2>3.カテゴリーから見つける</h2>
      <!-- カテゴリー一覧を表示 -->
      <h2>4.無効なリンクを報告する</h2>
      <!-- 無効なリンクを表示 -->
    </div>

     余談だが、1行目と最後の行の

    1
    <div class=“content-none”></div>

    は、404エラーページで表示するコンテンツ全体に独自のclass指定をつけることによって、CSSでデザインに変更を加えた時に他のページへの悪影響を防ぐためのものだ。

    それでは、早速、一つ一つの要素を実装していこう。なお以下では、5つの要素の各コードを解説した後に「content-none.phpの全ソース」見出しで全文のソースを紹介している。

    インクルードファイルのファイル名に関して

    ここでは、content-none.phpというファイル名にしたが、ファイル名は任意のものに変更しても構わない。phpを編集するのが初めての方は、このままcontent-none.phpというファイル名で進めよう。

     3.1.1. 冒頭文の設定

    まず、冒頭文は以下のように記述する。

    1
    2
    3
    4
    5
    6
    7
    8
    <!?php if( is_404() ){
        // 404ページの場合
        echo 'いつもバズ部をご覧頂きありがとうございます。大変申し訳ないのですが、あなたがアクセスしようとしたページは削除されたかURLが変更されています。お手数をおかけしますが、以下の方法からもう一度目的のページをお探し下さい。';
      }elseif( is_search() ){
        // 検索結果ページの場合
        $r = get_search_query();
        echo 'いつもバズ部をご覧頂きありがとうございます。「.'$r'.」で検索しましたがページが見つかりませんでした。お手数をおかけしますが、以下の方法からもう一度目的のページをお探し下さい。';
      } ?>

    echo ‘ 以降のテキストは、あなたのサイトに合った文言に変更しよう。

    なお、4行目から7行目までの記述は404エラーページだけを作る場合は必要ないが、サイト内検索結果が空の場合に類似のエラーページを表示させる為に挿入する。詳しくは当記事下部にて紹介しているので、後ほど確認してほしい。

    3.1.2. 検索フォームの設定

    続いて検索フォームを設置しよう。WordPressには、もともとget_search_form()という検索フォームを出力するための関数が用意されている。そのため、以下のように記述すれば良い。

    1
    2
    3
    4
      <h2>1.検索して見つける</h2>
      <!-- 検索ボックスを設置 -->
      <p>検索ボックスにお探しのコンテンツに該当するキーワードを入力して下さい。それに近しいページのリストが表示されます。</p>
      <?php get_search_form(); ?>

    get_search_form()は、テーマにsearchform.phpがあればそれを、なければWordPressにもともと備わっている検索フォームを呼び出す。

    バズ部の場合はXeoryBaseに内包しているsearchform.phpが呼び出されている。

    3.1.3. 人気記事一覧の設置

    人気記事一覧は以下の記述で表示することができる。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
        <?php
        // クエリ
        $args = array(
          'showposts' => 20,
          'meta_key'  => 'views',
          'orderby'   => 'meta_value_num',
          'order'     => 'DESC'
        );
        $the_query = new WP_Query( $args );
        
        // ループ
        echo '<ol>';
        $i = 1;
        while ( $the_query->have_posts() ) : $the_query->the_post();
        ?>
          <li class="content-none-views content-none-views-<?php echo $i; ?>">
            <a href="<?php the_permalink(); ?>">
              <?php the_title(); ?>
            </a>
          </li>
        <?php
        $i++;
        endwhile;
        // 投稿データをリセット
        wp_reset_postdata();
        echo '</ol>';
        
        ?>

    ‘meta_key’に’views’を指定し、’orderby’に’meta_value_num’を指定する。‘views’には各記事のPV数が入っているので、この指定で「views(PV数)の数字順に並び変える」という命令になる。

    今回は、’showposts’で20を指定し20件表示している。この数値がない場合は、管理画面の「設定>表示設定」で指定した数値の分だけ表示される。

    注記. XeoryBaseのように人気記事一覧機能が搭載されていないテーマの場合の解決策

    なお、この箇所に関してはXeoryBaseにもともと人気記事を表示する機能が備わっているため、それを前提とした記述になっている。もし、あなたがお使いのテーマに人気記事表示機能が備わっていない場合は、人気記事一覧を表示するプラグインをインストールすることで同様の事が実現出来る。

    「WordPress Popular Posts」もしくは「WP-PostViews」をインストールすれば、上記のソースをそのまま使用することが可能だ。「Jetpack Post Views」を使う場合は‘meta_key’の’views’を’jetpack-post-views’に変えれば上記と同様に人気の記事一覧を表示することができる。
    WordPress Popular Postsの使い方については「WordPress Popular Posts で人気記事を表示する方法」に書いてあるので参考にして欲しい。

    3.1.4. カテゴリー一覧の設置

    検索フォームと同じようにWordPressには、カテゴリー一覧を表示するwp_category_list()という関数が用意されている。そのため以下のように記述すれば良い。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      <h2>2.カテゴリーから見つける</h2>
      <!-- カテゴリー一覧を表示 -->
      <p>それぞれのカテゴリーのトップページからもう一度目的のページをお探しになってみて下さい。</p>
      <?php
        wp_list_categories(
          array(
            'title_li'  => '',
            'depth' => 1
          )
        );
      ?>

    7行目にある

    1
    2
    3
    array(
            'title_li'  => ''
          )

    という記述は、デフォルトだと1行目に表示される”カテゴリー”というタイトルを表示しないための設定だ。

    その下の

    1
    2
    3
          array(
            'depth' => 1
          )

    は親カテゴリーだけを表示して、子カテゴリーは表示しないという設定だ。数字を2に変えると2階層目までのカテゴリーが、3にすると3階層目までのカテゴリーが表示されるようになる。

    なお、wp_category_list()という関数には、オプションでいろいろな設定が出来るようになっている。興味のある方はWordPress Codex のテンプレートタグを確認してみよう。

    3.1.5. 無効なリンクの報告フォームの設置

    1
    2
    3
      <h2>4.無効なリンクを報告する</h2>
      <p>もし当サイト内で無効なリンクを発見された場合、どのページのどのリンクが無効だったかをご報告頂けると幸いです。今後とも、使いやすいサイトになるよう精進させていただきますのでよろしくお願いいたします。</p>
      <?php echo do_shortcode('[contact-form-7 id="****" title="リンク切れ報告"]'); ?>

    do_shortcode()という関数を使うとショートコードをPHPファイルに埋め込むことができる。初めての人はよく分からないかもしれないが、覚えておくと便利なものだということは知っておこう。

    また最終行の「id=”****”」の中身は、WordPress管理画面上の「Contact Form 7」設定画面から以下の様に確認する事ができる。

    contactform7の設定画面

    content-none.phpの全ソース

    ここまでの内容を全てcontent-none.phpに反映させると以下の記述になるので確認しよう。

    content-none.phpの全ソース文

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    <div class="content-none">
      <!-- ここに冒頭文を書く -->
      <?php if( is_404() ){
        // 404ページの場合
        echo 'いつもバズ部をご覧頂きありがとうございます。大変申し訳ないのですが、あなたがアクセスしようとしたページは削除されたかURLが変更されています。お手数をおかけしますが、以下の方法からもう一度目的のページをお探し下さい。';
      }elseif( is_search() ){
        // 検索結果ページの場合
        $r = get_search_query();
        echo 'いつもバズ部をご覧頂きありがとうございます。「.'$r'.」で検索しましたがページが見つかりませんでした。お手数をおかけしますが、以下の方法からもう一度目的のページをお探し下さい。';
      } ?>
      <h2>1.検索して見つける</h2>
      <!-- 検索ボックスを設置 -->
      <p>検索ボックスにお探しのコンテンツに該当するキーワードを入力して下さい。それに近しいページのリストが表示されます。</p>
      <?php get_search_form(); ?>
      <h2>2.人気の記事から見つける</h2>
        <?php
        // クエリ
        $args = array(
          'showposts' => 20,
          'meta_key'  => 'views',
          'orderby'   => 'meta_value_num',
          'order'     => 'DESC'
        );
        $the_query = new WP_Query( $args );
        
        // ループ
        echo '<ol>';
        $i = 1;
        while ( $the_query->have_posts() ) : $the_query->the_post();
        ?>
          <li class="content-none-views content-none-views-<?php echo $i; ?>">
            <a href="<?php the_permalink(); ?>">
              <?php the_title(); ?>
            </a>
          </li>
        <?php
        $i++;
        endwhile;
        // 投稿データをリセット
        wp_reset_postdata();
        echo '</ol>';
        
        ?>
      <h2>3.カテゴリーから見つける</h2>
      <!-- カテゴリー一覧を表示 -->
      <p>それぞれのカテゴリーのトップページからもう一度目的のページをお探しになってみて下さい。</p>
      <ul>
      <?php
        wp_list_categories(
          array(
            'title_li'  => '',
            'depth'     => 1
          )
        );
      ?>
      </ul>
      <h2>4.無効なリンクを報告する</h2>
      <p>もし当サイト内で無効なリンクを発見された場合、どのページのどのリンクが無効だったかをご報告頂けると幸いです。今後とも、使いやすいサイトになるよう精進させていただきますのでよろしくお願いいたします。</p>
      <?php echo do_shortcode('[contact-form-7 id="****" title="リンク切れ報告"]'); ?>
    </div>

    これをcontent-none.phpという名前で保存しよう。phpファイルを保存するには、一度テキストエディタで保存した後に、末尾の.txtを.phpに変更すれば良い。

    3.2.  404.phpファイルを作る

    404エラーページは固定ページを基に作る。あなたが使用しているテーマのpage.phpを複製し404.phpと名前をつけて保存しよう。

    ちなみにバズ部のpage.phpは以下のような記述になっている。テンプレートによって微妙に記述内容は違うが、作業の大枠は変わらないので適宜応用しよう。

    1
    2
    3
    4
    5
    6
    7
    8
    <section class="post-content" itemprop="text">
      <?php if( get_the_post_thumbnail() ) : ?>
      <div class="post-thumbnail">
        <?php the_post_thumbnail(); ?>
      </div>
      <?php endif; ?>
      <?php the_content(); ?>
    </section>

    このソースの2行目から6行目は、「もしアイキャッチ画像があれば表示する」という命令、7行目で「本文を表示する」という命令が書かれている。

    どちらも404エラーページには不要なので削除し、代わりに先ほど作ったcontent-none.phpを呼び出すためのget_template_part()という関数を記述する。

    404.phpの全ソース文

    1
    2
    3
    <section class="post-content" itemprop="text">
      <?php get_template_part('content', 'none'); ?>
    </section>

    これは、‘content’と’none’というオプション(引数)を2つ指定してcontent-none.phpファイルを呼び出すという指示を意味する。

    例えばcontent-single.phpというファイルを作成して呼び出す場合は、

    1
    <?php get_template_part('content', 'single'); ?>

    という記述になる。

    3.3. content-none.phpと404.phpをアップロードする

    content-none.phpと404.phpが出来たら、FTPソフトを使ってテーマフォルダにアップロードする。
    アップロードするフォルダは、WordPressをインストールしたフォルダ→wp-contentフォルダ→themesフォルダにある自分のテーマフォルダだ。

    WordPressテーマファイルのアップロード場所

    これで404エラーページの実装は完了だ。実装されていることを確認したら、前述したGoogle Chrome デベロッパーツールを使って、404HTTPステータスコードが正常に返されているかも忘れずに確認しておこう。

    404HTTPステータスコード

    3.4. 応用編:サイト内検索結果が空の場合にエラーメッセージを表示する

    ここからは、今までの内容を応用して、更に利便性の高いサイトを実現するための方法をご紹介する。以下の内容を読み込んでいただくと、content-none.phpというインクルードファイルをわざわざ用意した理由も明確にしていただけるはずだ。

    それでは早速解説していこう。

    WordPressでは構造上、404エラーページ以外にも、ユーザーがアクセスしてしまった場合に、そのページがまだ、又は既に存在しないことを伝え、目的のページを見つける方法を提案してあげるべきページがある。

    その代表例が「サイト内の検索フォームで探してみたが、該当する検索結果が存在しなかった場合のページ」だ。 検索に該当するものがなかった場合に、「検索しましたが見つかりませんでした。」と表示するだけでは味気ない。代わりに、目的のコンテンツを探すための別の方法を示してあげるとユーザーは喜ぶだろう。

    そこで、該当する検索結果が存在しなかった場合のページにも、content-none.phpに記述した内容が表示されるように設定しておこう。

    3.4.1. index.phpを複製してsearch.phpを作る

    検索結果ページをカスタマイズするにはsearch.phpを修正する必要がある。もし、お使いのテーマにsearch.phpがない場合はindex.phpを複製してsearch.phpと名前を変更しよう。

    さて、 index.phpは以下のように記述されている。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?php
      if ( have_posts() ) :
        while ( have_posts() ) : the_post();
    ?>
      <!-- 投稿があった場合の表示 -->
    <?php
        endwhile;
      else :
    ?>
      <!-- 投稿がなかった場合の表示 -->
    <?php
      endif;
    ?>

    6行目から9行目までのコードは、該当するページがあった場合に何を表示するのかを指示するものだ。そして、10行目から13行目までのコードは、該当するページがなかった場合に何を表示するのかを指示するものだ。

    3.4.2. 検索結果ページ用に記述を変更する

    検索結果ページをカスタマイズするには、これを応用して、キーワードに該当するページがあった場合に表示するものと、キーワードに該当するページがなかった場合に表示するものを指示すれば良い。

    具体的には、検索結果があった場合は、検索ワードの含まれる記事の一覧を表示するという指示を、なかった場合はcontent-none.phpの内容を表示するという指示をすれば良い。それを反映したのが下のソースだ。

    search.phpの全ソース文

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <?php
      if ( have_posts() ) :
        while ( have_posts() ) : the_post();
    ?>
       <!-- 検索キーワードに該当するページがあった場合に表示する内容 -->
    <article id="post-<?php echo the_ID(); ?>" <?php post_class(); ?> itemscope="itemscope" itemtype="http://schema.org/BlogPosting">
      <header class="post-header">
        <ul class="post-meta list-inline">
          <li class="date" itemprop="datePublished" datetime="<?php the_time('c');?>"><i class="fa fa-clock-o"></i> <?php the_time('Y.m.d');?></li>
        </ul>
        <h2 class="post-title" itemprop="headline"><a href="<?php the_permalink(); ?>"><?php esc_html(the_title()); ?></a></h2>
      </header>
      <section class="post-content" itemprop="text">
        <?php if( get_the_post_thumbnail() ) { ?>
        <div class="post-thumbnail">
          <a href="<?php the_permalink(); ?>" rel="nofollow"><?php the_post_thumbnail(); ?></a>
        </div>
        <?php } ?>
        <?php the_content('続きを読む'); ?>
      </section>
    </article>
       <!-- 検索キーワードに該当するページがあった場合に表示する内容ここまで -->
    <?php
        endwhile;
      else :
       <!-- 検索キーワードに該当するページがなかった場合に表示する内容-->
        get_template_part('content', 'none');
       <!-- 検索キーワードに該当するページがなかった場合に表示する内容ここまで-->
      endif;
    ?>

    6行目から21行目までがキーワードに該当する検索結果があった場合の指示、27行目がなかった場合の指示だ。

    後者に関しては404.phpを作った時と同じように、content-none.phpを呼び出すためのget_template_part()の記述をしただけのものだ。

    3.4.3 search.phpをアップロード

    search.phpが完成したら404.phpやcontent-none.phpと同じ場所にファイルをアップロードしよう。

    実際に、あなたのサイトの記事にないであろう語句で検索みて確認しておこう。

    9e454bbb326ec9ba7924e87303ef2ef3

    このように冒頭文も検索結果ページ用に作ったものが表示されていることが確認できる。

    なお、このページは404エラーページではなく、あくまでも検索結果がなかった場合に表示されるページなので404HTTPステータスコードの確認は不要だ。


    4. まとめ

    404エラーページに関して抑えておくべきことは以上だ。

    SEO関係者だけでなく、WEBデザイナーやエンジニアの方も、ここで解説した404エラーページの役割に関してはしっかりと覚えておこう。

    そして、是非ユーザーにとっても検索エンジンにとっても利便性の高いサイトを実現するために役立てて欲しい。

    SEO内部対策をより深く理解したい方へ。バズ部のノウハウを全て詰め込みました。

    SEO内部対策

    6記事

    カテゴリー SEO内部対策

    記事をシェアする

    • B!

    無料eBook:バズ部式マーケティング
    広告費を1/10にして売上を倍増させる全手法

    広告に頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているけれど、よく分からないと悩んでいませんか?

    本書は弊社やクライアント様がコンテンツマーケティングに取り組み

    • ・SEOのみで月間100万PV集めた方法
    • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
    • ・CPLやCPAを大幅に改善した方法とそのからくり

    など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

    ぜひ、貴社のWEBマーケティングにもご活用ください。

    eBookをダウンロード

    未読

    参考にしていただきたい事例

    liskulのtopページ

    リスティング広告

    1年でプッシュ型営業からプル型へ!毎月約200件の問い合わせを獲得するデジタルマーケティングブログ

    • SOLDOUT
    • ソウルドアウト株式会社様

    学校 コンテンツマーケティング

    学校・教育

    1年半で億単位の貢献を果たすまでに成長した学校法人のコンテンツマーケティング事例

    • 神田外語学院
    • 神田外語学院 様
    アバター
    • 著者 : バズ部編集部

    ユーザーに届ける価値を徹底的に追及するのがバズ部式マーケティング。
    バズ部では、ユーザー主義を貫きながら、なおかつ数字にこだわり結果を出してきた手法やノウハウを惜しみなく提供していきます。

    • 会社概要
    • 採用情報
    • セミナー
    • サービス紹介
    • 記事一覧

    • 記事まとめ
    • 成功事例
    • バズ部とは

    SEO SEO

    147記事

    3人チームで、6ヶ月以内に成功させる
    よりビジネスを成長させたい方にSEOを攻略するために必要な知識とスキルを全て解説している。 真剣に取り組んでもらえれば、どのような業種の方でも今までをはるかに上回る集客と、コンバージョンを実現することができるようになるだろう。

    1.SEOとは

    • SEOとは
    • 検索エンジンの仕組み
    • Googleアルゴリズムアップデートとは

    この章をより深く理解する

    2.キーワードの選定

    • キーワードの選定方法
    • 関連キーワードとは
    • 検索クエリとは
    • キーワードプランナーの使い方

    この章をより深く理解する

    3.良質なコンテンツの作成

    • コンテンツとは
    • コンテンツSEO

    この章をより深く理解する

    4.SEO内部対策

    • 内部リンクの最適化について
    • ディレクトリ構造
    • タイトルタグの設定
    • 見出しタグの設定
    • 構造化データとは

    この章をより深く理解する

    5.SEO外部対策

    • 被リンクとは
    • 外部リンクについて
    • ページランクとは

    この章をより深く理解する

    全5ステップを読む

    WORDPRESS WordPress

    89記事

    WORDPRESS
    Webの知識が全くない初心者の方でも、WordPressでサイトを作って、実際に集客できるようになるまでの具体的な方法を、インストールから、各種設定のやり方、集客できるコンテンツの作り方まで順序立てて解説しています。

    1.WordPressのインストール

    • 独自ドメインの取得とWordPressインストール
    • レンタルサーバーの契約
    • WordPressのログイン方法
    • WordPressアップデート

    この章をより深く理解する

    2.WordPressのテーマをインストールして デザインを編集しよう

    • テーマの変更方法
    • ウィジェットの追加と編集
    • 人気記事の表示
    • ヘッダー画像の設定
    • カテゴリの設定

    この章をより深く理解する

    3.プラグインのインストール

    • プラグインのインストール
    • WordPressに必須のプラグイン

    この章をより深く理解する

    4.WordPressとソーシャルメディアを連携しよう

    • Facebookとの連携
    • Twitterとの連携

    この章をより深く理解する

    5.WordPressで記事を投稿してみよう

    • 記事の投稿方法
    • 改行や段落の挿入時の注意点
    • 画像を挿入する方法
    • 表を挿入する方法

    この章をより深く理解する

    6.固定ページ機能を使って運営上必要なページを作成しよう。

    • 投稿と固定ページの違い
    • 問い合わせページの作り方
    • 固定ページの使い方

    この章をより深く理解する

    7.WordPressのその他の使い方と 知っておきたい設定

    • WordPressのバックアップ
    • バックアップデータの復元
    • WordPressのユーザー管理
    • WordPressカスタマイズ

    この章をより深く理解する

    全7ステップを読む

    CONTENT MARKETING コンテンツマーケティング

    53記事

    CONTENT MARKETING
    コンテンツマーケティングをどのように行えば大きな成果を出せるのかを全て解説しています。 良質なコンテンツを作り、広めるためのステップを全てご紹介させていただいていますので、ぜひこの通りに実践してみてください。

    1.コンテンツマーケティングとは?

    • コンテンツマーケティングとは
    • コンテンツSEOの効果とは

    この章をより深く理解する

    2.顧客の潜在ニーズを捉える

    • 顧客の潜在ニーズ
    • カスタマージャーニーとは

    この章をより深く理解する

    3.良質なコンテンツを作ろう

    • 良質なコンテンツとは
    • SEOコンテンツについて
    • ライティングの技術

    この章をより深く理解する

    全3ステップを読む

    Contents Marketing コンテンツマーケティング101

    53記事

    3人チームで、6ヶ月以内に成功させる
    コンテンツマーケティングはビジネスに大きなインパクトをもたらすマーケティング手法だ。得るはずの成長のチャンスを逃してしまわないようその手法を知ろう。

    1.コンテンツマーケティングとは

    • 企業にコンテンツマーケティングが必要な理由

    この章をより深く理解する

    2.コンテンツマーケティングをやるべきなのか

    • 自社で取り組むべきか判断しよう
    • 実践検討段階でよくある50の質問

    この章をより深く理解する

    3.あなのブランドストーリーは何か?

    • メディア・ビジョンの設定について
    • ペルソナ設定のコツ

    この章をより深く理解する

    4.コンテンツマーケティングの設計

    • コンテンツマーケティングの設計
    • コンバージョンの獲得について
    • コンテンツを効果的に拡散する方法
    • KPIの設計について

    この章をより深く理解する

    5.社内調整と体制づくり

    • 体制構築のチェックリスト

    この章をより深く理解する

    全5ステップを読む

    OTHERESその他のカテゴリー

    • ソーシャルメディア
    • メルマガ
    • ランディングページ
    • セミナー

    CASE STUDY

    大企業・中小企業問わず。 真剣に行えば必ず結果は付いてくる。

    コンテンツを正しく理解すること。成果を出すはじめの一歩です。

    成功事例一覧へ

    アプリサービス

    わずか8ヶ月で月間140万PVを実現したアプリ企業メディア成功事例

    • みんちゃれ
    • エーテンラボ株式会社 様

    ウェルスハック

    不動産

    わずか10ヶ月で14.6億円の売上を叩き出した不動産会社様のコンテンツマーケティング事例

    • ウェルスハック
    • 武蔵コーポレーション株式会社 様

    学校 コンテンツマーケティング

    学校・教育

    1年半で億単位の貢献を果たすまでに成長した学校法人のコンテンツマーケティング事例

    • 神田外語学院
    • 神田外語学院 様

    ファイナンシャルプランナー事務所

    はじめてのWEBマーケティングで、月50件の個別相談を獲得したファイナンシャルプランナー事務所

    • おかねの小槌
    • 有限会社ライフドアーズ 様

    ソラサポトップページ

    太陽光発電

    わずか6ヶ月でアクセス数が12倍に!ニッチなキーワードだけで18万PVまで流入を増やした太陽光発電メディア

    • ソーラーサポートセンター
    • 株式会社中京ソーラー 様

    liskulのtopページ

    リスティング広告

    1年でプッシュ型営業からプル型へ!毎月約200件の問い合わせを獲得するデジタルマーケティングブログ

    • SOLDOUT
    • ソウルドアウト株式会社様

    ECサイト

    月間140万PV・月間販売800件超!自社メディアで圧倒的な成果を出すECサイトのコンテンツマーケティング

    • ストレッチーポールブログ
    • 株式会社LPN 様

    ホームセレクト

    不動産

    【PV数13倍に増加】毎月コンスタントに問い合わせを獲得できた記事代行事例

    • ホームセレクト
    • 株式会社ホームセレクト 様

    開始9ヶ月後に前年比売上げが3倍以上を達成。通年で見ても前年比 約2倍の売上を達成!

    • pliquabook
    • 株式会社プリカ様

    弁護士事務所

    問い合わせが月4,400件以上!自社メディアで驚異的なCV数を生み出した弁護士事務所

    • ベリーベスト法律事務所様

    歯科医

    月間500万PVを達成し、毎月の新規の来院患者数が657%増加した歯医者のブログ

    • おかざき歯科クリニック 様

    保険

    月間940,346PVを達成し、毎月の保険の加入や見直しのお申し込み数が70件以上に

    月間29万PVを達成し、毎月30件以上のお問い合わせを獲得した屋根修理に関するブログ

    コンテンツマーケティング開始後、わずか20記事の投稿で月間20万PVを達成し、ブログ開始わずか3日で2冊の本を出版した会計士のブログ

    • ビズ部
    • 株式会社アカウンタックス様

    化粧品

    月間90万PV!ニキビ関連の主要キーワードで上位表示し続ける「ニキペディア」の成功の秘訣とは?

    • ニキペディア
    • ガシーレンカージャパン株式会社 様

    セキュリティ製品

    たった2人で世界でも認められる成果をあげたノートンブログのコンテンツマーケティング

    • 株式会社シマンテック 様

    学校・英会話

    週に1記事の更新で月間65万PV、月間200件超のお問い合わせを獲得するベルリッツブログ

    • ベルリッツ
    • ベルリッツ・ジャパン株式会社 様

    a tropical garden

    観葉植物のレンタルおよびグリーンディスプレイ制作

    83コンテンツの内、51コンテンツが検索結果で1位に表示されるサイトに成長

    • A Tropical Garden
    • 井上熱帯園株式会社 様

    ABOUT US

    ユーザーに届ける価値を徹底的に追求するマーケティングを提供します

    私たちは誰よりもユーザー主義を貫くコンテンツマーケティングを実践しています。

    • 運営者情報
    • 採用情報
    • 資料請求
    • セミナー
    • 半年で業界トップの集客を目指す

      コンテンツマーケティング 運用支援・代行

      「その通りやれば必ず結果が出る戦略と設計」 成果の出る正しいコンテンツマーケティングによってあなたに圧倒的な成果を提供します。

    • 理想的なSEO内部構造を実現

      web制作

      サイト制作、ブログ機能、サーバー環境、サイト保守など、成果を出すために本当に必要な要素を厳選して取り揃えた、Webサイト制作・保守サービスです。

    • 常識を覆す高品質コンテンツを提供

      コンテンツ制作代行

      私たちは「真に良質なコンテンツ」を提供することを理念に掲げ、プロと呼ぶに相応しいバズ部公認ライターとバズ部スタッフが共同作業で記事を執筆しご納品致します。

    ユーザーに届ける価値を
    徹底的に追求するマーケティングを提供します

    • 半年で業界トップの集客を目指す

      コンテンツマーケティング支援・代行

    • 理想的SEO内部構造を提案

      Web制作

    • 常識を覆す高品質コンテンツを提供

      コンテンツ制作代行

    • ご相談・お問い合わせ
    • 資料ダウンロード

    icon

    株式会社ルーシー東京都港区西新橋2-7-4 CJビル11階

    ABOUT US

    • 運営者情報
    • セミナー
    • 採用情報
    • お問い合わせ
    • プライバシーポリシー

    CATEGORY

    • コンテンツマーケティング
    • SEO
    • WordPress
    • ランディングページ
    • ソーシャルメディア
    • メルマガ
    • バズ部の全記事一覧
    • コンテンツマーケティング101

    SERVICES

    • サービス一覧ページ
    • コンテンツマーケティングサービス
    • 記事制作代行
    • 集客方特化サイト「バズ部式」
    • オウンドメディア立ち上げサービス
    • コンテンツマーケティング研修
    • オリジナルのWordPressテーマ

    DOWNLOAD

    • 広告費を1/10にして売上を倍増させる全手法
    • バズ部が運営する月間20万PV超サイト11の生データ集
    • コンテンツマーケティングサービス資料
    • 良質なコンテンツを作成するための20のコツ

    CASE

    • 成功事例一覧
    • はじめてのWEBマーケティングで、月50件の個別相談を獲得したファイナンシャルプランナー事務所
    • わずか6ヶ月でアクセス数が12倍に!ニッチなキーワードだけで18万PVまで流入を増やした太陽光発電メディア
    • 1年でプッシュ型営業からプル型へ!毎月約200件の問い合わせを獲得するデジタルマーケティングブログ
    • 月間140万PV・月間販売800件超!自社メディアで圧倒的な成果を出すECサイト
    • 問い合わせが月4,400件以上!自社メディアで驚異的なCV数を生み出した弁護士事務所
    • 月間500万PVを達成し、毎月の新規の来院患者数が657%増加した歯医者のブログ
    • 月間940,346PVを達成し、毎月の保険の加入や見直しのお申し込み数が70件以上に
    • 月間29万PVを達成し、毎月30件以上のお問い合わせを獲得した屋根修理に関するブログ
    • 前年同月と比べて3倍以上の売上を達成したアパレル企業
    • たったの20記事で月間20万PV突破!ブログがきっかけで書籍も2冊出版
    • 月間90万PV!ニキビ関連の主要キーワードで上位表示し続ける「ニキペディア」の成功の秘訣とは?
    • たった2人で世界でも認められる成果をあげたノートンブログのコンテンツマーケティング
    • 週に1記事の更新で月間65万PV、月間200件超のお問い合わせを獲得するベルリッツブログ
    • 83コンテンツ中51コンテンツが検索結果で1位に表示されるサイトに成長

    © Copyright 2023 バズ部. All rights reserved.