HTMLでSEO対策としてのディレクトリ構成を現役デザイナーが解説【初心者向け】
初心者向けにHTMLでSEO対策としてのディレクトリ構成について解説しています。ディレクトリ構造の基本と、HTMLにおいての理想的なディレクトリ構成について説明します。 サイト全体の構成の最適化の際に必要な知識となるので、ぜひ理解しておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLでSEO対策としてのディレクトリ構成について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
SEO対策としてのディレクトリ構成について詳しく説明していくね！
お願いします！
ディレクトリ構成とは
ディレクトリ、というとなんだかとっても専門的で難しい言葉に聞こえますが、Webサイトをサーバーにアップロードしたときにページの役割ごとにフォルダを分けてhtmlファイルを格納する、パソコンで言うところの「フォルダ」のことを指します。そして、このフォルダの構造がどのように構成されているかが「ディレクトリ構成」となるわけです。
例えば、とあるコーポレートサイトがあったとして、
- TOPページ
- 商品説明(products)
- 会社概要(company)
- 求人一覧(recruit)
- お問い合せ(contact)、
という構成で作成されていたとします。その場合、このサイトのディレクトリ構成は以下のようになります。
|
階層
|
ページ名称
|
URL例
|
|
|---|---|---|---|
| 第一階層 | TOPページ | https://hoge.com | |
| 第二階層 | 商品説明一覧 | https://hoge.com/products | |
| 会社概要 | https://hoge.com/company | ||
| 求人情報 | https://hoge.com/recruit | ||
| お問合せ | https://hoge.com/contact | ||
| 第三階層 | 商品説明 | 商品A | https://hoge.com/products/producta |
| 商品B | https://hoge.com/products/productb | ||
| 商品C | https://hoge.com/products/productc | ||
| 求人情報 | 新卒 | https://hoge.com/recruit/graduate/ | |
| 中途採用 | https://hoge.com/recruit/carrer | ||
HTMLにとって理想的なディレクトリ構成とは
空白の階層が無いこと
上記のサイトで説明すると、例えば、第二階層に「https://hoge.com/shop/」というURLがないにもかかわらず、「https://hoge.com/shop/producta」など第3階層のURLは存在する、というのはあまり好ましくありません。
空白のディレクトリのない、階層がきちんと整ったディレクトリ構成をすることで、検索エンジンがそのページを探しやすくなります。
URLを見ただけでそのページが何の情報を扱っているのか判断できる
https://hoge.com/products
URL（ディレクトリ名）を検索エンジンが見ても、ユーザーが見ても一目でわかりやすい名称にすることで、そのページやディレクトリがなんのためのものなのかをわかりやすくする働きがあります。
また、スペル間違いやローマ字表記などによる検索エンジンがなんのテーマかわからないようなディレクトリを作成するのもあまり好ましくありません。
階層の構造にストーリー性がある
上の表にあるURLを例にとってみると
https://hoge.com/recruit/graduate/
と、「求人情報」の下に「新卒」があることで、ディレクトリの構成が分かりやすく、URLを見るだけでどのような流れでサイトを閲覧できるのかが容易に想像できます。
このように、親階層と子の階層にストーリー性を持たすことで、ユーザーにも検索エンジンにもサイトの構造が分かりやすくなり、SEOにも効果が期待できます。
SEO対策としてのディレクトリ構成を整えよう
ディレクトリ階層を整理すると、ユーザーや検索エンジンにとってはどのページがどのような流れで構成されているかを容易に判断でき、見やすいサイトになりますし、サイト管理者にとってもディレクトリが整理され、更新や管理のしやすいサイトに生まれ変わります。
ぜひ、この機会にディレクトリの構成を見直してみましょう。
監修してくれたメンター
| メンター増田直子
40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。 趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
