タブが全部同じ名前になったら、ページごとのtitleを直そう

トップページをコピーして別のページを作ったら、タブの名前も同じままだった。本文を直していても、ページの名前は見落としやすい箇所です。三つのページを並べて、それぞれ何の案内か分かる名前に直してみましょう。

ここでは架空の古書店「栞堂」の店舗案内、買取案内、催し案内を使います。静的なHTMLを編集する人向けに、titleの内容と確認方法を扱います。検索順位の改善を約束するものではありません。

本文の見出しと、タブの名前を分けて探す

titleはHTML文書の名前を指定する要素です。MDNのtitleの説明で、head内に置き、ブラウザーのタブやタイトルバーに表示されることを確認できます。

一方、本文にある「買取のご案内」という大きな見出しは、本文を読む人への入口です。本文の見出しを編集しただけで、別に書かれたtitleも直したつもりにならないようにします。ページを生成する仕組みを使っている場合は、どの入力項目からtitleが作られるかを確認してください。

今回の模擬サイトでは、三ページともtitleが「栞堂」のままだったとします。まずファイル名、本文の主な見出し、現在のtitleを並べ、重複を見つけます。

ページの用件を先に、店名を後ろに置く

この例なら、名前の案は次の三つです。

• 店舗案内：営業時間とアクセス | 栞堂
• 買取案内：本の持ち込み方法 | 栞堂
• 催し案内：読書会の日程 | 栞堂

店名を消すのではなく、ページごとに違う部分を先に置きます。狭いタブでは長い名前の全体が見えない場合があるため、先頭だけでも区別できるかを点検します。「栞堂の公式サイトへようこそ」のような共通の挨拶を、全ページの先頭へ重ねる必要はありません。

W3Cのページタイトルに関する解説は、ページの主題や目的を説明するタイトルを扱っています。上の三案は、その考え方をこの練習へ当てはめた編集例であり、決まった書式ではありません。

head内の一つのtitleを書き換える

次は買取案内用の最小HTMLです。新しい練習用ファイルとして保存できます。既存ページに直す場合は全体を貼り付けず、head内のtitleを探して内容を置き換えてください。同じheadへ二つ目を追加しません。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>本の持ち込み方法 | 栞堂</title>
</head>
<body>
  <main>
    <h1>買取のご案内</h1>
    <p>本の持ち込みは、事前に店舗へご相談ください。</p>
  </main>
</body>
</html>

本文は架空の受付方法を示す短い練習文です。実店舗の条件として流用せず、実際の原稿で確認しましょう。また、本文が持ち込みの案内だけなら、titleに「宅配買取の申し込み」まで付け足しません。ページにない内容で期待を広げないことも点検対象です。

ファイル内の値と、開いたページの名前を照合する

保存後は三ページを開き直し、タブを切り替えて内容と名前が対応するか確認します。名前が変わらなければ、編集したファイルと開いているURLが同じ対象かを調べてください。生成型のサイトなら、編集元の変更が出力へ反映されたかも見ます。

公開後は公開先のページでも確認します。手元のファイルを直したことと、公開版が更新されたことは別です。今回の作業記録にも、手元と公開先のどちらで確認したかを残してください。

他の公開前確認を進めるときは、フォームとリンクを最後まで確かめる記事を参照できます。titleの確認だけで、ページ内の操作まで点検したことにはなりません。

三つのタブを、ページ名だけで区別できるか

三ページのURL、titleの修正案、本文でその内容を説明している場所を一組ずつ書きます。一つだけ実際に直して開き、残りの二つも同じ書き方で区別できるか見直してください。

今回の完成物は、名前の一覧と確認したページの記録です。HTMLの要素を意味から選ぶ練習を続けるなら、Semantic HTMLの無料レッスンも参照できます。