SEOに効果あり!404エラーページのカスタマイズ

SEOに効果あり!404エラーページのカスタマイズ

404エラー画面のカスタマイズ

 

「404エラーページ」をカスタマイズするとSEOに効果があるというのをご存知ですか?
わかっていても「どうやったらカスタマイズしたページが作れるの?」と感じている方も多いと思います。このページで実践してみますので、ぜひ参考にして下さい。

 

 

カスタマイズ404ページが作成できる もくじ

 

 

○オリジナルの404ページを作ってみた
  ・カスタマイズされた404ページはSEOにもよい
  ・404エラーとは?
  ・オリジナル画面を具体的に作ってみる
  ・.htaccessへの記述とアップロード

 

○SIRIUSならもっと簡単に作成できる

 

 

 

オリジナルの404ページを作ってみた

 

 

カスタマイズされた404ページはSEOにもよい

 

 

 

平成26年3月30日

 

 

 

「へぇー。オリジナルの404エラーページを作ると
SEOにいいんだ。」

 

URLエラーの記事を作る際に
下のような記事を見つけました

 

有益な 404 ページを作成する
パンダアップデート対策のために質の高いカスタム404ページを作成しよう

 

エラーページの良し悪しまで
googleが品質評価するという
ことでした

 

ちょっと試しに作ってみようと
「オリジナル404エラーページ」
を作ってみました。

 

気軽に考えてましたが、簡単な
デザインで丸一日かかってしまい
ました。

 

作成を一からご説明します
苦戦したところについても
解説できると思います。

 

 

 

404エラーとは?

 

 

 

ちなみに「404エラー」とは、検索
したページが存在しなかったときに
発生するエラーです。

 

googleウェブマスターツールに
解説がありますのでご参考まで。

 

「ページが見つかりません」エラーについて

 

ページが見つからない際に
表示される画面をオリジナル
で作ってみることをここでやって
ゆきます。

 

 

 

オリジナル画面を具体的に作ってみる

 

 

 

まず、「404エラー カスタマイズ」
で調べると、いろいろと解説して
いるページが出てきます。

 

「404エラーページを作って
「404.html」と名前をつけます。」

 

ほとんどのサイトはたった2,3行
の説明で流してあります

 

「うーん。何をしていけばいいのかわからない」

 

 

 

まずはベースとなる画像を加工する作業

 

 

 

ひとまず、ベースとなる写真を
用意することにしました。

 

自分の画面の大きさを調べる
サイトがありましたので、調べてみました。

 

パソコンの、現在のウィンドウサイズを調べる

 

横 : 1366 × 縦 : 643でした。

 

ヘッダー画像に使用した写真が
2000px×1333pxでしたので
その写真を利用しました。

 

ちなみにこの写真は「永遠の0」
の映画をイメージして購入した
写真です。

 

 

404エラー画面のカスタマイズ

 

 

画面いっぱいに表示させるため
サイズを900px×600pxにリサイズ
しました。

 

この先は「HTML」と「CSS」で
作製するしかなさそうでした。

 

404エラーページを作って
「404.html」と名前をつけます。と
2行で済ましている説明に
腹が立ってきました。

 

「HTML」や「CSS」で作製する
ということは相当苦戦しそうだと
考えて、極力入力を少なくしようと
考えました。

 

そこで、「JTrim」という画像処理
ソフトの文字入れ機能を使うこと
で極力画像上での処理を増やし
楽をしようと考えました。

 

 

404エラー画面のカスタマイズ

 

 

最終的にこのような画像が完成
しました。

 

 

404エラー画面のカスタマイズ

 

 

 

HTMLでリンクを貼り付けしてみる

 

 

 

さて、いよいよHTMLの入力です
メモ帳を開いて入力を始めます。

 

 

404エラー画面のカスタマイズ

 

 

最初は「HTML」と「CSS」の
ふたつのファイルを作成しました
が、極力シンプルにしようと
試行錯誤した結果、「HTML」
のファイル一つで作成しました。

 

HTMLは「404.html」という
ファイル名にして、画像の
指定と配置、トップページと
サイトマップへのリンクと配置
を定めただけのシンプルな
記述です。

 

画像だけを中央寄せすると
下のような画面になります。

 

これだけでも十分404エラー
案内画面として機能します。

 

 

