AIのためのセマンティックHTML:title・メタ説明・lang・ランドマーク

ブラウザは、どんな <div> でも見出しやメニューのように“見せる”ことができます。しかし機械には見た目(スタイル)は見えません——読むのはタグです。セマンティックHTMLとは、各部分が“何であるか”を示すタグ(<title><main><nav><article>)を使うことです。そうすればAIは、あなたの見出しとサイドバーを区別できます。手間は小さく、効果は大きい工程です。

特に大事な4つ

そのまま使える骨組み

<!doctype html>
<html lang="ja">
  <head>
    <title>具体的なページタイトル</title>
    <meta name="description" content="このページの1行要約。">
  </head>
  <body>
    <header><!-- サイト名・ナビ --></header>
    <main>
      <article><!-- 本当の中身 --></article>
    </main>
    <footer><!-- ... --></footer>
  </body>
</html>

よくある間違い

ページ全体が <div> だけで作られている状態。人間には同じに見えても、機械には構造のない“壁”になります——主要な内容も、言語も、時には本当のタイトルも分かりません。すべてのタグは要りません。大事な所を示す、少数のタグがあればよいのです。

まとめ

セマンティックHTMLは、最も安く“理解される”方法です。固有の <title>、メタ説明、lang 属性、そして内容を囲む本物のランドマーク。これはGEOの全体像の「理解できる形にする」工程の1つです。

← ガイド一覧へ