WEBVTT

1
00:00:00.000 --> 00:00:01.044
こんにちは。

2
00:00:01.044 --> 00:00:04.872
エイチティーエムエル、リファレンス解説です。

3
00:00:04.872 --> 00:00:08.700
HTMLタグ編の八本目は、タイトルタグです。

4
00:00:08.700 --> 00:00:13.224
これは、そのページの文書名を決めるタグで、ブラウザーのタブや検索結果に表示される、

5
00:00:13.224 --> 00:00:17.748
とても目立つ存在です。

6
00:00:17.748 --> 00:00:23.751
普段、ページの本文の中には姿を見せませんが、開いたページが何のページなのかを、

7
00:00:23.751 --> 00:00:29.754
利用者と検索エンジンの両方に伝える重要な役割を持っています。

8
00:00:29.754 --> 00:00:34.800
短い一行ですが、すべてのページに欠かせない基本のタグです。

9
00:00:34.800 --> 00:00:43.326
今回は、表示される場所、本文の見出しとの違い、良い名前の付け方まで、初心者向けに順番に解説します。

10
00:00:43.326 --> 00:00:47.593
タイトルタグの内容は、思っている以上に多くの場所で使われます。

11
00:00:47.593 --> 00:00:51.723
まず、ブラウザーのタブに表示される文字が、このタイトルです。

12
00:00:51.723 --> 00:00:56.954
複数のタブを開いたとき、どのタブがどのページかを判断する手がかりになります。

13
00:00:56.954 --> 00:01:01.359
次に、ブックマークやお気に入りに登録したときの名前にもなります。

14
00:01:01.359 --> 00:01:08.518
さらに、検索結果の一覧で大きく表示されるタイトルや、SNSで共有されたときのタイトル候補にも使われます。

15
00:01:08.518 --> 00:01:14.300
ページの履歴にも残るため、後から見返したときに内容が分かる名前であることが大切です。

16
00:01:14.300 --> 00:01:20.632
本文は見ていなくても、タイトルだけは多くの人が最初に目にする、ページの顔だと考えてください。

17
00:01:20.632 --> 00:01:25.108
よく混同されるのが、本文の見出しであるエイチワンタグとの違いです。

18
00:01:25.108 --> 00:01:31.754
タイトルタグはヘッドの中に書き、本文の画面には直接表示されず、タブや検索結果で使われる文書名です。

19
00:01:31.754 --> 00:01:37.857
一方、エイチワンはボディの中に書き、実際に画面に大きく表示される、そのページの見出しです。

20
00:01:37.857 --> 00:01:42.265
たとえば記事ページなら、エイチワンは読者に向けた見出し、タイトルはサイト名も含めた文書名、

21
00:01:42.265 --> 00:01:46.673
といったように書き分けることができます。

22
00:01:46.673 --> 00:01:50.335
完全に同じ文言にしなければならない決まりはありません。

23
00:01:50.335 --> 00:01:57.524
ただし、内容が食い違うと読み手が混乱するので、同じ話題を指していることが分かるようにそろえておきましょう。

24
00:01:57.524 --> 00:01:58.988
基本の書き方です。

25
00:01:58.988 --> 00:02:04.844
タイトルタグは、開始タグと終了タグを明示して、その間に文書名を書きます。

26
00:02:04.844 --> 00:02:08.749
置く場所は、文書の設定をまとめるヘッドの中です。

27
00:02:08.749 --> 00:02:14.280
コード例のように、文字コードを指定するメタタグなどと並べて書きます。

28
00:02:14.280 --> 00:02:20.136
一つの文書にタイトルは一つだけが原則で、二つ書いても正しく扱われません。

29
00:02:20.136 --> 00:02:23.227
また、タグの中には文章だけを入れます。

30
00:02:23.227 --> 00:02:30.873
太字などのエイチティーエムエルタグを含めることはできず、書いても文字として扱われてしまいます。

31
00:02:30.873 --> 00:02:37.380
まずは、ヘッドの中に一つだけ、文章だけを書く、という形をしっかり覚えてください。

32
00:02:37.380 --> 00:02:39.864
記事の活用事例を見てみましょう。

33
00:02:39.864 --> 00:02:44.910
例では、タイトルにエイチティーエムエルの学習手順と書き、その後に区切り記号を挟んで、

34
00:02:44.910 --> 00:02:49.956
まなびのアトリエというサイト名を続けています。

35
00:02:49.956 --> 00:02:53.682
ポイントは、ページ固有の題名を先に書くことです。

36
00:02:53.682 --> 00:02:58.805
タブは幅が狭く、後ろの文字は省略されて見えなくなることがあります。

37
00:02:58.805 --> 00:03:02.532
サイト名だけを先に書くと、どのページを開いてもタブの表示が同じになってしまい、

38
00:03:02.532 --> 00:03:06.258
区別がつきません。

39
00:03:06.258 --> 00:03:12.779
逆に固有の題名が先にあれば、タブを並べた状態でも目的のページをすぐに見つけられます。

40
00:03:12.779 --> 00:03:18.989
試すときは、保存して再読み込みし、タブの文字が変わっているかを確認してください。

41
00:03:18.989 --> 00:03:22.052
良いタイトルの付け方を三つ紹介します。

42
00:03:22.052 --> 00:03:26.083
一つ目は、そのページの内容を具体的に表すことです。

43
00:03:26.083 --> 00:03:31.564
お知らせや詳細といった曖昧な言葉だけでは、何のページか伝わりません。

44
00:03:31.564 --> 00:03:35.595
二つ目は、ページごとに違うタイトルにすることです。

45
00:03:35.595 --> 00:03:42.850
サイト名だけ、あるいは全ページ共通の文言だけでは、検索結果やブックマークで区別できません。

