title要素の使い方は?HTML5の要素を使いこなそう【HTML編】

Pikisuperstar - jp.freepik.com によって作成された technology ベクトル

こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。

ペン子
ペン子

title要素っていつ使うの?

ユキ
ユキ

文書にタイトルをつけるときに使うよ!

結論からいうと、title要素は文書にタイトルをつけたいときに使います。

今回はtitle要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。


スポンサーリンク

1: HTML5について

html5

HTML5とは、HTMLバージョン5のことです。
過去HTMLは少しずつ改訂されていき、2014年にHTML5が発表されました。
みなさんが普段聞いてるHTMLはHTML5と同じ意味です。
ホームページを作るならHTML5といわれるほど、過去のHTML4と比べると格段に機能が多くなりました。
スマホ対応が簡単になったり、アニメーションが作れたりします。

つまりHTML5は、「今まで難しかった処理を簡単にしてくれた」ものというわけです。

2: title要素とは

title要素とは、文書にタイトルをつけるための要素です。

title要素は文書メタデータで、ページに関する情報を表現します。
title要素で記述された情報は検索エンジンに送信されます。検索エンジンはtitle要素の情報を使ってWebブラウザの検索結果に表示してユーザーがページを検索できるようにしてくれます。
つまり、title要素はSEO対策としてものすごく重要な項目となるわけです。
title要素にはページの名前をつけるか、それに沿った名前にするのが一般的です。適当な名前にすると検索エンジンにはうまく伝わっていかないので注意しましょう。

3: title要素の使い方

<head> <title> ユキのIT教室 </title>
</head>

head要素内にtitle要素を指定します。

title要素の中にはページのタイトルを記述します。ここではこのサイトのホームページであるユキのIT教室と設定します。
title要素に設定する最適な文字数は30字前後となります。あまりにも長いと検索エンジン側で省略されてしまい、ブラウザ側でも「…」という表記になってしまうので注意しましょう。簡潔でわかりやすいタイトルをつけるように意識しましょう。
検索エンジンでブラウザに上位表示させるためにキーワード設定を意識することも重要です。そのページがどういうキーワードで検索されたいかによってタイトルのつけ方も変わってきます。検索エンジンに最も伝わってほしいキーワードはなるべく前半部分につけるようにしましょう。

まとめ

今回はtitle要素についてと使い方について解説しました。

title要素は文書のタイトルをつけて検索エンジンに情報を伝えるために設定する要素です。

これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。

以上、ユキでした!