MENU
プログラムとツールの使い方を、実務目線で分かりやすく整理
  1. ホーム
  2. プログラム
  3. HTMLのtitle・description・viewport入門：役割の違いと正しい書き方

HTMLのtitle・description・viewport入門：役割の違いと正しい書き方

プログラム
HTMLのページ情報とスマートフォン表示を確認するWeb開発画面。

HTMLのtitle・description・viewport入門：役割の違いと正しい書き方

Webページを作り始めたら、まず <head> 内に title・description・viewport を設定しましょう。それぞれ、ブラウザのタブ、検索結果の説明候補、スマートフォンでの表示幅に関わります。

最小構成は次のとおりです。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>初心者向けHTML講座｜サンプルサイト</title>
  <meta name="description" content="HTMLの基本をコード例つきで学べる初心者向け講座です。ページの作り方と確認方法を解説します。">
</head>
<body>
  <h1>初心者向けHTML講座</h1>
</body>
</html>

この記事で分かることは次の4点です。

  • title・description・viewportが担当する役割
  • コピーして試せる最小限の書き方
  • <title>と<h1>を使い分ける基準
  • 検索結果やスマートフォン表示で起きやすい失敗

対象はHTMLを学び始めた人です。2026年7月時点のHTMLと主要なモダンブラウザを前提に、フレームワークを使わない通常のHTMLファイルで説明します。

目次

3つの要素は何が違うのか

結論からいうと、3つは同じ「ページ情報」に見えても、情報を届ける相手が異なります。

  • <title>：ブラウザや検索エンジンにページの題名を伝える
  • <meta name="description">：検索エンジンなどにページの概要を伝える
  • <meta name="viewport">：ブラウザに表示領域の扱い方を伝える

ここで注意したいのは、titleはmetaタグではなく、独立したHTML要素だという点です。descriptionとviewportはどちらも <meta> 要素ですが、name属性によって役割が変わります。

ここがポイント: titleとdescriptionはページの内容を説明し、viewportは画面への表示方法を調整します。目的が違うため、どれか一つでほかを代用することはできません。

titleはページの題名を伝える

<title>には、そのページをほかのページと見分けられる具体的な題名を書きます。

<title>請求書をPDFで保存する方法｜業務ツールガイド</title>

この文字列は、主に次の場所や処理で利用されます。

  • ブラウザのタブやウィンドウタイトル
  • ブックマークの初期名称
  • 検索エンジンが検索結果のタイトルを生成するときの情報
  • 支援技術がページを識別するときの手掛かり

MDNのtitle要素リファレンスによると、<title>は <head> 内で使用し、中身にはテキストを記述します。装飾用のHTMLタグを入れる場所ではありません。

titleとh1は役割が違う

初心者が混同しやすいのが、<title>と<h1>です。

<head>
  <title>CSVをExcelで文字化けさせずに開く方法｜業務ツールガイド</title>
</head>
<body>
  <h1>CSVを文字化けさせずにExcelで開く方法</h1>
</body>

<title>は文書全体の題名で、通常はブラウザのタブに表示されます。<h1>は本文に表示する最上位の見出しです。

両者を一字一句同じにする必要はありません。ただし、別の内容に見えるほど変えるのは避けます。検索結果から訪れた人が、ページを開いた瞬間に「探していた内容と違う」と感じる原因になるからです。

検索結果ではtitleがそのまま出るとは限らない

Googleは <title>だけでなく、ページ内の主見出し、目立つテキスト、リンクの文言など複数の情報から検索結果のタイトルリンクを自動生成します。そのため、設定した文言が必ずそのまま表示されるわけではありません。

それでも、次の基本は押さえておくべきです。

  • ページごとに内容の異なる題名を付ける
  • 「ホーム」「記事」だけの曖昧な題名を避ける
  • 本文と一致しないキーワードを詰め込まない
  • 更新年や商品名など、古くなる情報を放置しない
  • サイト名を何度も繰り返さない

検索表示の仕組みと推奨事項は、Google検索セントラルのタイトルリンク解説で確認できます。

descriptionはページの要約を伝える

descriptionには、そのページを開くと何が分かるのかを短く具体的に書きます。

<meta name="description" content="CSVをExcelで開いたときに日本語が文字化けする原因と、文字コードを指定して読み込む手順を解説します。">

