HTMLのタイトルの付け方は?

この記事のレベル

こんにちは、編集長のカワウソです!

「ホームページのタイトルの付け方がわからない……」とお悩みではありませんか?

そこで今回は、ホームページのタイトルの基礎知識はもちろん、設定方法も解説します。

HTMLのタイトルの付け方は?
カワウソ

この記事は次のような人におすすめ!

  • ホームページのタイトルについて詳しく知りたい人
  • ホームページのタイトルの付け方や設定方法を知りたい人
  • SEOに強いホームページのタイトルを付けたい人

この記事を読めば、SEO(検索エンジン最適化)に強いホームページのタイトルを付けることができます。

ホームページに集客したい方は、ぜひご覧ください。

それではどうぞ!

  • ホームページのタイトルが表示される場所
    • 検索エンジンの検索結果
    • ブラウザのタブやブックマーク
    • SNS(URL付きの投稿)
  • ホームページのタイトルの役割と重要性
    • ホームページのタイトルはSEOでも重要
  • (基本編)ホームページのタイトルの付け方
    • トップページは「社名(サービス名など)」が基本
    • 下層ページは「ページ名 | 社名(サービス名など)」
  • ホームページのタイトルの設定方法
    • HTMLサイトのタイトル設定方法
    • WordPressサイトのタイトル設定方法
  • (応用編)SEOに強いタイトルを付ける5つのコツ
    • キーワードを入れる
    • 同じキーワードを複数挿入しない
    • キーワードは前半に入れる
    • ページごとに一意のタイトルを付ける
    • 地名を入れる
  • (応用編)ユーザーにクリックされやすい3つのタイトル
    • ターゲットを挿入する
    • 数字を入れる
    • 権威性をアピールする
  • ホームページのタイトルについてのQ&A
    • タイトルを変更したら、どのくらいで反映されるの?
    • タイトルタグとh2タグの違いは?
    • 検索結果で表示されるタイトルを直接変更できる?
  • まとめ
  • ホームページの開設を検討している方へ

ホームページのタイトルが表示される場所

まず、ホームページのタイトルが表示される場所を知っておきましょう。

検索エンジンの検索結果

ホームページのタイトルは、GoogleやYahoo! JAPANなど、「検索エンジンの検索結果」に表示されます。

HTMLのタイトルの付け方は?

©Google
Google および Google Web Search™ featuresは Google LLC の商標であり、このホームページはGoogle によって承認されたり、Google と提携したりするものではありません。

ブラウザのタブやブックマーク

ホームページのタイトルは、Google ChromeやSafariなど、ブラウザの「タブ」や「ブックマーク」に表示されます。

HTMLのタイトルの付け方は?

SNS(URL付きの投稿)

ホームページのタイトルは、TwitterでURL付きの投稿をしたときに表示されます。

HTMLのタイトルの付け方は?

ホームページのタイトルの役割と重要性

ホームページのタイトルの役割は、ページの内容をユーザーに伝えることです。

ホームページのタイトルは、本にたとえると、「背表紙」の役割を果たします。

書店の本棚をイメージしてください。まず背表紙を見て、「自分の求める内容が書かれているかどうか」を判断しますよね。
その後、実際に手に取って、イメージと相違なく期待できそうな内容だと購入すると思います。

ホームページのタイトルも基本は同じ。

ユーザーは、検索結果に複数表示されるホームページのタイトルのなかから、自分が求めている情報が書いてありそうなページにアクセスします。

つまり、タイトルのよしあしでホームページのアクセス数は変わります。
そのため、ホームページのタイトルは重要です。

ホームページのタイトルはSEOでも重要

ホームページのタイトルは、SEOに取り組むうえでも重要です。

SEOとは

「Search Engine Optimization」の略称で、「検索エンジン最適化」と訳されます。分かりやすくいうと、特定のキーワードで検索されたときに、より上位に表示されるように施策すること。検索エンジンの検索結果で、自社のホームぺージが上位に表示されると、露出が増えるため、ユーザーに見つけてもらいやすくなります。

HTMLのタイトルの付け方は?

Googleは検索キーワードと関連性の高いページを表示させるために、記事のコンテンツ(中身)だけでなく、タイトルも評価対象にしています。

Google 検索結果ページに表示されるタイトルリンクは、ページのコンテンツとウェブ上の参照元ページの両方を考慮して、自動的に作成されます。タイトルリンクは、各検索結果を最大限にわかりやすく伝えることを目標としています。

Google 検索では、次のソースを使ってタイトルリンクを自動的に決定します。

