本記事のリンクには広告が含まれています。

ブログ

エックスサーバ-のhtaccessで301リダイレクトを設定した記録【初心者向け】

ソースコード

これは、ウェブの知識がなく、右も左もわからない初心者ブロガーがプラグインを使わずに「.htaccess(ドットエイチティーアクセス)」ファイルを使って301リダイレクト(旧ページから新ページへの転送)を設定した方法の記録です。

きっかけは、ワードプレス記事のパーマリンクを日本語から英数字に変更したことで、インデックスされた記事が「ページがみつかりません」という404エラーになっていることに気づいたからでした。

いかにも初心者にありがちなトラブルなので参考記事はあるのですが、私に知識がなさ過ぎて、当たり前のようにでてくる専門用語の意味が分からず、また調べて~、ということをしていたら理解するまでにだいぶ時間がかかりました。

ブログ開設から2か月の超初心者の私が、必死で調べて設定した方法を、自分自身が忘れないよう備忘録の意味も込め、専門用語解説も含めて初心者向けに記事にまとめました。

リダイレクトが必要となった原因と状況

冒頭にも書いたように、ことの発端はパーマリンクの変更。

初心者の私は何も考えず、その意味も知らず、パーマリンクに日本語を設定していましたが、ある日、URLに日本語が含まれているとデメリットがあるので一般的に推奨されていないことを知りました。

日本語のデメリット

日本語は本来URLでは使えない文字なので、エンコード(日本語を英数字に変換)されるが、そのときにURLが意味不明な文字の羅列となる。

下のリンクは「 https://78lifelog.com/【防水実験】アローズの”小松精練” リュックに水かけてみた/」という日本語URLですが、エンコード後の本来のURLの形はこのように長くなっています。

https://78lifelog.com/%e3%80%90%e9%98%b2%e6%b0%b4%e5%ae%9f%e9%a8%93%e3%80%91%e3%82%a2%e3%83%ad%e3%83%bc%e3%82%ba%e3%81%ae%e5%b0%8f%e6%9d%be%e7%b2%be%e7%b7%b4-%e3%83%aa%e3%83%a5%e3%83%83%e3%82%af%e3%81%ab/

もちろん有効なURLですし、SEO的には日本語URLが劣ることはないという意見もありますが、

SNSなどでシェアされたときにこの長い文字列が表示されたり、Google Search Consoleのヘルプにも「シンプルに意味のある単語を使用しURLを構成することが望ましい」旨の記述があるので、パーマリンクを変更することにしました。

パーマリンク変更点

(変更前)https://78lifelog.com/【防水実験】アローズの”小松精練” リュックに水かけてみた/

(変更後)https://78lifelog.com/komatsuseiren-backpack/

パーマリンクとは

記事ごとに個別に与えられたURLの末尾部分のことで、先のURLでいうドメイン以下の黄色のアンダーラインの部分です。

URLの末尾部分ということは、いわば記事の住所の一部なので、そこを変更するということは、ただっぴろいウェブの世界で引っ越しをするようなもの。

普通住所が変われば、転居先へ連絡が届くよう転送届を出すものですが、その転送届に相当する「リダイレクト」という処理を忘れていたため、今回のトラブルに発展した模様。

リダイレクトとは

あるページにアクセスしたときに別のページへ転送する仕組みです。

301リダイレクト(恒久的な転送)や302リダイレクト(一時的な転送)など、いろいろ種類がありますが、この記事では301リダイレクトのことを説明しています。

今回のようにパーマリンクを変更した際には、旧住所にはなにもないので新住所へ転送してあげる必要があったようです。

調べてみると、ワードプレスには自動的にリダイレクトを設定する仕組みがあるようですが、私の場合は機能しませんでした。ワードプレスのパーマリンク設定の構成の変更の仕方によって自動リダイレクトの適否が変わるようです。

/%category%/%postname%/

例えば、パーマリンク構成が上記のように「カテゴリー、投稿名」という構成になっているときに、カテゴリ-部分だけを排除するという形なら自動リダイレクトが機能するようです(確認した訳ではないので必ずリダイレクト結果をチェックしてくだい)。

