[み]Webサイトのメンテナンス中の画面を表示させる方法 .htaccess を使うのがおススメです

Webサイトのリニューアルだったり、WordPressのテーマを入れ替えたりするときに、このWebサイトはメンテナンス中です!っていうのを、閲覧者にも検索エンジンにもきちんと伝える方法を紹介します。

超ダメな例

メンテナンス中であることを表示するhtmlファイルをつくり、ドメイン直下に index.html としておく。

この方法は、

  • トップページをブックマークしていてそのブックマークからやってきた人
  • 検索からトップページを開いた人

に対しては有効です。

ですが、

  • トップページ以外をブックマークしていてそのブックマークからやってきた人
  • 検索からトップページ以外を開いた人

に対しては、表示の崩れたページ、あるいは 404 ページが表示される可能性が大です…

.htaccess を使ってメンテナンス中を表示させる

ダメな例を紹介しましたが、良い例は、.htaccess を使ってメンテナンス中を表示するページへリダイレクトさせることです。

では、具体的な手順です。

  1. メンテナンス中であることを表示する htmlファイル(ここでは maintenance.html)をつくります。
  2. .htaccess に次のコードを追加します。(.htaccess が無い場合は新規で作成してください)
    ErrorDocument 503 /maintenance.html

    <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteCond %{REQUEST_URI} !=/maintenance.html
      RewriteRule ^.*$ - [R=503,L]
    </IfModule>
  3. この .htaccessをドメイン直下に置く

基本的にはこれでOKです。

管理者からはメンテナンス中表示がでないようにする .htaccess

Webサイトをメンテナンスするのに、管理者からもメンテナンス中の表示が見えてしまっては、作業もなかなか大変です。ですので、メンテナンスをする人のIPアドレスからのアクセス時には、メンテナンス中の表示がされないように .htaccess を修正します。

ErrorDocument 503 /maintenance.html

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_URI} !=/maintenance.html
  RewriteCond %{REMOTE_ADDR} !=xxx.xxx.xxx.xxx
  RewriteRule ^.*$ - [R=503,L]
</IfModule>

xxx.xxx.xxx.xxx のところに管理者のIPアドレスをいれます。自分のIPアドレス?という方は、こちらから調べることができます。
アクセス情報【使用中のIPアドレス確認】

メンテナンス中を表示するページで画像・スタイルシート・Javascriptを使いたいとき

メンテナンス中を表示するページで画像ファイル(jpg・pngなど)を使おうとしても、メンテナンス中を表示するページにリダイレクトしてしまうので画像を表示できません。スタイルシート(css)Javascript(js)も同様です。jQueryなんかは、Googleが提供しているものなど外部サーバーのもので対応できますし、スタイルシートも htmlファイルの head内に書いてしまえばいいんですが、.htaccess を修正することでも対応できます。

ErrorDocument 503 /maintenance.html

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_URI} !=/maintenance.html
  RewriteCond %{REMOTE_ADDR} !=xxx.xxx.xxx.xxx
  RewriteCond %{REQUEST_FILENAME} !\.(css|jpe?g|gif|png|js)$
  RewriteRule ^.*$ - [R=503,L]
</IfModule>

これで、.css .jpg .jpeg .gif .png .js ファイルへのアクセスはメンテナンス中を表示するページへのリダイレクトは行われず、正常に表示されます。

メンテナンス中を表示するページを準備するのが面倒な方へ

メンテナンス中のページを準備することすら面倒だとか、5分とか10分とか本当に短時間でメンテナンスが終わるとかの場合、htmlファイルを準備せずとも、どのページへアクセスしてもWebサイトがメンテナンス中であることを表示できます。

.htaccess に次のコードを追加してください。

ErrorDocument 503 "Sorry. We're under maintenance."
RedirectMatch 503 .*

このコードでいう Sorry. We’re under maintenance. の部分が表示されます。検索エンジンに対しては 503 が返るので、メンテナンス中であることを伝えられます。

でも、一般の人からしてみたら、やっぱりある程度デザインされたページが表示されないと、そのWebサイトに何かよからぬことが起こっている… みたいに勘違いしてしまう可能性がありますよね。

メンテナンス中を表示する htmlファイルのサンプル

メンテナンス中を表示する htmlファイルを作るのが面倒な方へサンプルを置いておきます。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>メンテナンス中です</title>
<style>
h1,p {text-align: center;}
</style>
</head>
<body>
<header>
<h1>メンテナンス中です</h1>
</header>
<article>
<p>申し訳ございません。ただいまメンテナンス中です。<br />Sorry. We're under maintenance.</p>
<p>メンテナンスの終了は午前2:00を予定しております。<br />Maintenance will be finished at 2:00AM.</p>
</article>
<footer>
<p>&copy; みはら.com</p>
</footer>
</body>
</html>

CSS は好きなように足したり引いたりしてください。それと、英語もいまいち自信がないので…

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup