セマンティックマークアップとは、ページの中身が「何であるか」を、機械に分かる形で書く書き方です。
ただ、この記事は2024年から2026年9月まで、自分自身のマークアップを壊したまま公開されていました。セマンティックマークアップの解説記事が、です。
🔴 エラーは出ません。画面の見た目も、ほとんど変わりません。だから2年近く気づけませんでした。
先に、何が起きていたかを書きます。そのあとに、セマンティックマークアップそのものの説明と、数分でできる確かめ方を置きます。
何が起きていたか
この記事には「セマンティックな要素とは、こういうものです」というコード例を載せていました。そのコード例が、文字として表示されず、本物のタグとして出力されていました。
つまり、本文の中にこれが、そのまま入っていました。
<header><nav><main><section><article><aside><footer>
ブラウザは、これを「例」だとは思いません。書いてあるとおりに、本物の入れ物を7つ作ります。
結果、ページの構造がこうなっていました
| どこに | 何が入っていたか |
<nav>（案内リンクの入れ物）の中 |
🔴 <main>（そのページの主役） |
<article> の中 |
<aside>（余談・補足） |
<aside> の中 |
<footer> |
| 記事本文の中 | <header> |
🔴 <main> は、1ページに1つだけと決まっています。それが2つになっていました。しかも片方は、案内リンクの入れ物の中です。
機械から見ると「このページの主役は、案内リンクの中にある空っぽの箱」だと読める状態でした。
読者側には、別の実害が出ていました
この記事には「非セマンティックな例」と「セマンティックな例」を並べて比べる節がありました。
⚠ その2つが、どちらも空でした。見出しだけが並んでいて、その下に何も無い。例を見せるための節から、例だけが消えていたということです。
タグが本物として出力されたので、見せるはずだった中身が、そのまま構造に化けてしまったのです。
なぜ、2年近く気づけないのか
- エラーが出ません。HTMLとしては正しく解釈されます。ただ、意味が違うだけです
- 画面がほとんど変わりません。空の入れ物は高さを持たないので、見た目ではまず分かりません
- 🔴 書いた側は「コード例を載せた」と思っています。載せたつもりと、載った結果が違うのですが、その差は画面に出ません
- 順位も落ちていません。この記事は主な検索語で7位前後にいます。数字の上では「効いている記事」に見えます
⭐ 壊れていることと、順位が落ちることは、別々に起きます。順位を見ているだけでは見つかりません。
確かめ方（どれも数分で終わります）
1. <main> がいくつあるかを数える
ページを開いて、開発者ツールのコンソールで次を実行します。
document.querySelectorAll('main').length
1以外なら、何かが起きています。同じやり方で header footer nav も数えられます。テーマがPC用とスマホ用を別々に出していて2つになることもあるので、数えたあとは「どこに入っているか」まで見ます。
2. 親子関係を見る
数だけでは足りません。「どの入れ物の中にあるか」がおかしいことがあります。今回のように <nav> の中に <main> が入っていても、数の上では2つです。
要素を選んで、親をたどります。意味の通らない入れ子が出てきたら、そこが穴です。
3. コード例を載せている記事を、機械で洗い出す
これがいちばん確実です。本文の中に、生のタグとして構造要素が入っていないかを全ページ分数えます。
弊社は公開中の全ページを機械で走査しました。該当したのは、この記事1本だけでした。
⚠ コード例を載せる記事だけが、この穴を持ちます。普通の記事は、そもそも構造タグを本文に書きません。つまり、技術記事を書いているサイトほど、この穴が開きやすいということです。
そもそも、セマンティックマークアップとは
「ここは見出しです」「ここは案内リンクです」「ここが主役です」ということを、見た目ではなくタグで示す書き方です。
人は、大きい文字を見れば見出しだと分かります。機械は分かりません。だからタグで伝えます。
よく使う要素
<header> |
ページや節の、上の部分 |
<nav> |
案内リンクのまとまり |
<main> |
そのページの主役。1ページに1つ |
<article> |
それだけで意味が通るまとまり（記事など） |
<section> |
中身の区切り |
<aside> |
本筋から外れる補足 |
<footer> |
ページや節の、下の部分 |
<figure> / <figcaption> |
図や画像と、その説明 |
<time> |
日付や時間 |
非セマンティックな書き方と、セマンティックな書き方
意味を持たない書き方
<div class="header"> … </div><div class="menu"> … </div><div class="content"> … </div>
意味を持つ書き方
<header> … </header><nav> … </nav><main> … </main>
見た目は同じにできます。違うのは、機械に何と伝わるかだけです。
⚠ そして、上のコード例を記事に載せるときは、< と > を文字として書きます。そのまま書くと、この記事が2年間そうだったように、本物のタグになります。
直したあと
| 生のタグ7個 | 文字として書き直した（<main> は2個 → 1個に戻った） |
| 空だった比較の節 | 例を入れ直した |
| 全公開ページの走査 | 同じ穴は他に0件 |
⚠ 順位やクリックがどう変わるかは、まだ分かりません。直した日を記録して、あとで前後を比べます。「直したから上がるはず」とは書きません。
弊社の考え方
書いてあることと、出ているものは、別です。
この記事は、セマンティックマークアップの大切さを2年間説明し続けながら、自分のページでそれを壊していました。書いた内容が正しいかどうかと、書いたものが意図どおり出ているかどうかは、別々に確かめないと分かりません。
同じ考え方で、構造化データとアクセス解析についても書いています（→ 構造化データは入れてあります――それでも、拾われていないことがあります／「アクセス解析は入れてあります」――それでも、数字が足りていないことがあります）。
サイトの点検やご相談はインターネットマーケティングのページ、あるいはお問い合わせからどうぞ。
