← カテゴリ一覧に戻る

ページタイトル

title

<title> はブラウザのタブ・ブックマーク・検索結果に表示されるページタイトルを定義する。 SEOとユーザビリティの両面で非常に重要な要素。

ブラウザでの表示イメージ

タブに表示

HTMLのメタ情報 | UI Memo
別のタブ

基本的なコード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル | サイト名</title>
</head>
<body>
  ...
</body>
</html>

タイトルの書き方ガイドライン

項目内容
文字数の目安全角30〜35文字以内（検索結果では約50〜60文字で省略される）
構成パターン「ページ固有タイトル | サイト名」が一般的
キーワード重要なキーワードをタイトルの前半に含める
ページごとにユニーク全ページで同じタイトルを使わない。各ページの内容を反映する
トップページ「サイト名 - サイトの説明」のように書く

良い例・避ける例

避ける

<title>ページ</title>

→ 内容が不明

<title>UI Memo</title>

→ 全ページ同じタイトル

<title>HTMLのタイトルタグとは何か、その書き方や重要性について詳しく解説するページです</title>

→ 長すぎる

推奨

<title>ページタイトル | UI Memo</title>

→ ページ名 + サイト名

<title>HTMLのtitle要素の書き方 | UI Memo</title>

→ キーワードを含む具体的なタイトル

<title>UI Memo - HTMLリファレンスとUI実装例</title>

→ トップページはサイト名 + 説明

TipsNext.js App Router でのタイトル管理

// app/layout.tsx（ベーステンプレート）
export const metadata = {
  title: {
    template: '%s | UI Memo',  // %s にページタイトルが入る
    default: 'UI Memo',        // titleなしのページのデフォルト
  },
};

// app/page-structure/page.tsx（各ページ）
export const metadata = {
  title: 'ページの構造',  // → 「ページの構造 | UI Memo」になる
};

template を使うことでサイト名を各ページで重複して書かずに済む。

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- `<title>` タグの推奨文字数と「ページ名 | サイト名」形式が一般的な理由を教えてください。
- `<title>` と `<h1>` は同じ内容にすべきですか？それぞれの役割の違いを教えてください。
- Next.js App Router で `metadata.title.template` を使って全ページ共通のサイト名を自動付与する方法を教えてください。
- 検索結果でタイトルが書き換えられる（リライト）場合があるのはなぜですか？防ぐ方法はありますか？
- トップページのタイトルと内部ページのタイトルで書き方のルールはどう変わりますか？

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo