<title>タグの解説
<title>は、そのドキュメントが何について書かれたものか、タイトルを表すために使用します。ここに書かれた内容は、ブラウザのウィンドウタブやブックマークの名称、検索結果の表題として扱われます。
タイトルは利用者が最初に触れる情報であるため、読者を獲得することを前提としたページでは特に重要な要素となります。利用者が迷わないためにも、分かりやすいタイトル付けを心がけましょう。
この要素は、SEO（検索エンジン最適化）にも影響を与えることで知られています。タイトルに入れる内容は、短すぎず適度な長さを持つ文字列が有効だとされます。そして、ユーザーの利便性を考慮した内容であることが求められます。
タイトルのつけ方に迷ったら、まずは色々なサイトのタイトルを見比べてみて下さい。特に、あなたが運営するサイトや人に見てもらいたいコンテンツのキーワードで検索した時に、検索結果に並ぶ文字を比較してみることをおすすめします。
タイトルの記述形式には、いくつかのパターンがあります。重要なのは閲覧する人のニーズと書いてある内容がマッチすることです。
<title>このページに記載されている情報の概略 - サイト名</title><title>この記事を読んだ人が得られる知識の概要 - サイト名</title><title>想定される疑問？解決方法を想起するフレーズ - サイト名</title><title>カテゴリー｜記事タイトル｜サイト名</title><title>【キーワード】タイトルのフレーズ - サイト名</title>
<title>タグの特徴
- この要素はページ上には直接表示されないため、レイアウトには影響を与えません。
- タイトルの内容は、ブラウザのウィンドウタブ、ブックマークの名称、検索結果の表題などに扱われます。いわゆる、そのページを代表する文字列となります。
- 同一のページ内に複数使うことはできません。必ず
<head>の中にひとつだけ置かれます。
<title>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
<title>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<title>要素は必ず<head>要素の子要素として配置します。
<head>
<title>タイトル</title>
</head>
タイトルは全てのウェブページが持つ基本的な情報です。実際の使用を想定した文書構造の中で<title>の配置位置は以下の場所になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<h1>文章のヘッダー</h1>
<p>文章の内容を表すテキスト。</p>
<p>文章の内容を表すテキスト。</p>
</body>
</html>
よく使われるタイトルのパターン
仮に、このページのタイトルをいくつものパターンで表現するとしたら、どのような内容が考えられるでしょうか。サイト全体のトーンポリシー、メディアや著者のアイデンティティによって、使用する語彙や言い回しを変える必要があります。それらの判断基準は、どのような読者を想定しているのか、誰に読んでほしいのかをはっきりさせることで、自ずと絞られていきます。
<!-- 「です」「ます」などの無駄な文字を減らすために「！」を活用した例 -->
<title>HTMLのtitle要素について詳しく解説！サンプルコードや関連するタグも掲載 - サイト名</title>
<!-- タグの説明だけでなく内容に言及していることを伝える例 -->
<title>titleタグの使い方と具体的な内容のパターンを紹介 - サイト名</title>
<!-- 初心者や独学の人に向けた言い回しの例 -->
<title>今さら聞けないtitleタグの使い方。基本を押さえてHTMLをマスターしよう - サイト名</title>
<!-- 問題を抱えている人の解決を促すようなパターン -->
<title>SEOに強いタイトルのつけ方は？ titleタグの特徴を一から解説 - サイト名</title>
<!-- 辞典や図鑑などのディレクトリ構造に適したパターン -->
<title>HTML/タグの解説/title要素 - サイト名</title>