name="description"が情報の種類、contentが実際の説明文です。タグ自体は通常、ページ本文には表示されません。

検索順位を上げる呪文ではない

descriptionの重要な役割は、検索結果を見た人がページの内容を判断しやすくすることです。ただし、Googleのスニペットはページ本文を中心に自動生成され、検索語によって変わります。descriptionも、本文より適切な説明になると判断された場合に使われる候補の一つです。

つまり、descriptionを書けば指定文が必ず表示されるわけではありません。 表示文字数にも固定保証はなく、端末の幅などに応じて省略されます。このため「必ず何文字以内なら切れない」と考えるより、重要な情報を前半に置くほうが実用的です。

良いdescriptionの組み立て方

次の3点を1〜2文にまとめると、内容が伝わりやすくなります。

  • 対象：誰に向けたページか
  • 内容：何を説明・提供するのか
  • 利点：読んだ後に何ができるのか

悪い例は、単語を並べただけでページ固有の内容が見えません。

<meta name="description" content="HTML, CSS, Web制作, 初心者, 講座, 学習">

改善例では、対象と扱う内容を文章で示します。

<meta name="description" content="Web制作を始めた人向けに、HTMLの基本構造と見出し、リンク、画像の書き方をコード例つきで解説します。">

ページごとに固有の説明を書くことも大切です。商品一覧と個別商品、サービス紹介と問い合わせページでは、訪問者が求める情報が違います。同じ定型文を全ページに設定すると、その違いが伝わりません。

詳しい推奨事項はGoogle検索セントラルのスニペット解説にまとめられています。

viewportはスマートフォンでの表示幅を整える

viewportの基本設定は、画面幅に合わせてCSSを正しく働かせるために使います。

<meta name="viewport" content="width=device-width, initial-scale=1">

各指定の意味は次のとおりです。

  • width=device-width：レイアウト上の表示幅を端末の幅に合わせる
  • initial-scale=1：ページを最初に表示する倍率を1倍にする

この指定がないモバイル環境では、ブラウザがデスクトップ向けの広い仮想表示領域でページを描画し、それを縮小して見せることがあります。その結果、文字やボタンが小さく見え、狭い画面用のメディアクエリが期待どおりに働かない場合があります。

MDNのviewport解説でも、端末幅に合わせる一般的な設定として同じ形が示されています。

viewportだけではレスポンシブ対応にならない

viewportを追加しても、固定幅のCSSが自動的に直るわけではありません。

次のCSSには、狭い画面で横スクロールが発生する可能性があります。

main {
  width: 1200px;
}

基本的には、可変幅と最大幅を組み合わせます。

main {
  width: min(100% - 32px, 960px);
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
}

viewportはブラウザに表示領域の基準を伝え、CSSはその領域に合わせて部品を並べます。両方がそろって初めて、スマートフォンで読みやすい画面を作れます。

ズームを禁止しない

次のような指定は避けるのが安全です。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

user-scalable=noや極端なmaximum-scaleは、文字を拡大して読みたい利用者の操作を妨げる可能性があります。特別な要件と十分な検証がない限り、ズーム機能を制限しない設定を使いましょう。

最小HTMLをブラウザで確認する

3つの設定は、1枚のHTMLファイルだけで試せます。

1. index.htmlを作る

次の内容を index.html として保存します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>営業時間とアクセス｜サンプルカフェ</title>
  <meta name="description" content="サンプルカフェの営業時間、最寄り駅からのアクセス、定休日を案内します。">
</head>
<body>
  <main>
    <h1>営業時間とアクセス</h1>
    <p>営業時間は平日の10時から18時までです。</p>
  </main>
</body>
</html>

charsetは今回の3要素とは別ですが、日本語をUTF-8で正しく扱うため、実用上の最小構成に含めています。

2. ブラウザで開く

ファイルをダブルクリックするか、エディタのプレビュー機能で開きます。ブラウザのタブに「営業時間とアクセス｜サンプルカフェ」と表示されることを確認してください。

画面本文には <h1> と <p> の内容が表示されますが、descriptionは表示されません。これは正常です。

3. 開発者ツールで確認する

ChromeやFirefoxなどの開発者ツールを開き、ElementsまたはInspectorパネルで <head> を調べます。

確認する項目は次のとおりです。

  • <title>が1つだけ存在するか
  • descriptionのcontentが空になっていないか
  • viewportの指定にタイプミスがないか
  • テンプレートやプラグインが同じタグを重複出力していないか