私の場合は完全なる変更だったので自動リダイレクトは適用されませんでした。

リダイレクトの設定方法

リダイレクトの方法には「プラグインを使う方法」と「サーバ上の.htaccessファイルにリダイレクト処理を記述する方法」の2種類があります。

プラグインのメリット・デメリット

「Redirection」や「Simple 301 Redirects」といったプラグインが有名です。

初心者におすすめなのは間違いなくプラグインでしょう。

プラグインをインストールして有効化するだけという簡単さがメリットです。

反対にデメリットは、プラグインが多すぎると処理が重くなること、ワードプレスやテンプレートがパージョンアップしたときにプラグインがあることで不具合が出るリスクがあることです。

「.htaccess」ファイルを使用するメリット・デメリット

メリットはプラグインに依存しないことです。

何かに依存することは「自分ではどうしようもできないリスク」が増えるということなので、私は「.htaccess」ファイルを使用する方法を選択しました。

デメリットは、「.htaccess」ファイルを編集するのに専門知識がいるということです。

私が使用しているエックスサーバーの「.htaccess」編集画面にも、はっきりと「この機能は上級者向けの機能です」と書かれており、初心者にはこの編集方法を調べるのが一番大変でした。

エックスサーバーで「.htaccess」ファイルの編集

「.htaccess」とは

「.htaccess」とはウェブサーバーを制御するための、ただの「テキストファイル」のことです。

ただのテキストファイルですが、中身はサイト管理をするためのコードを記述する重要な場所です。

「.htaccess」を使うことで、次のようなことが可能です。

  • IDとパスワードを設定してアクセス制限をかける
  • 404エラーページのカスタム作成
  • リダイレクトの設定をする

正直に申し上げて、私のような初心者ごときに詳しい構文やプログラムの処理内容のことはわかりません。

ここからは、探り探りでなんとか301リダイレクトの設定をした方法を画像も交えてお伝えしていきます。

「.htaccess」編集のイメージ

「Apache(アパッチ)」というサーバーソフトウェアで使用できる「mod_rewrite(モッドリライト)」というモジュールでリダイレクト処理を行うよう、「.htaccess」ファイルに指示を書いていきます。

わかりにくいですね。まずは用語を説明します。

Apache(アパッチ)とは

Webサーバーで使用されているソフトウェアの一種です。Webサーバーとは、ホームページの情報や画像などを保管しているコンピューターですが、その情報を適切にユーザーに提供できるように稼働しているソフトウェアがApacheです。

mod_rewrite(モッドリライト)とは

Apacheのソフトの中で使える機能です。「.htaccess」ファイル内にルールに従った記述を行うことで、mod_rewriteが機能し、「URLの書き換え」や「リダイレクト処理」などを行ってくれます。プログラム言語のようなイメージです。

私が使っているエックスサーバーではApacheが使われており、mod_rewriteの機能を使うことができます。

以上を踏まえて、具体的にやることを簡単に言い直すと、エックスサーバーの中にある「.htaccess」というテキストファイルに301リダイレクト処理を行う指示をコピペで書いていく。ということになります。

エックスサーバーでの作業手順

エックスサーバーパネル画面

エックスサーバーのサーバーパネルにログインした画面です。

画面の赤枠の部分、「.htaccess編集」ボタンを押して、ドメインを選択します。

編集画面になるので、「.htaccess編集」タブを選択すると次のような画面になります。

htaccess編集画面

編集画面の下の方の黄色枠の中はデフォルトで記述のあったものになります。ここを変更してしまうと不具合が出ることがあるので注意しましょう。

「# BEGIN WordPress」と「# END WordPress」で囲まれている部分は、ワードプレスのダッシュボードなどで操作をすると自動で更新される可能性がある部分なので、301リダイレクトの記述はこの部分を避けて記述する必要があります。

前半部分で述べた、パーマリンクの構成変更時に自動でリダイレクトがかかるようになる場合は、この部分が自動更新されます。せっかく追加記述したリダイレクトが上書きされてしまうリスクがあるので、「# BEGIN WordPress」の前に記述しましょう。

画像上部の太い赤枠の部分が今回追加で記述した301リダイレクト部分です。