・title要素内のコンテンツ
・ページに表示されるメインの視覚的タイトル
・h2要素などの見出し要素
・スタイル処理によって大きく目立つように作られたその他のコンテンツ
・ページ内のその他のテキスト
・ページ上のアンカー テキスト
・ページを指すリンク内のテキスト

引用:Google 検索セントラル「Google 検索のタイトルリンクの作成方法」

SEOについては、以下の記事で詳しく解説しています。

HTMLのタイトルの付け方は?
SEO対策とは?ホームページ初心者が制作時に意識すべきポイント6つ

(基本編)ホームページのタイトルの付け方

ここからは、ホームページのタイトルの基本的な付け方を解説します。

「トップページ」と「下層ページ」で付け方が異なるので、それぞれ解説します。

※「トップページ」と「下層ページ」については、以下の記事で解説しています。

HTMLのタイトルの付け方は?
トップページとは?ホームぺージ作りで意識すべきポイント

トップページは「社名(サービス名など)」が基本

トップページのタイトルには、社名やサービス名などを入れます。ホームページの種類に応じたものを選びましょう。

※ホームページの種類については、以下の記事で解説しています。

HTMLのタイトルの付け方は?
ホームページとは?Webサイトとの違いや種類を徹底解説

もちろん、社名やサービス名だけでも構いません。しかし、キャッチコピーやサービス概要などを添えれば、自社やサービスについて情報を補足できます。

また、トップページのタイトルは、他のページに比べて露出が高いです。そのため、誰にでも分かりやすいタイトルが理想的。
社名やサービス名が英語表記の場合は、「フリガナ」を添えるかどうかも検討しましょう。

そのほか、ECサイトの場合は、「公式」と記載することが多いです。
メーカーやブランドが直販(DtoC)する場合に、公式サイトであることをユーザーにアピールするためです。
その他、偽物のなりすましECサイトと差別化する効果もあります。

下層ページは「ページ名 | 社名(サービス名など)」

下層ページのタイトルは、「ページ名|社名(サービス名など)」がおすすめ。「誰の何のページか」が一目瞭然になるためです。

参考に、弊社エックスサーバー株式会社の各ページのタイトルをご覧ください。

エックスサーバー株式会社のページタイトル例

  • 会社概要 | 会社情報 | エックスサーバー株式会社
  • 事業・サービス | エックスサーバー株式会社
  • ニュースリリース | エックスサーバー株式会社
  • お問い合わせ | エックスサーバー株式会社

タイトルを見るだけで、おおよそページの内容が分かりますよね。また、どのページを見ても、エックスサーバー株式会社のホームページと判断できます。

ページと社名の間は、半角の縦線「 | 」で区切ることが多いです。多くの企業が使用しているので、参考にしてください。

ホームページのタイトルの設定方法

タイトルの設定方法は、ホームページの作り方によって異なります。

ここでは、代表的な作り方である、以下の2つについて解説します。

HTMLサイトのタイトル設定方法

HTMLで作ったホームページは、「titleタグ」を用いて設定します。

以下のように、「headタグ」の間にtitleタグを挿入しましょう。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>ここにタイトルを入れる</title>
</head>
<body>
<h2>見出し</h2>
<p>文章を書く場所</p>
<h2>見出し</h2>
<p>文章を書く場所</p>
</body>
</html>

なお、HTMLによるホームページの作り方は、以下の記事で解説しています。

HTMLのタイトルの付け方は?
【はじめてのHTML 】 ホームぺージの作り方・公開までの手順を解説

WordPressサイトのタイトル設定方法

WordPressで作ったホームページは、管理画面から簡単に設定できます。

トップページと下層ページで付け方が異なるので、それぞれ解説します。

トップページのタイトル設定方法

トップページのタイトルは、以下の手順で変更できます。

サイトタイトル編集画面にアクセス

WordPressにログインし、「 設定 > 一般設定 」をクリックします。

HTMLのタイトルの付け方は?

サイトタイトルの入力

サイトのタイトル」の欄にタイトルを入力します。

HTMLのタイトルの付け方は?

保存する

ページ下部にある変更を保存をクリックすれば完了です。

HTMLのタイトルの付け方は?

注意

テーマ(デザインプレート)によって、設定箇所は変わります。詳しくは、テーマのマニュアルをご覧ください。

下層ページのタイトル設定方法

下層ページのタイトルは、以下の手順で変更できます。

編集画面にアクセス

まず、以下のいずれかから、編集したいページの画面にアクセスします。

  • 投稿 > 投稿一覧 >該当ページ
  • 固定ページ > 固定ページ一覧 >該当ページ

