Web ページのタイトル
Web ページのタイトルは、<title> 要素を用いてマークアップします。 ブラウザのタイトルバーやタブに表示されるものですね。
ソースコードの冒頭 (<head> 要素内) に必ず記述しなければならない大事な要素ですが、意外に無頓着な Web ページ (サイト) が少なくありません。この記事では、Web ページのタイトル (<title> 要素でマークアップされた情報) が「どんなふうに使われているか」を踏まえたうえで、「どう記述すればよいか」を確認したいと思います。
タイトルはどんなふうに使われるか？
タイトル (<title> 要素でマークアップされた情報) は、様々な場面で使われます。冒頭で述べたブラウザのタイトルバーやタブのほか、ブックマーク (お気に入り) や閲覧履歴のリスト表示に使われているのを見たことがあるでしょう。
また、スクリーンリーダー (音声読み上げソフト) を使っているユーザーの場合、ページを開いたときに最初に読み上げられるのがこのタイトルです。「自分がどこにアクセスしたのか？」を知るうえで、大切な手がかりになります。
タイトルは当該サイトの外にも提供されます。来訪していない人に対してタイトルを提示し、サイト (ページ) に誘導するという機能を持ちます。具体的には、以下が挙げられます。
- 検索エンジンにおける検索結果表示 (SERPs)
- RSS リーダー
- ソーシャルメディア (SNS、Twitter、ソーシャルブックマーク、など) での共有
タイトルはどう書けばよいか？
上記に挙げた例から考えると、タイトルの内容はユーザビリティやアクセシビリティの面で重要な役割を担っていると言えます (今アクセスしているページをユーザーに伝えるだけでなく、ユーザーを自サイトへ誘引する行動喚起要因 (Call to Action : CTA) にもなり得ます)。そう考えると、タイトルの記述は十分に気をつけたいところですね。具体的には、以下に留意するとよいでしょう。
- ページの内容 (主題や目的など) を明確に表現する。
- ユーザーにとって馴染みのある語句 (理解語彙よりも使用語彙が望ましい) をキーワードとして盛り込む。
- 重要な語句 (ページ内容を特徴づける/他のページと識別する手がかりとなる語句) はタイトルの最初のほうに置く。
- タイトルの末尾には、(ページに対する信頼性をユーザーに与えるため) サイト名/ブランド名/運営者名 (企業名) を明記する。
- なるべく少ない文字数でまとめる (ユーザーの使用する環境/ツールによっては、ごく小さな領域にタイトルが表示されるので)。
これらの留意事項に気をつけていると、自ずと各ページごとにユニークなタイトルになるはずです。くれぐれも、サイト内のどのページを見ても同じタイトルになっている...ということのないようにしましょう。
また、タイトルはできるだけ、そのページの大見出し (<h1> 要素の記述) と同内容にするのが無難です。たとえば検索エンジンの結果表示で目にしたタイトルに興味を持って、自サイトのページにアクセスしたとき、いちばん目につく大見出し (<h1>) が異なった内容になっていると、ユーザーが戸惑う可能性があるからです。多くの CMS (ブログ作成ツールを含む) では初期状態でそのような設定になっていると思いますが、念のため確認しておくとよいでしょう。
タイトルを書くのに適切な文字数は？
ところで、「タイトルを書くのに適切な文字数はどのくらい？」という質問を受けることが時々あります。一概に何文字以内ならベスト、とお答えするのは難しい...というのが正直なところです。一応の目安として (日本語/全角文字の場合) 30から35文字程度に収める、という説がよく聞かれますが、これは各検索エンジンの検索結果表示 (それも PC で閲覧した場合) から割り出されたもので、流動的と言えます。
検索エンジンの結果表示 (PC だけでなくスマートフォンも含めて)、ブラウザのタブ表示、ソーシャルメディアのウィジェットや各種アプリケーション (スマートフォン用アプリも含めて)、などユーザーがよく利用するツールで実際に検証してみて、限られた表示領域であってもファインダビリティを十分確保できるか (ページ内容をユーザーが識別できるか/ユーザーにアピールできているか) を確認するのがよいでしょう。
特に最近は PC と言えども Google Chrome のようにタイトルバーが無いブラウザも登場しており、タブにしかタイトルが表示されないケースが増えつつあります (Windows 版の Firefox や Opera もこのトレンドに乗っていて、初期状態では Google Chrome と同様、タイトル表示はタブのみになっています)。必ずしもタブの中に完全にタイトルが収まる必要性はありませんが (たくさんタブを開くと次第にタブが狭くなるブラウザもあるので、そもそも無理です...)、近年叫ばれているモバイル/スマートフォン対応とも相まって、簡潔かつストレートに伝わるタイトル記述が今後ますます重要になってくるのは確かだと言えそうです。