404エラー画面のカスタマイズ

 

 

私はどうしても404ページに
トップページのリンクとサイトマップ
へのリンクを入れたかったので、
HTMLにリンクを入れました。

 

 

<具体的記述内容>

 

404エラー画面
※クリックすると大きな画像が見れます

 

1〜3行目

<body>
<div class='img' style="position:absolute; left:250px">
<img src="http://homepagenotukurikata.com/img/404error900.jpg" alt="404エラー画面" />

 

・「style="position:absolute; left:250px"」で左から250pxの位置に画像を
  置くことを指定

 

・「img src="http://homepagenotukurikata.com/img/404error900.jpg"」で
  画像の保管場所から呼び出しを行う
   ※画像の保管場所は「画像URL」を入力します
   「画像URL」はこちらで説明しました→10分でできる!バナーの貼りつけ

 

・「alt="404エラー画面"」は画像の説明なので" "(ブランク)でもかまいません

 

4〜7行目

<div class='title' style="position:absolute; left:210px; bottom:110px;">
<p><a href="http://homepagenotukurikata.com/">
<strong>トップページへのリンク</strong> http://homepagenotukurikata.com/</a></p></div>

 

・「style="position:absolute; left:210px; bottom:110px;"」で文字の位置指定。
  左から210px下から110px

 

・「<a href="http://homepagenotukurikata.com/"> 文字 </a>」で
  トップページへのリンク指定

 

8〜11行目

<div class='title' style="position:absolute; left:210px; bottom:70px;">
<p><a href="http://homepagenotukurikata.com/sitemap.html">
<strong>サイトマップへのリンク</strong> http://homepagenotukurikata.com/sitemap.html</a></p></div>
</body>

 

・サイトマップへのリンク表示部分
・トップページへのリンクから40px下にずらしているだけ

 

 

上の記述を画像表示すると
このようになります↓↓

 

 

404エラー画面のカスタマイズ

 

 

 

.htaccessへの記述とアップロード

 

 

アップロードの場所と記述内容について

 

 

 

どこに「.htaccess」をUPするかによって
記述が変わってきます。

 

サーバーによりHTMLファイルの
アップロード先の指定があります。

 

私の使っているXserverでは
「X Server Panel」の「エラー
ページ設定」から入ると指定
の設置場所がわかります。

 

 

404エラー画面のカスタマイズ
  ↓↓
404エラー画面のカスタマイズ

 

 

ホームページ直下に設置する
のならこのような記述になります。

 

 

ErrorDocument 404 /404.html

 

 

「/404.html」の前には、トップページ
のURLが省略されています。

 

URLは http://homepagenotukurikata.com/404.html
なので http://homepagenotukurikata.comを
省略したということです。

 

ここは、わかりにくかったので丁寧に
説明してみます。

 

アップロードする場所について、
URL http://homepagenotukurikata.com/404.html
にアップロードしようと思ったら
FTPソフトでは http://homepagenotukurikata.com
直下の「public_html」の
フォルダーの中に入れるので
「 http://homepagenotukurikata.com/public_html/404.html 」
のようになります。

 

画像で表すと↓のようになります

 

 

404エラー画面のアップロードのしかた。FFFTPの画面
※クリックすると大きな画像が見れます

 

 

http://homepagenotukurikata.com の直下に
アップロードするとうまくいきませんので
ご注意を。

 

どうですか?
うまくできましたか?

 

 

 

.htaccessファイルへの記載

 

 

 

メモ帳に「ErrorDocument・・・」の
上記一行を記載し.txtなどの拡張子
をつけずに、名前を「.htaccess」と
したファイルを作成します。

 

「.htaccess」ファイルの作り方は
こんなサイトを参考にしていただければ
いいです

 

  →.htaccessファイルの書き方と設置方法

 

 

「.htaccess」ファイルはHTML
ファイルと一緒にアップロードします。

 

アップロードは「FFFTP」などの
ソフトを適宜利用してください。

 

※ご参考→忘れると致命的な○○の登録【ひとまずサイト公開完了です!】

 

アップロードができたら完成です。

 

 

 

SIRIUSならもっと簡単に作成できる

 

 

 

SIRIUSをお使いの方ならもっと
簡単にカスタマイズしたページが
作れます。

 

