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

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

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

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

この記事でお話すること
  • head要素とは? 読み方は?
  • head要素の書き方
  • metaタグはSEOに効果的なの?

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(ライティングハックス)」を利用してみてはいかがでしょうか!?

コメントを残す

メールアドレスが公開されることはありません。