【SEO基礎】検索に強いWebサイトを作るための「HTMLタグ」の書き方

SEOの基礎：HTMLタグは「検索エンジンへのメッセージ」

GoogleはHTMLタグから以下を読み取っています。

• ページの主題（h1）
• 各セクションの要点（h2〜h4）
• 強調したいキーワード（strong）
• ページの関係性（a要素、パンくず）
• 画像の内容（img alt）
• ページのメタ情報（title / meta description）
• 文章の意味（article / section / nav などのセマンティックタグ）

つまり、「タグの使い方＝SEOの土台」 です。

h1〜h6タグの正しい使い方（SEOの中でも最重要）

• 1. h1はページの主題を示すタグ（1ページに1つ）

  • ページの最重要キーワードを入れる
  • h1 は必ず1つ（見出しデザインはCSSで調整）

• 2. h2〜h4は「目次構造」を作るタグ

  Googleは「文書構造」を理解するためにhタグを読むため、次のような階層が理想です：

  h1（ページ全体の主題）
  ├ h2（大テーマ）
  │ ├ h3（詳細テーマ）
  │ └ h3
  └ h2

  よくあるNG例

  • h1をロゴに使う
  • h2の後にいきなりh4を使う
  • 見た目のサイズ調整のためにhタグを乱用する

  SEOでは意味的構造が大切。見た目はCSSで。

• 3. strong・em の正しい使い方

  strong

  検索エンジンに「ここが重要」と伝える強調タグ。
  文章中のキーワード強調に有効。

  em

  語句の「ニュアンス的強調」
  SEO効果はほぼなし。

  NG

  • strongを多用しすぎるとスパム扱い
  • 太字目的で strong を使う（CSSでやるべき）

• 4. 画像タグ（img alt）のSEO効果

  alt 属性は必須

  Googleは画像の内容を alt で判断します。
  重要ポイント：

  • 画像の内容を正確に書く
  • キーワードは自然に
  • 装飾画像は alt=””（空にしてOK）

  画像検索SEOにも影響します。

• 5. title と meta description の作り方

  title（最重要）

  • 32文字前後
  • 主要キーワードを入れる
  • ページ固有であること

  meta description

  検索結果のタイトル下に掲載される説明文欄。SEO効果は無いがCTR（クリック率）改善に直結。

• 6. セマンティックタグ（HTML5タグ）で文書構造を伝える

  Googleは次のようなタグを理解しています：

  タグ	意味・役割	使うべき場面（実務例）	SEO観点のポイント
  <header>	ページまたはセクションの冒頭部分	・全ページ共通のヘッダー（ロゴ・ナビ） ・記事の冒頭（タイトル・概要）	・文書構造を整理する役割 ・ロゴ画像に h1 を入れないよう注意
  <main>	ページの主要コンテンツ領域	・ブログ記事本文 ・サービス紹介ページの本文	・1ページに1つだけ使用 ・サイドバーなどは含めない
  <footer>	ページやセクションの締め部分	・コピーライト ・関連記事リンク ・共通フッターナビ	・ページ全体の締めにも、 セクション内の締めにも使用できる
  <nav>	主要ナビゲーション	・グローバルナビ ・パンくずリスト ・ページ内目次	・リンクの「まとまり」に使用 ・単体リンクを nav で囲まないこと
  <article>	独立して成立するコンテンツ	・ブログ記事 ・ニュース投稿 ・レビュー1件分	・単体で完結する情報のまとまりに使う ・複数の article が並んでもOK
  <section>	意味のあるコンテンツの区切り	・h2 で分けるコンテンツブロック ・サービスの特徴セクション	・見出し（hタグ）とセットで使うのが基本
  <aside>	本文とは独立した補助コンテンツ	・サイドバー ・関連記事 ・補足コラム	・本文（main）の外に置くと構造が明確になる
  <figure> <figcaption>	画像・図表とその説明文	・図表の説明 ・画像ギャラリー ・コードスニペットのキャプション	・画像の意味が明確になりSEO的にプラス ・alt と figcaption の相乗効果が高い

• 7. 内部リンクを最適化する（SEOの即効性が高い）

  アンカーテキストにキーワードを入れる

  リンク文字列に使いがちな「こちら」「詳しく」よりも、リンク先の内容を表すキーワード文字列が理想。「こちら」「詳しく」ではGoogleは意味を読み取れない。

  パンくずリストは必須

  WordPressなら Yoast / RankMath / Breadcrumb NavXT などで自動生成できます。

• 8. 構造化データ（Schema.org）は大きなSEO加点

  主に以下を利用：

  • Article（コラム）
  • BreadcrumbList（パンくず）
  • FAQPage（FAQ）
  • Organization（企業情報）
  • WebSite（サイト情報）
  ColumnSchema.orgとは？

• 9. モバイルSEO：この2つは必須

  viewportの設定

  ウェブページが表示されるブラウザの可視領域設定

  Core Web Vitals の改善

  • CLS（ズレ）
  • LCP（表示速度）
  • FID（操作性）

  特に画像の width / height 指定が重要。

まとめ：正しいタグ構造は『SEOの土台』

文章よりも先に「正しいHTMLタグ設計」ができているかがSEOの出発点です。

SMILEWORKSでは、単に見た目を整えるだけではなく、HTMLタグの意味に沿ったマークアップを重視しています。

• hタグの正しい階層構造
• セマンティックタグによる文書設計
• alt 属性の最適化
• JSON-LDによる構造化データ
• アクセシビリティとSEOを両立したコーディング
• コアウェブバイタルを意識した画像・レイアウト設計

これらを制作の標準として運用し、「Googleに正しく評価されるコード」と「利用者にとって読みやすくアクセスしやすいサイト」の両立を常に意識しています。

地味に見える部分こそ、長期的なSEOと品質に直結します。
こうした技術的な基礎を丁寧に積み上げることで、検索に強く、安心して運用できるWebサイトづくりを心がけています。