実行できるHTMLドキュメント: title タグ

Q: title タグと h1 の違いは何ですか？

はメタデータで、タブや検索結果でページに名前を付け、ページ自体には表示されません。 は body の中の見えるメインの見出しです。似た内容になることが多いですが、タイトルにはサイト名を加えたり、検索向けの言い回しにしたりできます。

Q: title タグの中に HTML タグを入れられますか？

入れられません。title 要素にはテキストしか入りません。中のタグはそのまま表示されるので、 A B はタブに「A B 」と表示されます。& のような文字参照は使えます。

Q: JavaScript でページタイトルを変更するには？

document.title に代入します。例: document.title = '(3) Inbox'。ブラウザはすぐにタブを更新します。Web アプリが未読数を表示するのはこの方法です。

Q: title タグと title 属性は同じものですか？

違います。 要素はページ全体の名前を決めます。ほとんどの要素に使える title 属性は、その要素にマウスを乗せたときに表示されるツールチップを追加します。

title タグを書く場所

どのページにも、<head> の中に <title> 要素が 1 つ必要です。そのテキストがページの名前になり、ブラウザはタブとブックマークに、検索エンジンは普通、検索結果の見出しとして表示します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chocolate Chip Cookies Recipe | Bake Club</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Chocolate chip cookies</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title is: ' + document.title;
  </script>
</body>
</html>

タイトル自体がページの中に表示されることはありません。このプレビューは Coddy のドキュメントのページの中で動いているので、ブラウザのタブにはドキュメントのタイトルが表示されたままです。小さなスクリプトが、この例を単独のファイルとして開いたときにタブに表示される内容を出力しています。<title> のテキストを編集すると、その行が更新されます。

よいタイトルの書き方

タイトルは、検索結果やタブの並びで、人がページについて最初に読むものであることが多いです。ほとんどのページはいくつかのルールでカバーできます。

具体的で、ほかと重ならないタイトルにする。 サイトのどのページにも、そのページを説明する独自のタイトルを付けましょう。「Home」や「Page 1」ではなく「チョコチップクッキーのレシピ」です。
重要な語を先に置く。 タブは狭く、検索結果は長いタイトルを切ります。キーとなるフレーズは最初の 50 から 60 文字程度に収めましょう。
サイト名は最後に、| や : で区切って付けます。ページの話題が先に来るようにするためです。
人に向けて書く。 同じキーワードを詰め込んだタイトルはスパムに見え、検索エンジンに書き換えられることがあります。

