オリジナルデザインの404ページを作成する方法

404ページ とは

404ページとは、ユーザーがWebサイト上で存在しないページにアクセスしようとした(無効なリンクをクリックした、ページが削除されている、URL を間違えて入力したなど)ときに表示されるページです。
bingo!CMSでは、デフォルト以外にオリジナルデザインの404ページを作成できます。
オリジナルデザインを用意することで、Webサイトの世界観を損なうことなくユーザーを適切なページへ誘導できます。

なお、Googleが推奨する、404ページのカスタマイズに関するガイドラインは下記の通りです。

〜(略)〜

404 ページをわかりやすくカスタマイズすることにより、探している情報の場所をユーザーに知らせることができます。また、役に立つ他のコンテンツを提供して、サイト内をさらに探すよう促すこともできます。有用なカスタム 404 ページを設計するためのヒントは次のとおりです。

  • ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく平易な言葉を使用します。
  • 404 ページを、サイトのその他の部分と同じデザイン(ナビゲーションを含む)にします。
  • 最も人気のある記事や投稿へのリンクの他、ホームページへのリンクを追加します。
  • 無効なリンクを報告する方法をユーザーに提供することを検討します。

カスタム 404 ページは、ユーザー専用に作成されます。このようなページは検索エンジンの観点からは役に立たないため、サーバーはページがインデックスに登録されないように、404 HTTP ステータス コードを返す必要があります。

引用:Google 検索セントラル

bingo!CMSでの実装方法

ディレクトリ「404」を作成する

ディレクトリに「404」(http(s)://サイトURL/404/)を作成するとそのページは404ページとして認識されます。
別途.htaccess等を記述しなくても、ユーザーが存在しないページにアクセスした際に404ページを表示するよう処理されます。

まずは「404」というディレクトリ名のグローバルメニューを作成します。

bingo!CMS管理画面の メニュー&ページ管理 にある、 メニュー操作 ▼ のプルダウンから メニューを追加する をクリックします。

以下を除く設定は任意です。
前述のGoogleのガイドラインを踏まえた設定をおすすめします。

■ 設定のポイント

  • メニュー表示(PC・スマートフォン)
  • 404ページをグローバルメニューに表示する必要はないので「非表示」にします。
  • サイトマップ表示(PC・スマートフォン)
    404ページはサイトマップ(HTMLサイトマップ)に表示する必要はないので「非表示」にします。
  • sitemap.xmlへの出力
    404ページはGoogle検索など検索エンジンの検索結果一覧に表示する必要はないので「出力しない」にします。
  • ディレクトリ名
    必ず「404」と入力してください。
  • 初期テンプレート選択(PC・スマートフォン)
    任意のテンプレートを選択します。

設定後は、確認画面へ進む から 保存 をクリックします。

ディレクトリ「404」が作成されました。
続いて、404ページのコンテンツを作成します。

404ページのコンテンツを作成する

まずは404ページの基本情報を設定します。
404ページの 基本情報 をクリックし、設定画面に入ります。

以下を除く設定は任意です。

■ 設定のポイント

  • NOINDEX,NOFOLLOW設定
    404ページはGoogle検索など検索エンジンの検索結果一覧に表示する必要はないので「設定する」にチェックを入れます。

設定後は、確認画面へ進む から 保存 をクリックします。

404ページの基本情報が設定できました。

続いて、404ページのコンテンツを作成します。
ページ編集 をクリックし、ページ編集画面に入ります。

404ページのコンテンツは任意です。
前述のGoogleのガイドラインを参考にデザインしてください。
一例として、サイトマップユニットの設定方法をご紹介します。

ユニットモードのプルダウンから 機能ユニット を選択し、サイトマップユニット をドラッグ&ドロップでページに配置します。

サイトマップユニットのポップアップメニューから、ユニット編集 をクリックします。

サイトマップユニットの編集画面が開くので、そのまま何も設定せず 保存 をクリックします。

グローバルメニュー設定の『サイトマップ表示』で、「表示」を選択したメニューが自動的に出力されます。
タイトルやテキストなどを任意で設定し、404ページを完成させます。

最後にページを公開すれば完了です。

ページトップ