https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Common Rules > パス記述

パス記述


パス記述の基本的なルールです。
「_common」内のパス記述は、注意する必要があります。
また、フルパス(絶対パス)記述にも注意が必要です。

「CODE」ボタンをクリックすると参考コードを参照できます。


パス記述


リンクのパス記述方法
サイト内リンクには、「index.html」や「index.php」を付けない
   理由 → SEO的に不利な重複コンテンツを避ける
TAG
<a href="/">HOME</a>
<a href="//〇〇.com/">HOME</a>
<a href="//www.〇〇.com/index.html">HOME</a> (www付き・index付き
※www付きのドメイン指定があった場合を除き、基本的にwwwも


「_common」内の全てのファイル上のパス記述方法
「_common」ディレクトリ内のパス記述は、「ルート相対パス」か「フルパス」表記 (※相対パスNG!
   理由 → どの深さのディレクトリからも参照できるようにするため
「フルパス」の場合は、頭のhttp:やhttps:を除いた「//」から始まるパス表記
   理由 → 将来のHTTPS化に備える(外部リンクも同じ貼り方が可能)
TAG
<a href="/">HOME</a> (ルート相対パス)
<a href="/about/">リンク</a> (ルート相対パス)
<a href="//〇〇.com/">リンク</a> (フルパス)
<a href="../../about/">リンク</a> (相対パス
<a href="http://〇〇.com/">リンク</a> (http:付き


参考:PHP・ルートパス等反映させるローカル環境整備


ルートパス使用でのローカル作業
ルートパスは、ドメインが変わっても問題がない(テストドメイン→本番ドメイン、http→https化など)、どこにファイルがあるのかひと目でわかる、階層が違う場所からインクルード参照してもリンク切れを起こさない、など一番オススメなパスです。
ただローカル環境で反映されない、というデメリットがあり、下記はその解決法参考です。
ローカル環境で、PHPを動作させる場合も、同様の解決法になります。

XAMPP
XAMPPを使ってローカルサーバを立てる(XAMPPで検索をすると方法がたくさん出てきます)
Dreamwiver等のXAMPPを使用する設定をする(こちらも検索で出てきます)


ページの先頭へ


次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会