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要素について詳しく知りたい方は以下の記事をご覧になって下さい。

【意味は?】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をプログラミングスクールで教わりたいという方も中にはいます。

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

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

【最短30秒で完了】侍テラコヤの申し込み手順

\学び応援キャンペーン実施中!10%OFFクーポンあり!/
1か月間全額返金保証付き

最短30秒で登録完了! 侍テラコヤをはじめる!

侍テラコヤの申し込み手順をみていきましょう!

申し込みは最短30秒で完了します。

この機会に是非申し込んでみてはいかがでしょうか?

STEP.1
アカウント作成

まずはアカウント作成を行いましょう!

入力項目は名前、メールアドレス、パスワードの3項目のみです!

GoogleまたはFacebookのアカウントを持っていると入力する手間を省くことができます。

STEP.2
請求情報の入力

あとは請求情報を入力するだけです!

カード番号、有効期限、セキュリティコードの3項目のみです!

\学び応援キャンペーン実施中!10%OFFクーポンあり!/
1か月間全額返金保証付き

最短30秒で登録完了! 侍テラコヤをはじめる!

【1分で登録完了】受講料0円! ZeroPlus Gateの無料体験レッスン申し込み手順

\1分で登録完了! 受講料0円!/
【期間限定】ノーリスクで学びたい方におすすめ!

完全無料! ZeroPlus Gateで始める!

ZeroPlus Gateの無料体験レッスン申し込み手順をみていきましょう。

受講スタートまでの流れは以下の通りです。

無料期間は予告なく終了する可能性があります。

少しでも気になる方は是非申し込んでみてはいかがでしょうか?

\1分で登録完了! 受講料0円!/
【期間限定】ノーリスクで学びたい方におすすめ!

完全無料! ZeroPlus Gateで始める!

【10秒で完了】本気のパソコン塾の相談会/無料トライアル申し込み手順

STEP.1
相談会予約

\【期間限定】無料相談会参加特典3つあり!/

  • 特典1:学習コンテンツの1週間無料トライアル
  • 特典2:学習管理シートプレゼント
  • 特典3:副業収入獲得ノウハウ動画プレゼント

相談会はオンライン(Google meet)で実施致します。

ご希望の日時をご予約ください。

※所要時間は30分を予定しております。

STEP.2
相談会の概要

アドバイザーがお客様のキャリアや学習の課題を丁寧に伺った上で、今後についてのアドバイスを致します。

当日お話する内容例

  • エンジニアを取り巻く環境
  • 挫折しないための学習の進め方
  • プログラミング言語について
  • 本気のパソコン塾について

また、現状の課題や不安な事は、遠慮なくご質問ください。

ご相談いただける内容例

  • プログラミング学習に関して
  • 転職・副業・起業について

\【期間限定】無料相談会参加特典3つあり!/

  • 特典1:学習コンテンツの1週間無料トライアル
  • 特典2:学習管理シートプレゼント
  • 特典3:副業収入獲得ノウハウ動画プレゼント