クリックされるtitleタグの書き方・基本とコツ

「検索結果という商店街の、看板の書き方」が今回のテーマです。

前回は、検索結果一覧が「インターネット上の巨大な商店街」であり、titleタグはその看板にあたるとお話ししました。まだご覧でない方は、前回の記事「検索結果の「タイトル・要約文」はなぜ重要?初心者向けに役割を解説」をあわせてどうぞ。

では、その看板にはどんな言葉を書けば、お客様が足を止めて、お店の中(記事)へ入ってくれるのでしょうか。

titleタグとは?
知っておきたいh1タグとの違い

titleタグとは、ページの「名前」を、Webページの裏側であるHTMLの中に記述するためのタグで、検索結果のタイトルやブラウザーのタブに表示されます。

一方、記事の書き方について調べていると、よく「h1タグ」という言葉も目にします。
h1タグはページ本文の中で最も大きな見出しとして表示され、ページを開いた後に読者が最初に目にする記事の題名です。

titleタグとh1タグの違いのイメージ図
titleタグとh1タグの違いのイメージ図

よく似ている2つのタグですが、役割は少しずつ違います。違いを表にまとめました。

比較項目titleタグh1タグ
表示される場所検索結果のタイトル・ブラウザーのタブページ本文の一番大きな見出し
伝える相手ページを「まだ見ていない」人ページを「訪れた後」の読者
求められる役割クリックしてもらえるかどうか(集客)本文の主題が伝わるかどうか(読みやすさ)

両方に同じ言葉を入れても問題はありませんが、必ず同じにしなければならないわけでもありません。
titleタグでは「検索結果でクリックしたくなる表現」を、h1タグでは「本文の流れに沿った、読みやすい見出し」を、それぞれの立場で考えてみましょう。

ただし、タイトルとh1タグのテーマが大きく食い違っていると、読者も検索エンジンもページの内容を誤解してしまう原因になります。
主要なキーワードと内容の方向性だけは、両方でそろえておくのが安心です。
というのも、Googleはtitleタグが内容に合っていないと判断したとき、ページに表示されているh1など別の見出しを使って、検索結果のタイトルを作り直すことがあるからです。
titleタグとh1タグの方向性をそろえておくことは、そのまま検索結果対策になります。

titleタグの書き方

基本の6ステップ

「文字数を32文字以内に収めればOK」と思われがちですが、実はそれだけでは不十分です。
次の6つのステップを順に進めると、読者の目を引くtitleタグが作れます。

STEP 1:

ページのテーマをまとめる

まず最初に、このページが「誰に」「何を伝える」ためのものかを、次のような内容を設計メモとして書き出します。

  1. ページの主題(例:titleタグの付け方)
  2. 読者が得られるもの(例:初心者でも基本から分かる)
  3. 補足(必要なら、対象者や地域など)

いきなり文章を作り始めると、「何を一番伝えたいのか」がぼやけたタイトルになりがちです。
先に設計メモをまとめておけば、あとで短く削るときに迷いません。

STEP 2:

検索キーワードを選ぶ

タイトルには、そのページで「検索されたいキーワード」を入れましょう。
このとき、「一番軸となるメインキーワードを1つ選び、それと一緒に検索されやすいサブキーワードを自然に組み合わせる」のが効果的です。

「とにかくたくさんキーワードを詰め込めば、色々な検索に引っかかるのでは?」と思われるかもしれませんが、それは逆効果です。
関連性の薄い単語を不自然に羅列したタイトルは読者にとって読みづらく、検索エンジンにもスパムのような不自然な印象を与えてしまいます。