エラーページはトップ直下に
作成します。

 

 

404エラー画面のカスタマイズ

 

 

画像は別途、横幅750pxの
ものを用意しました。

 

ページの記述内容もいたって
シンプルです。

 

 

siriusの404エラー画面のカスタマイズ

 

 

そして公開表示を「メニュー上
のみ非公開」に設定します。

 

 

404エラー画面のカスタマイズ

 

 

エントリーページの「上級者向け
設定」の<head>タグに下の
記述を入力します。

 

私はこのページだけ1カラムに
したかったので、メニューバーを
非表示にして、「このページのみ
1カラムにする」を選択しました。

 

 

404エラー画面のカスタマイズ

 

 

最後に「.htaccess」に次の
一行を記述して出来上がり
です。

 

 

404エラー画面のカスタマイズ

 

 

出来上がったページは下の
ようになりました。

 

 

404error
※今はシリウスエラーページを使っていません
404エラー画面のカスタマイズ

 

 

とってもカンタンに作成できますので
SIRIUSをお使いの方にはぜひ
おすすめします。

 

 

 

 

※もし「よかった」と思う記事がありましたら、あなたが使っておられる
 SNSで当サイトをご紹介ください。どうぞよろしくお願いします。

 

 

よく読まれる関連ページ

 

  ↓↓一番左をクリックしていくと、順にサイトを見ることができます

クロールの効率性を追求!robots.txtへのリンク画像

クロールの効率性を追求!robots.txt

301リダイレクトで個別ページのURLを整理できるへのリンク画像

301リダイレクトで個別ページのURLを整理できる

SIRIUS【簡単にサイト公開しませんか?】へのリンク画像

SIRIUS【簡単にサイト公開しませんか?】

よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)うへのリンク画像

よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)う

 


Top相互リンクをいただいているサイトです。

簡単無料ホームページ

簡単に無料でホームページ作成。掲示板、ブログ、アルバム、携帯サイト、メールマガジン、お問合せフォーム、リンク集等の便利機能付き。商用利用もOKです



SEOに効果あり!404エラーページのカスタマイズ関連ページ

絶対に間違いのないSEO最新マニュアル
全13工程でサイト改善!「検索エンジン最適化スターターガイド」
3秒でチェック!!形式的SEO対策をあなたにこっそり教えます
アクセスアップのためにやっちゃった失敗をお教えします
被リンクについて最低限知っておくべき10のポイント
5分でわかる!具体的相互リンクの手順
サイト公開するなら、最低限canonicalタグを使いこなせ!
超簡単!重複コンテンツ整理のための.htaccess設定方法
Googleが伝える、適切な「alt属性の入力」のススメ
あなたは外部Javascriptを利用する目的を知っていますか?
よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)う
301リダイレクトで個別ページのURLを整理できる
みんなに伝えたい!正しいサイトマップの「作り方」「送り方」
クリック率アップ!リッチスニペット導入でライバルサイトに差をつけろ
パンくずリストをリッチスニペットで表現してみた!
お手軽にリッチスニペット!構造化マークアップ支援ツール
進化しているデータハイライターを、あなたにもぜひ体験してほしい
とにかく目立つ!リッチスニペット著者情報の作り方
レシピを出すなら試したい!リッチスニペットを使った目立つ検索表示
rel=”nofollow”使いこなし術を解説!正しい使い方をご存知?
これで安心!URLエラーの大半は簡単に処理できる。修正方法を解説
エラーページを処理する5つの方法
クロールの効率性を追求!robots.txt
よくわかる!noindexメタタグの正しい使い方
たった1分で劇的に改善!ページスピード高速化の方法
3行入力するだけ!誰でもできる圧縮によるサイト高速化
もっと早く導入すればよかった。画像圧縮ソフトによるサイト高速化
正しい対処の仕方をご存知ですか?放置できないソフト404エラー
鳥肌が立つほどカンタン!1クリックで終わる表示速度高速化
「誘導ページ」でペナルティを受けないための5つのチェックポイント
あなたのサイトは「モバイルフレンドリー」ですか?
rel="canonical"をもっともっと知りたい!
ホームページ、ブログの削除のしかた

 
ブログパーツ
トップページ 目次 サイト公開までのプロセス プロフィール お問い合わせ