技術

HTMLの<title>タグとは何か、これがないと何が起こるのか

たった1つのタグが、コンテンツを読み込む前に訪問者が目にする3つの異なる場所での表示を決めています。

概要

<title>タグは、ページの<head>セクション内に置かれる、ページの名前を表す短いテキストです。ページの表示コンテンツ自体には一切表示されません。その代わり、訪問者がページ本体を見る前に(あるいはページ本体の代わりに)目にする可能性が高い3つの場所に表示されます。ブラウザのタブに表示される文字列、ページをブックマークしたときに保存される名前、そして検索エンジンの結果一覧に表示されるクリック可能な青い見出しです。

このタグが完全に欠けている場合、ブラウザは空欄のままにはせず、代わりにページの生のWebアドレスや、文字通り「Untitled Document」(無題のドキュメント)のような役に立たない表示を、これら3つの場所すべてに表示します。

重要な理由

タイトルが欠けている問題は、ページ自体を見ているだけでは気づきにくい(コンテンツは問題なく表示される)一方で、ページの名前が参照される他のあらゆる場所では非常に目立つという、やっかいな性質を持っています。ブラウザのタブに実際のページ名ではなくサイトのアドレスがそのまま表示されると、複数のタブを開いている中で目的のタブを見つけにくくなります。実際のタイトルなしで保存されたブックマークは、保存した瞬間から意味をなさなくなります。そしてタイトルのない検索結果は、クリックされる可能性が大きく下がります。

これは、検索エンジンやセキュリティスキャナー、あるいは単に「ページのソースを表示」をクリックした好奇心旺盛な訪問者が真っ先に気づく、最も基本的な技術チェックの一つでもあります。サイトが完成しているかどうかを示す、非常に早い段階の指標なのです。

修正方法

  1. 各ページの<head>セクション内に<title>ページ名</title>タグを追加します。
  2. サイト全体で使い回すのではなく、そのページ固有の具体的なテキストにしましょう。「ホーム」や社名だけでは、「オーダーメイド革財布 — [会社名]」のような表記より訪問者に伝わる情報が少なくなります。
  3. Squarespace、Wix、Webflow、WordPressなどのサイトビルダーを使っている場合は、コードを直接編集するのではなく、そのページの設定にある「ページタイトル」または「SEOタイトル」欄を探してください。
  4. サイト内の他のいくつかのページも確認しましょう。あるページでタイトルが欠けている場合、同じテンプレートから作られた他のページでも同様に欠けていることがよくあります。
  5. Launch Readinessのチェックを再実行し、すべてのページでタイトルが検出されるようになったか確認してください。

あなたのサイトにもこの問題がないか確認しましょう

Launch Readinessは、この問題を含む約50項目を数秒でチェックします — 無料・登録不要。

無料でチェックする