【HTML 3-1】よくあるつまずき｜パス・画像が出ない・文字化けをやさしく解決する（初心者向け）
toshi
ToshiLab
Modern HTML 1-8｜headは見えないのに重要？メタデータ・SEOとの接続を整理する
toshi
記事内に商品プロモーションを含む場合があります
最終更新：2026年11月3日
HTMLを順番に学びたい方へ
この記事は、ToshiLabのWEBプログラミング学習記事の一部です。
HTMLを基礎から順番に確認したい方は、WEBプログラミングの入口から進められます。
前回のミニチェック｜Modern HTML 1-7 回答・解説
Modern HTML 1-7では、
HTMLから考えるWebアクセシビリティについて学びました。
Q1｜クリックすると保存処理を実行するUIでは、まずどちらを選ぶ？
前回の問題では、
divへrole=”button”を付けて作る方法と、
button要素を使う方法を比較しました。
基本形として選ぶのは、
button要素
です。
buttonは、
ユーザーが何らかの操作を実行するために用意されているネイティブHTMLです。
ボタンとしての意味だけではなく、
ブラウザが標準で持っているキーボード操作なども利用できます。
一方、
divへrole=”button”を付けても、
buttonが標準で持つ動作まで自動的に追加されるわけではありません。
同じ役割を持つネイティブHTMLがある場合は、
まずネイティブHTMLを使う
ことが基本です。
Q2｜labelを残したうえで補足説明とinputを関連付けるARIA属性は？
答えは、
aria-describedby
です。
labelは、
「この入力欄は何なのか」
という名前を伝えます。
aria-describedbyは、
「この入力欄について追加で知ってほしい説明」
を関連付けます。
つまり、
labelとaria-describedbyでは、
役割が異なります。
Q3｜保存完了などの更新をフォーカス移動なしで支援技術へ伝えるには？
候補になるのが、
ライブリージョン
です。
例えば、
aria-live=”polite”
を持つ領域を用意し、
保存処理が完了したあとに、
「保存が完了しました」
という内容へ更新します。
保存完了のようなステータスメッセージでは、
role=”status”
も候補になります。
Modern HTML 1-7で確認した、
まずネイティブHTML、それでも不足する情報をARIAで補う
という考え方は、
今回のheadでも変わりません。
headでも、
目的を考えずメタデータを増やすのではなく、
その情報は何を意味しているのか
から考えます。
目次
- この回で分かること
- headは画面に見えないのに重要
- メタデータは誰に伝わる？
- titleで文書のタイトルを伝える
- meta descriptionでページ内容を伝える
- meta要素は属性によって役割が変わる
- charsetで文字コードを指定する
- viewportでモバイル表示の基準を伝える
- link要素は文書との関係を表す
- canonicalで希望する正規URLを伝える
- robotsで検索エンジンへの指示を伝える
- OGPでSNSへページ情報を伝える
- headの情報をまとめて確認する
- 実務ではどこで使う？
- headとSEOは同じものではない
- 発展｜実際のheadを確認してみる
- 今回できるようになったこと
- Modern HTML 1-8 ミニチェック
- まとめ
- 前回を確認する
- 次に読む
この回で分かること
Modern HTML 1-7では、
セマンティックHTML・キーボード操作・ARIAなどを使い、
HTMLから考えるWebアクセシビリティ
について整理しました。
Modern HTML 1-8では、
ページ本文から少し離れて、
head・メタデータ・SEOとの接続
について整理します。
headというと、
「画面には見えない場所」
という印象を持つかもしれません。
しかし、
headには、
・ページのタイトル
・文字コード
・ページ内容の説明
・モバイル表示に関する情報
・CSSやアイコンとの関係
・正規URL
・検索エンジンへの指示
・SNSなどへ伝える情報
といった、
ページそのものについての重要な情報が入ります。
今回も、
「SEOに良いらしいから書く」
という覚え方ではありません。
まず、
誰へ、何を伝えるためのHTMLなのか
を確認します。
そのうえで、
SEOやWordPressの設定とつなげて考えます。
PR：最初の1冊目（必要な方だけ）
PR：Modern HTML 学習の最初の参考書として、必要な方だけ見てください。
出版社自身が「HTMLの基本を一度学んだ人が再入門・ステップアップする本」と位置づけており、内容もHTML仕様、セマンティクス、主要要素、フォーム、インタラクティブ要素、WAI-ARIAまで扱っています。今回の「初心者HTMLをやり直すのではなく、現在のHTMLへ知識をアップデートする」というシリーズ方針とかなり近いです。
※価格や在庫、版数は変わるため、最終確認はリンク先でお願いします。
リンク
headは画面に見えないのに重要
HTML文書は、
大きく考えると、
head
と、
body
に分かれます。
bodyには、
・見出し
・文章
・画像
・リンク
・フォーム
・ナビゲーション
など、
主にユーザーがページ上で利用する内容を配置します。
一方、
headには、
HTML文書についての情報
を配置します。
例えば、
headには、
・文字コード
・文書タイトル
・ページ内容の説明
・モバイル表示に関する情報
・スタイルシートとの関係
・アイコンとの関係
・正規URL
・検索エンジンへの指示
などを記述します。
基本的なページ構造を、
確認します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Modern HTML 1-8｜headとメタデータ</title>
</head>
<body>
<h1>head・メタデータ・SEOとの接続</h1>
<p>ここにページ本文が入ります。</p>
</body>
</html>headには、
ブラウザなどがページを処理するために使う情報があります。
bodyには、
ページ上へ表示する本文があります。
headは、
画面に見えないから重要ではない場所
ではありません。
ブラウザや検索エンジンは、
bodyだけではなく、
headに書かれた情報も利用しながらページを処理します。
メタデータは誰に伝わる？
headへ記述する情報は、
すべて同じ目的で使われるわけではありません。
例えば、
titleは、
ブラウザのタブなどで利用されます。
viewportは、
ブラウザが表示領域を扱うための情報になります。
description・canonical・robotsなどは、
検索エンジンがページを扱うときにも利用されます。
OGPは、
対応しているSNSやサービスへページが共有されたときなどに利用されます。
大切なのは、
「headへ書くもの」
だけで暗記することではありません。
誰へ、何を伝える情報なのか
まで考えます。
titleで文書のタイトルを伝える
title要素は、
HTML文書のタイトル
を表します。
ブラウザでは、
タブなどのタイトルとして利用されます。
また、
検索エンジンが検索結果のタイトルを生成するときにも、
情報源のひとつとして利用されます。
ただし、
titleへ書いた文章が検索結果へ必ずそのまま表示されるわけではありません。
検索エンジンは、
titleだけではなく、
ページ内の見出しなど、
複数の情報を利用して検索結果のタイトルを生成する場合があります。
そのため、
検索キーワードを無理に並べるのではなく、
そのHTML文書が何について書かれているのか
を分かりやすく表すことを基本にします。
meta descriptionでページ内容を伝える
meta descriptionでは、
ページ内容を説明する文章を指定できます。
titleが、
ページのタイトル
なら、
descriptionは、
ページ内容の説明
と考えると整理しやすくなります。
titleとdescriptionの基本形を、
確認します。
<title>Modern HTML 1-8｜head・メタデータ・SEOとの接続</title>
<meta
name="description"
content="HTMLのhead・title・description・canonical・robots・viewportの役割を整理します。"
>
meta descriptionを書いても、
その文章が検索結果へ、
必ずそのまま表示されるわけではありません。
検索内容などに応じて、
検索エンジンがページ本文から、
別の文章を利用する場合があります。
meta descriptionは、
「検索結果へこの文章を強制表示する設定」
ではありません。
ページ内容を説明するためのメタデータ
として考えます。
meta要素は属性によって役割が変わる
meta要素では、
HTML文書についての、
さまざまなメタデータを指定できます。
今回登場する代表的なものは、
・charset
・description
・viewport
・robots
です。
同じmeta要素でも、
属性によって伝える情報が変わります。
そのため、
metaタグという1つの機能
として覚えるのではなく、
何を伝えるmetaなのかを確認します。
meta keywordsとSEOキーワードは別
ToshiLabの記事制作では、
記事ごとにSEOキーワードを整理しています。
一方、
HTMLには、
meta keywordsというメタデータもあります。
この2つは、
別のものとして考えます。
ToshiLabで設定しているSEOキーワードは、
記事テーマや検索意図を整理するための、
記事制作・サイト運用上のキーワード
です。
HTMLのmeta keywordsと、
同じ意味ではありません。
また、
Google検索では、
meta keywordsをWeb検索ランキングのためには利用していません。
charsetで文字コードを指定する
HTML文書では、
文字エンコーディングを指定します。
現在は、
UTF-8
を使う構成が基本です。
charsetとviewportの基本形を、
まとめて確認します。
charsetは、
SEO順位を上げるための設定ではありません。
ブラウザがHTML文書の文字を正しく解釈するための基本情報
です。
viewportでモバイル表示の基準を伝える
スマートフォンのような狭い画面では、
PCとは表示領域が異なります。
そこで使われるのが、
meta viewport
です。
charsetとviewportの基本形を、
確認します。
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>width=device-widthでは、
ビューポート幅を端末幅に合わせます。
initial-scale=1では、
初期表示の倍率を指定します。
ただし、
viewportを書いただけで、
レスポンシブデザインが完成するわけではありません。
viewportは、
ブラウザが表示領域を扱うための情報です。
実際の、
・レイアウト
・文字サイズ
・画像サイズ
・メディアクエリ
・コンテナクエリ
などは、
CSS側でも設計します。
HTMLで表示の前提を伝え、
CSSで見た目を調整する。
ここでも、
HTMLとCSSには役割分担があります。
link要素は文書との関係を表す
link要素を見ると、
「CSSを読み込むタグ」
という印象を持つかもしれません。
しかし、
link要素は、
現在の文書と外部リソースやURLとの関係
を表すために使います。
例えば、
rel=”stylesheet”
なら、
スタイルシートとの関係。
rel=”icon”
なら、
アイコンとの関係。
rel=”canonical”
なら、
正規URLとの関係です。
つまり、
link＝CSSを読み込むためだけの要素
ではありません。
canonicalで希望する正規URLを伝える
Webサイトでは、
同じ内容、
または非常によく似た内容へ、
複数のURLからアクセスできる場合があります。
例えば、
URLパラメータが付いたページなどです。
このようなとき、
検索エンジンへ、
どのURLを正規URLとして扱ってほしいのか
を伝える方法のひとつが、
rel=”canonical”
です。
link要素とcanonicalの基本形を、
確認します。
<link
rel="stylesheet"
href="style.css"
>
<link
rel="icon"
href="/favicon.ico"
>
<link
rel="canonical"
href="https://example.com/article/"
>ただし、
canonicalを書けば、
必ずそのURLが正規URLになる
という絶対命令ではありません。
検索エンジンは、
ほかの情報も含めて、
正規URLを判断します。
canonicalでは、
「このURLを正規URLとして扱ってほしい」
という情報を検索エンジンへ伝えます。
正規URL自身へcanonicalを指定する、
自己参照canonical
も利用されます。
robotsで検索エンジンへの指示を伝える
robots metaでは、
ページの検索結果での扱いなどについて、
対応する検索エンジンへ指示できます。
代表的な値のひとつが、
noindex
です。
基本形を、
確認します。
<meta
name="robots"
content="noindex"
>
複数の指示を指定する例：
<meta
name="robots"
content="noindex, nofollow"
>noindexは、
ページを検索結果へ表示しないよう、
検索エンジンへ指示するために使います。
nofollowは、
ページ上のリンクをたどらないよう、
対応するクローラーへ指示するときに利用できます。
通常の公開ページでは、
index・followを、
毎回明示的に記述しなければならないわけではありません。
特別な制御が必要なときに、
noindexなどを指定する、
という考え方から始めると整理しやすくなります。
robots.txtとrobots metaは同じではない
ここは、
特に混同しやすい部分です。
robots.txtは、
主に、
クローラーがURLへアクセスする、
クロール
を制御するときに利用します。
一方、
robots metaは、
HTMLページ単位で、
検索結果での扱いなどを指示します。
例えば、
ページ内にnoindexが指定されていても、
robots.txtによって、
検索エンジンがそのページ自体へアクセスできなければ、
ページ内のnoindexを確認できない場合があります。
クロールとインデックスは同じ意味ではありません。
robots.txtとrobots metaも、
それぞれの目的から分けて考えます。
OGPでSNSへページ情報を伝える
ページをSNSなどで共有したとき、
・タイトル
・説明
・画像
・URL
などが、
カード形式で表示される場合があります。
そこで広く利用されている仕組みのひとつが、
Open Graph Protocol（OGP）
です。
OGPも、
HTMLのhead内へ、
meta要素として記述します。
基本例を確認します。
<meta
property="og:title"
content="Modern HTML 1-8｜head・メタデータ・SEOとの接続"
>
<meta
property="og:type"
content="article"
>
<meta
property="og:url"
content="https://example.com/article/"
>
<meta
property="og:image"
content="https://example.com/images/og-image.jpg"
>
<meta
property="og:description"
content="HTMLのheadとメタデータの役割を整理します。"
>OGPは、
HTML Living Standardそのものに含まれる機能ではありません。
HTMLのmeta要素を利用して記述する、
外部のメタデータ仕様です。
Native HTML Firstは、
HTML標準以外を使ってはいけない
という意味ではありません。
まず、
HTML標準にある役割や機能を理解する。
そのうえで、
必要な外部仕様を、
目的に合わせて追加します。
headの情報をまとめて確認する
ここまで、
・charset
・viewport
・title
・description
・canonical
・robots
・OGP
などを確認してきました。
実際のHTML文書では、
これらが、
headの中へまとまって配置されます。
全体を確認します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<title>Modern HTML 1-8｜head・メタデータ・SEOとの接続</title>
<meta
name="description"
content="HTMLのheadとメタデータの役割を整理します。"
>
<link
rel="canonical"
href="https://example.com/article/"
>
<link
rel="icon"
href="/favicon.ico"
>
<meta
property="og:title"
content="Modern HTML 1-8｜head・メタデータ・SEOとの接続"
>
<meta
property="og:type"
content="article"
>
<meta
property="og:url"
content="https://example.com/article/"
>
<meta
property="og:image"
content="https://example.com/images/og-image.jpg"
>
<meta
property="og:description"
content="HTMLのheadとメタデータの役割を整理します。"
>
</head>
<body>
<h1>head・メタデータ・SEOとの接続</h1>
</body>
</html>上記は、
headの構造を理解するためのサンプルです。
title・description・canonical・OGPなどには、
ページごとに変わる情報
があります。
すべてのページへ、
同じ内容をそのままコピーするわけではありません。
実務ではどこで使う？
WordPressではheadを直接書かないことも多い
ここまでHTMLコードを見て、
「WordPressの記事本文へheadを書けばよいのか？」
と思ったかもしれません。
通常、
WordPressの記事本文へ、
head全体を直接書くわけではありません。
WordPress本体・テーマ・SEO関連機能などが、
ページの情報をもとに、
headへ必要なHTMLを出力します。
例えば、
・記事タイトル
・SEOタイトル
・meta description
・canonical
・noindex
・SNS共有用情報
などを、
WordPress側の設定画面から指定する場合があります。
HTMLを理解すると、
WordPressの設定画面へ入力している値が、
最終的にどのようなHTMLとして出力されているのか
まで考えられるようになります。
管理画面だけを見るのではなく、
必要に応じて、
ページソースから実際のheadを確認できます。
重複出力にも注意する
WordPressでは、
テーマやプラグインなど、
複数の機能からheadへ情報を出力できる場合があります。
設定できる場所が多いからといって、
すべてへ同じ設定を入れればよいわけではありません。
title・description・canonical・OGPなどが、
意図せず重複していないか、
必要に応じて、
実際のHTMLを確認します。
headとSEOは同じものではない
今回扱った内容には、
SEOと関係するものが多くあります。
しかし、
headへmetaタグを増やせば検索順位が上がる
という話ではありません。
titleには、
文書タイトルを表す役割があります。
descriptionには、
ページ内容を説明する役割があります。
viewportには、
表示領域について伝える役割があります。
canonical・robotsにも、
それぞれ別の目的があります。
HTMLでは、
「SEOに効くタグなのか」
だけを見るのではなく、
この情報は誰へ、何を伝えるためのものなのか
を考えます。
これは、
Modern HTMLシリーズで続けてきた、
意味からHTMLを考える
という考え方と同じです。
発展｜実際のheadを確認してみる
HTMLを学ぶと、
WordPressの設定画面だけを見るのではなく、
実際にブラウザへ出力されたHTMLも確認できるようになります。
例えば、
ブラウザでページソースを開き、
head内から、
・title
・meta name=”description”
・link rel=”canonical”
・meta name=”robots”
・meta property="og:title"
・meta property="og:description"
・meta property="og:image"などを探せます。
WordPressで設定した内容と、
実際に出力されたHTMLが、
どのようにつながっているのかを見る練習になります。
今回できるようになったこと
・headとbodyの役割を分けて考えられる
・headへ記述するメタデータの目的を整理できる
・title要素の役割を説明できる
・meta descriptionの役割を説明できる
・charsetが何を指定しているのか理解できる
・viewportの役割を説明できる
・link要素を文書との関係から考えられる
・canonicalの目的を説明できる
・canonicalが絶対命令ではないことを理解できる
・robots metaの役割を説明できる
・robots.txtとrobots metaを区別できる
・OGPとHTML標準の違いを整理できる
・WordPressのSEO設定とHTMLのheadを結び付けて考えられる
・headとSEOを同じものとして扱わず、それぞれの役割から判断できる
Modern HTML 1-8 ミニチェック
Q1
HTML文書のタイトルを表し、
ブラウザのタブなどでも利用される要素があります。
この要素は何でしょうか？
また、
この要素へ書いた文章は、
検索結果へ必ずそのまま表示されるでしょうか？
Q2
同じ内容、
または非常によく似た内容へ、
複数のURLからアクセスできるとします。
検索エンジンへ、
「このURLを正規URLとして扱ってほしい」
と伝えるために利用する、
link要素のrel属性の値は何でしょうか？
Q3
公開されているHTMLページを、
検索結果へ表示しないよう、
検索エンジンへ指示したいとします。
robots metaで利用する、
代表的な値は何でしょうか？
ミニチェックの回答と解説は、次回のModern HTML記事の冒頭に掲載します。 答えを見る前に、まずは今回学んだ内容から自分なりに考えてみてください。
まとめ
Modern HTML 1-8では、
head・メタデータ・SEOとの接続
について整理しました。
今回の大きなポイントは、
・headにはHTML文書についての情報を記述する
・titleはHTML文書のタイトルを表す
・descriptionはページ内容を説明する
・charsetは文字エンコーディングを指定する
・viewportは表示領域の扱いに関係する
・linkは現在の文書との関係を表す
・canonicalは希望する正規URLを伝える
・robotsは検索結果での扱いなどを指示する
・OGPはSNSなどへページ情報を伝える
・WordPressでは設定画面と実際のheadをつなげて考える
という点です。
headは、
ページ本文のように、
大きく画面へ表示される場所ではありません。
しかし、
ブラウザ・検索エンジン・SNSなどへ、そのページについての情報を伝える重要な領域
です。
見えないから何となく設定するのではなく、
誰へ、何を、なぜ伝えるのか
から考える。
Modern HTMLシリーズで続けてきた、
Native HTML First
や、
意味からHTMLを考える
という基本は、
headでも変わりません。
前回を確認する
Modern HTML 1-7 | セマンティクス・キーボード操作・ARIAの基本
Modern HTML 1-7｜HTMLとアクセシビリティ｜セマンティクス・キーボード操作・ARIAの基本
次に読む
次回も、
Modern HTMLシリーズを続けます。
次回記事のテーマ・タイトル・URLが確定後、
ここへ正式な内部リンクを追加します。
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