メインとなるキーワードや関連キーワードを選ぶ際の代表的な方法は、次の3つです。

  • 検索意図を思い描く
    読者はどんな言葉の組み合わせで検索し、そのとき何を知りたいと思っているのかを想像します。
  • ツールを活用する
    Googleサーチコンソールの「検索パフォーマンス」レポートの「クエリ」や、無料のキーワード調査ツール(「ラッコキーワード」など)で、メインキーワードと一緒に検索されている言葉を探すのが参考になります。
  • 実際の検索結果を観察する
    シークレットウィンドウで実際に検索し、上位に表示されるサイトのタイトルがどのような言葉で構成されているかを見てみましょう。

そして何よりも大切なのは、「自分のページで実際に説明できる内容」と合致したキーワードを選ぶことです。
検索数が多いからという理由だけで、記事の中身と関係のないキーワードを無理に入れるのはやめましょう。

STEP 3:

大切な語句をタイトルの前半に置く

検索結果では、タイトルが長いと後半が「…」で省略されることがあります。
つまり、後半にしか置いていない重要な情報は、読者の目に届かない可能性があるということです。

「何のページなのか」が分かる語句(主題や、読者が得られるメリット)を冒頭に置き、補足情報を後ろに並べるのが基本の型です。

例)titleタグの付け方|初心者が押さえたい基本とコツ
→ 前半の「titleタグの付け方」で内容が伝わり、後半の「初心者向け」「基本とコツ」で、クリック後に得られる情報が想像できます。

STEP 4:

文字数の目安は全角28〜32文字

日本語の場合は、全角で「28〜32文字」がひとつの目安です。
この数字は表示幅から生まれた目安であって、Googleが文字数を数えているわけではありません。
スマートフォンではパソコンよりさらに短く表示されるため、後半の言葉は表示されない可能性があると考えておきましょう。
あわせて、冒頭の15文字程度までに主題の語句が入るようにしておくと、省略されたときの保険になります。

文字数はあくまでも目安です。
「32文字ぴったりに合わせること」よりも、「冒頭だけを見ても内容が伝わる構成」を意識してください。

STEP 5:

サイト名は「|」で区切って末尾に添える

会社やブランドのサイトでは、タイトルの末尾にサイト名を添えるのが一般的です。
ページの主題との区切りには「|」(縦棒)や「:」「-」などの記号を使います。

例:〇〇のやり方|株式会社〇〇
(=ページの主題|サイト名)

ただし、ここには注意点がふたつあります。

ひとつは、titleタグ全体が長すぎる場合です。
検索結果では、入りきらなかった後半が「…」で省略されます。
区切りの末尾に置いたサイト名は、まっさきに切られる場所です。
せっかく添えたサイト名が途中で切れると、意味をなさなくなります。

もうひとつは、「株式会社〇〇」という社名だけのタイトル。
どのページのものか区別がつかず、読者にも検索エンジンにも伝わりません。

なお、Googleの検索結果には、サイト名がタイトルとは別の位置にも表示されます。
titleタグ内のサイト名がその表示と重複していると判断されると、タイトルから省略されることもあります。
サイト名は短く添えるのが基本です。

全ページに同じ長い文言を付ける場合は、事前に検索結果での表示を確認しておきましょう。

STEP 6:

ページごとに固有のタイトルを付ける

サイトの中で同じタイトルを使い回すと、検索エンジンが「どのページが検索にふさわしいのか」を判断しにくくなり、読者も検索結果で迷ってしまいます。
特に使い回しが起きやすいのは、商品ページ、カテゴリーページ、地域別ページなどです。

作り終わったら、サイトのページ一覧を上から眺めてみましょう。
「タイトルだけを見て、ページごとの役割の違いが分かるか」が、ひとつの基準になります。

ページの種類別・タイトルの基本フォーマット

ページの種類によって、読者が知りたい情報の切り口は変わります。
代表的な型と、実際の書き換え例をまとめました。