このタブの模型は、実際のタブと同じくらいの幅でタイトルを切ります。短いタイトルや長いタイトルを試してみてください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Bake Soft Chocolate Chip Cookies at Home | Bake Club</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab {
      width: 200px; background: #fff; border-radius: 8px 8px 0 0;
      padding: 8px 12px; font-size: 13px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="bar"><div class="tab" id="tab"></div></div>
  <p>Full title: <code id="full"></code> (<span id="len"></span> characters)</p>
  <script>
    document.getElementById('tab').textContent = document.title;
    document.getElementById('full').textContent = document.title;
    document.getElementById('len').textContent = document.title.length;
  </script>
</body>
</html>

サイト名が最後にあれば、切られたタブでも何のページかがわかります。順番を入れ替える (「Bake Club | How to...」) と、サイトのすべてのタブが同じ 2 語で始まってしまいます。

title タグ、h1、title 属性の違い

	場所	表示される場所	役割
`<title>`	`<head>` の中に 1 つ	タブ、ブックマーク、検索結果	ページに名前を付ける
`<h1>`	`<body>` の中	ページ上	見えるメインの見出し
`title="..."` 属性	任意の要素	マウスを乗せたときのツールチップ	その要素についての補足

タイトルと <h1> は普通、意味が一致しますが、タイトルは検索向けの言い回しにしてサイト名を含められ、見出しはもっと短くできます。title 属性は、名前が似ていても無関係です。下線の付いた語にマウスを乗せてみてください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title vs title attribute</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Welcome to Bake Club</h1>
  <p>We test every recipe in a
    <span title="An oven with a fan that moves hot air" style="text-decoration: underline dotted;">convection oven</span>.
  </p>
</body>
</html>

title 属性のツールチップはタッチスクリーンでは表示されず、スクリーンリーダーが確実に読み上げるわけでもないので、重要な情報をそこだけに書かないようにしましょう。

title に入れられるのはテキストだけ

ブラウザは <title> と </title> の間のすべてを普通のテキストとして読みます。タグは解釈されませんが、& のような文字参照は変換され、連続した空白は 1 つにまとめられます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Salt &amp; Pepper   <b>Bold?</b></title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>document.title:</p>
  <pre id="out" style="background: #f3f4f6; padding: 8px;"></pre>
  <script>
    document.getElementById('out').textContent = document.title;
  </script>
</body>
</html>

結果は Salt & Pepper <b>Bold?</b> です。文字参照は & になり、3 つの空白は 1 つになり、<b> タグは文字のまま残りました。タイトルの一部を強調することはできません。

JavaScript でタイトルを変更する

document.title は読み書きできます。Web アプリはこれを使って、未読数や現在の状態をタブに表示します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .tab { display: inline-block; background: #e5e7eb; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    button { font: inherit; margin-top: 10px; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="tab" id="tab">Inbox</div><br>
  <button id="add">New message</button>
  <button id="read">Mark all read</button>
  <script>
    let unread = 0;
    const show = () => {
      document.title = unread ? '(' + unread + ') Inbox' : 'Inbox';
      document.getElementById('tab').textContent = document.title;
    };
    document.getElementById('add').onclick = () => { unread++; show(); };
    document.getElementById('read').onclick = () => { unread = 0; show(); };
  </script>
</body>
</html>

実際のページでは、ここにあるタブの模型と同時にブラウザのタブが変わります。JavaScript を実行する検索エンジンはスクリプトで設定したタイトルも読めますが、インデックスされるべきものには HTML に書いたタイトルが確実です。

よくある間違い

タイトルがまったくない。 ブラウザは代わりに URL やファイル名を表示し、HTML としても無効です。テンプレートの meta viewport タグの隣に書き、すべてのページに付けましょう。
すべてのページが同じタイトル。 タブ、ブックマーク、検索結果の区別がつかなくなります。
<title> を <body> に書く。 ブラウザはそれでも使いますが、書く場所は <head> で、見落とすツールもあります。
<title> 要素が 2 つある。 有効なのは最初の 1 つだけです。ほかは消しましょう。
すべてのタイトルをサイト名で始める。 ページの話題を先に書き、サイト名は最後に置きます。

よくある質問

HTML の title タグとは何ですか？

<title> はページの名前を決めます。ブラウザはそれをタブとブックマークに表示し、検索エンジンは普通、検索結果のクリックできる見出しとして表示します。<head> の中に書き、テキストだけを入れます。

title タグは何文字くらいにすればいいですか？

検索エンジンは表示幅で長いタイトルを切るので、重要な語は最初の 50 から 60 文字程度 (日本語なら 30 文字前後) に入れましょう。HTML に厳密な上限はありませんが、それを超えた部分は省略記号の後ろに隠れることがあります。

title タグと h1 の違いは何ですか？

<title> はメタデータで、タブや検索結果でページに名前を付け、ページ自体には表示されません。<h1> は body の中の見えるメインの見出しです。似た内容になることが多いですが、タイトルにはサイト名を加えたり、検索向けの言い回しにしたりできます。

title タグの中に HTML タグを入れられますか？

入れられません。title 要素にはテキストしか入りません。中のタグはそのまま表示されるので、<title>A <b>B</b></title> はタブに「A <b>B</b>」と表示されます。& のような文字参照は使えます。

JavaScript でページタイトルを変更するには？

document.title に代入します。例: document.title = '(3) Inbox'。ブラウザはすぐにタブを更新します。Web アプリが未読数を表示するのはこの方法です。

title タグと title 属性は同じものですか？

違います。<title> 要素はページ全体の名前を決めます。ほとんどの要素に使える title 属性は、その要素にマウスを乗せたときに表示されるツールチップを追加します。

HTML の title タグ: ページタイトルの書き方、文字数、SEO