基本ノウハウ
「絶対パスで記述してほしい、と指示されたけれどどう書けば良い？」「相対パスとルート相対パスの違いは？」というときに役立つ、それぞれのパスのメリット・デメリットや使い分け方を、HTMLにおける書き方の具体例を交えながら詳しく解説します。またルート相対パスの記載方法、どのパスで記載するのがGoogle検索やSEO対策に効果的なのかについても説明します。Webサイトの制作や管理にお役立てください。
パスとは英語で小道という意味のpathから派生した言葉です。ITやWeb分野では、コンピューター上でどこに何があるかを示す道順を示し、住所のような役割を果たしています。
例えば次のような環境で用いられます。
つまりパスは基本的にはあまり人目に触れない、コンピューターやWebサイトの裏側で動いている文字列をイメージしてもらうと良いでしょう。上記のそれぞれの環境において、ファイル名の区切りに使われる記号が/や\、\\という違いはありますが、基本的なパス（道筋）のたどり方、パスの階層についての考え方は同じです。
この記事ではWebサイトの場合はURLともなっているHTMLを例として用いながら分かりやすく解説します。
絶対パスとはフルパスともいい、誰がどの場所から見てもたどり着ける、完全な形で表記されたものです。
住所に例えると、見る人が世界のどの国にいても分かるよう国名から表記されているイメージです（言語に関する問題はないものとします）。
絶対住所：日本東京都千代田区飯田橋3-2-2 飯田橋3丁目ビル3階
完全な形で表記するために、他のパスの表記方法と比べると必然的に長くなります。
相対パスとは相関関係の位置により変わるパスです。記述は短くて済むものの、一見してどこのことを指しているのか分かりにくかったり、起点となる位置関係が変わってしまったりすると、まったく別のものを指す場合もあります。
先ほどの住所で見ると、下記のように省略した形となります。
相対住所：3階
同じビルの2階にいる人にとっては端的で分かりやすいものの、別のビルにいる人にとってはどこなのかまったく分かりません。
このように相対パスは表記を短くでき、手間を減らせます。しかし、フォルダやカテゴリなどの位置関係が変わってしまうと場所が分からなくなったり、同じ名前のフォルダが存在する環境ではややこしくなってしまったりします。URLの場合はリンク切れを起こしたり、表示されなくなったりするので、適切に用いることが重要です。
ルート相対パスとは、ルートディレクトリ（大元）を基準とするパスの書き方で、特定の範囲内で最上位のものを基準とします。例えば、東京都という範囲を最上位だとすると、そこから続く部分についてすべて記載する書き方です。
ルート相対住所：/千代田区飯田橋3-2-2 飯田橋3丁目ビル3階
例えば千代田区がある東京都の名前が変更されたとしても、訂正する必要がなく、相対パスより誰が見ても階層を把握できる利点があります。
絶対パス・相対パス・ルート相対パスのメリットやデメリットを表にまとめました。
| メリット | デメリット | |
|---|---|---|
| 絶対パス | ・誰が見ても分かりやすい ・絶対パスには他の表記が存在しない（リンク切れなどが起こりにくい） ・サイトの全体像や階層を理解しやすい |
・表記が長くなってしまう ・字数が増えるため煩雑になりがち ・Webサイト制作時のローカル環境では使用できない |
| 相対パス | ・必要最低限の短い表記で済む ・字数が少ないので作業量が減る ・Webサイト制作時のローカル環境でも利用可能 |
・外部サイトでは使用できない ・相関関係によって指すものが変わる ・相関関係が変わると場所が分からなくなる場合もある ・Webサイトではリンク切れを起こしやすい原因に |
| ルート相対パス | ・最上位階層からの表記になるので分かりやすい ・Webサイト制作時のローカル環境でも利用可能 ・絶対パスに置き換えたい場合、相対パスよりも作業量が少なく済む |
・相対パスより表記が長くなってしまう |
Webサイト制作時やプログラミングの際には、個々のPC内で非公開の状態（ローカル環境）で作業します。ローカル環境では、絶対パスが使えず、相対パスかルート相対パスを用いて表記する必要があります。
Webサイトの場合を例として、それぞれのパスの書き方を紹介します。ここではBeMARKEの構造を用いながら詳しく説明します。
絶対パスはURLの場合、初めから終わりまでの完全な記述でどこも省略していないものです。Webサイトの場合、https://～もしくはhttp://～から始まるものは、完全なURLです。BeMARKEのサイト内のページを引き合いに出すと以下のようになります。
BeMARKEのサイト内での絶対パス（絶対リンク）表記の例
URLを色分けごとに見ると、ドメイン/カテゴリ/ページの3階層に分かれています。実際にはこの階層がさらに深くなることが往々にしてあるため、複数人が関わるWebサイトでは、絶対パスの方が位置関係を理解しやすいかもしれません。
大前提として外部のサイトへのリンクを貼る場合にはドメインからすべてが異なるため、絶対パスしか使えません。このように絶対パスで表記されていると、どこから検索したとしても同じページにたどり着けます。
相対パスはサイト内のファイルを手軽に指定して作業効率を上げたいときや、ローカル環境で作業する場合に用います。
BeMARKEのサイト内での相対パス（相対リンク）表記の例―同じカテゴリ内の場合
記述するパスの長さは、指定先との相関関係によって決まります。上の図はグリーンのWebツール選び方ガイドのページを基準として、同じディレクトリ内のページにリンクする場合の記述例です。
MA選び方ガイドへリンクする場合、同じサービスガイドのカテゴリに属しているので、パスは“./sc_ma”のように、ページ名のみを指定すればOKです。./は現在の階層を表す記号で、省略できます。つまり、以下のどちらの表記でも問題ありません。
【相対パス】
<a href="./sc_ma">前のページへ</a>
<a href="sc_ma">前のページへ</a>
ちなみに省略しない絶対パスの形だと、以下のようになります。
【絶対パス】
<a href="https://be-marke.jp/service-guide/sc_ma">前のページへ</a>
パスの長さがまったく異なるため、手間を考えると相対パスの方が楽だと思うかもしれません。しかし例えば他のカテゴリ内に、同じsc_maという名前の記事がある場合、階層やカテゴリが変わってしまったときにどのページを指しているのか分かりにくくなってしまいます。この問題は写真を保管するimgフォルダなどが同じ名前で点在している場合に起こりがちです。
BeMARKEのサイト内での相対パス（相対リンク）表記の例―別のディレクトリを参照する場合
次に別のディレクトリにある記事へリンクする場合の相対パスの書き方を見てみましょう。グリーンのWebツール選び方ガイドのページ内に、Googleにインデックスされない7つの原因とは？の記事へのリンクを貼る場合、ディレクトリが異なるので共通する場所までさかのぼって指定してあげる必要があります。
<a href="../articles/knowhow-noindex">記事へ</a>
../と、ドットが2つになると、現在位置より1つ上の階層を表します。この場合、../が示しているのはサービスガイドの1つ上の階層であるトップページです。「Webツール選び方ガイド」のページと「Googleにインデックスされない7つの原因とは？」の記事に共通しているのはドメイン部分のみなので、トップページにさかのぼってから、下の階層のarticlesカテゴリを指定し、続けて記事を指定します。
このように別のディレクトリを相対パスで指定する場合、例えばサービスガイド内でさらにカテゴリ分けされて階層が深くなった場合など、相関関係が変わるとリンク切れが起こります。
ルート相対パスはルートパスとも呼ばれます。ルート相対パスはルートディレクトリ（大元）を基準とするので、ルートディレクトリからの道筋が変わらない限りはリンク切れが起こりません。階層が表記されることにより、場所が分かりやすい一方で、Webサイトのドメイン部分が省略できるので記述も短くできます。絶対パスと相対パスの良いとこどりをした折衷案といったイメージです。
BeMARKEのサイト内でのルート相対パス（ルートパス）表記の例
上記のようにWebサイトのドメイン部分を/で表記して省略する以外は、絶対パスと同じです。上記のリンクは同じサイト内である限り、どのページからリンクしたとしても同じ表記で済みます。
最上位のルートディレクトリを基準とするので、ドメインの変更、ローカル環境から本番環境への移行などの予定がある場合にも利用可能です。
GoogleはSearch Consoleのヘルプの中で、可能な限り相対リンクではなく絶対リンクを使用するよう推奨しています。
※相対（絶対）リンク…相対（絶対）パスを用いて書かれたURL（リンク）のこと
WebサイトがGoogleをはじめとする検索結果に表示されるためには、クローラーと呼ばれるロボットにページを認識してもらう必要があります。ありとあらゆるWebページを巡回しているクローラーが正しくページをたどれるようにするためには、できる限り絶対パス（フルパス）を使用して分かりやすくURLを記載しましょう。
なおWebサイト制作などローカルでの作業時は相対パスやルート相対パスを使用しておき、サイト公開時に絶対パスに置き換えることも可能です。
いずれの場合においても、相対パスとルート相対パスが混在していると煩雑になったり分かりにくくなってしまったりするので、少なくとも同じページ内ではどちらかに統一して使用するのがおすすめです。
絶対パスと相対パスの違いやそれぞれのメリット・デメリットと使い分け方、さらにルート相対パスの書き方についても解説しました。Googleはできる限り絶対パスを使うことを推奨していますが、ローカル環境では絶対パスは使用できず、本番環境に移行する際にすべてのパスを書き換えるのは一苦労です。それぞれの場面に応じて、パスを適切に使い分けてくださいね。
