HTML構造とセマンティックは前提条件

セマンティックHTMLは、SEOのためのテクニックではありません。

• 情報の意味を正しく表現する
• 構造を第三者が理解できる状態にする
• 将来の改修や拡張に耐えられる

FHWでは、これらすべての前提として、HTML構造とセマンティクスを設計段階で決めます。
これは、評価・保守・拡張すべてに関わる構造上の基礎設計です。

title / meta description は「役割定義」

title や meta description は、検索順位を上げるためのコピーではありません。
各ページが

• 何についてのページなのか
• サイト全体の中でどんな役割を持つのか

を定義するための、構造要素の一つです。
そのため、FHWでは、情報設計・サイトマップ設計と並行して、title / meta の方向性を設計します。

OGP設計は「外部への構造表現」

OGPは、X（旧Twitter）や Facebook、Teams / Slack などでURLが共有された際に表示される、

• 画像
• タイトル
• 概要

を制御する仕組みです。
FHWでは、OGPをページの意味を外部に正しく伝えるための構造設計として扱います。
適切な画像とテキストを設定し、ブランドの印象を損なわず、内容が誤解なく伝わる状態を整えます。

URL設計と正規化は最初に決める

同じ内容のページが、複数のURLでアクセスできる状態は、、

• ユーザーにとって分かりづらい
• 検索エンジンにも評価されにくい

という問題を生みます。
そのため、新サイトではあらかじめURLルールを定義し、固定します。
例：

• http → https に統一
• www なしに統一（リダイレクト設定）
• 末尾スラッシュあり（例：/quality/）
• index.html などの静的ファイル名は出さない
• すべてディレクトリ内 index.html で管理

早い段階でこれらを決めることで、

• 重複インデックスのリスクを防ぐ
• 将来の構成変更時にも迷いが少なくなる

といった効果が期待できます。

パンくずナビとディレクトリ構造

パンくずナビは、

• ユーザーに現在地を伝える
• 検索エンジンに階層構造を理解させる

という二つの役割を持ちます。
FHWでは、パンくずナビの構造とディレクトリ構成を揃えることで、人にも機械にも分かりやすい階層構造を設計します。
例：

• /strength/（トップ > 強み）
• /business/（トップ > 事業領域）
• /quality/（トップ > 品質管理）

URLパス・パンくず・H1の方向性を揃えることで、

• サーバー内の整理がしやすくなる
• ページ追加時の判断がブレにくくなる
• 長期運用でも破綻しにくい構造になる

というメリットが生まれます。

内部リンクは「文脈」で設計する

内部リンクは、数を増やすことが目的ではありません。
FHWでは、

• なぜここでリンクするのか
• どのページへつなぐのが自然か

という文脈と役割を重視します。
特に、リンクテキストは、リンク先の内容を的確に表現していることを前提に設計します。

構造設計は技術的な判断

構造設計は、

• デザイン
• コーディング
• SEO設定

FHWでは、構造を先に設計することで、実装・運用・改善を安定させます。