パソコンの有効活用で、ホームページの作成を始めました。
自作パソコンや周辺機器、スマホに関する話題です。
root化 や 部品交換等の改造もメモしています。
使用している気に入ったアプリの紹介・・等々。
   

ホームページ作成時 .htaccess設置方法

.htaccess メニュー
  1. .htaccess ファイル の 基本ルール
  2. 自動転送(リダイレクト)する方法
  3. http:// へのアクセスを https://自動的に変換する設定(常時SSL化)
     「301」リダイレクトを使用
  4. 「301」リダイレクト転送されたかを確認する方法
  5. ページの表示速度が遅く表示されるまでに時間がかかることへの対策
  6. ホームページを更新した時など、キャッシュを使用せずに表示させたい時

.htaccess ファイル の 基本ルール

  • .htaccess ファイル はテキストファイルです。
  • ファイル名の先頭に「.」を忘れないようにします。
    「.」を付けて保存できないテキストエディタの場合は、後でリネームで付け加えます。
  • サーバーの各フォルダに1個づつ配置できます。
  • 配置された .htaccess ファイルは下位のフォルダに対しても有効です。
  • 配置された .htaccess ファイルは上位のフォルダに対しては全く影響しません。
  • 上位と下位の内容が競合する場合に優先されるのは下位の方になります。
  • 内容に日本語を含む場合 .htaccessファイルの文字コードは、UTF-8N(BOM無し)、改行コードはLFを設定します。
    半角英数字だけの場合は文字コードは、Shift-JIS や EUC-JP などでも問題無し。
  • 「ASCII 転送」または「テキストモード」でアップロードします。
  • わかりやすくコメントを付ける時は、行頭に # を付けます。
      ############################
      # 自動的に新しいページにリダイレクトする  #
      ############################
      Redirect permanent / http://syumi3.com/
      
    のように記入します。
  • ファイルの最後には必ず改行(空白行)のみを入れます。
     (一行以上の空白行を入れても大丈夫)

旧サーバーへのすべてのアクセス を
  新サーバー へ 自動転送(リダイレクト)する方法

ウェブサイト全体を一括転送(リダイレクト)させる場合

サーバーが異なるだけで、フォルダ構成やファイルが全く同じ場合に使用できます。
ファイルが存在しない場合はエラーとなります。

下記の内容の.htaccess ファイルを、転送元のルートに配置すると、ブラウザーが.htaccess ファイルを読込み自動的に新サーバーへ転送してくれます。

  • 恒久的に移転する場合の自動転送方法・・・「301」リダイレクト
      Redirect permanent [転送元] [転送先]
  • 一時的に移転する場合の自動転送方法・・・「302」リダイレクト
      Redirect temp [転送元] [転送先]


ブラウザの動作はどちらも同じですが、検索サイトのデータベースへの登録には影響するようです。

  • 検索サイトに転送URLを登録して欲しい時 = 恒久的に転送
  • 検索サイトに転送URLを登録して欲しい時 = 一時的に転送


私は上記の「301」リダイレクトという方法を用いました。これはGoogle検索でも推奨されているようです。


2018年9月の私のサーバーの移動の場合

元のサイト http://syumi3.html.xdomain.jp/ のルートに .htaccess ファイルを配置します。

.htaccess ファイルに追加する内容として、

元のサイト http://syumi3.html.xdomain.jp/ 以下の全アクセスを、恒久的

新サイト https://syumi3.com/ へ自動転送(リダイレクト)させたい場合は、以下のように記述します。


.htaccess ファイルに追加

Redirect permanent / https://syumi3.com/


この場合は、転送 http://syumi3.html.xdomain.jp/ が「/」で、
転送が「https://syumi3.com/」です。

.htaccess ファイルを設置している http://syumi3.html.xdomain.jp/ のルートを「/」で表します。

上記の1行を記述するだけで、トップページだけではなく、旧サイトへのあらゆるアクセスがすべて新サイトへ転送されます。

思い通りに「301」リダイレクトで転送されたかを確認

ウェブサイトの一部のフォルダへのアクセスだけを、
     別のサイトへ転送(リダイレクト)する方法

指定されたフォルダ内のすべてのファイルとフォルダを含みます。

転送先のフォルダ名は同一でも異なっても大丈夫です。しかし転送先にファイルが存在しない場合はエラーとなります。

元のサイトの http://syumi3.html.xdomain.jp/sonota/ だけへのアクセスを、

新サイト http://syumi3.com/turi/ へ転送させたい場合は、以下のように記述します。


.htaccess ファイルに追加

Redirect permanent /sonota/ http://syumi3.com/turi/


この場合は、転送が「/sonota/」で転送が「http://syumi3.com/turi/」です。

指定のフォルダ「/sonota/」以下のすべてのアクセスが、
新サイトの「http://syumi3.com/turi/」へ転送(リダイレクト)されます。