46
00:03:42.850 --> 00:03:47.525
三つ目は、関係する言葉を不自然に詰め込みすぎないことです。

47
00:03:47.525 --> 00:03:55.586
検索で見つけてもらうために大切な語は含めつつも、人が読んで自然で分かりやすい文章を優先してください。

48
00:03:55.586 --> 00:04:02.841
長さは、タブや検索結果で途切れても要点が伝わるよう、前の方に大切な情報を置くのがコツです。

49
00:04:02.841 --> 00:04:05.123
細かなコツも押さえておきましょう。

50
00:04:05.123 --> 00:04:11.299
タブや検索結果では表示できる長さに限りがあり、長いタイトルは後ろが省略記号に置き換わります。

51
00:04:11.299 --> 00:04:15.729
そのため、本当に伝えたい要点は、できるだけ前の方に置いてください。

52
00:04:15.729 --> 00:04:18.951
また、目立たせようとして記号や絵文字を並べすぎると、かえって読みにくくなり、

53
00:04:18.951 --> 00:04:22.173
信頼感も下がります。

54
00:04:22.173 --> 00:04:24.322
シンプルで誠実な表現が基本です。

55
00:04:24.322 --> 00:04:29.826
もう一つ、ページの内容を大きく書き換えたときは、タイトルも合わせて見直しましょう。

56
00:04:29.826 --> 00:04:34.122
古い内容のままのタイトルは、開いた人をがっかりさせてしまいます。

57
00:04:34.122 --> 00:04:38.821
本文とタイトルが一致しているかを、更新のたびに確認する習慣が大切です。

58
00:04:38.821 --> 00:04:40.203
属性を確認します。

59
00:04:40.203 --> 00:04:44.964
タイトルタグには、この記事で必須となる専用の属性はありません。

60
00:04:44.964 --> 00:04:51.722
見た目や動きを細かく指定する仕組みではなく、必要に応じて共通のグローバル属性を使います。

61
00:04:51.722 --> 00:04:56.560
文書の中で一意な識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、

62
00:04:56.560 --> 00:05:01.398
内容の言語を示すラングなどです。

63
00:05:01.398 --> 00:05:07.695
アプリ独自の値を保持するデータ属性も使えますが、秘密情報を置く場所ではありません。

64
00:05:07.695 --> 00:05:11.227
実務では属性を付けずに使う場面がほとんどです。

65
00:05:11.227 --> 00:05:18.292
大切なのは属性よりも、中に書く文書名そのものの分かりやすさだという点を覚えておいてください。

66
00:05:18.292 --> 00:05:20.795
よくある間違いを三つ紹介します。

67
00:05:20.795 --> 00:05:24.550
一つ目は、タイトルタグ自体を書き忘れることです。

68
00:05:24.550 --> 00:05:31.904
タイトルがないページは、タブにファイル名などが表示されたり、検索結果でも不利になったりします。

69
00:05:31.904 --> 00:05:33.938
必ず一つ用意してください。

70
00:05:33.938 --> 00:05:38.788
二つ目は、置く場所を間違えてボディの中に書いてしまうことです。

71
00:05:38.788 --> 00:05:41.135
タイトルはヘッドの中専用です。

72
00:05:41.135 --> 00:05:44.733
場所が違うと、文書名として正しく扱われません。

73
00:05:44.733 --> 00:05:48.645
三つ目は、全ページに同じ文書名を使い回すことです。

74
00:05:48.645 --> 00:05:55.685
サイト名だけを全ページに付けると、利用者にも検索エンジンにも、ページの違いが伝わりません。

75
00:05:55.685 --> 00:06:00.379
一ページごとに、その内容を表す名前を付け直すことが大切です。

76
00:06:00.379 --> 00:06:02.900
ブラウザー互換性を確認します。

77
00:06:02.900 --> 00:06:09.286
記事が参照するエムディーエヌの記録では、タイトルタグはクロームが一以降、

78
00:06:09.286 --> 00:06:15.671
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降に対応しています。

79
00:06:15.671 --> 00:06:22.057
いずれも非常に古いバージョンから使える、エイチティーエムエルの基本要素です。

80
00:06:22.057 --> 00:06:27.603
現在の主要なブラウザーで、安心して使える仕組みの一つだと言えます。

81
00:06:27.603 --> 00:06:31.300
ただし、この表が示すのは要素本体の対応です。

82
00:06:31.300 --> 00:06:38.022
検索結果での表示のされ方や、共有時の扱いは、各サービス側の仕様にも左右されます。

83
00:06:38.022 --> 00:06:45.080
実際に公開する際は、タブの表示と検索結果の見え方を、あわせて確認しておくと安心です。

84
00:06:45.080 --> 00:06:46.807
最後に練習とまとめです。

85
00:06:46.807 --> 00:06:50.405
タイトルタグは、ページの文書名を決めるタグでした。

86
00:06:50.405 --> 00:06:52.276
大切なポイントは三つです。

87
00:06:52.276 --> 00:06:57.601
一つ目は、タブや検索結果など、本文の外でページを代表する名前だということ。

88
00:06:57.601 --> 00:07:04.222
二つ目は、ヘッドの中に一つだけ置き、ページ固有の題名を先に書き、サイト名は後ろに続けること。

89
00:07:04.222 --> 00:07:09.115
三つ目は、本文の見出しであるエイチワンと役割を分けて考えることです。

90
00:07:09.115 --> 00:07:13.649
練習として、自分で作ったページのタイトルを開き、タブで区別できる名前になっているか、

91
00:07:13.649 --> 00:07:18.183
内容と合っているかを点検してみてください。

92
00:07:18.183 --> 00:07:19.478
お疲れさまでした。

93
00:07:19.478 --> 00:07:23.508
次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。