サイト制作をしているとき「リンク先ってどうやって記述したら良いのだろうか。」と疑問に思った経験はありませんか?
もしくは、リンクの記述方法には絶対パス、相対パスという種類があることは知っているが、正しい使い分けができているか分からないと悩んでいる人もいると思います。
絶対パス、相対パスは上手に使い分けることでリンク切れや開発工数を削減できる重要な要素のひとつ。今回は、絶対パスと相対パスの違いから使い分け方までわかりやすく解説します。
一度理解してしまえば、判断に迷うストレスもグッと減りますから、ひとつずつ丁寧に理解していきましょう。
パスってそもそも何?パスのイメージを掴もう
絶対パス、相対パスの説明に入る前に、まずは「パス」の意味をしっかり理解しておきましょう。
パス(path)は英語で「経路」という意味です。サイト制作においては「特定のファイルから特定のファイルへの経路」という意味で使われています。
イメージが湧かない人は、地図アプリを思い出してみましょう。出発地と目的地を入れるとそこにたどり着くまでの経路が表示されますよね。その経路のファイル版が「パス」です。
パスを記述することは「ファイルまで辿り着くための経路」を記述していると覚えておきましょう。
絶対パスとは
絶対パスとは、ファイルが置かれている位置を「最初から最後まで」完全に記述する方法のこと。
例えばフォルダの階層が以下のようになっているとします。
top/middle/under/sample.html
この階層構造+https://ドメイン名までを完全に記述するのが絶対パスです。
例
https://ドメイン名/top/middle/under/sample.html
絶対の定義は「他との比較対立を越えていること。」(引用元:Oxford Languages)ですから、ある地点からのファイルの位置ではなく、「絶対的なファイルの位置」を示すことができるのが特徴です。
絶対パスのメリット
絶対パスのメリットは以下の2点。
- URLを完全に記述するだけで済むので簡単に使える
- リンクの記載箇所(ファイル)が変わってもリンク切れを起こさない
注目すべきメリットは2点目です。まずリンク切れのリスクを減らせる点について説明します。
絶対パスの場合は、相対的なファイルの位置ではなく、絶対的なファイルの位置を示しているため、どのファイルに絶対パスを記述しても、リンク切れを起こす心配がありません。
例えば、ファイルAに「https://ドメイン名/top/middle/under/sample.html」という絶対パスを記述した場合、ファイルBに記述してもリンク切れを起こしません。記述先のファイルに依存せず「使い回しが効く」のは絶対パスの大きなメリットです。
Googleのサーチコンソールのヘルプにも
可能な場合は、相対リンクではなく絶対リンクを使用します(たとえば、サイト内の別のページにリンクするときに、mypage.html だけではなく https://www.example.com/mypage.html とします)。
と記載があるため、ページ数、ファイル階層が共に多いサイトに関しては「絶対パス」を使ったほうがリンク切れのミスを防げる可能性が高まります。
リンク切れがあると、Googleのクローラーに対して「リンク先がどんなページなのか」を伝えられなかったり、リンクジュース(Googleからの評価)を該当ページへ適切に渡せなくなったりしてしまうので気をつけましょう。
絶対パスのデメリット
絶対パスのデメリットは、「ローカル環境でのテストができない」「記述がシンプルに長い」「ドメイン変更時の手間がかかる」の3点。
記述の長さに関しては大きなデメリットにはなりませんが、「ローカル環境でテストができない点」と「ドメイン変更時に手間がかかる点」は注意が必要です。
ローカル環境とは、ネットワーク上ではなく「個人のコンピューター内に構築された環境」のことを意味します。オフライン上で表示確認やレイアウト調整を行う際によく使われるので覚えておきましょう。
このローカル環境を使う場合、webサーバーに接続していないため「https://」から始まるリンクは「リンク切れ」として処理されてしまいます。
立ち上げ前のサイトのテスト時に絶対パスを使ってしまうと「なんでリンクが働いていないのだろう?」と混乱を招く可能性があるため気をつけましょう。
また、ドメインを変更した場合「全ての絶対パスを変更する必要」が生じてしまう点もポイントのひとつ。
上記3点を加味すると「外部サイトへのリンク」を絶対パスにしておいて、その他のサイト内部リンクに関しては次に説明する「相対パス」で記述するのがおすすめです。
相対パスとは
相対パスとは、ファイルの位置を「今いる場所(階層)から目的のファイルまで」記述する方法のことです。
「今いる場所(階層)ってどういうこと?記述方法は絶対パスとどう違うの?」という方のために、絶対パスで説明した例を用いて確認していきましょう。
/top/middle/under/sample.html
そして、今相対パスを記述しようとしているファイルが「middle」の中にあるとします。すると「今いる場所=middle」から「目的のsample.html」までのパスを書けばよいので以下の記述方法になります。
例
./under/sample.html
自分が今いる階層は「./」で記述することをお忘れなく。ドットが抜けていてリンクエラーを起こしてしまうことが多いのでダブルチェックをする癖をつけておくと安心です。
相対パスのメリット
相対パスのメリットは、以下の通り絶対パスのデメリットの裏返しです。
- 記述量が短くなり工数が減る
- ローカル環境でも動作確認ができる
- ドメインが変わっても記述を変える必要がない
相対パスの場合「https://」の記述が不要のためローカル環境であっても、本番環境であっても同じように機能してくれます。
そのため、現在開発中のサイトにおける「リンクの動作確認」に便利です。また、大元のドメイン名が変わっても「ファイルの階層構造」が変わらない限り修正が入らない点も相対パスのメリット。
サイト制作では、相対パスを使うことが多いので使えるようにしておきましょう。
相対パスのデメリット
相対パスのデメリットは、リンクの設置場所に応じて記述する範囲が変わるため「ミス」を誘発しやすい点です。
また、他の階層に同じファイルへのリンクを設置する際、同じ相対パスを使いまわせない点もデメリットといえます。
例
./under/sample.htmlという相対パスを「middle内」に記述した場合→同じ相対パスをひとつ上の階層のtopには使えない
「今はどの階層なのか」をしっかり考えないとリンク切れを起こしやすいので慣れないうちは、以下の項目を都度チェックしながら使ってみましょう。
- 現在いる階層はどこか
- 相対パスを違う階層で使い回していないか
- 相対パスの始まりは「./」になっているか
使えると便利なルート相対パス
実は、絶対パスと相対パスの他に「ルート相対パス」というパスもあります。ルート相対パスでは「ドメイン部分を省略したパス部分」を記述することになります。
ルート相対パスの記述例
/top/middle/under/sample.html
ルート相対パスは「相対パス」と「絶対パス」を掛け合わせた性質をもった記述方法で以下の特徴があります。
- /から始まるパスになる
- ルート(1番上の階層)のフォルダから「目的ファイル」までの経路を記述する
- ドメインが変更になっても修正の必要がない
- ローカル環境でも使用可能(開発環境を整える必要あり)
ただ、上記の特徴の他に「相対パスと比べると記述量が多くなってしまう」というデメリットもあります。
使用用途としては、複数人でサイト制作をする大規模案件などに使われることが多いです。
絶対パスと相対パスの違い
絶対パスと相対パスの違いをまとめると以下のようになります。
絶対パス | 相対パス | |
記述範囲 | https://から目的ファイルまで | 今いる階層から目的ファイルまで |
記述量 | 多い | 少ない |
ドメイン変更時の対応 | 必要 | 不要 |
ローカル環境での確認 | 不可 | 可能 |
使いまわしの可否 | 可能 | 不可 |
両者ともに一長一短あるため、大切なのは「どちらか一方だけを使う」と決めてしまうのではなく、使用場面、目的に応じて適切に使い分けることです。
では、絶対パスと相対パスはどのように使い分ければ良いのでしょうか。
絶対パスと相対パスの使い分け方
絶対パスを使うべき場合と相対パスを使うべき場合はある程度決まっているので、以下表で基本セオリーを確認してみましょう。
絶対パスを使うべきケース | 相対パスを使うべきケース |
・外部サイトへのリンク
・個人ブログなど小規模サイトの場合 |
・基本的にサイト作成全般で使う
・企業サイトなど大規模サイトでローカル環境での確認が必要な場合 |
昨今では、「自分のサイト内へのリンク=相対パス、外部サイトへのリンク=絶対パス」が主流になっています。ひとつ安心していただきたいのが、相対パスか絶対パスかどうかで「Googleからの評価」には影響ありません。
あくまで、保守のしやすさ・開発のしやすさの観点で使い分ける必要があるということです。
まとめ
今回は、絶対パスと相対パスについて解説しました。それぞれ異なる特徴を持っているため、使いこなせるようになるまでは記事を見直して実践していきましょう。
特に、パスが間違っていると「リンク切れ」を起こしてしまいSEO観点からもマイナス要素となってしまうので、スムーズに使いこなせるようになりましょう。