HTMLのタイトルの付け方は?

ページタイトルの入力

「タイトルを追加」の欄にタイトルを入力します。

HTMLのタイトルの付け方は?

保存する

画面右上の公開ボタンを押して、保存すれば完了です。

HTMLのタイトルの付け方は?

HTMLのタイトルの付け方は?
カワウソ

WordPressでホームページを作っても、実際はHTMLで表示されます。HTMLの基礎知識があれば、役に立つことも多いです。

(応用編)SEOに強いタイトルを付ける5つのコツ

SEOに強いタイトルとは、Googleはもちろん、ユーザーにも分かりやすいタイトルです。

分かりやすいタイトルを付けるために、以下のポイントをチェックしましょう。

それぞれ解説します。

キーワードを入れる

Googleは、ユーザーが検索したキーワードに対して、関連性が高いページを検索結果に表示します。そのときの判断基準として、タイトルを見ています。

タイトルにキーワードが含まれていないと、検索結果に表示される可能性が低くなってしまうので、必ず入れましょう。

たとえば「ホームページ アイコン」と検索してみます。
検索結果で上位表示されるページのタイトルには、すべて「ホームページ アイコン」のキーワードが入っています。

HTMLのタイトルの付け方は?

©Google
Google および Google Web Search™ featuresは Google LLC の商標であり、このホームページはGoogle によって承認されたり、Google と提携したりするものではありません。

タイトルにキーワードが入っていないからといって、検索結果に表示されないわけではありません。しかし、入れたほうが上位表示を狙いやすいでしょう。

同じキーワードを複数挿入しない

タイトルに同じキーワードを複数入れることは、SEOの観点では逆効果。
同じキーワードを複数入れてしまうと、Googleから不正行為と見なされて、ペナルティを受ける可能性があるためです。

Google 検索セントラルにも記載されています。

キーワードの乱用は避ける。title要素に具体的なキーワードをいくつか含めると効果的な場合もありますが、同じ語句を何度も繰り返しても無意味なだけです。「Foobar, foo bar, foobars, foo bars」のようなタイトル テキストはユーザーの利便性を下げるものであり、このようなキーワードの乱用は Google やユーザーから不正行為と見なされる可能性があります。

引用:Google 検索セントラル「タイトルリンクに影響を与えるためのおすすめの方法」

キーワードは前半に入れる

キーワードは、タイトルの前半に挿入するのがおすすめ。
後半にキーワードを挿入してしまうと、隠れてしまう恐れがあるためです。

パソコンの場合、Googleの検索結果は、およそ28文字を超えると隠れてしまいます。

HTMLのタイトルの付け方は?

ユーザーは検索結果のなかから、自分の悩みを解決できそうなページを選びます。
タイトルにキーワードが入っていなければ、ユーザーにクリックしてもらえません。

ユーザーが必要としないページは、Googleも評価してくれないでしょう。

ページごとに一意のタイトルを付ける

それぞれのページに固有のタイトルを付けましょう

たとえば、本の背表紙がどれも同じだと、自分の読みたい本がどれか分かりづらいですよね。

HTMLのタイトルの付け方は?

ホームページも同じで、同じタイトルを複数のページに付けてしまうと、ユーザーもGoogleも困ってしまいます。

GoogleのSEOスターターガイドにも明記されています。

title要素は、ユーザーと検索エンジンの両方に特定のページのトピックを伝えます。title要素を HTML ドキュメントのhead要素内に配置して、サイトの各ページに固有のタイトル テキストを作成します。

引用:SEO スターターガイド「各ページに固有の正確なタイトルを付ける」

タイトルが重複している場合、Googleに書き換えられてしまう恐れもあるので、注意が必要です。

地名を入れる

ローカルビジネスの場合は、「地名」を入れると効果的。
ユーザーごとに最適な結果を表示するために、Googleが「地域性」を重要視するためです。

試しに、「日帰り旅行」と検索してみます。

HTMLのタイトルの付け方は?

©Google
Google および Google Web Search™ featuresは Google LLC の商標であり、このホームページはGoogle によって承認されたり、Google と提携したりするものではありません。

検索結果には、「関西」や「近畿」のキーワードを含んだタイトルを持つページが表示されます。

これは、私が検索したときのIPアドレスが「大阪府大阪市」であるためです。

HTMLのタイトルの付け方は?

©Google
Google および Google Web Search™ featuresは Google LLC の商標であり、このホームページはGoogle によって承認されたり、Google と提携したりするものではありません。
参考:Google で検索する際の現在地情報とその管理方法について

このように、Googleはユーザーの利便性を第一に考えています。

