相対パスと絶対パスとは?違いから表記方法までをわかりやすく解説

SEO

相対パスと絶対パスとは?違いから表記方法までをわかりやすく解説

Web制作を円滑に進めるためには、コードの書き方を正しく理解する必要があります。特に、「パス」と呼ばれる表記方法は使用頻度が高い項目です。パスの書き方を誤るとWebサイトの表示に支障をきたすリスクがあるため、十分に理解したうえでコーディングに取り組みましょう。

この記事では、「相対パス」と「絶対パス」の意味や具体的な表記方法、SEOの観点から見た違いなどについて解説します。各表記方法のメリット・デメリットを知り、上手に使い分けたい開発者の方はぜひ参考にしてください。

1.「パス」の意味とは?

パス(path)とは道筋や経路という意味の英単語で、IT用語では特定のデータが保存されている場所を示す文字列のことを指します。

パソコンやスマートフォンなどの機器では、データの保存場所が複数のフォルダによって区切られていることが一般的です。画像やWebサイトのソースコードなど、あらゆるデータはいずれかのフォルダに保存されています。

データの位置をパスで指し示すことで、対象となるデータを利用したり、新たに作ったデータの保存場所を指定したりすることが可能です。

2.相対パスの意味とは?

パスの表記方法は大きく分けて2種類に分類されます。その中の1つが「相対パス」と呼ばれる書き方です。

相対パスでは、データが存在する場所がほかのデータとの相対的な位置関係によって記述されます。たとえば、「このデータがある場所から見て、1つ上の階層に位置する場所」というような方法でデータの所在地を指定することが可能です。

ここでは、相対パスの書き方やメリット・デメリットについて解説します。

2-1.相対パスの書き方・使い方

相対パスの書き方について知っておくべきポイントは次の通りです。

  • 相対パスの文字列が書き込まれているデータ自身の位置が基準となる
  • 基準となる位置から見て1つ上の階層を表す場合は「../」の記号を使う
  • 基準となる位置から見て1つ下の階層を表す際は「/」の記号を使う

具体的な例として、パソコン上に3つのフォルダ「Japan」「Tokyo」「Shinjuku」があるとします。各フォルダの位置関係は「Japan」フォルダの中に「Tokyo」フォルダがあり、さらに「Tokyo」フォルダの中には「Shinjuku」フォルダがあるという階層構造です。

そして、各フォルダの中に「index.html」というhtmlファイルを作成したと仮定します。この状態で、「Tokyo」フォルダの中にあるhtmlファイルから「Japan」フォルダ内のhtmlファイルを指し示す相対パスの書き方は次の通りです。

../index.html

「Tokyo」フォルダの中にあるhtmlファイルから見て、「Japan」フォルダは1つ上の階層に位置しています。そのため、1つ上の階層を表す「../」の記号を使って記述することが可能です。

同様に、「Tokyo」フォルダの中にあるhtmlファイルから「Shinjuku」フォルダ内のhtmlファイルは、次の記述方法で指定できます。

/index.html

相対パスの機能を試す際は、実際にフォルダやhtmlファイルを作ってみることが有用です。上記のようなディレクトリ構造でフォルダを作成し、各フォルダ内のhtmlファイルには次のようなリンクを設定してみましょう。

<a href=”../index.html”>1つ上の階層にあるindex.htmlへ移動するリンク</a>
<a href=”/index.html”>1つ下の階層にあるindex.htmlへ移動するリンク</a>

作成したhtmlファイルをブラウザで開きリンクをクリックすると、各ページへ移動することが可能です。

2-2.相対パスのメリット・デメリット

自身の位置を基準にデータの場所を指定する相対パスには、次のようなメリットとデメリットがあります。

メリット
  • コードを短く記述できる
  • Webサイトのドメインが変更されても機能する
  • オフラインのローカル環境でも動作する
デメリット
  • ドメイン名が異なるサイトへのリンクは指定できない
  • フォルダの階層構造が崩れると機能しない
  • データ同士の位置関係を把握する手間がかかる

相対パスは短いコードで記述できることや、ドメイン名が変わった場合でも機能することなどがメリットです。

ただし、異なるドメインにアップされているデータへのリンクは指定できません。また、フォルダの移動や削除でディレクトリ構成が崩れるとリンクが切れてしまうことも相対パスのデメリットです。

3.絶対パスとは?

絶対パスとは、対象ファイルが保存されている場所を直接示す指定方法です。相対パスではデータ同士の位置関係によって文字列が変化することに対して、絶対パスによる指定は文字列が1つに決まります。

