AMPページに使う相対パスはルート相対パスにする

スポンサーリンク

内部リンクには絶対パスと相対パスの指定方法があります。WordPressのプラグインを使ってAMPページを作る場合には、通常のページの内部リンクを相対パスでの指定はルート相対パスでなければなりません。
理由は簡単なことで、AMPのページを出力するファイルのディレクトリは、通常ページとは違うので相対パスだと間違いが起きます。

リンク

絶対パスと相対パスとルート相対パスの違い

WordPressをはじめ、ブログではパスは絶対パスが一般的に使われています、というか、htmlタグを打ちこまずにボタン押しでリンクタグを作る関係から、絶対パスで自動的に作られます。

しかし、常時SSL化が当たり前になってきた今日、現在は非SSLサイトでも将来SSL化にすることもあります。
WordPressではプラグインでURL変更をすることが出来ますが、プラグインが多くなるのも気になります。

将来のURLの変更にそなえて相対パスでという考え方もあります。
*このサイトはルート相対パスにしています。

HTMLサイトを作る時には、パスをどうするかは必ず検討するポイントになりますので、ここでパスの違いについてお伝えします。

絶対パスとは

このサイトでは

https://www.webmaster-guide.com/sample1/

が[sample1]という記事のURLを絶対パスで表示したものです。

このように記述すると[sample2]からでも[sample3]からでも、どのページからのリンクでも[sample1]を指定できます。

相対パスとは

相対パスは

https://www.webmaster-guide.com

の部分を省いて記述する方法です。
分かりやすく説明する為に図を作ってみました。

相対パスと絶対パス

[itemフォルダ]にある[hogehoge.html]から[imgフォルダ]の中の[hoge.jpg]へのリンクを絶対パスで記述すると次のようになります。

https://www.webmaster-guide.com/img/hoge.jpg

相対パスの記述は次です。

../../img/hoge.jpg

[hogehoge.html]の現在地から[hoge.jpg]の位置を指定するので、このような記述になります。

ルート相対パスとは

上の相対パスは[hogehoge.html]の位置が変わるとリンクは壊れてしまいます。
リンクを壊さないで相対パスを記述できるのがルート相対パスです。

/img/hoge.jpg

最初に記述してある“/”はルートディレクトリを表します。

*ルートディレクトリとは、ウェブサイトのトップページ(index.html又はindex.php)がある最上部の階層です。

相対パスのメリット

HTMLで静的サイトを作る場合は、ローカルでブラウザ表示の確認ができるので相対パスが便利です。
また、ドメインが変わってもファイルはそのまま使えるというところも便利な点です。

WordPressサイトはあまり拘らなくてもよいのですが、HTMLサイトを作ることもあるかも知れないので覚えておいて下さい。

コメント