対策キーワードについては、まず検索結果でどのようなページが表示されているか(評価されているか)を確認しましょう。

(応用編)ユーザーにクリックされやすい3つのタイトル

仮に検索結果で上位表示できたとしても、ユーザーにクリックしてもらわなければ、ホームページのアクセスは増えません。

言い換えれば、検索結果で1位を取れなくても、タイトルを工夫することでアクセスは稼げます。

とくにオウンドメディア(ブログ)を運営する場合は、意識するべきでしょう。

HTMLのタイトルの付け方は?
オウンドメディアとは?企業マーケティングに活用される理由

ここではオウンドメディア運営も想定し、ユーザにクリックされやすいタイトルを付ける3つのポイントを解説します。

ユーザーにクリックされやすい3つのタイトル

  1. ターゲットを挿入する
  2. 数字を入れる
  3. 権威性をアピールする

ターゲットを挿入する

タイトルにターゲットを入れることで、ユーザーに共感を与えられます。

ターゲットとは、具体的にイメージしたユーザー像のことです。

たとえば、動画撮影の基礎を学びたい初心者をターゲットにするなら、以下のタイトルがよいでしょう。

よい例

  • 【動画ビギナー必見!】知っておきたいカメラワークの基本

イマイチな例

  • 動画撮影のテクニックを解説!パンやズームなどが学べる

他にも、ターゲットを含んだタイトル例を記載しておくので、参考にしてください。

ターゲットを含んだタイトル例

  • 女子高生におすすめ!学校にバレないスクールメイク
  • サラリーマンなら知っておくべき副業投資!節税方法も解説
  • ズボラ主婦でも大丈夫!わずか10分でできる掃除テク

数字を入れる

数字を入れることで、具体性が増し、説得力のあるタイトルになります。

たとえば、プロテインを購入したいユーザーをターゲットにするなら、以下のタイトルがよいでしょう。

イマイチな例

  • 飲んだ人の多くが満足するプロテインを紹介

他にも、数字を含んだタイトル例を記載しておくので、参考にしてください。

数字を含んだタイトル例

  • 企業の9割がホームページを開設する理由とは?
  • 20代にやっておくべきこと!自己投資が将来を決める
  • 47都道府県100人に聞いた!地元のうまいラーメン屋

注意

ただし、具体性や説得力を演出するために、虚偽の情報を掲載するのはやめましょう。トラブルになります。

権威性をアピールする

権威性をアピールすることで、ユーザーに信頼感を与えられます
とくに専門性を必要とする情報では、効果的です。

たとえば、歯のホワイトニングを検討するユーザーなら、より効果が期待できる情報が欲しいですよね。

よい例

  • 現役歯科医が教える!正しいホワイトニングのやり方

イマイチな例

  • 歯を白くする正しいホワイトニングのやり方とは?

他にも、権威性を含んだタイトル例を記載しておくので、参考にしてください。

ターゲットを含んだタイトル例

  • 弁護士だけが知っている「税法」の落とし穴
  • 三ツ星シェフ監修!名店の味を自宅で楽しめる冷凍食品
  • 東大生が伝授!合格するためにやるべきたった一つのこと

注意

権威性を利用する場合は、ホームページやブログにプロフィールを掲載しましょう。タイトルだけだと、かえって信頼性を失う恐れがあります。

ホームページのタイトルについてのQ&A

最後に、ホームページのタイトルに関する、よくある質問をまとめました。

それぞれ解説します。

タイトルを変更したら、どのくらいで反映されるの?

タイトルを変更してから、検索結果に反映されるのには、数日から数週間かかります。
ページの再クロールと再処理が必要になるためです。

なお、これらのソースの更新を Google が認識するためには、ページの再クロールと再処理が必要であり、その更新には数日から数週間かかることがあります。

(引用:Google検索セントラル「Google 検索のタイトルリンクの作成方法」)

少しでも変更を早く反映させたいのであれば、ページの再クロールをGoogleにリクエストしましょう。

主に、以下二つの方法があります。

Googleにページの再クロールをリクエストする方法

  • URL 検査ツールを使用する(URLが少ない場合)
  • サイトマップを送信する(一度に扱うURLが多い場合)

詳しくは、Google検索セントラルの「URL の再クロールを Google にリクエストする」をご覧ください。

タイトルタグとh2タグの違いは?

タイトルタグとh2タグの違いは、主に以下の二つです。

タイトルタグとh2タグの違い

  • ユーザーへの見え方
  • HTMLタグを記述する場所

それぞれ解説します。

ユーザーへの見え方

