AIのためのセマンティックHTML:title・メタ説明・lang・ランドマーク
ブラウザは、どんな <div> でも見出しやメニューのように“見せる”ことができます。しかし機械には見た目(スタイル)は見えません——読むのはタグです。セマンティックHTMLとは、各部分が“何であるか”を示すタグ(<title>・<main>・<nav>・<article>)を使うことです。そうすればAIは、あなたの見出しとサイドバーを区別できます。手間は小さく、効果は大きい工程です。
特に大事な4つ
<title>— ページの名前。ブラウザのタブや検索結果に表示され、機械が最初に読むページの情報です。ページごとに具体的で固有のものにします。- メタ説明(meta description) —
<head>に置く1文の要約。順位の要因ではありませんが、あなたのページの表示・要約に使われることが多いです。 lang属性 —<html lang="ja">(やen・es…)は、ページが何語かを機械に伝え、推測させません。- ランドマーク —
<main>・<nav>・<header>・<footer>・<article>はページの“区画”を示します。機械が主要な内容に集中し、周辺(ヘッダ等)を読み飛ばせるようになります。
そのまま使える骨組み
<!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つです。