タイトルの付け方
タイトルは、検索結果でそのページを名乗る1行です。中身の要約ではありません。
図の中身を文字で読む
- タイトルは、検索結果でそのページを名乗る1行。
- そのページ固有の語 何が読めるか サイト名
- 先頭に置く 動詞か名詞で言う 末尾。短く
- 長さの目安
- コントラスト比の測り方｜Webデザイン制作支援リファレンス 全角30字あたりで切られる
- 切れても意味が通る順に置く
- ✕ 全ページ同じ｜✕ サイト名が先頭｜✕ 語を詰め込む
- 同じタイトルが並ぶと、検索する人はどれを開くか決められない。
ひと目で#
そのページでしか読めない語を先頭に、サイト名は末尾へ。
- タイトル
<title>の中身。検索結果とタブとブックマークに出る- 先頭
- 固有の語。切られても残る位置
- 末尾
- サイト名。どこの誰かを示す
- 長さ
- 全角30字あたりで切られる。切れても意味が通る順に置く
順番の決め方#
| 位置 | 置くもの | 例 |
|---|---|---|
| 先頭 | そのページでしか読めない語 | 石窯の焼き上がり時間 |
| 中 | 何が読めるか（要るときだけ） | 平日と土日 |
| 末尾 | サイト名 | つきひ |
区切りは全角の縦線か読点で揃えます。ページごとに変えると、一覧で見たときに不揃いになります。
h1 と同じでなくてよい#
図の中身を文字で読む
- 同じ12ページを、語順だけ変えて並べた
- ○ 固有の語が先頭 ✕ サイト名が先頭
- 石窯の焼き上がり時間｜つきひ つきひ｜常盤野のパン工房
- 定期便の申し込み｜つきひ つきひ｜常盤野のパン工房
- 工房までの道順｜つきひ つきひ｜常盤野のパン工房
- はたらく人｜つきひ つきひ｜常盤野のパン工房
- 先頭の全角30字で見分けられる 4行とも同じ。どれを開くか決められない
- 切られる位置は、先頭からの字数で決まる
- だから、名指しの語ほど前に置く。
h1 は ページの中で名乗る 見出しです。タイトルは 一覧の中で見分ける 1行です。役目が違うので、同じ文にする必要はありません。
ページを開いた人には前後の文脈があります。検索結果でタイトルを読む人には、それがありません。だからタイトルのほうが、名指しの度合いを強くします。
間違えやすいところ#
- 全ページを同じタイトルにする検索する人は、どれを開くか決められない
- サイト名を先頭に置く12ページ並ぶと、先頭の30字が全部同じになる
- 語を詰め込む切られて後半が消える。読む人には不自然に映る
- 中身の要約を書く要約は説明文の役目。タイトルは名乗り
- 記号で飾る一覧の中で読みにくくなる
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
架空のパン工房のサイトを公開する現場です。全12ページのタイトルが「つきひ｜常盤野のパン工房」で揃っていました。検索結果に同じ行が12本並び、料金を探している人も、地図を探している人も、どれを開くか決められません。そのページでしか読めないことを先頭に置き、サイト名を末尾へ回します。「石窯の焼き上がり時間｜つきひ」のように、切られても意味が残る順に並べました。
確認する#
- そのページでしか読めない語が先頭にある
- サイト内で同じタイトルが2つ以上ない
- 全角30字で切られても、何のページか分かる
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
そのページでしか読めない語を先頭に、サイト名は末尾へ。全角30字あたりで切られる。
<title>石窯の焼き上がり時間｜つきひ</title>
<!-- 固有の語 → 何が読めるか → サイト名 -->この場面のほかの困り事と、そのまま貼れる部品は出す前と出したあとにまとめてある。逆引きには全188件。
測ってみる#
書いたタイトルを入れると、切られる位置に線が引かれます。半角は0.5字として数えます。