絶対パスの書き方やメリット・デメリットは次の通りです。

3-1.絶対パスの書き方・使い方

絶対パスを使用する場合は、ローカル端末のルートディレクトリやWebサイトのドメインから、リンク先までの階層構造を文字列で指定します。

具体的な例として、相対パスの書き方で紹介した「Japan」「Tokyo」「Shinjuku」のフォルダを「〇〇〇.com」という架空のドメインにアップしたとします。この場合、「Japan」フォルダ内のindex.htmlを表す絶対パスは次の通りです。

〇〇〇.com/Japan/index.html

同様に、「Shinjuku」フォルダ内のhtmlファイルは、次の絶対パスで指定できます。

〇〇〇.com/Japan/Tokyo/Shinjuku/index.html

絶対パスは、どの場所に保存されたhtmlファイルに記述されていても、同じ1つのデータへリンクを貼ることが可能です。

3-2.絶対パスのメリット・デメリット

指定するデータの保存場所を直接指定する絶対パスには、次のようなメリットとデメリットがあります。

メリット
  • ドメインが異なるサイトへの外部リンクが指定できる
  • 指し示すデータの全体的な位置関係が把握しやすい
  • リンク切れのリスクが低い
デメリット
  • コードが長くなる
  • Webサイトのドメインが変更されると修正が必要となる
  • オフラインの環境では動作しない

絶対パスでは、データ同士の位置関係に関わらずリンクを記述できるため、ドメインが異なる外部サイトにもリンクを貼れることがメリットです。また、指し示すデータまでの経路がすべて記述されていて、全体における位置関係がわかりやすい点もメリットとなっています。

一方、コードの文字数が多くなりやすい点や、Webサイトのドメイン変更などに伴って修正が必要になる点が絶対パスのデメリットです。サーバーにアップされたデータが絶対パスで指定されている場合は、オフラインの環境からアクセスすることができません。

4.【環境別】相対パスと絶対パスの表記方法

相対パスと絶対パスでディレクトリの区切りを表す記号は、開発環境によって異なります。環境別の主な区切り文字は次の通りです。

●「abc/abc/」で表記する環境

  • UNIX互換環境
  • PHP
  • HTML

UNIX互換環境ではディレクトリの区切りに「/」が使用されます。PHPやHTMLのソースコードでディレクトリの区切りを表す記号も「/」です。

●「abc\abc\」もしくは「abc/abc/」で表記する環境

  • Windows
  • Excel

Windows環境のコマンドプロンプトでは、「\」もしくは「/」のいずれかが使用されます。ExcelのVBAなどにおけるパスの書き方は、OSと同じです。

●「abc\\abc\\」で表記する環境

  • Java

Javaのソースコードでは、ディレクトリの区切りに「\\」が使用されます。

5.SEOの観点では相対パスと絶対パスはどちらがおすすめ?

SEO対策の観点から見た場合、相対パスと絶対パスに効果の差はありません。いずれの表記方法が使用されていたとしても、リンク切れなどのトラブルが発生していない限り同等に評価されます。

ただし、Googleが運営する「Search Console ヘルプ」では、リンク切れを起こしにくい絶対パスを推奨しています。

出典:Search Console ヘルプ「クロールが完了できなかったURLエラー」

Webサイト制作の効率を高める目的で相対パスを使用したい場合は、リンクが適切に貼られているか注意しましょう。

まとめ

パスとはデータが保存されている場所を表すための文字列で、書き方によって相対パスと絶対パスの2種類に分けられます。相対パスは、データ同士の相対的な位置関係で指定する表記方法です。一方、絶対パスはデータの保存場所を直接指定します。

SEOの観点からは、相対パスと絶対パスの違いによる直接的な影響はありません。ただし、Googleが発信する情報では絶対パスが推奨されています。

相対パスと絶対パスのメリット・デメリットを理解したうえで、状況に応じて使い分けましょう。

中小企業の採用成功モデル!2024年に中小企業がすべき「採用」と「定着」の人事戦略 初心者でも使いこなせるSEO一元管理ツールCANALY

RANKING

TOTAL
WEEKLY
中小企業の採用成功モデル!2024年に中小企業がすべき「採用」と「定着」の人事戦略
上部へ戻る
CANALY

300分かかる競合分析が1分で可能に無料で分析してみる

  • 分かりやすい操作で簡単に分析
  • SEOに必要な機能がAll in One
  • ずっと無料で使い続けられる
CANALYを無料で試す
CANALY