titleタグ -ページのタイトルを指定する|HTML辞典

<title>タグとは?

<title>タグは、HTMLページのタイトルを指定するタグです。
ブラウザのタブに表示され、検索エンジンの検索結果(SERP)にも影響を与えます。
HTML文書には必ず1つだけ記述する必要があります。

基本情報

コンテンツモデル

メタデータコンテンツ(Metadata Content)

ページのメタ情報を提供する要素の一つで、<head> タグの中に記述します。

閉じタグの有無

<title>は開始タグ(<title>)と閉じタグ(</title>)の両方が必要です。
空タグではなく、必ずタイトルを記述する必要があります。

基本的な記述方法

<title>必ず is <head> 内に記述 します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルページ - 初めてのHTML</title>
</head>
<body>
    <h1>こんにちは、世界!</h1>
</body>
</html>

ポイント:

  • ページの内容に合ったタイトルを設定することが重要 です。
  • 検索エンジン(Googleなど)に適切なページ情報を伝える 役割もあります。

使用上の注意点

<title> は必ず記述する

  • <title> を省略するとGoogleが自動的に本文内からタイトルに該当しそうな内容を表示する場合があります。

タイトルは「60文字以内」が推奨

  • 検索結果に表示されるタイトルは PCでは約32文字、スマホでは約40文字 が上限です。
  • 60文字を超えると省略され、「…」が表示されることがあります。

ページごとにユニークなタイトルを設定する

  • すべてのページで同じタイトルを使用すると、検索エンジンが適切に認識しにくくなるため、ページごとに異なるタイトルを設定するのが推奨されます。

重要なキーワードを前半に配置する

  • 検索エンジンは タイトルの前半部分をより重視するため、重要な単語を先に記述すると効果的です。

関連タグ

  • <head> – メタ情報を含むセクション
  • <meta> – 文字エンコーディングやページ情報を設定
  • <link> – CSSや外部ファイルを読み込む
  • <h1> – ページの見出し(タイトルとは別に設定することが望ましい)

まとめ

<title>タグは、HTMLページのタイトルを指定し、ブラウザのタブや検索エンジンの検索結果に表示される重要な要素 です。
SEO対策やユーザビリティの向上のために、適切なタイトルを設定することが不可欠です。