【html5入門】headタグの書き方講座2019
この記事の目次
headタグとは
headタグとはhtmlファイルの情報を書き込む部分のことを言います。
サーチエンジン向けの情報やタイトル、cssの読み込みなどをheadタグに書き込みます。
headタグに書き込む内容はseoに関係しています。
headタグに書き込んだ内容はwebブラウザには表示されません。
表示させたい部分はbodyタグに書き込みましょう。
headタグの書き方
はじめにheadタグの基本的な書き方を載せておきます。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<meta name="description" content="サイトの説明">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.png">
<link rel="stylesheet" src="sample.css">
<script src="sample.js"></script>
</head>
<body>
<!-- HTML本文 -->
</body>
</html>
それでは細かい部分を解説していきましょう。
titleタグ
titleタグにはサイトのタイトルを入力します。
<title>タイトル</title>
といったように記述します。
タイトルはseoに関連する要素なので、狙いたいキーワードを盛り込んでおくと良いでしょう。
metaタグ
metaタグとは検索エンジンやブラウザなどへの指示を記述する部分のことです。
いくつか種類があるので、上記のコードで使ったものだけ紹介しようと思います。
metaタグは終わりの部分は書きません。
</meta>というのは必要ないので注意しましょう。
meta charsetタグ
meta charsetタグは文字エンコーディングの指定をします。
文字エンコーディングとは文字の変換方法のことを言います。
パソコンは人間の作った文字を理解することができません。
ですので、パソコンにも理解できるように変換する必要があります。
その変換方法のことを文字エンコーディングと言います。
現在世界中でもっとも使われている文字エンコーディングはUTF-8と呼ばれるものです。
UTF-8を使った場合、例えばひらがなの『あ』は『E38182』のようなパソコンが理解できる文字に変換されます。
このようにUTF-8は日本語の変換にも優れているのでmeta charsetタグにはUTF-8を指定しておくと良いでしょう。
下記のように記入します。
<meta charset="utf-8">
meta descriptionタグ
meta descriptionタグとは検索結果上の説明文のことです。
descriptionには『説明文』という意味があるのでわかりやすいかと思います。
meta descriptionタグSEOに直接関係するわけではありませんが、大切な要素ではあります。
というのも、meta descriptionタグ内に記述された内容によって検索結果上のクリック率が上昇するからです。
ユーザーはタイトル以外にも説明文を読んで、自分が求めている情報のありそうなサイトを選択します。
ですので、meta descriptionタグというのは重要なのですね。
記述の仕方は、
<meta name="description" content="サイトの説明">
といったようにcontentの中に説明を記述していきます。
meta viewport
meta viewportはサイズの横幅を設定できます。
全てのデバイスに同じ画面幅を設定することもできますが、デバイスごとに変えたほうが良いでしょう。
meta viewportとメディアクエリを設定することでレスポンシブWebデザインに対応させることができます。
メディアクエリというのはデバイスの画面の大きさに応じてコンテンツの見え方を変えることができる設定のことです。
レスポンシブWebデザインというのはスマホやパソコンなど画面サイズの異なるデバイスでも同じように表示させるWebデザインのことを言います。
ここではmeta viewportについてのみ扱います。
meta viewportの基本的な書き方は、
<meta name="viewport" content="width=device-width, initial-scale=1">
これでサイズの異なるデバイス幅に対応することができます。
レスポンシブWebデザインに対応させたい場合はメディアクエリも設定しましょう。
ファビコンの記述
ファビコンとはFavorite icon（お気に入りのアイコン）」が縮まってできた言葉で、サイトのブラウザタブに設定される画像のことです。
設置しないこともできますが、ユーザーが複数タブを開いていた場合識別しやすくなるので設置しておくと良いでしょう。
設置方法は、
<link rel="shortcut icon" href="favicon.png">
画像のサイズはブラウザにより異なります。
Chrome、Firefox、Safariなどよく使われているブラウザのタブでは32px × 32px。
Windows標準のブラウザであるInternet Explorerでは16px × 16pxですので二つのサイズに対応させておけばある程度問題はないでしょう。
cssを読み込む
cssを読み込む記述もheadタグの中に書きます。
<link rel="stylesheet" src="sample.css">
といったように記述しましょう。
javascriptの記述
javescriptの記述もheadタグの中に書きます。
記述方法は、
<script src="sample.js"></script>
まとめ
・headタグとはhtmlファイルの情報を書き込む部分のこと
・titleタグはサイトのタイトルを表示させ、seoにも重要
・metaタグとは検索エンジンやブラウザなどへの指示を記述する部分のことで、meta charsetタグやmeta descriptionタグなどいくつかの要素がある
・ファビコンはサイトのブラウザタブに設定される画像のことで、設定しないこともできるがした方が良い
・cssやjavascriptもheadタグで読み込む