SEOを意識したHTMLコーディング：タグ構造とalt属性の最適化

Posted on by

〜検索に強いサイトは「HTMLの設計」が9割〜

SEOは「コンテンツ」だけでは勝てない

SEOというと、多くの人が最初に思い浮かべるのは

  • キーワード選定
  • 記事の文章
  • 被リンク
  • E-E-A-T

といった“コンテンツ側”の話だと思います。

もちろんそれらは重要ですが、実務の現場ではそれ以前に…

HTMLが整っていないサイトは、内容が良くても正しく評価されにくい

という事実があります。

検索エンジン（Googleなど）は、人間のように「雰囲気」でページを理解しません。
HTMLの構造から、

  • このページは何が重要なのか
  • どこからどこまでが本文なのか
  • どの情報が見出しで、どれが補足なのか

を読み取り、評価します。

つまりSEOに強いHTMLとは、

検索エンジンが理解しやすい文章構造を、正しくマークアップできているHTML

です。

この記事ではその中でも特に重要な

  • タグ構造（見出し・セマンティックHTML）
  • alt属性（画像SEO＆アクセシビリティ）

に絞って、すぐ実装に使える形で解説します。

第1章：SEOを強くするHTMLの基本は「文書構造」

HTMLは見た目を作るためのものではなく、文書の意味を整理する言語です。

例として、以下のような“divだけのHTML”はSEO的に弱くなりがちです。

<div class="title">サービス紹介</div>
<div class="section">
  <div class="headline">料金について</div>
  <div class="text">〜本文〜</div>
</div>

人間は見た目で理解できますが、検索エンジンは

  • 「title」って見出し？ただの文字？
  • 「headline」って何？本文とどう違う？

となりやすいです。

SEOに強い構造にするとこうなります。

<h1>サービス紹介</h1>

<section>
  <h2>料金について</h2>
  <p>〜本文〜</p>
</section>

タグの意味が正しくなるだけで、検索エンジンの理解度が上がります。

第2章：セマンティックHTMLがSEOに効く理由

セマンティックHTMLとは、

タグの役割を意味に沿って使うHTML

のこと。

特に重要なのは次のタグです。

  • header
  • nav
  • main
  • section
  • article
  • aside
  • footer

たとえば以下のようにページの“骨格”を作るのが理想です。

<header>
  <!-- ロゴ、グロナビ -->
</header>

<nav>
  <!-- ナビゲーション -->
</nav>

<main>
  <article>
    <h1>記事タイトル</h1>
    <section>
      <h2>見出し</h2>
      <p>本文…</p>
    </section>
  </article>
</main>

<footer>
  <!-- 会社情報 -->
</footer>

SEOで得するポイント

  • クローラーが「主要コンテンツ＝main」を判別できる
  • 「ナビ＝nav」「補足＝aside」が明確になる
  • 本文の構造が整理されることで品質が上がる

結果として、ページ全体の評価・理解がブレにくいサイトになります。

第3章：見出しタグ（h1〜h3）最適化はSEOの必須事項

見出しの使い方で、SEOはかなり変わります。

SEO的に強い見出し構造

  • h1：ページで1回（ページの主題）
  • h2：章（大項目）
  • h3：節（小項目）

例

<h1>SEOを意識したHTMLコーディング</h1>

<h2>タグ構造がSEOに効く理由</h2>
<h3>セマンティックHTMLとは</h3>
<h3>div地獄がSEOを弱くする</h3>

<h2>alt属性の最適化</h2>
<h3>altに入れるべき情報</h3>
<h3>NG例</h3>

❌ よくあるNG例

NG1：h1が複数ある

<h1>サービス紹介</h1>
<h1>料金</h1>

→ 検索エンジンが「主題が複数ある？」となる場合があります。

NG2：順番が飛ぶ（h2の次がh4）

<h1>記事タイトル</h1>
<h4>小見出し</h4>

→ 文書構造が崩れます。

NG3：見た目のために見出しを使う

見出しは「デザイン用」ではなく「文書構造用」。
見た目はCSSで整えましょう。

第4章：alt属性はSEOとアクセシビリティ両方に効く

alt属性とは、画像の代替テキストのこと。

<img src="service.jpg" alt="不用品回収サービスの作業風景">

画像が読み込めない場合に表示されるだけでなく、Googleはalt属性を読んで

  • 画像の内容
  • 文脈（何に関する画像か）
  • ページとの関連性

を理解します。

つまりaltは、画像SEOのメイン要素です。

第5章：alt属性の「最適化ルール」

altの基本ルール

  1. 画像が何かを正しく説明する
  2. キーワードは自然に含めてOK
  3. 詰め込みすぎない
  4. 装飾画像は空alt

良いaltの例

良い例1（写真）

<img src="staff.jpg" alt="スタッフが遺品整理の仕分けをしている様子">

良い例2（商品画像）

<img src="plan.jpg" alt="遺品整理スタンダードプランの料金表">

良い例3（場所）

<img src="office.jpg" alt="大阪営業所の外観">

悪いaltの例

NG例1：意味がない

<img src="aaa.jpg" alt="画像">

NG例2：ファイル名

<img src="staff_01.jpg" alt="staff_01">

NG例3：キーワード詰め込み

<img src="service.jpg" alt="不用品回収 大阪 格安 口コミ おすすめ 業者 即日対応">

→ スパムっぽく見えて逆効果になり得ます。

第6章：装飾画像はaltを空にするのが正解

背景・装飾・区切り線など「意味を持たない画像」は

<img src="icon.svg" alt="">

が正解です。

理由はシンプルで、

  • 読み上げソフトが無駄に読み上げない
  • SEO的にもノイズを増やさない

から。

特にアイコンの連発でaltを全部埋めてしまうと、評価がブレやすくなります。

第7章：SEOに効く「画像とテキストの関係」も意識する

altだけではなく、画像周辺のHTML構造も重要です。

たとえば以下のようにfigure構造が使えると強いです。

<figure>
  <img src="result.jpg" alt="施工後の外壁塗装（ビフォーアフター）">
  <figcaption>施工事例：外壁塗装（大阪市）</figcaption>
</figure>

Googleは

  • alt
  • figcaption
  • 周辺テキスト

を合わせて理解します。

つまり、「画像単体」で戦うより、文脈ごと整えるのがSEOの本質です。

第8章：SEO目的なら「画像内テキスト」よりHTMLテキスト

よくある落とし穴として、

  • 重要な説明が画像の中に書かれている
  • ボタンが画像になっている
  • キャッチコピーが画像に焼き込まれている

というケースがあります。

SEO的には、画像に書いた文字は弱い（読み取れるが確実性が低い）ので、

重要な情報は必ずHTMLテキストで書く

が鉄則です。

第9章：納品前に確認したいSEO HTMLチェックリスト

最後に、実務で使えるチェックリストです。

タグ構造

  • header / nav / main / footer が適切
  • section / article の使い分けOK
  • divだけの構造になっていない

見出し

  • h1がページに1つ
  • h2→h3の階層が自然
  • 見出しを装飾目的で使ってない

alt属性

  • 意味のある画像に適切なaltがある
  • 装飾画像はalt=””
  • キーワード詰め込みになってない
  • 画像の周辺テキストと整合している

まとめ：SEOは「HTMLで伝える力」で決まる

SEOはコンテンツも大事ですが、
その前提として 「検索エンジンに正しく伝えるHTML」 が必要です。

  • タグ構造でページの意味を整理する
  • 見出しで文書構造を明確にする
  • alt属性で画像の内容を正しく説明する

この3点を押さえるだけで、
あなたのコーディングは “SEOに強い実装” に一気に近づきます。

見た目を作るだけでなく、意味を設計する。
それが「成果の出るHTML」です。

#SEO #HTML #HTMLコーディング #alt属性 #セマンティックHTML #Web制作 #コーディング #フロントエンド #Webデザイン #Web開発 #WordPress #SEO対策 #検索上位 #初心者向け #Web制作初心者