適切なディレクトリ設計とパンくずリストの構造化について

更新日:2022年6月5日

要約

• 重要性を増してきた「ディレクトリ構造」について解説
• トップページからの下層コンテンツへ派生させる考え方
• 構造化データの活用、クローラービリティの向上について

SEOを意識したディレクトリ構造

昨今、重要性を増してきた【ディレクトリ構造】について解説していきます。
仕事柄「このサイトを見てもらえますか？」と相談を受けて、該当のサイトを拝見することが多いのですが、デザインやコンテンツの良し悪し以前の段階で驚くことが多いのが、このディレクトリ構造です。

全てのディレクトリが「第２階層で終わっている」といった程度ならマシな方で、とんでも無いサイトだと、ドメイン直下に【kaisya.html】や【お得情報-1.html】といったHTMLファイルが直置きで乱立しているサイトが存在します。

FTPクライアントでFTPにログインすると、大量のファイルリストの閲覧や解析に表示されるまで何十秒もかかってしまうといった事例もあります。

HTTPによるサイトブラウジングにおいては大きな弊害はありませんが、視覚的に把握しにくい事から、整頓する意識が低くなりがちです。
このディレクトリ構造は、SEO対策を意識されている方はもちろんなのですが、サイト制作者の方々にも基本的な考え方として、しっかり理解していただきたい内容です。
ディレクトリを使った構造化を適切に行うことで、クローラービリティ向上はもちろん、メンテナンスや運用に関してもスムーズに行えるという大きなメリットがあるので、是非正しい知識を身につけていただく事をお勧めします。

具体的な考え方

まず、HTMLファイルはindex.html(index.phpやindex.htm含む)以外は必要ないと言い切ってしまいます。
WEB上で可視化できるファイル名は、目的や意図がしっかりとある場合を除いて不要です。
何も考えずにファイル名やディレクトリ名を決めてしまっている方は、一先ずこのルールを守っていただけると、上記のようなトラブルを防ぐことが出来るでしょう。

DirectoryIndexをうまく活用しよう

WEBサーバソフトウェアにおいて、多くのシェアを持つApacheやNginxは、DirectoryIndex（ディレクトリインデックス）という概念を持っています。

.htaccess や httpd.conf に明示的な記述を行うこともありますが、デフォルトでは、おそらくindex.htmlとindex.phpあたりがDirectoryIndexとなっているはずです。

つまり、ディレクトリ（ [ ▲▲▲.com/○○○/ ] といった形）にアクセスした際、該当ディレクトリの直下にindex.htmlやindex.phpといったファイルがあれば、自動的にそのファイルを出力してくれるような設定になります。

つまり、ディレクトリ名をコンテンツ名にしてしまえば、DirectoryIndexで指定されたファイルのみでサイトを構築できてしまいます。

つまり、ディレクトリ名を上手く取り扱うだけで構造的なサイトが実現できるのです。

各ディレクトリにindex.htmlを置いたところまでは良いですが、該当ページへのハイパーリンクを貼る際に、

<a href=”/profile/index.html”>プロフィール</a>

といった記述しないように注意してください。

これでは折角のDirectoryIndexも効果が半減です。
稀に見かけるのですが、この場合は、index.htmlの表記は必要なく、 /profile/ のみで構いません。

URLが長くなってしまう上に、Googleに /profile/ と /profile/index.htmlと２つURLがあると認識される危険性があります。

ディレクトリ＋DirectoryIndexの３つのメリット

このディレクトリ＋DirectoryIndexの構成は３つのメリットがあります。

①URLを短くできる

ディレクトリには拡張子が存在しませんので、「.html」や「.php」、「.cgi」といった拡張子分を短くする事が出来ます。微々たる効果かもしれませんが、視覚的にもわかりやすく、Googleに処理（キャッシュ）させるデータ量も削減できるので、クローラービリティも高めることができます。

②運用が楽になる

同ディレクトリの中に「index.html」「お得情報-1.html」「新しいページ.html」「mailform.php」といったHTMLファイルが複数あると、見づらい上に管理が煩雑になる可能性があります。

また、各ページで使用されている画像ファイルや設定ファイルをゴチャ混ぜに放り込んでいると、「この画像はいったいどの階層のどのページで使われているのか？」など、ファイルの役割が瞬時に判断しづらくなるといった問題もあります。

こういった場合は、カレントディレクトリに/img/や/js/というディレクトリを作成することで、どのディレクトリのindex.htmlが使用している外部ファイルなのかを簡単に管理できます。

また、カレントディレクトリにあるindex.htmlが使用している画像を、別のディレクトリでも共有している場合は、ルート（また使用されている中で一番上の）ディレクトリに/common/img/といった共有ディレクトリを作っておけばスッキリと整理できます。

