VIDEO LESSON

HTMLのtitleタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:23動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の八本目は、タイトルタグです。
0:08これは、そのページの文書名を決めるタグで、ブラウザーのタブや検索結果に表示される、
0:13とても目立つ存在です。
0:17普段、ページの本文の中には姿を見せませんが、開いたページが何のページなのかを、
0:23利用者と検索エンジンの両方に伝える重要な役割を持っています。
0:29短い一行ですが、すべてのページに欠かせない基本のタグです。
0:34今回は、表示される場所、本文の見出しとの違い、良い名前の付け方まで、初心者向けに順番に解説します。
0:43タイトルタグの内容は、思っている以上に多くの場所で使われます。
0:47まず、ブラウザーのタブに表示される文字が、このタイトルです。
0:51複数のタブを開いたとき、どのタブがどのページかを判断する手がかりになります。
0:56次に、ブックマークやお気に入りに登録したときの名前にもなります。
1:01さらに、検索結果の一覧で大きく表示されるタイトルや、SNSで共有されたときのタイトル候補にも使われます。
1:08ページの履歴にも残るため、後から見返したときに内容が分かる名前であることが大切です。
1:14本文は見ていなくても、タイトルだけは多くの人が最初に目にする、ページの顔だと考えてください。
1:20よく混同されるのが、本文の見出しであるエイチワンタグとの違いです。
1:25タイトルタグはヘッドの中に書き、本文の画面には直接表示されず、タブや検索結果で使われる文書名です。
1:31一方、エイチワンはボディの中に書き、実際に画面に大きく表示される、そのページの見出しです。
1:37たとえば記事ページなら、エイチワンは読者に向けた見出し、タイトルはサイト名も含めた文書名、
1:42といったように書き分けることができます。
1:46完全に同じ文言にしなければならない決まりはありません。
1:50ただし、内容が食い違うと読み手が混乱するので、同じ話題を指していることが分かるようにそろえておきましょう。
1:57基本の書き方です。
1:58タイトルタグは、開始タグと終了タグを明示して、その間に文書名を書きます。
2:04置く場所は、文書の設定をまとめるヘッドの中です。
2:08コード例のように、文字コードを指定するメタタグなどと並べて書きます。
2:14一つの文書にタイトルは一つだけが原則で、二つ書いても正しく扱われません。
2:20また、タグの中には文章だけを入れます。
2:23太字などのエイチティーエムエルタグを含めることはできず、書いても文字として扱われてしまいます。
2:30まずは、ヘッドの中に一つだけ、文章だけを書く、という形をしっかり覚えてください。
2:37記事の活用事例を見てみましょう。
2:39例では、タイトルにエイチティーエムエルの学習手順と書き、その後に区切り記号を挟んで、
2:44まなびのアトリエというサイト名を続けています。
2:49ポイントは、ページ固有の題名を先に書くことです。
2:53タブは幅が狭く、後ろの文字は省略されて見えなくなることがあります。
2:58サイト名だけを先に書くと、どのページを開いてもタブの表示が同じになってしまい、
3:02区別がつきません。
3:06逆に固有の題名が先にあれば、タブを並べた状態でも目的のページをすぐに見つけられます。
3:12試すときは、保存して再読み込みし、タブの文字が変わっているかを確認してください。
3:18良いタイトルの付け方を三つ紹介します。
3:22一つ目は、そのページの内容を具体的に表すことです。
3:26お知らせや詳細といった曖昧な言葉だけでは、何のページか伝わりません。
3:31二つ目は、ページごとに違うタイトルにすることです。
3:35サイト名だけ、あるいは全ページ共通の文言だけでは、検索結果やブックマークで区別できません。
3:42三つ目は、関係する言葉を不自然に詰め込みすぎないことです。
3:47検索で見つけてもらうために大切な語は含めつつも、人が読んで自然で分かりやすい文章を優先してください。
3:55長さは、タブや検索結果で途切れても要点が伝わるよう、前の方に大切な情報を置くのがコツです。
4:02細かなコツも押さえておきましょう。
4:05タブや検索結果では表示できる長さに限りがあり、長いタイトルは後ろが省略記号に置き換わります。
4:11そのため、本当に伝えたい要点は、できるだけ前の方に置いてください。
4:15また、目立たせようとして記号や絵文字を並べすぎると、かえって読みにくくなり、
4:18信頼感も下がります。
4:22シンプルで誠実な表現が基本です。
4:24もう一つ、ページの内容を大きく書き換えたときは、タイトルも合わせて見直しましょう。
4:29古い内容のままのタイトルは、開いた人をがっかりさせてしまいます。
4:34本文とタイトルが一致しているかを、更新のたびに確認する習慣が大切です。
4:38属性を確認します。
4:40タイトルタグには、この記事で必須となる専用の属性はありません。
4:44見た目や動きを細かく指定する仕組みではなく、必要に応じて共通のグローバル属性を使います。
4:51文書の中で一意な識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
4:56内容の言語を示すラングなどです。
5:01アプリ独自の値を保持するデータ属性も使えますが、秘密情報を置く場所ではありません。
5:07実務では属性を付けずに使う場面がほとんどです。
5:11大切なのは属性よりも、中に書く文書名そのものの分かりやすさだという点を覚えておいてください。
5:18よくある間違いを三つ紹介します。
5:20一つ目は、タイトルタグ自体を書き忘れることです。
5:24タイトルがないページは、タブにファイル名などが表示されたり、検索結果でも不利になったりします。
5:31必ず一つ用意してください。
5:33二つ目は、置く場所を間違えてボディの中に書いてしまうことです。
5:38タイトルはヘッドの中専用です。
5:41場所が違うと、文書名として正しく扱われません。
5:44三つ目は、全ページに同じ文書名を使い回すことです。
5:48サイト名だけを全ページに付けると、利用者にも検索エンジンにも、ページの違いが伝わりません。
5:55一ページごとに、その内容を表す名前を付け直すことが大切です。
6:00ブラウザー互換性を確認します。
6:02記事が参照するエムディーエヌの記録では、タイトルタグはクロームが一以降、
6:09エッジが十二以降、ファイアフォックスが一以降、サファリが一以降に対応しています。
6:15いずれも非常に古いバージョンから使える、エイチティーエムエルの基本要素です。
6:22現在の主要なブラウザーで、安心して使える仕組みの一つだと言えます。
6:27ただし、この表が示すのは要素本体の対応です。
6:31検索結果での表示のされ方や、共有時の扱いは、各サービス側の仕様にも左右されます。
6:38実際に公開する際は、タブの表示と検索結果の見え方を、あわせて確認しておくと安心です。
6:45最後に練習とまとめです。
6:46タイトルタグは、ページの文書名を決めるタグでした。
6:50大切なポイントは三つです。
6:52一つ目は、タブや検索結果など、本文の外でページを代表する名前だということ。
6:57二つ目は、ヘッドの中に一つだけ置き、ページ固有の題名を先に書き、サイト名は後ろに続けること。
7:04三つ目は、本文の見出しであるエイチワンと役割を分けて考えることです。
7:09練習として、自分で作ったページのタイトルを開き、タブで区別できる名前になっているか、
7:13内容と合っているかを点検してみてください。
7:18お疲れさまでした。
7:19次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

titleタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。ブラウザーのタブや検索結果のタイトル候補になる文書名。本文の見出しとは別に設定します。

解説記事・サンプルコードを読む：HTMLのtitleタグとは？属性・使い方・ブラウザー互換性と活用例 →