しかしファイルが存在しない場合はエラーとなります。

特定のページへのアクセスを、
  別の名前のページに自動転送(リダイレクト)する方法

ホームページ内の一部のページのファイル名を変更した場合、google 等で検索されて飛んできた時「File not Found」というメッセージが出て表示されません。

今回は、Cheerson-cx-10wd.html というファイルの先頭の大文字を、小文字の cheerson-cx-10wd.html に変更したためファイルを開けなくなりました。(大文字小文字を区別するため)


対処方法

ホームページのファイル名を変更したり、大文字小文字を変更したとき、File not Found のエラーが出て表示されなくなってしまう。

今回は Cheerson-cx-10wd.html を cheerson-cx-10wd.html にリダイレクトさせる。

対策として下記のような .htaccess ファイルをサーバーのルートフォルダに設置します。

転送先は、同一サーバー内でも、別のサーバーでも転送できます。


.htaccess ファイルに追加
############################
# 自動的に新しいページにリダイレクトする  #
############################
RewriteEngine on
RewriteRule ^radio-control/html_radio-control/Cheerson-cx-10wd.html$ http://syumi3.com/radio-control/html_radio-control/cheerson-cx-10wd.html [R=301,L]


注意・・・

上記の RewriteRule ^radio- から 最後の [R=301,L] までは同じ1行で記述します。

RewriteRule と ^radio-controll の間には半角のスペースが入ります。

cx-10wd.html$ と http://syumi3.com の間には半角のスペースが入ります。

cheerson-cx-10wd.html と [R=301,L] の間には半角のスペースが入ります。

http:// へのアクセスを
  https:// に自動的に変換する設定(常時SSL化)

StarSever にて、独自SSLの設定が完了した時点では、自動的に「https://~」のURLへ転送されません。

Webサイトにおけるすべての表示を常時SSL化する場合は、以下の記述を.htaccessに追記し、
http://~」のURLでアクセスした際、自動的に「https://~」のURLへ転送されるように設定します。

ここでも「301」リダイレクトという方法を用いています。(Google推奨)


.htaccess ファイルに追加

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]


これで「http://~」へのアクセスは、自動的に「https://~」へ転送されます。

思い通りに「301」リダイレクトで転送されたかを確認

「301」と「302」リダイレクトで転送されたかを確認する方法

「301」または「302」リダイレクトができているのか、チェックするサービスがあります。

WEB便利ツールABASHIさんが提供しているリダイレクトチェッカーのサービスを利用させていただきます。

  1. リダイレクトチェッカーの 「URL」の欄に、転送元のホームページのアドレスを入力
  2. 「チェックする」ボタンをクリックすると、リダイレクト先のURLを表示します
  3. 実行結果の「リダイレクト」の「ステータス」の欄に、「301」や「302」が表示されればOK
    下記の例のように、転送元のステータスが「301」で転送先が「200」となれば正常です。
    No URL ステータス 種類
    1 http://syumi3.html.xdomain.jp/index.html 301 http
    2 https://syumi3.com/index.html 200  

ページの表示速度が遅く完全に表示されるまでに時間がかかる対策

色々と調べてみたが転送負荷が大きい画像を減らすとページの表示が少し速くなるようだ。

しかしあまり画像の画質を落としたくない。

対策として下記のような.htaccess ファイルを設置し、転送に時間がかかる画像ファイルのキャッシュ期間を設定することで、再表示を少しでも早くする方法を取ってみた。

これを使用しても初回の表示には当然時間がかかるが、ページ間を移動し元のページに戻ってきた時や、タイトルに同じ画像が使われている時のページ表示等にかかる時間を短縮できる。

一旦アップした画像の変更は殆ど無い為キャッシュの期間を大きく設定しても問題なさそうである。

色々調整しながら様子を見ることにした。


.htaccess ファイルに追加

## ブラウザにキャッシュさせ表示レスポンスを早くさせる ##
## EXPIRES CACHING キャッシュさせる期間を設定する ##
## キャッシュさせない時は access plus 0 seconds ##

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/vnd.microsoft.icon "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

## EXPIRES CACHING ##

# ホームページを更新した時にキャッシュを使用しないように設定させる #
# 使用する時は、行の先頭の # を削除する #

# <Files ~ "\.(html|css)$">
# Header add Pragma "no-cache"
# Header set Cache-Control no-cache
# </Files>

ホームページを更新した時など、
  キャッシュを使用せずに表示させたい時

ホームページを更新した時など、ブラウザでキャッシュを使用せずに表示させたい時は、.htaccessの中に下記の記述を追加します。

しかし全てのブラウザでのキャッシュの使用を制御できないようです。


.htaccess ファイルに追加

# ホームページを更新した時に #
# キャッシュを使用しないように設定させる #

<Files ~ "\.(html|css)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>