③親子関係（上位、下位）の位置づけが明確になる

サイト構造（ディレクトリ構造）は、ピラミッド型に作る事を意識します。
これも意外と知られていない、またはニュアンスだけ捉えてはいるが、実際にどのようなルールで構築しているかを明確に理解出来ていない場合が多いです。

このピラミッド型ディレクトリ構造とは具体的にどのような作り方でしょうか。

簡単に説明すると、トップページから各下層のコンテンツ一覧に派生し、下層コンテンツ一覧から下層コンテンツ詳細ページに派生するといった構図です。
コンテンツ詳細からも、更に専門的に解説したページや関連する下層ページへ派生させてもよいので、全体像を見渡すと、すそ野が広いサイトマップとなります。

共有で使用するファイル置き場であるcommonディレクトリは、末端の最下層には必要ないので、最終ディレクトリの１つ手前から上に設置する事になります。

もちろん、ディレクトリ内のindex.htmlで画像や外部ファイルが使用されていない場合や、上階層のcommonで済む場合は、どのディレクトリであっても、/img/や/js/を入れる必要がないので、適宜考えてディレクトリを作成するようにします。

上図の派生パターンさえ一度頭に叩き込んでしまえば、自分なりのカスタマイズは必要なものの、大きく間違えずに済むかと思います。

世界的なシェアを誇るWordpressの考え方も、現在のところデフォルトだとこの考え方に近いので、その有用性がわかるかと思います。
当たり前だろと思っている人ほど、実は完璧には出来ていないので、今一度自分の考え方や実装方法を再確認してみましょう。

パンくずリストについて

構造的なサイトを表現する補助的な役割を担うもう１つの方法に、パンくずリストがあります。

前述のディレクトリ構造は主にクローラーに効力を発揮する施策であるのに対して、こちらは視認性が高く、ユーザービリティも同時に上げる施策であると言えるでしょう。

また、ディレクトリ構造とセットでパンくずリストを設置することにより、相乗効果でより明確にサイト構造を訴求することが可能であると考えられます。

また、このパンくずリストを設置する際は、前項のディレクトリ構造が適切に構築されていないと、各ページの親子関係が一致しなくなります。
ディレクトリの上下関係や区画が整理されていると、パンくずリストもスムーズに作成がすることが出来ます。
ディレクトリ構造とパンくずの構造の乖離を防ぐことが出来るといえるでしょう。

ルート直下にファイルやディレクトリを並べているだけであると、「 TOP > コンテンツ名」と直下型コンテンツばかりのパンくずリストが大量に設置されることになり、パンくずリストの存在意義が薄くなってしまいます。

ディレクトリ設計を疎かにして、パンくずリストだけ綺麗に区画整理されているサイトもたまにありますが、折角なのでディレクトリ構造とパンくずリストは統一させましょう。

表記方法は非常にシンプルで、「TOP（サイトルート） > 最初の分岐点> ２つ目の分岐点> ３つ目の分岐点 > カレントディレクトリ」とするだけです。
※４つ目、５つ目がある場合は更に掘り進める

しかしながら、パンくずリストの出力（レンダリング）はHTMLなので、視覚的にわかりやすいデザインで設置すればよいでしょう。

クローラーに対しては、このパンくずリストを以下のような方法で訴求することが出来ます。

構造化データを使おう

それは「構造化データ」です。

構造化データの多様性については以下で解説しています。

構造化データには、様々な使い方がありますが、パンくずリストもこの構造化データを用いて表現することが可能です。
HTMLで記述されたパンくずリストの要素に、 などの属性を追加したmicrodataとして表現したり、構造化データを JSON 形式として、ヘッダ内にscript タグで記載することもできます。
手作りのスタティックなページの場合は、記述に少々の手間がかかる作業となってしまいますが、Wordpressにてサイト構築されていれば、パンくずリストに関連するプラグインをインストールするだけで、JSON-LDやmicrodataでといったパンくずリストが簡単に実装できることでしょう。

ユーザービリティーだけではなく、クローラービリティーも意識したサイトであるとみなされる可能性も上がるので、導入することによって損はありません。

まとめ

ディレクトリ構造の最適化は、SEO対策において最重要項目の１つであると言っても過言ではありません。
単にファイルやディレクトリを思いつきのまま設置するのではなく、ユーザーの求めている答えに対して「どれほど最短ルートで誘導できるか」を徹底的に考えます。

また、ここでも意識するべきところは、Googleにどれだけ「気持ちよくクロールしてもらえるか」、「クローラーの負担を減らし、混乱させないような導線設計になっているか」に重きを置くことが、順位を上昇させるテクニックであると考えられます。