[HTML] 失敗談^^;・・・相対パスと絶対パス

現在、SEOの勉強のためにSEOの施策サイトを作成しています。
そのサイトでカテゴリを少しでも容易に管理できるよう2段のフォルダ階層としています。
全画面共通のヘッダー部分は、テンプレート化して使用しています。

そのテンプレートで、失敗をしていました(T_T)。
気をつけていれば全く問題のないことなのですが、メニューのボタンのonclickの中のURLの記述を”/”を付けづに記述してしまい、相対パスになって居ました。
ちゃんとリリース後確認していれば良かったのですが、していませんでした。。。。
また、JavaScript内の記述のため、Googleマスタツールのリンク切れ報告にも引っかかりませんでした。
しょうもないミスをしていました。。。

そこで、開発備忘録という内容でもないのですが、悔しいのでURLを記述する際の「相対パスと絶対パス」についてメモっておきます。

相対パスと絶対パス

URLを書く際に絶対パスを使用することも有りますが、自サイトのWebページをリンクする際は、相対パスのほうがデバッグする際に便利なので相対パスを使う方が多いと思います。
ちなみに、Googleは絶対パスの方が良い様なことを言って居ると他のブログで読みましたが、どちらを使ってもSEO的には問題ないそうです。

絶対パスは、
・HTTP(S)のプロトコル指定
・サーバ(ホスト)のドメイン指定
・Webサイト・Webページの指定
と、全て指定する方法です。

相対パスは、
現在の位置から見た、Webサイト・Webページの指定になります。
で、指定の仕方には、「..」と「/」を使うことができます。

  1. 同じディレクトリに存在するWebページAAA.htmを指定する時は、なにも付けず「AAA.htm」で。
  2. 一つ上のディレクトリに存在するWebページAAA.htmを指定する時は、「../」を頭に付け「../AAA.htm」で。
  3. 一つ下のディレクトリ「DDD」に存在するWebページAAA.htmを指定する時は、「DDD/」を頭に付け「DDD/AAA.htm」で。
  4. 二つ上のディレクトリに存在するWebページAAA.htmを指定する時は、「../../」を頭に付け「../../AAA.htm」で。
  5. 二つ下のディレクトリ「DDD/EEE」に存在するWebページAAA.htmを指定する時は、「DDD/EEE/」を頭に付け「DDD/EEE/AAA.htm」で。
  6. Webサイトのルートディレクトリに存在するWebページAAA.htmを指定する時は、「/」を頭に付け「/AAA.htm」で。
  7. Webサイトのルートディレクトリの一つ下のディレクトリ「CCC」に存在するWebページAAA.htmを指定する時は、「/CCC/」を頭に付け「/CCC/AAA.htm」で。

今回は、「/」を頭に入れ忘れて居ました。。。。