日本語URLがエンコードされ長くなって分かりにくいですが、太い赤枠内をさらに5つの細い赤枠で囲うように画像を加工しています。

この細い赤枠1つが1記事をリダイレクトするための記述になるので、画像では5つの記事をリダイレクト処理しています。

「.htaccess」に書いてあることの意味

新たに記述したのはこれだけです。見やすいようにここでは行間をとっています。

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteRule ^2018/08/28/\xE6\x88\x91\xE3\x81\x8C\xE5\xAE\xB6\xE3\x81\xAB\xE7\x8C\xAB\xE3\x81\x8C\xE3\x82\x84\xE3\x81\xA3\xE3\x81\xA6\xE3\x81\x8D\xE3\x81\x9F\xEF\xBC\x81\xE9\x87\x8C\xE8\xA6\xAA\xE5\x8B\x9F\xE9\x9B\x86\xE3\x81\xAE\xE4\xBF\x9D\xE8\xAD\xB7\xE7\x8C\xAB\xE3\x81\xA8\xE6\x9A\xAE/$ https://78lifelog.com/cat-foster-homes-needed/ [R=301,L]

</IfModule>

コードを個々に見ていきましょう。

<IfModule mod_rewrite.c>
</IfModule>

最初と最後にタグのようなものがありますが、「mod_rewrite」を使うよ!というコードです。このタグの間に記述されている内容が実行されます。

RewriteEngine On

「mod_rewrite」の機能を有効化するコードです。Offで無効化もできるようです。

RewriteRule ^旧URL(ドメイン以下部分)$ 新URL(https://からのフルURL) [R=301,L]

日本語URLが長いので省略しましたが、赤色部分はパーマリンク変更前の日本語URL、青色部分はパーマリンクを英数字に変更した引越し先のURLです。

赤色の旧URLにアクセスがあったら、青色の新URLに転送するよ!という意味です。

RewriteRuleは処理のルールを書くコードです。

[R=301,L]については、Rはリダイレクトの種類を301リダイレクトに指定するという意味、LはLastのイニシャルでこの処理が適用されたら以降の処理は適用しませんという意味です。

RewriteRuleはリダイレクトする記事の数だけ必要数続けて記述しました。

構成は次の4つの項目から成りますが、この4つの項目間は半角スペースが必要なので要注意です。

  • RewriteRule
  • ^旧URL(ドメイン以下部分)$
  • 新URL(https://からのフルURL)
  • [R=301,L]

「.htaccess」記述の注意点

日本語URLは、エンコード後の長い文字列の中にたくさんの「%」の文字があります。

(例)https://78lifelog.com/%e3%80%90%e9%98%b2%e6%b0%b4%e5%ae%9f

「.htaccess」に記述する際には、この「%」が曲者で、Apacheでは「%」を「x」に自動変換する特徴があります。

このままではリダイレクトができないため、「%」を「\x」に変換してあげる必要があります。

私は一括で変換する方法がわからなかったので無限とも思える数の「%」を一つずつ変換。

しかもめんどくさいことに、日本語フォントでは「\」(バックスラッシュ)が打てないということで、メモ帳のフォント設定をArialに変更して、メモ帳の上でカチカチ変換しました。

私は記事数が少ないので一つずつ変換しましたが、この変換に関してはもっとスマートなやり方があるようです。

エックスサーバーの「.htaccess」に張り付けると、表示上は「¥x」に変換されてしまいますが、「.htaccessを編集する(確認)」というボタンを押すと、きちんと「\x」になっていることがわかります。

最後に

以上、私がパーマリンク変更による404エラーを解消するために、リダイレクトを設定した手順になります。

私の場合は、ブログ開設からまだ2カ月ということで、記事数も20記事ないくらいだったので、この方法で対応しましたが、記事数が多い場合は、恐らくもっと適切な方法があるはずです。

また、当記事の処理後にブログで特に不具合はおきておらず、リダイレクトチェックサイトでもきちんと処理ができていることを確認していますが、自己責任でお願いいたします。

-ブログ

Copyright© 78Lifelog , 2024 All Rights Reserved.