top page > computer > web > seo > sitemap_for_human.html
更新日:
文責: 重城良国

人間用のサイトマップ

いろいろなサイトマップ

Googleで検索していろいろなサイトのサイトマップをピックアップし分類してみた。

二次元的なページ

樹構造を使用しているページ

視覚的ボックスタイプ

非視覚的ボックスタイプ

水平タイプ

一次元的なページ

画面サイズによって調整するページ

このなかでのベスト

SONYのページがよくできていると思う。ブラウザの横幅によって表示を変えている。Javascriptでいろいろとごちゃごちゃやっているのだろう。めんどくさいので当サイトではこのやりかたは、今は、採用しない。

当サイトではどのようにするか

自動生成するか手動で作成するか

自動生成することとするとこのような感じになるだろうか。もうすこし見た目を考えたほうが良い。はじめは手動で作ることも検討する。

自動生成する場合

上で見たように単純にh2, h3, h4といったようにhxタグを使っていくと、どうにも見た目が悪くなる。まずは(タイトル, アドレス)を要素として持つ樹構造を抽出したうえで、深さによって処理を変えながらHTMLを生成するようなコードが必要になるだろう。

hx要素をそのままリンクにするのはあまり美しくない。むしろ普通にindex.htmlとしてディレクトリ下に含まれる感じにしたほうがきれいかもしれない。また、他のディレクトリを含まないディレクトリ内のファイルに対しては、p要素内で','で区切ってごちゃっと入れてしまったほうが、かえってきれいかもしれない。

専用のCSSを用意してh1, h2, h3 ...をインデントで表現するようにするのもひとつの手か?

すべてのリンクを入れるか

サイト内のすべてのリンクを入れるべきか。あるいはある程度まではインデックスページだけで良いか。インデックスページだけだとサイトマップの良さが生きてこない気もする。

SVGで作る

HTMLできれいに作るのは難しいように思う。SVGでもリンクが可能なようなのでSVGで樹構造を表現したマップを作ることを検討中。

正当なCSSです! HTML5 Powered with CSS3 / styling, and Semantics