こんにちは、フロントエンドエンジニアの田中です。

クライアント案件や企業サイトのコーディングを行う上で、「SEOを意識したコーディング」は今や当たり前の要件になっています。

でも、「SEOを意識したマークアップって何をすればいいの？」と聞かれることも多く、実際の現場でも見落とされがちなポイントがいくつか存在します。

今回は、エンジニア視点から「SEOを意識したHTML・CSSの書き方」をわかりやすくまとめました。

✅ 基本中の基本：HTMLの構造化

• h1は複数使えるが、ページの主タイトルは1つがベター
  HTML5ではセクションごとにh1を使ってもOKですが、SEOの実務では「ページ全体のメイン見出しとして1つ」を推奨する流れが根強いです。
• 見出し階層（h2〜h6）も意味的に正しく
  デザインではなく「情報の重要度」でタグを選び、論理的な階層構造を意識しましょう。
• セクショナル要素を適切に使う
  section / article / aside / nav などで区切ることで、Googleが構造を理解しやすくなります。
• alt属性を正しく記述
  画像が何を意味するのか、視覚に頼らず伝える内容を簡潔に書くのがポイントです。

✅ コーディング時のチェックポイント

1. 無意味なdiv・spanを減らす
   semanticタグを優先し、情報の意味を明確に。
2. 非表示要素の乱用に注意
   SEO目的での「隠しテキスト」は逆効果になることも。
3. 表示速度を意識
   CSS/JSの軽量化、画像最適化（WebPなど）でLCP改善を。

✅ 構造化データの導入で検索結果を強化

JSON-LD形式での構造化マークアップにより、検索結果にリッチリザルト（レビュー、パンくず、FAQ等）が表示される可能性があります。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "SEOを意識したコーディングのポイント",
  "author": {
    "@type": "Person",
    "name": "田中雄也"
  }
}
</script>

WordPressであれば、構造化プラグインやテーマ側の機能で実装可能です。

💡 まとめ：検索エンジンにも“やさしい”コードを書こう

• 構造化されたHTMLで、検索エンジンに正しく内容を伝える
• 見出しタグの意味や順序を意識したマークアップを心がける
• 表示速度やアクセシビリティもSEOの一部として考える

SEOは裏技ではなく、“ユーザーと検索エンジンの両方にやさしいコード”の積み重ね。 コーダーの丁寧な設計が、コンテンツの価値を正しく伝える鍵になります。