HTMLを学習していると、headタグの中に「titleタグ」が書かれているのを見かけることがあります。しかし、「titleタグはどこに表示されるの？」「h1タグとは何が違うの？」「SEOでは何文字くらいで書けばいいの？」「Googleにタイトルを書き換えられることはあるの？」と疑問に感じる方も多いのではないでしょうか。titleタグは、Webページのタイトルを指定するHTMLタグで、ブラウザのタブや検索結果のタイトルとして使われることがあります。
この記事では、HTMLのtitleタグの意味や基本的な書き方、h1タグやmeta descriptionとの違い、SEOで意識したい文字数の目安、Googleによるタイトル書き換え対策を初心者向けにわかりやすく解説します。サンプルコード付きで紹介するので、HTMLを学び始めたばかりの方もぜひ参考にしてください。
HTMLのtitleタグとは？
titleタグは、Webページのタイトルを指定するためのHTMLタグです。ページ本文に表示される見出しではなく、ブラウザのタブ名や検索結果のタイトルとして使われることがあります。
titleタグの役割
titleタグは、そのページが何についてのページなのかをブラウザや検索エンジンに伝える役割があります。
<head>
<title>HTMLのtitleタグとは？</title>
</head>上記のように、titleタグはheadタグの中に書きます。titleタグはページ内容を短く伝える重要な要素であり、SEO記事を作るうえでも意識したいタグです。
titleタグは画面本文には表示されない
titleタグに書いた文字は、通常、ページ本文の中には表示されません。本文に表示したい見出しは、h1タグやh2タグなどで記述します。
<title>ページタイトル</title>
<body>
<h1>ページ内に表示される見出し</h1>
</body>titleタグとh1タグは役割が違うため、同じものとして扱わないようにしましょう。
titleタグはheadタグ内に1つ書く
titleタグは、基本的に1つのHTML文書につき1つだけ書きます。
<head>
<title>サンプルページ</title>
</head>複数のtitleタグを書くと、ブラウザや検索エンジンにどのタイトルを使ってほしいのか伝わりにくくなります。1ページに1つのtitleタグを設定するのが基本です。
HTMLでtitleタグを使う方法
titleタグは、HTMLファイルのheadタグ内に記述します。HTMLの基本構造と一緒に覚えると、ページを作るたびに迷わず設定できるようになります。
基本的な書き方
titleタグの基本的な書き方は、「<title>ページタイトル</title>」です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの基本を学ぶ</title>
</head>
<body>
<h1>HTMLの基本を学ぶ</h1>
</body>
</html>この例では、headタグの中にtitleタグを入れています。ブラウザで開くと、タブ名にtitleタグの内容が表示されます。
ページごとに異なるtitleを設定する
Webサイトでは、ページごとに内容が異なるため、titleタグもページごとに変えるのが基本です。
<title>会社概要｜サンプル株式会社</title>
<title>お問い合わせ｜サンプル株式会社</title>すべてのページで同じtitleタグを使うと、検索結果やブラウザタブでページ内容を判別しにくくなります。ページの内容に合わせて、分かりやすいタイトルを設定しましょう。
サイト名を入れる場合の書き方
titleタグには、ページ名とサイト名を組み合わせて書くことがあります。
<title>HTMLの学習方法｜サンプル学習サイト</title>このように書くと、ページ内容とサイト名の両方を伝えられます。記事ページでは「記事テーマ｜サイト名」のように書くと、検索結果でも内容が伝わりやすくなります。
titleタグとSEOの関係
titleタグは、SEOを考えるうえで特に重要なHTMLタグの一つです。検索結果のタイトルとして表示されることがあるため、ページ内容と検索キーワードの両方を意識して設定しましょう。
検索キーワードを自然に含める
SEOを意識する場合、titleタグには狙いたいキーワードを自然に含めることが大切です。
<title>HTMLのtitleタグとは？役割や書き方を初心者向けに解説</title>上記の例では、「HTML titleタグ」というテーマが分かるようにしています。ただし、キーワードを入れればよいわけではありません。
キーワードを不自然に詰め込みすぎると、読者にとって分かりにくいタイトルになります。
ページ内容とズレないtitleにする
検索結果でクリックされたいからといって、本文と関係のないタイトルを書くのは避けましょう。
<title>HTMLを完全攻略！最短でプロになる方法</title>本文がtitleタグの説明だけであれば、上記のようなタイトルは内容とズレてしまいます。titleタグは、記事で何が分かるのかを正直に伝えることが重要です。
meta descriptionとセットで考える
titleタグは検索結果のタイトル、meta descriptionは説明文として使われることがあります。
<title>HTMLのtitleタグとは？役割や書き方を解説</title>
<meta name="description" content="HTMLのtitleタグの意味やSEOで重要な理由を初心者向けに解説します。">titleタグで主題を伝え、descriptionで記事内容を補足すると、検索結果で読者に内容が伝わりやすくなります。
Googleがtitleタグを書き換えることがある
titleタグを設定しても、検索結果に必ずそのまま表示されるとは限りません。Googleは検索結果のタイトルリンクを自動生成しており、titleタグだけでなく、ページ内のh1タグ、本文中の目立つテキスト、og:title、外部からのリンクテキストなども参考にすると説明しています。
<title>HTMLを完全攻略！最短でプロになる方法</title>
<h1>HTMLのtitleタグとは？</h1>上記のように、titleタグと本文の主題が大きくズレていると、Googleがh1タグや本文の内容を使って検索結果のタイトルを書き換える可能性があります。titleタグは検索結果での見え方だけでなく、本文内容と一致しているかも重要です。
クリックを狙って大げさなtitleにしても、本文内容と合っていなければ書き換えられたり、読者の離脱につながったりする可能性があります。
h1タグとの内容をそろえる
titleタグとh1タグは完全に同じである必要はありませんが、ページの主題はそろえるのがおすすめです。
<title>HTMLのtitleタグとは？SEOに強い書き方を解説</title>
<h1>HTMLのtitleタグとは？役割や書き方を解説</h1>このように、titleタグでは検索結果で伝えたい要点を短くまとめ、h1タグでは記事内の見出しとして自然に書くと分かりやすくなります。titleタグ・h1タグ・本文の内容が一致しているほど、検索結果でもページ内容が伝わりやすくなります。
titleタグを書く際の注意点
titleタグは短いタグですが、書き方を間違えると検索結果やブラウザで内容が伝わりにくくなります。特に、重複や長すぎるタイトルには注意しましょう。
長すぎるtitleにしない
titleタグは長く書きすぎると、検索結果で途中までしか表示されないことがあります。
<title>HTMLのtitleタグとは何かについて、役割や書き方やSEOの考え方や注意点を初心者にも分かるように詳しく解説する記事</title>長すぎるtitleは要点が伝わりにくくなるため、重要なキーワードや内容を前半に入れるのがおすすめです。
titleタグの文字数は30〜32文字程度を目安にする
初心者の方が最も迷いやすいのが、「結局何文字くらいで書けばよいのか」という点です。Googleの検索結果はデバイス幅によって表示できる文字数が変わるため、厳密な文字数の上限があるわけではありません。
ただし、日本語のSEO記事では、PC検索では30〜32文字程度、スマートフォンでは35〜40文字程度を一つの目安にすると考えやすいです。
<title>HTMLのtitleタグとは？SEOに強い書き方を解説</title>この例のように、前半に「HTMLのtitleタグとは」という主要キーワードを入れ、後半に「SEOに強い書き方」のような読むメリットを入れると、検索結果でも内容が伝わりやすくなります。
文字数はあくまで目安であり、検索結果で必ず省略されないことを保証するものではありません。Google公式でも、title要素に文字数の制限はないものの、検索結果では必要に応じて省略されると説明されています。
同じtitleを使い回さない
複数のページで同じtitleタグを使うと、どのページが何について書かれているのか分かりにくくなります。
titleタグはページごとに固有の内容にすることが大切です。ブログ記事であれば、記事ごとのテーマに合わせてタイトルを変えましょう。
WordPressでは記事タイトルとSEOタイトルを確認する
WordPressでは、記事タイトルやSEOプラグインの設定からtitleタグが自動生成されることがあります。
記事本文にtitleタグを直接書くのではなく、WordPressのタイトル欄やSEO設定欄で管理するのが一般的です。Cocoonなどのテーマでは、SEOタイトルやメタディスクリプションを設定できる場合があります。
公式ドキュメントも確認する
titleタグや検索結果でのタイトル表示について詳しく確認したい場合は、公式ドキュメントも参考になります。
- MDN Web Docs title要素：HTMLのtitleタグの仕様や使い方を確認できます。
- Google Search Central タイトルリンクのドキュメント：検索結果のタイトルリンクがどのように生成されるかを確認できます。
より詳細なWeb標準の仕様やGoogle検索でのtitleの扱いは、MDNやGoogle Search Centralなどの公式ドキュメントも参考にすると理解が深まります。
オススメ：HTML、CSSの問題集に無料で挑戦しよう！
HTML、CSSを勉強していると、調べれば分かることもありますが、実際に自分でアウトプットするのは難しいと感じたことはありませんか？
アウトプットするためのおすすめの方法は、「問題解くこと」です。
忍者CODEのHTML、CSS 学習の無料問題集では、HTML、CSSに関する問題を100問以上用意しており、LINE登録するだけで解答を無料で確認できます！
まとめ
本記事では、HTMLのtitleタグについて解説しました。
titleタグは、Webページのタイトルを指定するためのHTMLタグです。headタグの中に書き、ブラウザのタブ名や検索結果のタイトルとして使われることがあります。
titleタグはh1タグとは役割が異なります。titleタグはページ全体のタイトル情報をブラウザや検索エンジンに伝えるためのタグで、h1タグは本文内に表示される主見出しです。
SEOを意識する場合は、ページ内容に合ったキーワードを自然に含め、30〜32文字程度を一つの目安にしながら、長すぎず分かりやすいtitleを設定することが大切です。titleタグと本文内容がズレていると、Googleがh1タグや本文を参考に検索結果のタイトルを書き換えることもあります。WordPressでは、記事タイトルやSEO設定欄でtitleタグが生成されることが多いため、公開前に表示内容を確認しておきましょう。
- HTML・CSSを学んで自分だけのスキルを身につけたい
- HTML・CSSのスキルを身につけてwebクリエイターとして活躍したい
- サポートが充実しているプログラミングスクールを知りたい
そんな思いを持った方は忍者CODEのWeb制作コースがおすすめです！
忍者CODEは未経験からでもプロのエンジニアを目指せるオンラインプログラミングスク―ルです。
期間制限なく動画を視聴できるので、自分のペースで学習することができます！
