記事タイトルは公開日やタグより先に置く｜ヘッダー並びの直し方

自分のブログで記事ページを作っていると、パンくずリスト・公開日・タグなど、タイトルより前に置きたい要素が自然と増えていきます。1つずつは小さな要素でも、積み重なるとタイトルまでの距離が伸び、特にモバイルではスクロールしないと本文にたどり着けない状態になりがちです。

この記事では、タイトルより上に並べる要素をどこまで減らせるか、おすすめの並び順とあわせて1分で読める範囲にまとめます。

今日の結論

• パンくず・日付・タグがタイトルより上に並ぶと、モバイルで本文到達が遅くなる
• 推奨順: H1（タイトル） → 日付1行 → リード文 → タグ
• 「ブログ記事」ラベルはパンくずの「Blog」と役割が重なりやすく、削ってよいことが多い

なぜ「タイトルより上の要素」が多いと本文到達が遅れるのか

パンくず・カテゴリラベル・公開日・更新日・タグを別々の行で並べると、要素数だけ縦の高さが積み上がります。PCでは気にならない高さでも、モバイルは画面の縦幅が限られている。同じ要素数でも、タイトルまでの体感距離が長くなる、という違いです。

本記事の内容は、Next.js製のブログテンプレート（見出しの直後に日付やタグを配置する構成）を前提にしています。CMSやテーマによって要素の初期配置は異なるため、他の構成での見え方までは確認していません（未検証の範囲です）

推奨のヘッダー並び順

読者が知りたいのは「これは何の記事か」であり、公開日やタグは補足情報です。そのため、次の並びを基本形にします。

1. H1（記事タイトル）
2. 日付1行（公開 … ／ 更新 … のようにまとめる）
3. リード文（記事の要約1〜2文）
4. タグ（件数を絞って表示）

パンくずは本文の外側（ヘッダーのさらに上）に置く前提であれば、タイトル直前の並びには含めなくてよい場合もあります。ここは既存のレイアウトに合わせて判断してください。

直し方の手順

1. 記事トップのスクリーンショットを撮り、タイトルまでに並んでいる要素の数を数える
2. 日付は「公開 … ／ 更新 …」の1行にまとめ、H1の直後へ移す
3. タグは最大4〜5個＋「他N件」の表示にとどめ、Seriesバッジのような分類要素はパンくずと同列に寄せる
4. 「ブログ記事」のようなラベルがパンくずの「Blog」と意味が重なっていないか確認し、重なっていれば片方を削る

要素を減らすというより、役割が重なっている要素を1つにまとめるという考え方に近いものです。

チェックリスト

まとめ・次に読む

タイトルより上に何を置くかは、要素を足すか引くかではなく、役割が重なっているものをまとめられるか。まずはH1直後に日付1行、その次にリード文とタグ。基本形はこれで十分です。

• 準備中：ブログ記事ヘッダーのモバイル表示チェック手順
• 準備中：パンくずリストとカテゴリ表示の整理方法
• あわせて：Obsidianで完了タスクに取り消し線をつける書き方
• 次：ヘッダー直下のPR開示は警戒されない短文にする

---

本記事の内容は執筆時点（2026-07-28）の情報に基づきます。ヘッダーの最適な並び順はテンプレートやCMSによって異なる場合があります。デザインを変更する際は、既存ページへの影響を確認したうえで進めてください。