Web ページのタイトル

Web ページのタイトルは、<title> 要素を用いてマークアップします。 ブラウザのタイトルバーやタブに表示されるものですね。

ブラウザのタイトルバーやタブの表示

ソースコードの冒頭 (<head> 要素内) に必ず記述しなければならない大事な要素ですが、意外に無頓着な Web ページ (サイト) が少なくありません。この記事では、Web ページのタイトル (<title> 要素でマークアップされた情報) が「どんなふうに使われているか」を踏まえたうえで、「どう記述すればよいか」を確認したいと思います。

タイトルはどんなふうに使われるか?

タイトル (<title> 要素でマークアップされた情報) は、様々な場面で使われます。冒頭で述べたブラウザのタイトルバーやタブのほか、ブックマーク (お気に入り) や閲覧履歴のリスト表示に使われているのを見たことがあるでしょう。

また、スクリーンリーダー (音声読み上げソフト) を使っているユーザーの場合、ページを開いたときに最初に読み上げられるのがこのタイトルです。「自分がどこにアクセスしたのか?」を知るうえで、大切な手がかりになります。

タイトルは当該サイトの外にも提供されます。来訪していない人に対してタイトルを提示し、サイト (ページ) に誘導するという機能を持ちます。具体的には、以下が挙げられます。

例 : Web ページ上の Twitter ボタンを押すと、自動的にタイトルが取得 (引用) され、ツイートされる。
タイトルの表示例 (Twitter ボタンによるツイート)
例 : Facebook でシェアしたい URL を入力すると、自動的にタイトルが取得 (引用) され、ポストされる。
タイトルの表示例 (Facebook でのシェア)

タイトルはどう書けばよいか?

上記に挙げた例から考えると、タイトルの内容はユーザビリティアクセシビリティの面で重要な役割を担っていると言えます (今アクセスしているページをユーザーに伝えるだけでなく、ユーザーを自サイトへ誘引する行動喚起要因 (Call to Action : CTA) にもなり得ます)。そう考えると、タイトルの記述は十分に気をつけたいところですね。具体的には、以下に留意するとよいでしょう。

これらの留意事項に気をつけていると、自ずと各ページごとにユニークなタイトルになるはずです。くれぐれも、サイト内のどのページを見ても同じタイトルになっている...ということのないようにしましょう。

また、タイトルはできるだけ、そのページの大見出し (<h1> 要素の記述) と同内容にするのが無難です。たとえば検索エンジンの結果表示で目にしたタイトルに興味を持って、自サイトのページにアクセスしたとき、いちばん目につく大見出し (<h1>) が異なった内容になっていると、ユーザーが戸惑う可能性があるからです。多くの CMS (ブログ作成ツールを含む) では初期状態でそのような設定になっていると思いますが、念のため確認しておくとよいでしょう。

タイトルを書くのに適切な文字数は?

ところで、「タイトルを書くのに適切な文字数はどのくらい?」という質問を受けることが時々あります。一概に何文字以内ならベスト、とお答えするのは難しい...というのが正直なところです。一応の目安として (日本語/全角文字の場合) 30から35文字程度に収める、という説がよく聞かれますが、これは各検索エンジンの検索結果表示 (それも PC で閲覧した場合) から割り出されたもので、流動的と言えます。

検索エンジンの結果表示 (PC だけでなくスマートフォンも含めて)、ブラウザのタブ表示、ソーシャルメディアのウィジェットや各種アプリケーション (スマートフォン用アプリも含めて)、などユーザーがよく利用するツールで実際に検証してみて、限られた表示領域であってもファインダビリティを十分確保できるか (ページ内容をユーザーが識別できるか/ユーザーにアピールできているか) を確認するのがよいでしょう。

特に最近は PC と言えども Google Chrome のようにタイトルバーが無いブラウザも登場しており、タブにしかタイトルが表示されないケースが増えつつあります (Windows 版の Firefox や Opera もこのトレンドに乗っていて、初期状態では Google Chrome と同様、タイトル表示はタブのみになっています)。必ずしもタブの中に完全にタイトルが収まる必要性はありませんが (たくさんタブを開くと次第にタブが狭くなるブラウザもあるので、そもそも無理です...)、近年叫ばれているモバイル/スマートフォン対応とも相まって、簡潔かつストレートに伝わるタイトル記述が今後ますます重要になってくるのは確かだと言えそうです。

記事を共有

Twitter に投稿 Facebook に投稿 はてなブックマークに投稿 Pocket に追加