スマートフォン表示は、開発者ツールの端末表示モードでも確認できます。ただし、最終確認では実機も使い、文字の大きさ、横スクロール、ボタンの押しやすさを見てください。

よくある失敗と直し方

問題の多くは、記述位置、重複、内容の不一致から起こります。

3つの要素は、基本的に <head> 内へまとめます。

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ページタイトル</title>
  <meta name="description" content="ページの概要">
</head>

<title>は必ず <head> 内で使用します。<meta>についても、今回扱う文書メタデータは <head> に置く構成にすると管理しやすくなります。

属性の引用符や閉じ方を間違える

次の例では、content属性の終わりを示す引用符がありません。

<meta name="description" content="ページの概要>

修正後は次の形です。

<meta name="description" content="ページの概要">

<meta>は内容を持たない空要素なので、</meta>は書きません。一方、<title>には終了タグ </title>が必要です。

同じ要素を複数出力している

CMS、SEOプラグイン、テーマを組み合わせると、titleやdescriptionが二重に出力されることがあります。HTMLのソースを開き、検索機能で name="description" や <title>を探してください。

重複していたら、どの機能が出力を担当するか一つに決めます。WordPressではテーマファイルを直接書き換える前に、テーマとSEOプラグインの設定を確認しましょう。テーマ更新で変更が消えたり、PHPの編集ミスでサイトが表示できなくなったりするためです。

検索結果がすぐ変わらない

HTMLを更新しても、検索エンジンが再クロールして処理するまでは検索結果に反映されません。また、再処理後もGoogleが別のタイトルや本文由来のスニペットを選ぶことがあります。

まず公開ページのHTMLソースを確認し、意図した内容が配信されているかを切り分けます。ブラウザ上で正しければ、次にGoogle Search ConsoleのURL検査などでクロール状況を確認します。

関連タグとの使い分け

基本の3要素を設定した後は、ページの公開目的に応じて別のメタデータを追加します。

OGPはSNSでの共有表示に使う

og:titleやog:descriptionは、SNSやメッセージアプリなどでURLが共有された際の表示に利用される情報です。

<meta property="og:title" content="営業時間とアクセス｜サンプルカフェ">
<meta property="og:description" content="営業時間、定休日、最寄り駅からの道順をご案内します。">
<meta property="og:image" content="https://example.com/images/shop.jpg">

OGPは通常の<title>やdescriptionを置き換えるものではありません。検索・ブラウザ向けの基本情報を設定したうえで追加します。

robotsは検索エンジンへの指示に使う

robotsは、検索結果への登録やリンクの追跡などに関する指示です。

<meta name="robots" content="noindex, nofollow">

noindexを本番ページに誤設定すると、検索結果から除外される原因になります。開発環境から本番環境へ公開するときは、CMSの検索エンジン表示設定、HTTPヘッダー、robots.txtと併せて確認してください。

canonicalは重複URLの整理に使う

canonicalは <meta>ではなく <link>要素です。同じ内容へ複数のURLでアクセスできる場合に、代表URLの候補を検索エンジンへ伝えます。

<link rel="canonical" href="https://example.com/html-meta-guide/">

似た役割に見えるタグでも、目的と書式は異なります。必要な理由を説明できないタグを、テンプレートから無条件にコピーするのは避けましょう。

公開前に確認するチェックリスト

最後に、ページ単位で次の項目を確認します。

  • <title>はページの内容を具体的に表している
  • titleと本文の<h1>が同じ主題を示している
  • descriptionはキーワード一覧ではなく、固有の要約になっている
  • viewportはwidth=device-width, initial-scale=1を基本にしている
  • 利用者のズーム操作を不必要に禁止していない
  • titleやdescriptionが複数出力されていない
  • スマートフォン幅で横スクロールや極端に小さい文字がない
  • 公開ページのHTMLソースに意図した値が出ている

まずは既存ページを一つ開き、開発者ツールで <head> を確認してみてください。修正するときは、タグを追加するだけでなく、ページ本文と説明が一致しているか、狭い画面でCSSが機能するかまで確認することが実務上の重要な一歩です。

参照リンク

プログラム
HTML metaタグ SEO Web開発 レスポンシブWebデザイン 初心者向け
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次