マシンリーダビリティとは、検索エンジンのクローラーやスクリーンリーダーなどのソフトウェアが、Webページの構造と各要素の役割を読み取りやすい状態を指します。
文章が人にとって読みやすくても、見出しが順不同だったり、ナビゲーションを意味のない要素だけで組み立てたりすると、ソフトウェアには情報同士の関係が伝わりにくくなります。見た目だけでなく、HTMLにも意味の通る構造を与えることが、SEOとWebアクセシビリティの土台になります。
マシンリーダビリティが支える三つの領域
同じHTML構造でも、検索エンジン、支援技術、制作者では受け取る利点が異なります。
| 対象 | 構造が伝えるもの | 期待できること |
|---|---|---|
| 検索エンジン | ページの主題、見出し同士の関係、主要部分 | 内容を解釈する手掛かりが増える |
| スクリーンリーダーなどの支援技術 | 見出し、ナビゲーション、本文、画像の代替情報 | 利用者がページ内を把握し、必要な場所へ移動しやすくなる |
| 制作者と運用担当者 | 各要素の目的とまとまり | 修正箇所を判断しやすくなり、構造を保ったまま更新しやすくなる |
検索エンジンが内容を解釈する手掛かり
検索エンジンのクローラーは、ページを取得し、タイトルや見出し、本文などの関係をたどります。意味に合ったHTML要素を使えば、どこが主要な内容で、各節が何を扱うのかを示しやすくなります。
ただし、HTML構造を整えただけで検索順位が上がるとは限りません。構造化は、内容を誤解されにくくするための基礎として扱うのが適切です。
支援技術がページを案内する手掛かり
スクリーンリーダーの利用者は、見出しの一覧やナビゲーションなどを手掛かりにページを移動できます。見出し階層が乱れていたり、画像に代替テキストがなかったりすると、画面を見ずに情報の順序や意味を把握することが難しくなります。
したがって、アクセシビリティのための構造は、単に「読み上げられる」状態ではなく、目的の情報を探して理解できる状態まで考える必要があります。
保守しやすいHTMLの共通言語
要素の役割がHTMLに表れていれば、別の制作者が編集するときも、どこがナビゲーションで、どこが記事本文なのかを判断しやすくなります。見た目を変更しても情報の構造を保ちやすいため、継続的な更新にも向きます。
見出しで文章の骨格を示す
見出しは、文字を大きくするためではなく、ページの話題を階層として示すために使います。この投稿ではWordPressのタイトルがH1になるため、本文はH2から始め、H2の中に小さな話題があるときにH3を使います。
階層が伝わる例
<h2>サービス内容</h2>
<h3>導入支援</h3>
<h3>運用支援</h3>
<h2>問い合わせ方法</h2>「導入支援」と「運用支援」は「サービス内容」の内訳であり、「問い合わせ方法」は次の大きな話題です。見出しのレベルと内容の親子関係が一致しています。
関係が伝わりにくい例
<h3>サービス内容</h3>
<h2>導入支援</h2>
<h4>運用支援</h4>
<h2>問い合わせ方法</h2>この例では、大見出しと小見出しの関係が前後で入れ替わっています。まず文章の構成を決め、その親子関係に合わせて見出しを選ぶと整理できます。
セマンティックHTMLで要素の役割を示す
セマンティックHTMLは、見た目ではなく内容の意味や役割に合ったHTML要素を選ぶ書き方です。たとえば、ナビゲーションには<nav>、ページの主要部分には<main>を使います。詳しい選び方は、サイト内のセマンティックHTMLの基本と実装ポイントでも確認できます。
| 要素 | 表す役割 | 使用例 |
|---|---|---|
<header> |
ページや節の導入部分 | タイトルや導入情報 |
<nav> |
主要なナビゲーション | グローバルメニュー |
<main> |
ページの主要な内容 | 記事やサービス説明の中心部分 |
<section> |
一つの主題を持つまとまり | 見出しの付いた章や機能紹介 |
<article> |
単独でも意味が通る内容 | 記事や投稿 |
<aside> |
主要部分を補う内容 | 関連記事や補足情報 |
<footer> |
ページや節の末尾情報 | 著者情報や関連リンク |
要素名だけを置き換えるのではなく、内容の役割に合うものを選ぶことが必要です。役割が曖昧なまとまりまで無理に<section>にする必要はありません。
メタデータでページ外の表示を補う
メタデータは、ページの内容や共有時の表示に関する情報です。本文の構造を置き換えるものではありませんが、検索結果やSNSのリンクプレビューでページを紹介する材料になります。
| 項目 | 目的 |
|---|---|
title |
ページの主題を簡潔に示す |
meta description |
ページ内容の要約を示す |
og:title |
SNSで共有するときのタイトルを示す |
og:description |
SNSで共有するときの説明を示す |
og:image |
SNSで共有するときの画像を示す |
<title>ページの主題がわかるタイトル</title>
<meta name="description" content="ページの内容を簡潔に説明する文章">
<meta property="og:title" content="共有時のタイトル">
<meta property="og:description" content="共有時の説明文">
<meta property="og:image" content="共有時に使う画像のURL">設定した文言が常にそのまま表示されることや、検索順位の上昇を保証するものではありません。ページの実際の内容と一致する、簡潔で具体的な文言にします。
ARIAは不足する情報を補う
ARIA（Accessible Rich Internet Applications）は、要素の役割や名前などを支援技術へ伝えるための属性群です。HTML要素だけでは目的が十分に伝わらない場面で、情報を補うために使います。
たとえば、同じページに複数のナビゲーションがある場合、aria-labelでそれぞれの目的を区別できます。
<nav aria-label="メインナビゲーション">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
</ul>
</nav>ARIAを増やすこと自体が目的ではありません。まず意味に合ったHTML要素を選び、それでも不足する役割や名前をARIAで補います。SEOと読み上げの違いを含む詳しい注意点は、SEOとARIA属性の関係で整理しています。
画像の代替テキストを目的に合わせる
代替テキストは、画像を利用できない状況でも、その画像が伝えている情報を受け取れるようにする文章です。alt属性には、画像の見た目を機械的に列挙するのではなく、本文の中で画像が果たす役割を簡潔に書きます。
- 情報を伝える画像には、本文の理解に必要な内容を書く。
- リンクやボタンとして使う画像には、操作の目的が伝わる名前を書く。
- 装飾だけの画像には空の
alt=""を設定し、読み上げる情報を増やさない。 - 画像の近くに同じ説明がある場合は、重複した長い説明を避ける。
公開前に確認する項目
- WordPressのタイトルをH1とし、本文内にH1を重ねていないか。
- H2とH3が内容の親子関係どおりに並んでいるか。
- ナビゲーション、主要部分、記事、補足情報に役割の合うHTML要素を使っているか。
- タイトルと説明文が本文の内容を正確に表しているか。
- ARIAを、HTMLだけでは不足する情報の補足として使っているか。
- 画像の目的に合う代替テキストを設定しているか。
- 見た目だけでなく、見出し一覧や読み上げ順でも内容を理解できるか。
構造を整える順序
最初に文章の主題と見出し階層を決め、次に各部分の役割に合うHTML要素を選びます。その後でメタデータを整え、HTMLだけでは伝えきれない情報をARIAや代替テキストで補います。
この順序なら、SEO向けの設定とアクセシビリティ対応を別々の作業として足すのではなく、意味の通る一つのコンテンツ構造として確認できます。