ページの種類基本フォーマット
ノウハウ記事キーワード|対象者と中身が分かる補足
例:「titleタグの付け方|初心者が押さえたい基本とコツ」
比較記事キーワード比較|選び方と違いを解説
例:「ホームページ制作会社の選び方|比較ポイントと失敗例」
商品サービス商品名|特徴・料金・申し込み方法
例:「ホームページ制作パック|料金と申し込みの流れ」
地域サービス地域名|サービスと特徴
例:「横浜の中古マンション売却|査定の流れと相場を解説」

不動産会社や工務店、美容室など、特定の地域でサービスを提供するビジネスでは、地域名・サービス名・対象者・特徴を組み合わせると、地域の検索意図に合いやすくなります。
「愛知の注文住宅|自然素材の家づくりと施工事例」「渋谷の美容院|メニュー・料金と予約方法」のようなイメージです。

ただし、どれだけ魅力的な型であっても、「このページで実際に説明している情報」だけを盛り込むことが大前提です。
実際に対応していない地域名や、根拠のない「No.1」「最安値」などを入れるのは厳禁です。

これはNG!よくある失敗例とそのリスク

「こう書けばいい」の反対側も知っておくと、基本がぐっと身につきます。
よく見られるNG例とリスクを6つにまとめました。

NGその1:

キーワードの詰め込み

「titleタグ SEO 付け方 書き方 方法 コツ」のように言葉を並べるだけのタイトルは、読みづらく、クリックされにくくなります。
助詞や接続語を添えて、声に出しても意味が通じる自然な文章にしましょう。

NGその2:

タイトルの使い回し(重複)

複数のページで同じタイトルを使うと、検索エンジンも読者もページの違いを判断できず、せっかくのページ同士が検索結果で競合してしまいます。
ページごとに固有のタイトルを設定しましょう。

NGその3:

長すぎるタイトル

タイトルが長いと重要な部分が「…」に隠れてしまい、ページの内容やメリットが伝わりません。
全角28〜32文字を目安に、不要な修飾語を削りましょう。

NGその4:

曖昧な言葉だけで作る

「おすすめ情報」「役立つ完全ガイド」のような言葉だけでは、何について書かれたページなのか判断できません。
対策したいキーワードや、解決できる悩みを具体的に含めましょう。

NGその5:

根拠のない誇張表現

「絶対」「必見」「最安値」など強い言葉を連ねると、広告じみた印象になり、かえって信頼を損ないます。
「タイトルの約束」は、本文で必ず果たせる範囲に収めましょう。

NGその6:

記号の多用

「!!!」「【必見】【激安】」などの装飾が並ぶと読みづらく、環境によっては意図しない表示になることもあります。
区切り記号は、意味の切れ目に必要最小限の範囲で使いましょう。

書き終えたら確認したい
最終チェックリスト

titleタグを書き終えたら、最後に次の5点を確認してみてください。

  • タイトルだけを見て、何のページか分かるか
  • 冒頭(15文字程度の中)に主題やメリットの語句が入っているか
  • 本文の内容と合っているか(タイトルが約束したことを本文が果たすか)
  • サイト内の別のページとタイトルが重複していないか
  • 音読して自然な日本語になっているか(単語の羅列になっていないか)

どれかひとつでも当てはまらない項目があれば、該当するステップに戻って修正しましょう。

まとめ:看板を磨く前に、まず中身を

titleタグは、読者が検索結果で最初に目にし、「クリックするかどうか」を判断する入り口の看板です。
そして、それ以上に大切なのは、読者の疑問に真摯に答える良い記事を書くことです。

看板と中身の両方を丁寧に整えることで、あなたの記事はきっと、必要としている読者のもとへ届くようになります。

関連記事

ご準備状況に合わせて
選べるサービス

ホームページの制作はもちろん、競合調査や戦略設計、原稿作成といった


「サイトの価値を高める専門工程」を、必要な部分だけご依頼いただくこともできます。
サイト作りはお客様ご自身で進められるお客様にも、ご利用いただけるメニューです。

サービスに関するご質問・お見積もりのご依頼は
[お問い合わせフォーム]から承っております。