タイトルは検索結果、ブラウザのタブ、ブックマークなど、ページの外部に表示されます。そのため、基本的にホームページを閲覧中のユーザーには見えません。

※ブラウザのタブにタイトルは表示されるものの、文字数が限られているため、すべて表示されません。またタブが増えると表示できる文字数も減ります。さらにスマホでは、ブラウザのタブ自体、表示されるシーンは少ないです。

一方h2は、ページの内部に表示されます。意図して隠さない限り、ホームページを閲覧中のユーザーにも見えます。

HTMLタグを記述する場所

タイトルタグは先述のとおり、<head>のなかに記載します。

一方h2タグは、<body>のなかに記載します。

タイトルタグに限らず、基本的に<head>のなかに記載した情報は、画面上には見えません。
テキストや画像など、画面上に見えるホームページのコンテンツは、<body>のなかに記述されています。

これがユーザーから見えるかどうかの違いがある主な要因です。

Googleは、タイトルタグの他にも、h2タグなどの見出しタグも評価対象にしています。

ページは見出しタグを用いて、分かりやすい構造にしましょう。

メモ

タイトルタグとh2タグの内容を同じにしているホームページは多いです。それはどちらも、「ページの内容を端的に表す役割」のためです。SEOとしてデメリットになる可能性は低いでしょう。

検索結果で表示されるタイトルを直接変更できる?

検索結果で表示されているタイトルは、直接変更できません。

Google で表示される個々のサイトのタイトルリンクを手動で変更することはできませんが、できるだけ関連性の高いものとなるよう常に努めています。

引用:Google 検索セントラル「Google 検索のタイトルリンクの作成方法」

もしGoogleによって、検索結果のタイトルが意図しない内容に書き換えられてしまった場合は、Google 検索セントラル「タイトルリンクに影響を与えるためのおすすめの方法」を確認して対処してください。

まとめ

今回の記事では、ホームページのタイトルの基礎知識はもちろん、設定方法も解説しました。

また、SEOに強いホームページのタイトルの付け方も解説したので、集客したい方にとっては、参考になったのではないでしょうか。

まとめ

  • ホームページタイトルの役割は、「ページの内容をユーザーに伝えること」
  • トップページのタイトルは、「社名」などホームページの種類に合わせる
  • 下層ページのタイトルは、「ページ名|社名(サービス名など)」がおすすめ
  • ホームページのタイトルの設定方法は、「HTML」と「WordPress」で異なる
  • SEOを意識するなら、ポイントを押さえてホームページのタイトルを考える

ホームページのタイトルは、ユーザーはもちろん、SEOを意識するうえでも重要です。

内容が伝わるだけでなく、魅力的なタイトルを付けましょう。

それでは、素敵なホームページのタイトルが決まることを願っております。

以上、最後まで読んでいただきありがとうございました。

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1のレンタルサーバーであり、16万社の導入実績があります。

12月9日12時まで利用料金最大30%OFFキャンペーン開催中です!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

HTMLのタイトルの付け方は?

さらに12月5日18時まで秋のスタートキャンペーンも開催中!
Amazonギフト券10,000円分が当たるビッグチャンスです。

ぜひこのお得な機会にホームページ開設をご検討ください!

※ 2022年10月時点、hostadvice.com調べ。

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

▶ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

これから始める方はこちらのホームページの作り方をぜひご覧ください!

HTMLのタイトルの付け方は?
【初心者向け】会社ホームページの作り方を基礎から解説

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!

Webタイトルの付け方は?

SEOに効果的なページタイトルの付け方の5つのポイントについて解説します。.
タイトルの文字数は、全角30文字以内で完結に記述する ... .
対策キーワードを必ずタイトルに含める ... .
キーワードは詰め込み過ぎない ... .
キーワードや伝えたい内容は、前方に書くようにする ... .
関連ワード、複合ワードに対応させる.

ページタイトルの決め方は?

SEOに強いページタイトルをつける7つのコツ.
キーワードをタイトルに入れる.
キーワードをタイトルの前方に持ってくる.
タイトルにユーザーが得られる利益や情報を入れる.
クリックしたくなるようなキャッチーなタイトルをつける.
タイトルはキーワードの羅列ではなく意味の通る文章にする.

HTMLのウィンドウタイトルは?

title要素は画面に直接表示されない <title> のテキストは直接ブラウザの画面に表示されません。 ページに表示されるタイトル(記事のタイトルなど)には、見出しタグの <h1> を使います。

HTML Title どこに?

titleタグの位置は、 基本的にHTMLソースの上部となるheadタグの中 にあります。