相対パスと絶対パスの違いは何？絶対パスを使うべき理由も解説
相対パスと絶対パスはファイルを指定するときの記述が異なります。相対パスは今いるディレクトリを起点として記述しますが、絶対パスはURLで指定します。
相対パスは記述が短くローカル環境でも動かせるほか、サイト変更時にも構造が同じならリンク修正は必要ありません。ですが、サイト製作には絶対パスを使用すべきです。
絶対パスはURLでファイルを指定するため、リンク切れが起こりにくいことからGoogleが推奨しています。ただし記述が長くなり、サイト変更時にはリンク修正が求められる点がデメリットです。
この記事では相対パスと絶対パスの違いと、メリットとデメリットを説明しています。また、各パスで指定ファイルが表示されないときのチェックポイントにもふれています。さらに、ローカル環境でWordPressを絶対パスで運用する方法にも言及していますので、参考にしてください。
相対パスと絶対パスの違い
相対パスと絶対パスの違いは、一言でいえば経路の違いです。
| パスの種類 | ファイルの指定方法 |
| 絶対パス | URLでページを指定する |
| 相対パス | 今いるディレクトリを基準に指定する |
相対パスは今いるディレクトリを基準にして目的のファイルを指定します。例えば、現在地から目的地へ向かうときに「2つ目の信号を右に曲がって、直進して1つ目の交差点を右に行くと到着します」と案内するイメージです。
対して絶対パスはURLでページを指定して目的地（ファイル）の場所を示します。「〇〇のお店へ行きたいのですが」という質問に「〇町の××丁目にあります」と答えるイメージです。
相対パスとは
相対パスは、基準になるディレクトリから目的のファイルを指定する方法です。基準になるディレクトリとは、ファイルを指定する場所のことです。例えばindex.htmlから相対パスを使ってファイルを指定するときはindex.htmlのある階層が基準ディレクトリになります。
相対パスの書き方
相対パスを記述するときは3つのパターンがあります。
- 同じ階層内のファイル
- 同じ階層内にある別ディレクトリのファイル
- 1つ以上うえの階層のファイル
index.htmlと同じ階層内にあるtop.htmlを相対パスで指定するときの例です。
| <a href=”top.html”>TOP</a> |
同じ階層にあるファイルはファイル名をリンク先として指定してください。または「./」を使う方法もあります。
| <a href=”./top.html”>TOP</a> |
このように、指定するファイル名の前に./（ドットスラッシュ）をつけて記述することもできます。
同じ階層内にある別ディレクトリのtop.htmlを指定するときの例です。この場合、top.htmlは「test」ディレクトリにあると仮定します。
| <a href=”test/top.html”>TOP</a> |
同じディレクトリ内の別ディレクトリにあるファイルを指定するときは、別ディレクトリから記述を始めます。もし「test」ディレクトリ内に「sample」ディレクトリを作った場合は次のように記述してください。
| <a href=”test/sample/top.html”>TOP</a> |
このようにディレクトリ名を追加していきます。
では「test」内のtop.htmlから、1つ上のディレクトリのindex.htmlを指定するときの例を示します。
| <a href=”../index.html”>INDEX</a> |
1つ上のディレクトリにあるファイルを指定するときは「../」としてください。もし2つ上のディレクトリを指定するときは次のように記述します。
| <a href=”../../index.html”>INDEX</a> |
このように移動するディレクトリの数に合わせて「../」をつけて指定してください。
cssで相対パスを使う
サイトで背景画葬や画像などを指定するとき、cssに記述しますがここでも相対パスが使えます。cssはhtml内に記述する方法と、外部スタイルシートを呼び出す方法があります。
外部スタイルシートから呼び出すときは、cssファイルを基準として記述します。
cssと同一ディレクトリにあるsample.jpgを指定するときの例です。
| .bgimage{ background-image:
url(sample.jpg); } |
同じ階層内の別ディレクトリにあるファイルを指定するときの例です。別ディレクトリ名を「test」とします。
| .bgimage{ background-image:
url(test/sample.jpg); } |
sample.jpgが一つ上の階層にあるときは以下のように記述してください。
| .bgimage{ background-image:
url(../sample.jpg); } |
html内に記述しているときはhtmlファイルを基準として記述してください。
相対パスのメリット
相対パスを使ってファイルを指定するメリットは3つあります。
- ローカル環境でも動作する
- 記述が短い
- サイト構造が同じなら修正は不要
相対パスは一般的なWEB開発で使われることが多く、ローカル環境でも問題なくブラウザで動作する点がメリットです。また絶対パスと比較して記述が短くすむため、作業時間の短縮も可能です。
さらにドメイン変更による移転をおこなっても、サイトの構造が同じならリンクの修正は必要ありません。
相対パスのデメリット
相対パスを使うデメリットは2つあります。
- リンク切れを起こしやすい
- 記述が面倒
相対パスは基準ディレクトリを起点としてファイルを指定します。ですから指定ファイルを別のディレクトリに移動させた場合、リンクを記述しなおす必要があります。このとき記述を間違えてリンク切れが起こるケースは少なくありません。
またディレクトリ構造の全体像をつかみにくくなるため、ファイルの所在を把握するのに時間がかかります。さらに基準ディレクトリから指定ファイルまでの距離が離れていると、記述が面倒です。
この問題を回避するために相対パスを使ってファイルを指定するときは、ディレクトリ構造をシンプルにわかりやすくする必要があります。
指定ファイルが表示されないときのチェックポイント
相対パスを使ってファイルを指定したとき表示されないケースがありますが、このような場合は記述ミスが原因です。考えられる原因は5つあります。
- 階層
- ディレクトリ名
- ファイル名
- ファイル形式
- 表記は正しいか
基準ディレクトリと指定ファイルのディレクトリが間違っていないかを確認してください。
ディレクトリ名のスペルミスが発生していないかも同時にチェックします。
また、指定するファイルの名前と形式に違いがないかをみてください。.jpgを.pngとしていたり、大文字と小文字を間違えていたりしないか確認します。またリンクタグ内で指定ファイルを”（ダブルクォーテーション）で囲っているかもみてください。
絶対パスとは
絶対パスは別名フルパスともいい、ディレクトリ構造の頂点から指定ファイルまでをすべて記述します。基準ディレクトリを起点として記述する相対パスとは違い、どのディレクトリにいても記述する内容は変わりません。
絶対パスの書き方
例えば、https://sample.comから「category」内にある「sample」ディレクトリのtest.htmlを指定するときの例を示します。
| <a href=”https://sample.com/category/sample/test.html”>TEST</a> |
このように、指定ファイルに至るまでの道筋をそのまま記述してください。
絶対パスのメリット
絶対パスを使うことで得られるメリットは2つあります。
- 位置関係をつかみやすい
- リンク切れを起こしにくい
絶対パスは指定ファイルまでの道筋をすべて記述するため、ディレクトリ構造の全体像を把握しやすいのがメリットです。またファイルをURLで指定するため、リンク切れを起こしにくい点も利点です。
絶対パスのデメリット
絶対パスを使うデメリットは3つあります。
- 記述が長い
- ローカル環境では動作しない
- サイト変更時に差し替えが必要
絶対パスは道筋のすべてを記述する必要があるため、必然的に記述が長くなります。またURLを使って指定するため、ローカル環境では動かせません。さらにドメイン変更をしたときに記述の変更が必要です。
指定ファイルが表示されないときのチェックポイント
絶対パスを使ってファイルを指定したとき表示されない場合は、記述ミスが考えられます。間違える可能性が高いポイントは6つあります。
- httpとhttpsの違い
- ドメイン名
- ディレクトリ名
- ファイル名
- ファイル形式
- 表記は正しいか
httpとhttpsを間違えていないかを最初に確認してください。また、ドメイン名にもミスがないか目を向けてください。特にサイト移転をおこなったときは、以前のドメインのままになっていないか注意すべきです。
そしてディレクトリやファイル名、形式が正しく記述されているかを確認します。さらに、/（スラッシュ）や.（ドット）を記述する場所に誤りがないかもみてください。
ルートパスとは
ルートパスとは、最上階のディレクトリからファイルを指定する方法です。ルートパスは/（スラッシュ）から記述します。この記述が用いられるのは、複数人がかかわる大規模なプロジェクトが主です。
絶対パスからドメインを省略して記述するため、サイト変更時にもリンクの修正は必要ありません。
ルートパスの書き方
ルートパスを書くときは/から始めてください。ルートディレクトリにあるcategoryディレクトリ内のindex.htmlにリンクするときの例です。
| <a href=”/category/index.html”>INDEX</a> |
ルートディレクトリから2つ下のtestディレクトリ内のtest.htmlからルートディレクトリのindex.htmlをリンクするときの例です。
| <a href=”/index.html”>INDEX</a> |
このように、ルートパスを記述するときは階層にかかわらず、すべてルートディレクトリを基準としています。
ルートパスのメリット
ルートパスのメリットは主に2つあります。
- ファイルの場所を把握しやすい
- サイト変更時にリンク修正が不要
常にルートディレクトリを基準として記述するため、ファイルがどこにあるかを把握しやすいのがメリットです。また、ドメイン変更やSSL化などしてもリンク修正は必要ありません。
そのため、ルートパスは複数人がかかわるサイトや、ファイル構造が複雑なサイトに適しています。
ルートパスのデメリット
ルートパスのデメリットは2つあります。
- ローカル環境ではサーバーが必要
- サイト構造の変更時にパスを書き換える
ルートパスをローカル環境で使用するためには、ローカルサーバーを立ち上げる必要があります。ローカルサーバーはXAMPPやMAMP、LAMPを使って構築します。ローカルサーバーを構築せずにhtmlファイルを表示させても、cssが適用されず画像も表示されません。
また、ディレクトリ名やファイル名など、サイト構造を変更したときには記述も書き換える必要があります。
サイト製作には絶対パスを使うべき
サイト製作には絶対パスを使うべきです。Googleは絶対パスの使用を推奨しています。これは相対パスがリンク切れを起こしやすく、クローラーの巡回に差し障りがあることとユーザビリティの低下につながることが理由です。
可能な場合は、相対リンクではなく絶対リンクを使用します（たとえば、サイト内の別のページにリンクするときに、mypage.html だけではなく https://www.example.com/mypage.html とします）。
出典：クロールが完了できなかった URL のエラー（Search Consoleヘルプ）
ただし、あくまで推奨しているのみで使用しなければならないというわけではありません。
SEO的にみても、使用するパスで順位に影響が出るという事実はありません。相対パスを使うときは、リンク切れが起こらないように注意していればよいのです。またサイト製作の作業効率という点でいえば相対パスの方が手間を省けます。
とはいえ、記述ミスを防止してクローラビリティおよびユーザビリティの向上につながることを考えれば、絶対パスが適しているといえます。
WordPressにおける絶対パスと相対パス
WordPressにおける絶対パスと相対パスにはそれぞれ、使い方があります。
- ローカル環境でも絶対パスが使える
- 内部リンクを相対パスにできる
通常、絶対パスはローカル環境では使用できませんが、WordPressではローカル環境でも絶対パスを使って運用できます。また、基本的にWordPressの内部リンクは絶対パスを使用していますが、これを相対パスに変更して運用することもできます。
ローカル環境でWordPressを絶対パスで運用する方法
WordPressはローカル環境でも絶対パスで運用できます。絶対パスを使ってローカルで運用するときはテーマエディターで次のように記述してください。
| <a href=”<?php echo home_url(); ?>/case/”> |
例えばサイトドメインがsample.comの場合、PHP内のhome_url()でこのドメインを取得します。これがブラウザで反映されると「https://sample.com/case/」として表示されます。これをローカルにすると、自動的にローカル環境に合わせて書き換えられます。
WordPressをローカル環境で運用して絶対パスを使いたいときの参考にしてください。
WordPressの内部リンクを相対パスにする
WordPressの内部リンクを相対パスにするときは、WordPressのテーマ内にあるfunction.phpを編集してコードを追加します。コードを追加する前に、必ずバックアップを取っておいてください。
| class relative_URI {
function relative_URI() { add_action(‘get_header’, array(&$this, ‘get_header’), 1); add_action(‘wp_footer’, array(&$this, ‘wp_footer’), 99999); } function replace_relative_URI($content) { $home_url = trailingslashit(get_home_url(‘/’)); return str_replace($home_url, ‘/’, $content); } function get_header(){ ob_start(array(&$this, ‘replace_relative_URI’)); } function wp_footer(){ ob_end_flush(); } } new relative_URI(); |
このコードを追加することで、相対パスを使用できます。
ドメイン直下のディレクトリにWordPressをインストールしているときは、コードの書き換えが必要です。例えばディレクトリ名を「sample」とした場合、追加したコード内で書き換えをおこなうのは、以下の部分です。
| return str_replace($home_url, ‘/’, $content); |
この部分を次のように書き換えてください。
| return str_replace($home_url, ‘/sample/’, $content); |
これで問題なく運用できます。
もし、コードを追加したにもかかわらず相対パスで運用できないときはテンプレートタグを確認してください。
| <?php bloginfo(‘url’); ? |
テンプレートタグがこのようになっているときは相対パスでの運用はできませんので、以下のように変更します。
| <?php get_home_url(‘url’); ?> |
このように変更すると、相対パスでの運用ができます。
相対パスを絶対パスに変換できるツール
相対パスを使用しているなかで絶対パスに変更するときに使えるツールがあります。
- 相対パスを絶対パスに一括変換
- 相対パス変換ツール
これらのツールはいずれも無料で利用できます。
相対パスを絶対パスに一括変換
相対パスを絶対パスに一括変換はベースとなるURLとソースコードをフォームに入力して「変換実行」ボタンを押すと、相対パスを一括で絶対パスに変換できるツールです。htmlのほかcssに含まれる相対パスも変換できますが、JavaScript内の相対パスは変換できません。
また、ソースコード内のURLとベースURLが異なる場合は「error」に置換されます。
相対パス変換ツール
相対パス変換ツールはベースURLとソースコードをフォームに入力して、相対パスを絶対パスまたは指定した相対パスに変換できるツールです。パスの区切りは/（スラッシュ）のみです。変換対象となる要素はhrefとsrcの2つです。
まとめ
相対パスと絶対パスの違いは、指定ファイルまでの経路にあります。相対パスが基準ディレクトリを起点として指定するのに対し、絶対パスはルートディレクトリから指定ファイルまでの道筋をすべて記述します。相対パスは記述が簡単で作業効率を上げられる点と、ローカル環境でも動かせる点がメリットです。さらにサイト変更時にも構造が変わらなければ、リンクを修正する必要がありません。ただし、Googleは絶対パスの使用を推奨しています。相対パスと比較してリンク切れが起こりにくい点からクローラビリティとユーザビリティの向上につながることが理由です。とはいえ、リンク切れに注意していれば相対パスを使用しても問題はありません。もし相対パスを絶対パスに変更する必要があるときは、無料ツールを利用することで簡単に変換できます。
SEOとWEBマーケティングの東京SEOメーカーTOPへ戻る
この記事の監修者
新潟大学大学院を卒業後、事業会社で10年働く間にSEOに出会う。自身でサイトを多数立ち上げ、実験と検証を繰り返しながらSEOを研究。お金に変えることを目的とはせず、ユーザーに何が有益かを問い続け改良を繰り返すうち、「インターネット上の真実ではない情報を正してユーザーのためになる情報を発信する」という天啓を得る。現在は東京SEOメーカーの上級SEOアドバイザーとしてアサイン。
