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

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

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

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

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

具体的な考え方

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

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.txtといった名称のファイルがあれば自動的にそのファイルを出力するような設定になります。

つまり、ディレクトリ名をコンテンツ名にしてしまえば、index.htmlだけでサイトを構築できてしまいます。よって、ディレクトリを上手く活用した設計を行う事で構造的なサイトが実現できるのです。

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

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

といった記述される方がいますが、これでは折角のDirectoryIndexも効果が半減です。度々見かけるのですが、この場合は、index.htmlの表記は必要なく、むしろデメリットしかないので気をつけてください。

ディレクトリ+DirectoryIndexの3つのメリット

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

①URIを短くできる

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

②運用が楽になる

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

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

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

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

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

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

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

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

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

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

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

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

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

パンくずリストについて

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

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

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

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

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

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

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

しかしながら、パンくずリストの出力(レンダリング)はHTMLである事が多いので、人間の視覚的にわかりやすいデザインで設置すればよいのですが、クローラーに対しては、このパンくずリストを別の方法で訴求する技法があります。

構造化データを使おう

それは「構造化データ」というものです。

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

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

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

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

まとめ

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

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

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

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

, , , , , ,