headタグはブラウザ上に表示される部分ではないのでおろそかにしてしまっている人もいるのではないでしょうか。
しかし、headタグはブラウザにサイトの情報を伝えるのに重要な役目をはたしています。
SEOにおいても重要な役目を果たします。
今回はそんなheadタグについて解説していきます。
（今回のゴール）headタグの使い方を理解する！
目次
headタグの記述の仕方
headタグを記述する際は普通に<head></head>でも良いのですが、
Emmetを使うとより楽に記述できます。
Emmetに関しては詳しい解説を下記の記事で行っているのでそちらを参照して下さい。
-
-
Emmetとは？Emmetを最大限活用してコーディングの時間を短縮しよう！
Emmet(エメット)とは、ある決まった省略したコードを記述することで、エディタ側でコードを補完してくれ、コーディングの時間を大幅に短縮することができる便利な機能です。 今回はそんなEmmetについて ...
続きを見る
今回使うEmmetは「!」です。
早速記述してみましょう。下記のように記述されるはずです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
まずは上記コードについて解説していきます。
metaタグ
metaタグとは、Webサイトの情報を記載するタグのことです。
SEOにおいても重要な役割を果たします。
一つずつ確認していきましょう。
<meta charset="UTF-8">
charset属性は文字のエンコーディングを指定するmetaタグです。
指定しない場合、文字化けを起こすリスクがあるため、必ず入れましょう。基本的にはUTF-8のままで問題ないです。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IEをどのバージョンで見せるかを指定する属性です。
「IE=edge」で最新バージョンを示しています。
しかし、IEのサポートは終了しているので、こちらの記述は削除してしまっても問題ありません。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
画面幅に合わせたWEBページを表示するために記述します。
スマートフォンとPCでの表示のされ方の違いを防ぐために記述します。
追加で押さえておくべきmetaタグ
- description
- format-detection
- robots
- keywords
- OGPタグ
description
<meta name="description" content="テキストテキストテキストテキスト">
このmetaタグはWebページの概要を説明する部分です。検索した際にタイトルの下に表示される部分でもあります。
上記の場合は、「テキストテキストテキストテキスト」がタイトルの下に表示されます。
流入を狙うキーワードを含めることでSEOにも効果があります。
format-detection
<meta name="format-detection" content="telephone=no">
Webページ内に電話番号の記述があると、勝手にリンクになり、誤って架電してしまう恐れがあります。
それを防ぐためのmetaタグとなります。
また、逆に特定の番号に対してはリンクをつけたいといった場合もあると思います。
その場合は下記のコードを記述することでリンクを付けることが可能です。
<a href="tel:0123456789">012-345-6789</a>
robots
<meta name="robots" content="noindex,nofollow">
クローラーと呼ばれる、サイト内の情報を読み取るGoogleなどの検索エンジンのロボットに対して指示を出すタグになります。
細かい指示はいくつかありますが、基本的にはnoindexやnofollowなどが使われます。
これらを設定することで検索結果に表示させたくないページを指定することができます。
keywords
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
Webページ内の情報をキーワードで伝えることができます。
以前はSEOに大きな効果がありましたが、最近は悪用が増えたためか、SEOへの効果は薄いです。
ですが、一応覚えておきましょう。
OGPタグ
<meta property="og:title" content=" ページの タイトル">
<meta property="og:description" content=" ページの説明文">
<meta property="og:type" content=" ページの種類">
<meta property="og:url" content=" ページの URL">
<meta property="og:site_name" content="サイト名">
<meta property="og:image" content=" サムネイル画像の URL">
OGPタグはWebページをSNSで共有した際に表示される情報を設定できます。
正しく設定することでSNSからの流入が増すため、より多くの人に記事を見てもらうことができるようになります。
<title>Document</title>
続いてタイトルタグです。
こちらは名前の通り、Webページのタイトルを指定するタグです。
このようにブラウザのタブに表示されます。
また、検索した際のタイトルもここで指定したものが表示されます。
タイトルタグはSEOにも大きな影響を与える重要な要素なのでキーワードを意識して設定しましょう。
linkタグ
続いてリンクタグについてです。
Emmetで記述した際はlinkタグは出てきませんがこちらも非常に重要なタグです。
主に外部ファイルの読み込みやファビコンの読み込みに使用されます。
主なlinkタグを紹介します。
stylesheet
<link rel="stylesheet" href="css/style.css">
こちらは外部スタイルシートの指定を行っています。HTMLに直接スタイルを適用しない場合は記述必須です。
scriptタグ
<script src="scripts/main.js"></script>
こちらはJSファイルの読み込みに使用されます。
ただ、headタグに書くことも可能ですが、bodyタグの最後に記述することが推奨されます。
理由はheadタグに記述すると読み込みが遅くなる可能性があるためです。
bodyタグの最後に記述することで、ページが読み込まれた後にJavaScriptを読み込まれるため、ユーザビリティに配慮した設計になります。
ファビコンの設定
<link rel="icon" href="favicon.png">
こちらはファビコンの設定に使用されます。
ファビコンとは、ブラウザのタブに表示される小さな画像のことです。
端的にWebサイトの特徴を伝えるのに使われます。
まとめ
今回はheadタグについて解説しました。
正しく使えばSEOにも強くなるので、しっかり頭に入れておきましょう。
最後までご覧いただき、ありがとうございました。
当サイトではフリーランスを目指す人のためのプログラミング教材の作成を心掛けてサイト運営を努めております。
別途、動画も出す予定で、そちらでは初心者向けに一からコーディングの解説を行っておりますので、
興味があればご覧いただければと思います。
【クレジット】
VOICEVOX：ずんだもん
立ち絵素材：ヒザフライ様
VOICEVOX：春日部つむぎ
立ち絵素材：ヒザフライ様
