目次

    リダイレクト処理の設定方法・種類

    こんにちは、くまです。
    みなさんリダイレクト(自動転送)の設定をしたことはありますか?
    近頃、初めてリダイレクト処理の依頼が案件であり、調べて実行したのでこの記事でまとめさせていただきます。

    リダイレクトとは

    ウェブサイトの閲覧において、指定したウェブページから自動的に他のウェブページに転送されること。URLリダイレクトとも言われる。
    通常はウェブページのURLが変わったときに、元のURLから新しいURLへ誘導するときに用いられる。(wikipedia参照)
    また、リダイレクト処理をせずに移転した場合、「ページが見つかりません」となるとユーザーはサイトへアクセスしなくなってしまいます。
    SEOの観点でも移転前にたくさんのアクセスがあったとしても、順位下落やトラフィックを失ってしまうかもしれません。

    リダイレクト処理の設定方法

    .htaccess


    .htaccessはサーバー上の設定ファイルで、様々な設定を行うことができます。
    Apacheが使用されているサーバーでないと使用できず、またファイル編集のためにFTPなどによってサーバーにアクセスする権限が必要です。
    使用可能かどうかサーバーに制限がありますが、今では使用可能なサーバーが多くなっていますので、.htaccessを使ってリダイレクトを行うことが多数だと思われます。
    .htaccessはサーバー上にありますので、.htaccessによるリダイレクトはサーバーサイドリダイレクトとなります。

    設定する場合はまずテキスタエディタを使って、適当なファイル名でhtaccessファイルを作成します。(例:aaa.htaccess )
    作成したhtaccessファイルを開き、URLの移行に合わせた記述を行い保存。

    【ページごとのリダイレクト】
    test1.html → test2.html に転送させる
    RewriteEngine on
    RewriteRule ^test1.html$ http://www.idealump.com/test2.html [L,R=301]

    【ディレクトリごとのリダイレクト】
    test1ディレクトリ → test2ディレクトリに転送させる
    RewriteEngine on
    RewriteRule ^test1(.*)$ /test2$1 [L,R=301]

    .htaccessファイルをサーバーにアップすれば、リダイレクトは適用されます。

    meta refresh


    meta refreshはmetaタグと呼ばれ、bodyタグの中ではなくheadタグの中に表記します。
    <head>~</head>で囲まれた場所ならどこでも問題ないですが、初めは</head>の直前などに表記すると、チェックの際にもわかりやすいです。
    meta refreshは以下のようなHTMLタグとして自身のサイトのソース内に記述します。
    <meta http-equiv="refresh" content="秒数;URL=URL">
    「秒数」の部分ではサイトを訪れた人が、何秒後に飛んでもらうか数値で指定できます。
    半角数字で「30」と入力すれば、ユーザーがサイトに訪れてから30秒後に指定したURLへ飛ばすことができます。
    「URL」のところに飛ばす先のURLを入れてあげれば、指定の秒数の後に、書かれたURLへ自動で飛ばしてくれます。

    JavaScript


    使用しているサーバーで HTTPリダイレクトができない場合は、代替としてJavaScriptによるリダイレクトができます。
    JavaScriptによるリダイレクトもクライアントサイドで行われます。

    test2.htmlに転送させるケースでの記述

    < script type=”text/javascript”>
    setTimeout(“link()”, 0);
    function link(){
    location.href=’https://(test2.html)’;
    }
    ?>

    JavaScriptによるリダイレクトは、ブラウザ側でJavaScriptを無効にしているなど、実行に失敗した場合は転送されないので注意してください。
    条件によってはユーザーを逃してしまう可能性がある為、避けたい方法と思われます。

    最後に

    今回はリダイレクト設定の種類についてご紹介させていただきました。
    それぞれの設定方法によって意味や効果が違ってくるので、公開前にはしっかりと適切なやり方で設定しましょう。極力URLは変更しない方がおすすめです。

    PREV
    2022.07.01
    XDとGoogleスプレッドシートを連携できるプラグイン「Google Sheets」が便利すぎる
    NEXT
    2022.07.11
    SASSを使用する利点