<title>: TITLE 要素
最終更新:2026-10-13
<title>TITLE 要素
ブラウザーのタブや検索結果に表示される文書タイトルを定義します。head 内に文書ごとに 1 つだけ置きます。
| カテゴリ | メタデータ |
|---|---|
| コンテンツモデル | head 内のみ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </title> タグ |
| ステータス | 標準 |
📝 構文
<title>ページのタイトル</title>
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認:
🌐 ブラウザサポート
| ブラウザ | |||||
|---|---|---|---|---|---|
| <title> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント: title のテキストはタブと SEO タイトルになります。キーワードを入れて簡潔にし、タグの入れ子はできません。
❓ よくある質問
Qtitle はどのくらいの長さが適切ですか?
A検索エンジンは目安として50〜60英字(日本語ならおよそ30文字前後)で切り詰め、超過分は省略記号になります。核心キーワードを前半に、ブランド名を末尾に置き、「講座名 − サイト名」のような形式にするのがおすすめです。キーワードの詰め込みは避けましょう。
Qtitle の中に画像や HTML を書けますか?
A書けません。
<title> はプレーンテキストしか受け付けず、タグはすべて文字として表示されます。ロゴを見せる場所はブラウザタブのアイコン(favicon)で、link の rel='icon' で設定します。QSPA で title を動的に変えるには?
AJS で
document.title = '新しいタイトル' とし、ルート遷移のたびに更新します。ただし SEO には影響があります。クローラーが JS を描画しないと見えないためです。重要なページはサーバー側で title を直接出力し、SPA の title 更新は体験の改善と割り切るのがおすすめです。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。