HTMLのSEO対策｜基本コード例・タグの役割・公開前チェック

2026年8月26日

著者: 与謝秀作

HTMLのSEO対策は、特定タグへキーワードを増やすことではありません。ページの内容と構造を表し、リンクで見つけられ、必要な内容がレンダリングされるようにします。短いコード例から、出力・表示・検索状態を別々に確認する手順まで整理しましょう。

発見・レンダリング・登録とHTMLの関係

検索では、URLの発見、取得、レンダリング、登録、検索結果への表示が別の段階です。HTMLが正しくても登録や順位が保証されるわけではなく、表示実績がないことだけで現在未登録とも言えません。

初期HTMLに本文が少なくても、JavaScriptで生成される場合があります。GoogleのJavaScript SEOの案内に沿って、初期ソースとレンダリング後の内容を分けて確認します。ブラウザで自分が操作した後に見えることと、Googleが操作なしで読めることも同じではありません。

最小コード例でheadと本文を確認する

次は架空の手順ページです。コードは説明用の文字列で、実サイトへそのまま適用する設定ではありません。headにはページの情報、bodyには読者が利用する本文を置きます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>バックアップの復元確認手順</title>
<meta name="description" content="保存したデータを復元確認する前の準備と記録項目を紹介します。">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<h1>バックアップの復元確認手順</h1>
<p>許可されたテスト環境で復元を確かめます。</p>
<h2>確認前の準備</h2>
<ul><li>対象データと担当者を記録する</li></ul>
<p><a href="/help/restore/">復元時の確認項目</a></p>
</main>
</body>
</html>

titleはページの内容を表し、descriptionは検索説明の候補になります。viewportはモバイル表示を考える基本設定ですが、入れるだけでレイアウトが適切になるわけではありません。metaなどのvoid要素には終了タグを付けません。通常要素の入れ子と終了、任意の終了タグ省略の条件はHTML標準の構文で区別されています。

説明文の文案はメタディスクリプションの書き方を参考に、実際の本文に合わせてください。

見出し・段落・リスト・強調を意味で使う

見出しは本文の階層を示し、段落・リスト・表は情報の関係を表します。文字を大きくしたいから見出しにするのではなく、節の内容を見出しの下へ置きます。W3Cの見出しの案内も論理的な構造を重視しています。

要素・情報	主な役割	誤解しないこと
title・description	ページ名や説明の情報	検索で必ずそのまま表示される指定ではない
h1・h2等	見出しの階層	回数を増やせば順位が上がるものではない
p・ul・ol・table	文章、列挙、順序、比較	見た目だけで構造を選ばない
strong・em	重要性と強勢	太字の装飾や検索加点と同一ではない
canonical・robots	正規URLの指定候補と登録等の制御	同じ目的のタグとして一律に扱わない

重要性・強勢・注意喚起の違いはstrong・em・bの使い分けで、実際の短い例を比較できます。

hrefリンクと画像の代替説明を確認する

リンクの基本例は <a href="/help/restore/">復元時の確認項目</a> です。hrefの行き先と、本文から分かるリンク先の内容を一致させます。クリック処理だけの見た目をリンクの代わりにせず、クロール可能なリンクの要件を確認します。

画像の用途	代替説明の考え方
情報を伝える写真	本文で必要な情報を短く説明する
装飾だけの画像	内容上不要なら空のaltを検討する
リンクやボタンの画像	絵柄だけでなく遷移先・操作の目的を伝える
複雑な図表	短いaltに加え、近くに詳しい説明やデータ表を置く

例として装飾の <img src="divider.png" alt=""> と、機能を表す <img src="search.png" alt="検索"> は目的が違います。実際の画面で周辺テキストと重複しないかも確認し、altへ検索語を羅列しません。

画像の用途による判断は、W3Cのalt判断表と、複雑な画像の説明方法でも確認できます。

構造化データと現在対応する検索機能

構造化データは可視本文の内容を機械が理解するための情報で、対応する検索機能の要件に合わせます。構造化データの入門と対象機能の最新資料を確認してください。FAQリッチリザルトを狙う旧来の手順は外し、質問への回答自体が必要なら本文として残します。

Googleの構造化データ方針では、実装やテストに合格しても検索表示は保証されません。Schema.orgで表現できること、Googleが機能として対応すること、実際に表示されたことは別です。

文法・レンダリング・モバイルを順に点検する

HTMLの文法と入れ子を検証し、ブラウザが補正した箇所を確認する。
公開ソースのhead・本文・リンクを、意図した値と照合する。
レンダリングされたDOMとURL検査の結果で必要な内容を探す。
キーボード操作と複数の画面幅で、読み順・文字・操作を確認する。

架空の例として、初期ソースには記事の枠だけがあり、JSで手順とリンクを追加するページを考えます。ブラウザDOMにあるだけで終わらず、URL検査のレンダリング結果でも確認します。遅延読み込みの案内に従い、主要内容をクリック待ちにしないことも点検します。

公開前チェック表で未確認事項を残す

確認対象	結果の記入例
文法・出力	確認済み／要修正。箇所と担当を記録
表示・操作	画面幅、ブラウザ、確認した操作を記録
検索機能テスト	対象機能、要件、テスト結果を記録
現在登録・実績	URL検査の状態と、期間内の表示・クリックを別欄に記録