HTMLのhead要素とは? 書き方や読み方を分かりやすく解説!

head要素について知りたい人

head要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

head要素とは? 読み方は?
head要素の書き方
metaタグはSEOに効果的なの?
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLのhead要素は文書のヘッダ部分を指定するためのものです。

具体的には文字コード、タイトル、CSSのリンクなどを書いていきます。

HTMLの文書のhead要素は、タイトル以外ページが読み込まれてもブラウザーには表示されません。

そこでこの記事ではhead要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

head要素の評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

1.head要素とは? 読み方は?

head要素はHTML文書に関するメタデータを集めたものです。

読み方は「ヘッドヨウソ」です。

具体的にはtitle要素やmeta要素などを指定するための場所となっています。

また、CSSやJavaScriptを外部ファイル化した場合に、head要素内に記述して読み込ませることもあります。

HTML 文書の head 要素内の情報は、基本的にページが読み込まれてもWebブラウザには表示されません。

タイトルはWebブラウザに表示されます。

head要素内によく記述するタグは以下の通りです。

<meta>：エンコードの種類を指定することができる
<title>：ページのタイトルを指定することができる
<link>：href属性でファイルを指定することができる

2.head要素の書き方

DOCTYPE宣言後に「<html>~</html>」を追加してHTMLの設定を記述していくことを示します。

そして、「<html>~</html>」内にWebページに関する設定の記述場所として「<head>~</head>」を用意します。

head要素には、検索エンジンやブラウザに情報を指示を出したりするためのタグを書きます。

コードで見ない限り、タイトル以外ユーザーが見ることはできません。

以下がhead要素のソースコード例です。

<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>head要素とは?</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
・・・・
</body>
</html>

↓↓↓↓ html要素について詳しく知りたい方は以下の記事をご覧になって下さい。

2021年2月18日【意味は?】html要素とは? 属性・使い方も分かりやすく解説!

エンコードの種類を指定する

Webページのエンコードの種類を指定して文字化けが発生するのを防ぎます。

上記では「<meta charset=”UTF-8″>」としています。

metaタグとは記事コンテンツの情報を検索エンジンやブラウザに伝えるための情報です。

代表的なエンコードの種類と属性値は以下の通りです。

エンコードの種類	属性値
シフトJIS	Shift_JIS
EUC	EUC-JP
UTF-8	UTF-8

注意点!

エンコードの種類とmetaで指定するエンコードの種類が異なるとWebブラウザで表示した時に文字化けが発生するので注意が必要です。

タイトルを指定する

head要素内に「<title>head要素とは?</title>」を追加して、Webページのタイトルを指定します。

ここではタイトルを「head要素とは?」としています。

Webブラウザで確認すると「head要素とは?」というタイトルがWebブラウザのタブに表示されます。

スタイルシートを指定する

head要素内に「<link rel=”stylesheet” href=”style.css”>」を追加することで見た目のデザインをカスタマイズできるようにします。

スタイルシートはhref属性で指定します。

スタイルシートファイルの保存場所

スタイルシートファイル「style.css」を読み込むためにはhtmlファイルと同じ階層に保存しておく必要があります。

3.metaタグはSEOに効果的なの?

metaタグは、Webページの情報を記載するタグのことです。

SEO対策をするにあたり、metaタグを設定するのが効果的だとよく言われています。

Webサイトにアクセスしてきたユーザーではなく、検索エンジンやブラウザに向けて、Webページの内容を提示することができます。

適切にmetaタグを設定することでユーザー数の増加につながるというメリットもあります。

次にSEO対策に役立つメタタグをご紹介します。

meta description

meta descriptionとはWebサイトの概要を記述する場所です。

以下は当サイトを検索したときに表示される概要文です。

簡潔に概要文を記述することでユーザーが興味を引き、クリックしてくれる可能性が高まります。

検索結果に表示されることを考えると、120文字程度で書くのがよいとされています。

SEOに直接関係ないと言われていますが、簡潔に記述することでユーザーを引くことができるのでmeta descriptionを書くメリットがあります。

title

titleとは検索エンジンとユーザーにWebページの内容を伝えるものです。

titleは30文字程度で書くのがよいとされています。

これはSEOに関係しているのでしっかりとキーワードをいれてSEO対策を行っていきましょう。

charset

charsetとはどの文字コードでWebページを表示するか指定するものです。

文字化けが発生しないように、head要素で設定しておきましょう。

OGP

OGPとはFacebookやTwitterなどのSNSでシェアした際に、Webページのタイトルやイメージ画像、詳細などを伝えるための要素です。

OGPを適切に設定することで、どのようなページで何を伝えたいのかが明確になります。

そうすることでより多くの人に記事を見てもらうことが可能になります。

メタタグは、検索エンジンに必要な指示をだせる有効な手段です。

SEOについてもっと詳しく知りたい方は是非「沈黙のWebライティング —Webマーケッターボーンの激闘」をご覧ください。

「沈黙のWebライティング —Webマーケッターボーンの激闘」はWebで「成果を上げる」ための文章の書き方を解説した実用入門書です。

とても為になる本なので是非利用してみてはいかがでしょうか!?

リンク

本だけでなく、優秀なライターさんから学びたいという方は「Writing Hacks(ライティングハックス)」がオススメです!

「Writing Hacks(ライティングハックス)」は質問対応に関してもカリキュラム内のことであれば無制限、無期限に対応可能となっています。

また、他スクールよりも圧倒的に安い価格でのスクール提供ができています。

とても為になるスクールなので是非「Writing Hacks(ライティングハックス)」を利用してみてはいかがでしょうか!?

4.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント