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

Last Updated on

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

ここ最近、相談を受けることの多い【ディレクトリ構造】について解説していきます。
よく「このサイトを見てくれ」と言われて拝見しますが、デザイン以前の段階で「うわ、なんじゃこりゃ」と多く感じるのが、このディレクトリ構造です。

全てのディレクトリが「第2階層までで終わっている」といった程度であればまだマシな方で、とんでも無いサイトだと、ドメイン直下に【kaisya.html】や【お得情報-1.html】といったHTMLファイルが直置きされていて、FTPクライアントソフトでFTPにログインすると、ファイルリストの閲覧に何秒もかかってしまうといった事もあります。

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

具体的な考え方

まず、HTMLファイルはindex.html(index.phpやindex.cgi含む)以外は必要ないと言い切ってしまいます。
しっかりとした目的や、なんらかの意図がある場合は例外ですが、何も考えずにファイル名やディレクトリ名を決めている方は、一先ずこのルールを守っていくと、構造化のコツが見えてきます。

DirectoryIndex

そもそもWEBサーバにおいて、ほとんどのシェアを持つApacheやNginxは、ディレクトリインデックスという概念を持っています。

DirectoryIndex index.html index.txt /cgi-bin/index.pl

とした場合、index.html と index.txt のどちらもディレクトリ内に存在しない場合、CGI スクリプト /cgi-bin/index.pl が実行されます。 Apache Software

上記は .htaccess や httpd.conf に明示的な記述を行う場合の例ですが、デフォルトでは、ほとんどindex.htmlとindex.phpあたりがディレクトリインデックスとなっているはずです。

つまり、該当ディレクトリ( [ ▲▲▲.com/○○○/ ] といった形)にアクセスした際、index.htmlを自動的に出力するようになっている為、ディレクトリ名をページタイトルにしてしまえば、index.htmlだけでサイトを構築できてしまいます。よって、ディレクトリを上手く活用したディレクトリの設計する事で構造化が実現できるのです。

注意点として、各ディレクトリにindex.htmlを置いたところまでは良いですが、該当ページへのハイパーリンクを貼る際に、<a href=”/profile/index.html”>プロフィール</a>といった記述される方がいますが、これでは折角のDirectoryIndexも効果が半減です。結構色々なサイトで見かけるのですが、この場合は、index.htmlの表記は必要ないので気をつけてください。

ディレクトリ+index.htmlの3つのメリット

このディレクトリ+index.htmlから構成される技法は、3つのメリットがあります。

①URIを短くできる

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

②運用が楽になる

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

また、その各ページで使用されている画像ファイルなどもゴチャ混ぜに放り込んでいると、この画像はいったいどのページで使われているか、即時に判断しずらくなるといった問題もあります。

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

また、カレントディレクトリにあるindex.htmlが使用している画像で、別のディレクトリにあるindex.htmlでも共通で使用されている場合は、ルート(または1つ上などの)ディレクトリ直下に/common/img/といった共有ディレクトリを作っておけばスッキリします

理想的なディレクトリ構造

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

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

このピラミッド型ディレクトリ構造は、本来1記事分になるくらい、しっかりと説明しなければならないほど重要です。
簡単に説明すると、トップページから各下層コンテンツ一覧に派生し、下層コンテンツ一覧から下層コンテンツ詳細ページに派生する。コンテンツ詳細からも、更に専門的に解説したページや関係する下層ページへ派生していくといった、すそ野が広いサイトマップとなる事が理想的です。

commonディレクトリは最下層には必要ないので、最終ディレクトリの1つ手前から上に設置する事になります。

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

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

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

パンくずリストについて

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

前述のディレクトリ構造は主にクローラーに響く施策であるのに対して、こちらは目視が容易な分、ユーザーに対しても響く施策であると言えるでしょう。

クローラーに対してもディレクトリ構造とセットでパンくずリストを設置することにより、更にサイト構造の認識精度を上げる事が可能であると考えられます。

また、このパンくずリストを設置する際に、前項のような【ディレクトリ構造が適切に配置】されていない場合は、各ページの親子関係がバラバラになってしまします。ディレクトリの上下関係や区画が整理されていると、パンくずリストもスムーズに作成が可能といえるでしょう。

ルート直下にファイルやディレクトリを並べているだけだと、「 TOP > コンテンツ名」と直下パンくずリストが大量に設置されることになり、「これってパンくずリストの意味あるの?」といった状態になりがちです。

ディレクトリ構造はそっちのけで、パンくずリストだけ綺麗に区画整理されているサイトもたまにありますが、どうせだったらディレクトリ構造と双方を統一させた方が効果があります。

考え方としてはシンプルで、「TOP(サイトルート) > 最初の分岐点> 2つ目の分岐点> 3つ目の分岐点 > カレントディレクトリ」とするだけです。
※4つ目、5つ目がある場合は更に掘り進める

さて、パンくずリストの出力(レンダリング)はHTMLである事が多いので、視覚的にわかりやすいデザインで設置すればよいと思いますが、クローラーに対しては、更に別の方法でパンくずリストの効果を強める技法があります。

構造化データを使う

それは「構造化データ」になります。

パンくずリストを指定するには、少なくとも 2 つの ListItems を含む BreadcrumbList を定義する必要があります。コンテンツがパンくずリストとともに表示されるようにするには、必須プロパティが必要です。 構造化データタイプの定義

構造化データの多様性や具体的な実装方法については割愛しますが、パンくずにもこの構造化データは役立ちます。
HTMLで記述されたパンくずリストの要素に、itemprop などの属性を追加したmicrodataとして表現することもできる他、構造化データを JSON 形式として、script タグ内に記載することもできます。
手作りのスタティックなページの場合は、JSON-LDを用いてヘッダ内で表現してしまう方が簡単かと思いますが、Wordpressで構築されたパンくずリストであれば、特に何も考えずにプラグインをぶち込むだけでmicrodataが実装できる事が多いです。

主にパンくずリストに関する構造化は、クローラービリティに特化していますが、しっかりと対策すると検索結果上でURL欄の後ろの部分にパンくずリストが表示されるといったユーザーに対してのプラス作用も得られます。

このように検索エンジン上でも視覚的にわかりやすくなるので、少なからずCTRが上昇し、トラフィックも増えるので、SEO効果にプラスに作用することが考えられます。また、クローラービリティーやユーザービリティーを意識したサイトであるとみなされる可能性もあるので、やって損することはないと言えるでしょう。

まとめ

改めてになりますが、ディレクトリ構造は最重要項目の1つであると言っても過言ではありません。
単にファイルやディレクトリを思いつきのまま設置するのではなく、ユーザーが求めている答えにたどり着くまで、どのようなサイト構造であれば「わかりやすく、最短ルート」でページへ誘導できるかを徹底的に考えます。

また、前述は若干Googleへの建前であり、もっと意識するべきところは、Googleを相手に「どれだけ気持ちよくクロールさせられるか」、「クローラーの負担を減らし、混乱を招かないような経路設計を引けるか」に重きを置くことで、順位上昇を実現できていると経験から感じています。

当サイトの運営者。
主にSEO、SXO、Googleの考え方について、現場での経験をもとに、どのように対策を行えば良いかを具体的に解説できるよう努めています。詳しくはプロフィールをご覧ください。

記事が気に入ったらシェアをお願いします!

, , , , , ,